Improve UX (#179)

* fix: more tips for activation * fix: improve UX of renaming a node * chore: update shadcn/ui * feat: new sidebar * fix: constrain DocListView height to prevent page shift * fix(desktop): static file hosting * fix(desktop): correct display of created-by and updated-by fields * fix: sidebar layout * fix: improve week calculation for local time in getDaysByYearWeek * Update to version 0.7.9 * fix(pwa): layout * feat(desktop): open folder * feat: shortcut for settings * fix: tailwind override * feat(table): add maximize button to redirect to full page view * feat(table): range cell
mayneyao · Oct 21, 2024 · 5ab91d2 · 5ab91d2
1 parent a88e285
commit 5ab91d2
Show file tree

Hide file tree

Showing 46 changed files with 1,983 additions and 541 deletions.
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,3 @@
 engine-strict=true
 # electron_mirror=https://npmmirror.com/mirrors/electron/
+ignore-workspace-root-check=true
diff --git a/apps/desktop/[database]/layout.tsx b/apps/desktop/[database]/layout.tsx
@@ -6,7 +6,6 @@ import { EidosDataEventChannelName } from "@/lib/const"
 import { useAppStore } from "@/lib/store/app-store"
 import { useAppRuntimeStore } from "@/lib/store/runtime-store"
 import { cn } from "@/lib/utils"
-import { isMac } from "@/lib/web/helper"
 import { useActivation } from "@/hooks/use-activation"
 import { useEidosFileSystemManager } from "@/hooks/use-fs"
 import { useSqlite } from "@/hooks/use-sqlite"
@@ -44,16 +43,10 @@ export function DesktopSpaceLayout() {
   useLayoutInit()
   const { efsManager } = useEidosFileSystemManager()
 
-  const [sidebarSize, setSidebarSize] = useLocalStorageState<number>(
-    "sidebarSize",
-    {
-      defaultValue: 20,
-    }
-  )
   const [mainPanelSize, setMainPanelSize] = useLocalStorageState<number>(
     "mainPanelSize",
     {
-      defaultValue: 60,
+      defaultValue: 80,
     }
   )
   const [rightPanelSize, setRightPanelSize] = useLocalStorageState<number>(
@@ -104,31 +97,11 @@ export function DesktopSpaceLayout() {
         )}
 
         <ScriptContainer />
-        <div className="flex h-screen w-full flex-col">
+        <SideBar />
+        <main className="flex w-full">
           <ResizablePanelGroup direction="horizontal" className="h-screen">
             <ResizablePanel
-              className={cn(
-                "flex flex-col h-full overflow-x-hidden",
-                isSidebarOpen ? "min-w-[300px]" : "w-0 min-w-0 hidden"
-              )}
-              defaultSize={sidebarSize}
-              minSize={0}
-              maxSize={30}
-              onResize={(size) => setSidebarSize(size)}
-            >
-              <div
-                className={cn("flex flex-col h-full shrink-0", {
-                  "pt-8": isMac(),
-                })}
-              >
-                <SideBar />
-              </div>
-            </ResizablePanel>
-            <ResizableHandle className="hover:cursor-col-resize w-[2px] opacity-55" />
-            <ResizablePanel
-              defaultSize={
-                100 - sidebarSize! - (isRightPanelOpen ? rightPanelSize! : 0)
-              }
+              defaultSize={100 - (isRightPanelOpen ? rightPanelSize! : 0)}
               minSize={50}
             >
               <div className="flex flex-col h-full">
@@ -170,7 +143,7 @@ export function DesktopSpaceLayout() {
               </>
             )}
           </ResizablePanelGroup>
-        </div>
+        </main>
       </div>
     </>
   )

diff --git a/apps/desktop/layout.tsx b/apps/desktop/layout.tsx
@@ -3,6 +3,7 @@ import { useEffect } from "react"
 import { Outlet } from "react-router-dom"
 
 import { useWorker } from "@/hooks/use-worker"
+import { SidebarProvider } from "@/components/ui/sidebar"
 import { Toaster } from "@/components/ui/toaster"
 import { BlockUIDialog } from "@/components/block-ui-dialog"
 import { CommandDialogDemo } from "@/components/cmdk"
