From 4e0d3d155a8d12e0778620ec6ef6c14d7e5646c0 Mon Sep 17 00:00:00 2001
From: Weixuan Fu <weixuanf@outlook.com>
Date: Sat, 16 Mar 2024 01:35:41 +0800
Subject: [PATCH] move models button to topbar with folders list

---
 ui/src/App.tsx           | 13 ++++++-------
 ui/src/topbar/Topbar.tsx |  9 +++++++++
 ui/src/types/types.ts    |  3 ++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index cec634f..8847544 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -46,9 +46,10 @@ import { indexdb } from "./db-tables/indexdb";
 import EnableTwowaySyncConfirm from "./settings/EnableTwowaySyncConfirm";
 import { deepJsonDiffCheck } from "./utils/deepJsonDiffCheck";
 const AppEventListener = React.lazy(() => import("./topbar/AppEventListener"));
-const ModelManagerTopbar = React.lazy(
-  () => import("./model-manager/topbar/ModelManagerTopbar"),
+const ModelsListDrawer = React.lazy(
+  () => import("./model-manager/models-list-drawer/ModelsListDrawer"),
 );
+
 const usedWsEvents = [
   // InstallProgress.tsx
   "download_progress",
@@ -544,11 +545,6 @@ export default function App() {
             draggable={false}
           >
             <Topbar curFlowName={curFlowName} setCurFlowName={setCurFlowName} />
-            {loadChild && (
-              <Suspense>
-                <ModelManagerTopbar />
-              </Suspense>
-            )}
             {loadChild && route === "recentFlows" && (
               <Suspense>
                 <RecentFilesDrawer
@@ -565,6 +561,9 @@ export default function App() {
                 <GalleryModal onclose={() => setRoute("root")} />
               </Suspense>
             )}
+            {route === "modelList" && (
+              <ModelsListDrawer onClose={() => setRoute("root")} />
+            )}
           </Box>
           <ServerEventListener />
           <AppEventListener />
diff --git a/ui/src/topbar/Topbar.tsx b/ui/src/topbar/Topbar.tsx
index 5a6892b..7acf59d 100644
--- a/ui/src/topbar/Topbar.tsx
+++ b/ui/src/topbar/Topbar.tsx
@@ -92,6 +92,15 @@ export function Topbar({ curFlowName, setCurFlowName }: Props) {
             <IconTriangleInvertedFilled size={8} />
           </HStack>
         </Button>
+        <Button
+          size={"sm"}
+          colorScheme="blue"
+          aria-label="My models"
+          onClick={() => setRoute("modelList")}
+          px={1}
+        >
+          Models
+        </Button>
         <Tooltip label="New workflow">
           <Button
             size={"sm"}
diff --git a/ui/src/types/types.ts b/ui/src/types/types.ts
index 6f5d993..50d39a2 100644
--- a/ui/src/types/types.ts
+++ b/ui/src/types/types.ts
@@ -4,4 +4,5 @@ export type WorkspaceRoute =
   | "recentFlows"
   | "gallery"
   | "versionHistory"
-  | "saveAsModal";
+  | "saveAsModal"
+  | "modelList";