feat: support for individual collapsing and expanding of specific mod…

…els in the model marketplace
coaidev · Mar 13, 2024 · 90c165f · 90c165f
1 parent a6af18c
commit 90c165f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/app/src/routes/admin/Market.tsx b/app/src/routes/admin/Market.tsx
@@ -5,7 +5,13 @@ import {
   CardTitle,
 } from "@/components/ui/card.tsx";
 import { useTranslation } from "react-i18next";
-import React, { Dispatch, useMemo, useReducer, useState } from "react";
+import React, {
+  Dispatch,
+  useEffect,
+  useMemo,
+  useReducer,
+  useState,
+} from "react";
 import { Model as RawModel } from "@/api/types.tsx";
 import { Input } from "@/components/ui/input.tsx";
 import {
@@ -438,11 +444,17 @@ function MarketItem({
 }: MarketItemProps) {
   const { t } = useTranslation();
 
+  const [stackedFilled, setStackedFilled] = useState<boolean>(false);
+
   const checked = useMemo(
     (): boolean => model.id.trim().length > 0 && model.name.trim().length > 0,
     [model],
   );
 
+  useEffect(() => {
+    setStackedFilled(stacked);
+  }, [stacked]);
+
   const Actions = ({ stacked }: { stacked?: boolean }) => (
     <div className={`market-row`}>
       {!stacked && <div className={`grow`} />}
@@ -491,6 +503,18 @@ function MarketItem({
         </Button>
       )}
 
+      <Button
+        size={`icon`}
+        variant={`outline`}
+        onClick={() => setStackedFilled(!stackedFilled)}
+      >
+        {!stackedFilled ? (
+          <Minimize className={`h-4 w-4`} />
+        ) : (
+          <Maximize className={`h-4 w-4`} />
+        )}
+      </Button>
+
       <Button
         size={`icon`}
         onClick={() =>
@@ -505,7 +529,7 @@ function MarketItem({
     </div>
   );
 
-  return !stacked ? (
+  return stackedFilled ? (
     <div
       className={cn("market-item", !checked && "error")}
       {...props}
@@ -1001,7 +1025,7 @@ function Market() {
               onClick={() => setStacked(!stacked)}
             >
               <Icon
-                icon={stacked ? <Minimize /> : <Maximize />}
+                icon={!stacked ? <Minimize /> : <Maximize />}
                 className={`h-4 w-4`}
               />
             </Button>

diff --git a/app/src/routes/admin/System.tsx b/app/src/routes/admin/System.tsx
@@ -191,9 +191,7 @@ function General({ data, dispatch, onChange }: CompProps<GeneralState>) {
         />
       </ParagraphItem>
       <ParagraphItem>
-        <Label>
-          <Require /> {t("admin.system.backend")}
-        </Label>
+        <Label>{t("admin.system.backend")}</Label>
         <Input
           value={data.backend}
           onChange={(e) =>