@@ -22,16 +23,19 @@ export default function RootLayout() {
 
   return (
     <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
-      <>
+      <SidebarProvider>
         {/* Transparent titlebar for dragging */}
-        <div className="h-[8px] w-full bg-transparent absolute top-0 left-0" id="drag-region"></div>
+        <div
+          className="h-[8px] w-full bg-transparent absolute top-0 left-0"
+          id="drag-region"
+        ></div>
         {/* APP MODEL， a sidebar and main */}
         <div className="flex h-screen w-screen overflow-auto">
           <Outlet />
         </div>
         <CommandDialogDemo />
         <ShortCuts />
-      </>
+      </SidebarProvider>
       <TailwindIndicator />
       <Toaster />
       <BlockUIDialog />

diff --git a/apps/desktop/settings/storage/storage-form.tsx b/apps/desktop/settings/storage/storage-form.tsx
@@ -51,6 +51,12 @@ export function StorageForm() {
     }
   }
 
+  const handleOpenDataFolder = () => {
+    if (dataFolder) {
+      window.eidos.openFolder(dataFolder)
+    }
+  }
+
   async function onSubmit() {
     const data = form.getValues()
 
@@ -90,6 +96,11 @@ export function StorageForm() {
                 <Button type="button" onClick={handleSelectDataFolder}>
                   Select
                 </Button>
+                {dataFolder && (
+                  <Button type="button" onClick={handleOpenDataFolder}>
+                    Open
+                  </Button>
+                )}
               </div>
               <FormDescription>
                 The folder where your data will be stored.

diff --git a/apps/publish/layout.tsx b/apps/publish/layout.tsx
@@ -1,6 +1,7 @@
 import "@/styles/globals.css"
 import { Outlet } from "react-router-dom"
 
+import { SidebarProvider } from "@/components/ui/sidebar"
 import { Toaster } from "@/components/ui/toaster"
 import { BlockUIDialog } from "@/components/block-ui-dialog"
 import { ScriptList } from "@/components/cmdk/script"
@@ -12,7 +13,7 @@ import { ThemeUpdater } from "@/components/theme-updater"
 export default function RootLayout() {
   return (
     <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
-      <>
+      <SidebarProvider>
         {/* APP MODEL， a sidebar and main */}
         <div className="flex h-screen w-screen overflow-auto">
           <div className="h-full w-full grow">
@@ -22,7 +23,7 @@ export default function RootLayout() {
         {/* <CommandDialogDemo /> */}
         <ScriptList />
         <ShortCuts />
-      </>
+      </SidebarProvider>
       <TailwindIndicator />
       <Toaster />
       <BlockUIDialog />

diff --git a/apps/web-app/[database]/base-layout.tsx b/apps/web-app/[database]/base-layout.tsx
@@ -1,20 +1,19 @@
-import { motion } from "framer-motion"
 import { Suspense, lazy } from "react"
 
-import { FileManager } from "@/components/file-manager"
-import { Loading } from "@/components/loading"
-import { ScriptContainer } from "@/components/script-container"
-import { SideBar } from "@/components/sidebar"
+import { useAppStore } from "@/lib/store/app-store"
+import { useAppRuntimeStore } from "@/lib/store/runtime-store"
+import { cn } from "@/lib/utils"
+import { useEidosFileSystemManager } from "@/hooks/use-fs"
+import { useSqlite } from "@/hooks/use-sqlite"
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
-import { useEidosFileSystemManager } from "@/hooks/use-fs"
-import { useSqlite } from "@/hooks/use-sqlite"
-import { useAppStore } from "@/lib/store/app-store"
-import { useAppRuntimeStore } from "@/lib/store/runtime-store"
-import { cn } from "@/lib/utils"
+import { FileManager } from "@/components/file-manager"
+import { Loading } from "@/components/loading"
+import { ScriptContainer } from "@/components/script-container"
+import { SideBar } from "@/components/sidebar"
 
 import { Nav } from "../../../components/nav"
 import { useSpaceAppStore } from "./store"
@@ -42,10 +41,6 @@ export function DatabaseLayoutBase({
       </div>
     )
   }
-  const sidebarVariants = {
-    open: { x: 0 },
-    closed: { x: "-100%", width: 0 },
-  }
 
   return (
     <div className={cn("relative  flex h-screen", className)}>
@@ -55,28 +50,18 @@ export function DatabaseLayoutBase({
           src={efsManager.getFileUrlByPath(currentPreviewFile.path)}
         ></iframe>
       )}
-
       <ScriptContainer />
-      <div className="flex h-screen w-full flex-col">
-        <div className="flex h-screen flex-col">
+      <div className="flex h-screen w-full">
+        <SideBar />
+        <div className="flex h-screen flex-col w-full">
           <Nav />
           <ResizablePanelGroup direction="horizontal">
             <div
               className={cn("flex w-full", {})}
               style={{ height: "calc(100vh - 38px)" }}
             >
-              <motion.div
-                className={cn("h-full w-[300px] shrink-0 overflow-x-hidden")}
-                animate={isSidebarOpen ? "open" : "closed"}
-                variants={sidebarVariants}
-                transition={{ type: "tween", duration: 0.2 }}
-              >
-                <SideBar />
-              </motion.div>
               <ResizablePanel minSize={50}>
-                <div
-                  className={cn("flex h-full w-auto grow flex-col border-l")}
-                >
+                <div className={cn("flex h-full w-auto grow flex-col")}>
                   <main
                     id="main-content"
                     className="z-[1] flex w-full grow flex-col overflow-y-auto"

diff --git a/apps/web-app/[database]/base-pwa-layout.tsx b/apps/web-app/[database]/base-pwa-layout.tsx
@@ -1,20 +1,22 @@
 "use client"
 
 import { Suspense, lazy } from "react"
-import { motion } from "framer-motion"
 
-import { useAppStore } from "@/lib/store/app-store"
 import { useAppRuntimeStore } from "@/lib/store/runtime-store"
 import { cn } from "@/lib/utils"
-import { isMac } from "@/lib/web/helper"
 import { useEidosFileSystemManager } from "@/hooks/use-fs"
 import { useSqlite } from "@/hooks/use-sqlite"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+import { FileManager } from "@/components/file-manager"
 import { Loading } from "@/components/loading"
 import { ScriptContainer } from "@/components/script-container"
 import { SideBar } from "@/components/sidebar"
 
 import { Nav } from "../../../components/nav"
-import { ExtensionPage } from "../extensions/page"
 import { useSpaceAppStore } from "./store"
 
 const AIChat = lazy(() => import("@/components/ai-chat/ai-chat-new"))
@@ -28,21 +30,16 @@ export function PWALayoutBase({
 }) {
   const { sqlite } = useSqlite()
   const { isShareMode, currentPreviewFile } = useAppRuntimeStore()
-  const { isSidebarOpen } = useAppStore()
-  const { isRightPanelOpen: isAiOpen, isExtAppOpen } = useSpaceAppStore()
   const { efsManager } = useEidosFileSystemManager()
+  const { isRightPanelOpen, currentAppIndex, apps } = useSpaceAppStore()
+  const currentApp = apps[currentAppIndex]
   if (!isShareMode && !sqlite) {
     return (
       <div className="flex h-screen w-screen items-center justify-center">
         <Loading />
       </div>
     )
   }
-
-  const sidebarVariants = {
-    open: { x: 0 },
-    closed: { x: "-100%", width: 0 },
-  }
   // when chat is open  2:7:3
   // when chat is close 2:10
   return (
@@ -53,47 +50,64 @@ export function PWALayoutBase({
           src={efsManager.getFileUrlByPath(currentPreviewFile.path)}
         ></iframe>
       )}
-
       <ScriptContainer />
-      <div className="flex h-screen w-full flex-col">
-        <Nav />
-        <div
-          className={cn("flex h-screen w-full pt-8", {
-            "!pt-[38px]": isMac(),
-          })}
-        >
-          <motion.div
-            className={cn("h-full w-[300px] shrink-0 overflow-x-hidden")}
-            animate={isSidebarOpen ? "open" : "closed"}
-            variants={sidebarVariants}
-            transition={{ type: "tween", duration: 0.2 }}
-          >
-            <SideBar />
-          </motion.div>
-          <div className={cn("flex h-full w-auto grow flex-col border-l")}>
-            <main
-              id="main-content"
-              className="z-[1] flex w-full grow flex-col overflow-y-auto"
-            >
-              {children}
-            </main>
-          </div>
-          <div
-            className={cn(
-              "h-full shrink-0 overflow-x-hidden border-l min-w-[400px]"
-            )}
-          >
-            {isAiOpen && (
-              <Suspense fallback={<Loading />}>
-                <AIChat />
-              </Suspense>
-            )}
-            {isExtAppOpen && (
-              <div className="relative flex h-full  w-[475px] shrink-0  flex-col overflow-auto border-l border-l-slate-400 p-2">
-                <ExtensionPage />
-              </div>
-            )}
-          </div>
+      <div className="flex h-screen w-full">
+        <SideBar />
+        <div className="flex h-screen flex-col w-full">
+          <Nav />
+          <ResizablePanelGroup direction="horizontal">
+            <div className="flex w-full pt-[38px]">
+              <ResizablePanel minSize={50}>
+                <div className={cn("flex h-full w-auto grow flex-col")}>
+                  <main
+                    id="main-content"
+                    className="z-[1] flex w-full grow flex-col overflow-y-auto"
+                  >
+                    {children}
+                  </main>
+                </div>
+              </ResizablePanel>
+              {isRightPanelOpen && (
+                <>
+                  <ResizableHandle className="hover:cursor-col-resize w-[2px] opacity-55" />
+                  <ResizablePanel
+                    className={cn("min-w-[400px]")}
+                    defaultSize={isRightPanelOpen ? 20 : 0}
+                    minSize={20}
+                    maxSize={50}
+                  >
+                    <div className={cn("h-full shrink-0 overflow-x-hidden")}>
+                      {currentApp === "chat" && (
+                        <Suspense fallback={<Loading />}>
+                          <AIChat />
+                        </Suspense>
+                      )}
+                      {currentApp === "file-manager" && (
+                        <Suspense fallback={<Loading />}>
+                          <FileManager />
+                        </Suspense>
+                      )}
+                    </div>
+                  </ResizablePanel>
+                </>
+              )}
+              {/* {isExtAppOpen && (
+                  <>
+                    <ResizableHandle withHandle />
+                    <ResizablePanel
+                      className="min-w-[400px]"
+                      defaultSize={30}
+                      minSize={30}
+                      maxSize={isAiOpen ? 40 : 50}
+                    >
+                      <div className="relative flex h-full  w-[475px] shrink-0  flex-col overflow-auto p-2">
+                        <ExtensionPage />
+                      </div>
+                    </ResizablePanel>
+                  </>
+                )} */}
+            </div>
+          </ResizablePanelGroup>
         </div>
       </div>
     </div>