From 5ab91d269061c859ed9972b4fa454ed175273e16 Mon Sep 17 00:00:00 2001
From: Mayne <i@gine.me>
Date: Mon, 21 Oct 2024 10:40:31 +0800
Subject: [PATCH] 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
---
 .npmrc                                        |   1 +
 apps/desktop/[database]/layout.tsx            |  37 +-
 apps/desktop/layout.tsx                       |  10 +-
 .../desktop/settings/storage/storage-form.tsx |  11 +
 apps/publish/layout.tsx                       |   5 +-
 apps/web-app/[database]/base-layout.tsx       |  41 +-
 apps/web-app/[database]/base-pwa-layout.tsx   | 116 +--
 apps/web-app/layout.tsx                       |   5 +-
 components.json                               |  20 +
 components/keyboard-shortcuts/const.ts        |   4 +
 components/landing/activation.tsx             | 101 +--
 components/landing/index.tsx                  |   2 +-
 components/nav/index.tsx                      |  52 +-
 components/shortcuts.tsx                      |   7 +-
 components/sidebar/index.tsx                  | 203 ++---
 components/sidebar/tree/node-menu.tsx         |  14 +-
 components/table/index.tsx                    |   4 +-
 components/table/view-toolbar.tsx             |  17 +-
 components/table/views/grid/cells/index.ts    |   2 +
 .../table/views/grid/cells/range-cell.tsx     | 163 ++++
 .../grid/fields/field-property-editor.tsx     |   2 +
 .../number/number-property-editor.tsx         | 258 ++++++
 components/table/views/grid/index.tsx         |   7 +-
 components/ui/button.tsx                      |  15 +-
 components/ui/input.tsx                       |   2 +-
 components/ui/separator.tsx                   |   2 -
 components/ui/sheet.tsx                       | 135 +---
 components/ui/sidebar.tsx                     | 762 ++++++++++++++++++
 components/ui/sub-page-dialog.tsx             | 145 ++++
 components/ui/tooltip.tsx                     |   2 -
 electron/electron-env.d.ts                    |   1 +
 electron/file-system/space.ts                 |   9 +-
 electron/main.ts                              |  22 +-
 electron/preload.ts                           |   1 +
 electron/server/server.ts                     |  17 +-
 hooks/use-mobile.tsx                          |  19 +
 lib/env.ts                                    |   2 +-
 lib/fields/number.ts                          |  50 +-
 lib/fields/select.ts                          |   5 +
 lib/rpc.ts                                    |   2 +
 lib/store/app-store.ts                        |  26 +-
 lib/utils.ts                                  |  27 +-
 package.json                                  |   3 +-
 styles/globals.css                            | 105 ++-
 tailwind.config.js                            |  80 +-
 vite.config.ts                                |  10 +-
 46 files changed, 1983 insertions(+), 541 deletions(-)
 create mode 100644 components.json
 create mode 100644 components/table/views/grid/cells/range-cell.tsx
 create mode 100644 components/table/views/grid/fields/property/number/number-property-editor.tsx
 create mode 100644 components/ui/sidebar.tsx
 create mode 100644 components/ui/sub-page-dialog.tsx
 create mode 100644 hooks/use-mobile.tsx

diff --git a/.npmrc b/.npmrc
index 15d87e48..a35a2d83 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,3 @@
 engine-strict=true
 # electron_mirror=https://npmmirror.com/mirrors/electron/
+ignore-workspace-root-check=true
\ No newline at end of file
diff --git a/apps/desktop/[database]/layout.tsx b/apps/desktop/[database]/layout.tsx
index 459bd2ca..1a8a8575 100644
--- 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
index 0d6e07ee..27d3d1bc 100644
--- 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
index 134becfb..5408dc83 100644
--- 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
index 55eb85b4..1dc38d39 100644
--- 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
index de39f4fa..de78e653 100644
--- 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
index 260545f5..fa3fdd0e 100644
--- 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,9 +30,9 @@ 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">
@@ -38,11 +40,6 @@ export function PWALayoutBase({
       </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>
diff --git a/apps/web-app/layout.tsx b/apps/web-app/layout.tsx
index 6dd08091..a6609237 100644
--- a/apps/web-app/layout.tsx
+++ b/apps/web-app/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"
@@ -23,7 +24,7 @@ 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">
@@ -32,7 +33,7 @@ export default function RootLayout() {
         </div>
         <CommandDialogDemo />
         <ShortCuts />
-      </>
+      </SidebarProvider>
       <TailwindIndicator />
       <Toaster />
       <BlockUIDialog />
diff --git a/components.json b/components.json
new file mode 100644
index 00000000..2a9d8949
--- /dev/null
+++ b/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
\ No newline at end of file
diff --git a/components/keyboard-shortcuts/const.ts b/components/keyboard-shortcuts/const.ts
index 0928dff6..2fddf5e7 100644
--- a/components/keyboard-shortcuts/const.ts
+++ b/components/keyboard-shortcuts/const.ts
@@ -159,4 +159,8 @@ export const CommonKeyboardShortcuts = [
     key: "Ctrl/Cmd + K",
     description: "Toggle command palette",
   },
+  {
+    key: "Ctrl/Cmd + ,",
+    description: "Open settings",
+  },
 ]
diff --git a/components/landing/activation.tsx b/components/landing/activation.tsx
index 3f0cda03..8ee866e1 100644
--- a/components/landing/activation.tsx
+++ b/components/landing/activation.tsx
@@ -16,43 +16,39 @@ const BrowserChecker = () => {
     isMobile,
     version,
   } = useBrowserCheck()
+
   if (isBrowserSupported && isCoreWebApisSupported && isOPFSupported) {
     return (
-      <div>
-        <h1 className="text-green-500">Your browser is supported</h1>
+      <div className="text-green-500 font-semibold">
+        Your browser is supported
       </div>
     )
   }
+
   return (
-    <>
+    <div className="text-red-500 text-sm">
       {!isBrowserSupported && (
-        <div className="text-red-500">
-          It seems like you are not using a Chromium-based browser.
-          <br />
-          Eidos is not tested on other browsers yet.
-          <br />
-          Recommended browsers are Chrome, Edge, Arc, Brave, etc.
-        </div>
+        <p>
+          Please use a Chromium-based browser (Chrome, Edge, Arc, Brave, etc.).
+          Eidos is not tested on other browsers.
+        </p>
       )}
       {!isCoreWebApisSupported && (
-        <div className="text-red-500">
-          Eidos requires some new Web APIs to work properly. Please update your
-          browser to the latest. <br />
+        <p>
+          Please update your browser to the latest version.
           {isBrowserSupported &&
             (isMobile ? (
-              <div>
-                It seems like you are using a mobile browser. It works, but with
-                some limitations. Use a desktop browser for the best experience.
-              </div>
+              <span>
+                {" "}
+                Mobile browsers have limitations. Use a desktop browser for the
+                best experience.
+              </span>
             ) : (
-              <div>
-                Your browser version: {version} <br />
-                Recommended version: 122+
-              </div>
+              <span> Your version: {version}. Recommended: 122+</span>
             ))}
-        </div>
+        </p>
       )}
-    </>
+    </div>
   )
 }
 
@@ -61,10 +57,16 @@ export const Activation = () => {
   const [code, setCode] = useState("")
   const [loading, setLoading] = useState(false)
   const nav = useNavigate()
+
   const handleActive = async () => {
-    setLoading(true)
-    await active(code)
-    setLoading(false)
+    try {
+      setLoading(true)
+      await active(code)
+    } catch (error) {
+      // Handle error
+    } finally {
+      setLoading(false)
+    }
   }
 
   if (isActivated) {
@@ -87,43 +89,48 @@ export const Activation = () => {
   }
 
   return (
-    <div
-      className="flex w-full flex-col items-center justify-center gap-4"
-      id="active-selection"
-    >
-      <h2 className="text-center text-3xl font-bold tracking-tighter sm:text-5xl">
+    <div className="flex flex-col items-center justify-center gap-6 max-w-md mx-auto p-4">
+      <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">
         Activation
       </h2>
+
       {!isDesktopMode && <BrowserChecker />}
-      <div className="flex gap-2">
+
+      <div className="w-full">
         <Input
-          // autoFocus
-          className="w-[300px] ring"
-          placeholder="Enter Key"
+          className="w-full mb-2"
+          placeholder="Enter Activation Key"
           value={code}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              handleActive()
-            }
-          }}
           onChange={(e) => setCode(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleActive()}
         />
-        <Button onClick={handleActive} disabled={loading}>
-          Enter
+        <Button className="w-full" onClick={handleActive} disabled={loading}>
+          {loading ? "Activating..." : "Activate"}
         </Button>
       </div>
 
-      <div className="mt-2 p-2 text-sm">
-        Eidos is currently in development; join our{" "}
+      <p className="text-sm text-center">
+        Don't have a key?{" "}
+        <Link
+          to="https://store.eidos.space/buy/2397216c-4322-40fa-b425-681d455e6702"
+          target="_blank"
+          className="text-blue-500 hover:underline"
+        >
+          Get a free early access key
+        </Link>
+      </p>
+
+      <p className="text-xs text-center text-gray-500">
+        Eidos is in development. Join our{" "}
         <Link
           to={DOMAINS.DISCORD_INVITE}
           target="_blank"
-          className="text-blue-500"
+          className="text-blue-500 hover:underline"
         >
           Discord
         </Link>{" "}
-        server to stay updated on the latest progress
-      </div>
+        for updates.
+      </p>
     </div>
   )
 }
diff --git a/components/landing/index.tsx b/components/landing/index.tsx
index 51361f4d..2edefa9d 100644
--- a/components/landing/index.tsx
+++ b/components/landing/index.tsx
@@ -225,7 +225,7 @@ export const Landing = () => {
           </div>
         </section>
         <section
-          id="#join"
+          id="active-selection"
           className="w-full py-12 xs:px-4 md:py-24 lg:py-32"
           tabIndex={-1}
         >
diff --git a/components/nav/index.tsx b/components/nav/index.tsx
index c7f71093..f117286e 100644
--- a/components/nav/index.tsx
+++ b/components/nav/index.tsx
@@ -6,12 +6,7 @@ import { useAppStore } from "@/lib/store/app-store"
 import { cn } from "@/lib/utils"
 import { isMac } from "@/lib/web/helper"
 import { Button } from "@/components/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { useSidebar } from "@/components/ui/sidebar"
 import { useSpaceAppStore } from "@/apps/web-app/[database]/store"
 
 import { BreadCrumb } from "./breadcrumb"
@@ -39,50 +34,39 @@ export const Nav = ({ showMenu = true }: { showMenu?: boolean }) => {
     }
   }
   const { theme } = useTheme()
-  const toggleSidebar = () => {
-    setSidebarOpen(!isSidebarOpen)
-  }
+  const { toggleSidebar } = useSidebar()
 
   return (
     <div
-      id="title-bar"
+      id={isMac() ? "title-bar-mac" : "title-bar"}
       className={cn(
         "flex h-8 w-full border-separate items-center justify-between pl-2 shrink-0",
         {
           fixed: navigator.windowControlsOverlay?.visible,
-          "!pl-[72px]": isDesktopMode && isMac() && !isSidebarOpen,
+          "!ml-[72px]":
+            (isDesktopMode || navigator.windowControlsOverlay?.visible) &&
+            isMac() &&
+            !isSidebarOpen,
+          "!pr-[230px]":
+            navigator.windowControlsOverlay?.visible && isSidebarOpen,
           "!h-[38px]": isMac(),
           "bg-[#000]": theme === "dark",
           "bg-[#fff]": theme === "light",
           // PWA does not support css variables for theme color yet, we just use bg-white text-black for now
           // https://github.com/w3c/manifest/issues/975
-          // "bg-white text-black": navigator.windowControlsOverlay?.visible,
+          "bg-white text-black": navigator.windowControlsOverlay?.visible,
         }
       )}
     >
       {showMenu && (
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="xs"
-                onClick={toggleSidebar}
-                // className="hidden md:block"
-              >
-                <Menu className="h-5 w-5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>
-                {isSidebarOpen ? "Close Sidebar" : "Open Sidebar"} <br />
-                <span className={"ml-auto text-xs tracking-widest opacity-60"}>
-                  ctrl/cmd + \
-                </span>
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <Button
+          variant="ghost"
+          size="xs"
+          onClick={toggleSidebar}
+          // className="hidden md:block"
+        >
+          <Menu className="h-5 w-5" />
+        </Button>
       )}
 
       <div className="hidden md:block">
diff --git a/components/shortcuts.tsx b/components/shortcuts.tsx
index 77e4ed03..3b26a3d6 100644
--- a/components/shortcuts.tsx
+++ b/components/shortcuts.tsx
@@ -12,7 +12,8 @@ import { useSpaceAppStore } from "@/apps/web-app/[database]/store"
  */
 export function ShortCuts() {
   const { setTheme, theme } = useTheme()
-  const { isRightPanelOpen: isAiOpen, setIsRightPanelOpen: setIsAiOpen } = useSpaceAppStore()
+  const { isRightPanelOpen: isAiOpen, setIsRightPanelOpen: setIsAiOpen } =
+    useSpaceAppStore()
   const navigate = useNavigate()
 
   useKeyPress(["shift.ctrl.l", "shift.meta.l"], (e) => {
@@ -32,5 +33,9 @@ export function ShortCuts() {
     navigate(1)
   })
 
+  useKeyPress(["ctrl.comma", "meta.comma"], () => {
+    navigate("/settings")
+  })
+
   return null
 }
diff --git a/components/sidebar/index.tsx b/components/sidebar/index.tsx
index c950466a..061dd1b9 100644
--- a/components/sidebar/index.tsx
+++ b/components/sidebar/index.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect, useState } from "react"
 import {
   AppWindowIcon,
   BlocksIcon,
@@ -8,20 +9,21 @@ import {
   ListTreeIcon,
   PinIcon,
 } from "lucide-react"
-import { useEffect, useState } from "react"
 import { Link } from "react-router-dom"
 
-import { useExperimentConfigStore } from "@/apps/web-app/settings/experiment/store"
-import { DatabaseSelect } from "@/components/database-select"
+import { isDesktopMode } from "@/lib/env"
+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 { useAllExtensions } from "@/hooks/use-all-extensions"
 import { useCurrentPathInfo } from "@/hooks/use-current-pathinfo"
 import { useAllNodes } from "@/hooks/use-nodes"
 import { useSpace } from "@/hooks/use-space"
 import { useSqlite } from "@/hooks/use-sqlite"
-import { isDesktopMode } from "@/lib/env"
-import { useAppStore } from "@/lib/store/app-store"
-import { useAppRuntimeStore } from "@/lib/store/runtime-store"
-import { cn } from "@/lib/utils"
+import { Sidebar, SidebarRail } from "@/components/ui/sidebar"
+import { DatabaseSelect } from "@/components/database-select"
+import { useExperimentConfigStore } from "@/apps/web-app/settings/experiment/store"
 
 import { FileManager } from "../file-manager"
 import { SpaceSettings } from "../space-settings"
@@ -68,105 +70,114 @@ export const SideBar = ({ className }: any) => {
   const {
     experiment: { enableFileManager },
   } = useExperimentConfigStore()
-  if (!isDesktopMode && isFileManagerOpen) {
-    return <FileManager />
-  }
-
   return (
-    <>
-      <div className={cn("flex h-full flex-col gap-2 p-2", className)}>
-        <div className="flex items-center justify-between">
-          {isShareMode ? (
-            "ShareMode"
-          ) : (
-            <>
-              <DatabaseSelect databases={spaceList} />
-            </>
-          )}
-        </div>
-        <div className="flex h-full w-full flex-col justify-between overflow-y-auto">
-          {loading ? (
-            <TableListLoading />
-          ) : (
-            <div>
-              {!isShareMode && (
+    <Sidebar>
+      <SidebarRail />
+      <div
+        className={cn("flex flex-col h-full shrink-0", {
+          "pt-8":
+            isMac() &&
+            (isDesktopMode || navigator.windowControlsOverlay?.visible),
+        })}
+      >
+        {!isDesktopMode && isFileManagerOpen ? (
+          <FileManager />
+        ) : (
+          <div className={cn("flex h-full flex-col gap-2 p-2", className)}>
+            <div className="flex items-center justify-between">
+              {isShareMode ? (
+                "ShareMode"
+              ) : (
                 <>
-                  <EverydaySidebarItem space={space} />
-                  {enableFileManager && !isDesktopMode && (
+                  <DatabaseSelect databases={spaceList} />
+                </>
+              )}
+            </div>
+            <div className="flex h-full w-full flex-col justify-between overflow-y-auto">
+              {loading ? (
+                <TableListLoading />
+              ) : (
+                <div>
+                  {!isShareMode && (
+                    <>
+                      <EverydaySidebarItem space={space} />
+                      {enableFileManager && !isDesktopMode && (
+                        <Button
+                          variant={"ghost"}
+                          size="sm"
+                          onClick={toggleFileManager}
+                          className="w-full justify-start font-normal"
+                        >
+                          <FileBoxIcon className="pr-2" />
+                          Files
+                        </Button>
+                      )}
+                      <Button
+                        variant={"ghost"}
+                        size="sm"
+                        className="w-full justify-start font-normal"
+                        asChild
+                      >
+                        <Link to={`/${space}/extensions`}>
+                          <BlocksIcon className="pr-2" />
+                          Extensions
+                        </Link>
+                      </Button>
+                      <CurrentItemTree
+                        title="Pinned"
+                        allNodes={allNodes.filter((node) => node.is_pinned)}
+                        Icon={<PinIcon className="pr-2" />}
+                        disableAdd
+                      />
+                    </>
+                  )}
+                  <ContextMenu>
+                    <ContextMenuTrigger>
+                      <CurrentItemTree
+                        title="Nodes"
+                        allNodes={allNodes.filter(
+                          (node) => !node.parent_id && !node.is_deleted
+                        )}
+                        Icon={<ListTreeIcon className="pr-2" />}
+                      />
+                    </ContextMenuTrigger>
+                    <ContextMenuContent>
+                      <ContextMenuItem
+                        onClick={() => handlePaste()}
+                        disabled={!currentCut}
+                      >
+                        <ClipboardPasteIcon className="pr-2" />
+                        Paste
+                      </ContextMenuItem>
+                    </ContextMenuContent>
+                  </ContextMenu>
+                  {apps.map((app) => (
                     <Button
                       variant={"ghost"}
                       size="sm"
-                      onClick={toggleFileManager}
+                      key={app.id}
                       className="w-full justify-start font-normal"
+                      asChild
                     >
-                      <FileBoxIcon className="pr-2" />
-                      Files
+                      <Link to={`/${space}/apps/${app.id}`}>
+                        <AppWindowIcon className="pr-2" />
+                        {app.name}
+                      </Link>
                     </Button>
-                  )}
-                  <Button
-                    variant={"ghost"}
-                    size="sm"
-                    className="w-full justify-start font-normal"
-                    asChild
-                  >
-                    <Link to={`/${space}/extensions`}>
-                      <BlocksIcon className="pr-2" />
-                      Extensions
-                    </Link>
-                  </Button>
-                  <CurrentItemTree
-                    title="Pinned"
-                    allNodes={allNodes.filter((node) => node.is_pinned)}
-                    Icon={<PinIcon className="pr-2" />}
-                    disableAdd
-                  />
-                </>
+                  ))}
+                </div>
               )}
-              <ContextMenu>
-                <ContextMenuTrigger>
-                  <CurrentItemTree
-                    title="Nodes"
-                    allNodes={allNodes.filter(
-                      (node) => !node.parent_id && !node.is_deleted
-                    )}
-                    Icon={<ListTreeIcon className="pr-2" />}
-                  />
-                </ContextMenuTrigger>
-                <ContextMenuContent>
-                  <ContextMenuItem
-                    onClick={() => handlePaste()}
-                    disabled={!currentCut}
-                  >
-                    <ClipboardPasteIcon className="pr-2" />
-                    Paste
-                  </ContextMenuItem>
-                </ContextMenuContent>
-              </ContextMenu>
-              {apps.map((app) => (
-                <Button
-                  variant={"ghost"}
-                  size="sm"
-                  key={app.id}
-                  className="w-full justify-start font-normal"
-                  asChild
-                >
-                  <Link to={`/${space}/apps/${app.id}`}>
-                    <AppWindowIcon className="pr-2" />
-                    {app.name}
-                  </Link>
-                </Button>
-              ))}
             </div>
-          )}
-        </div>
-        <div>
-          <Trash />
-          <ImportFileDialog />
-          <SpaceSettings />
-          {/* <Separator /> */}
-          {/* <BackupStatus /> */}
-        </div>
+            <div>
+              <Trash />
+              <ImportFileDialog />
+              <SpaceSettings />
+              {/* <Separator /> */}
+              {/* <BackupStatus /> */}
+            </div>
+          </div>
+        )}
       </div>
-    </>
+    </Sidebar>
   )
 }
diff --git a/components/sidebar/tree/node-menu.tsx b/components/sidebar/tree/node-menu.tsx
index 3bc76b06..3f44d9d2 100644
--- a/components/sidebar/tree/node-menu.tsx
+++ b/components/sidebar/tree/node-menu.tsx
@@ -88,8 +88,11 @@ export function NodeItem({
   }
 
   useClickAway(() => {
-    setRenameOpen(false)
-  }, [renameInputRef])
+    if (renameOpen) {
+      renameNode(node.id, newName);
+      setRenameOpen(false);
+    }
+  }, [renameInputRef]);
 
   const router = useNavigate()
 
@@ -107,11 +110,12 @@ export function NodeItem({
 
   const handleRenameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
-      renameNode(node.id, newName)
-      setRenameOpen(false)
+      renameNode(node.id, newName);
+      setRenameOpen(false);
     }
     if (e.key === "Escape") {
-      setRenameOpen(false)
+      setRenameOpen(false);
+      setNewName(node.name); // Reset to original name when canceling
     }
   }
   if (isInkServiceMode) {
diff --git a/components/table/index.tsx b/components/table/index.tsx
index f1ef1d62..ca8766d0 100644
--- a/components/table/index.tsx
+++ b/components/table/index.tsx
@@ -46,7 +46,7 @@ export const Table = ({
   useSqliteTableSubscribe(tableName)
   return (
     <TableContext.Provider value={{ tableName, space, viewId, isReadOnly }}>
-      <div className="h-full w-full overflow-hidden p-2 pt-0">
+      <div className="h-full w-full overflow-hidden p-2 pt-0 flex flex-col">
         <ViewToolbar
           tableName={tableName}
           space={space}
@@ -54,7 +54,7 @@ export const Table = ({
           isReadOnly={isReadOnly}
         />
         <div
-          className="relative h-full w-full overflow-hidden"
+          className="relative flex-grow overflow-hidden"
           id={TABLE_CONTENT_ELEMENT_ID}
         >
           {currentView?.type === ViewTypeEnum.Grid && (
diff --git a/components/table/view-toolbar.tsx b/components/table/view-toolbar.tsx
index c528fa63..c26984ff 100644
--- a/components/table/view-toolbar.tsx
+++ b/components/table/view-toolbar.tsx
@@ -19,7 +19,6 @@ import { cn, getTableIdByRawTableName, shortenId, uuidv7 } from "@/lib/utils"
 import { useCurrentSubPage } from "@/hooks/use-current-sub-page"
 import { useSqlite } from "@/hooks/use-sqlite"
 import { useTableOperation } from "@/hooks/use-table"
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,6 +26,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+} from "@/components/ui/sub-page-dialog"
 import { NodeComponent } from "@/apps/web-app/[database]/[node]/page"
 
 import { Button } from "../ui/button"
@@ -220,6 +224,12 @@ export const ViewToolbar = (props: {
     jump2View(defaultViewId)
   }
 
+  const handleMaximize = useCallback(() => {
+    if (subPageId) {
+      navigate(`/${space}/${subPageId}`)
+    }
+  }, [navigate, space, subPageId])
+
   return (
     <div ref={ref}>
       <div className="ml-2 flex items-center justify-between border-b pb-1">
@@ -258,7 +268,10 @@ export const ViewToolbar = (props: {
             <DialogTrigger>
               <div></div>
             </DialogTrigger>
-            <DialogContent className="container h-[95vh] p-0 md:max-w-[756px]">
+            <DialogContent
+              className="container h-[95vh] p-0 md:max-w-[756px]"
+              onMaximize={handleMaximize}
+            >
               <ScrollArea className="h-full">
                 <NodeComponent nodeId={subPageId} />
               </ScrollArea>
diff --git a/components/table/views/grid/cells/index.ts b/components/table/views/grid/cells/index.ts
index cbdee4a1..de7cf8fc 100644
--- a/components/table/views/grid/cells/index.ts
+++ b/components/table/views/grid/cells/index.ts
@@ -8,6 +8,7 @@ import MultiSelectCell from "./multi-select-cell"
 import RatingCell from "./rating-cell"
 import SelectCell from "./select-cell"
 import UserProfileCell from "./user-profile-cell"
+import RangeCell from "./range-cell"
 
 const cells = [
   RatingCell,
@@ -23,6 +24,7 @@ const cells = [
   DatePicker,
   FileCellRenderer,
   UserProfileCell,
+  RangeCell,
   // LinksCell,
   // ButtonCell,
 ]
diff --git a/components/table/views/grid/cells/range-cell.tsx b/components/table/views/grid/cells/range-cell.tsx
new file mode 100644
index 00000000..9553e63a
--- /dev/null
+++ b/components/table/views/grid/cells/range-cell.tsx
@@ -0,0 +1,163 @@
+import * as React from "react"
+import {
+  GridCellKind,
+  getMiddleCenterBias,
+  measureTextCached,
+  type CustomCell,
+  type CustomRenderer,
+} from "@glideapps/glide-data-grid"
+
+import { SelectField } from "@/lib/fields/select"
+
+import { roundedRect } from "./helper"
+
+interface RangeCellProps {
+  readonly kind: "range-cell"
+  readonly value: number
+  readonly min: number
+  readonly max: number
+  readonly step: number
+  readonly label?: string
+  readonly measureLabel?: string
+  readonly color?: string
+}
+
+export type RangeCell = CustomCell<RangeCellProps>
+
+const RANGE_HEIGHT = 6
+
+const inputStyle: React.CSSProperties = {
+  marginRight: 8,
+}
+
+const wrapperStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  flexGrow: 1,
+}
+
+const renderer: CustomRenderer<RangeCell> = {
+  kind: GridCellKind.Custom,
+  isMatch: (c): c is RangeCell => (c.data as any).kind === "range-cell",
+  draw: (args, cell) => {
+    const { ctx, theme, rect } = args
+    const { min, max, value, label, measureLabel, color } = cell.data
+
+    const x = rect.x + theme.cellHorizontalPadding
+    const yMid = rect.y + rect.height / 2
+
+    const rangeSize = max - min
+    const fillRatio = Math.max(0, Math.min(1, (value - min) / rangeSize))
+
+    ctx.save()
+    let labelWidth = 0
+    if (label !== undefined) {
+      ctx.font = `12px ${theme.fontFamily}` // fixme this is slow
+      labelWidth =
+        measureTextCached(
+          measureLabel ?? label,
+          ctx,
+          `12px ${theme.fontFamily}`
+        ).width + theme.cellHorizontalPadding
+    }
+
+    const rangeWidth = rect.width - theme.cellHorizontalPadding * 2 - labelWidth
+    const currentTheme = (theme as any).name
+    const colorHex = SelectField.getColorValue(color ?? "default", currentTheme)
+    if (rangeWidth >= RANGE_HEIGHT) {
+      const gradient = ctx.createLinearGradient(x, yMid, x + rangeWidth, yMid)
+
+      gradient.addColorStop(0, colorHex)
+      gradient.addColorStop(fillRatio, colorHex)
+      gradient.addColorStop(fillRatio, theme.bgBubble)
+      gradient.addColorStop(1, theme.bgBubble)
+
+      ctx.beginPath()
+      ctx.fillStyle = gradient
+      roundedRect(
+        ctx,
+        x,
+        yMid - RANGE_HEIGHT / 2,
+        rangeWidth,
+        RANGE_HEIGHT,
+        RANGE_HEIGHT / 2
+      )
+      ctx.fill()
+
+      ctx.beginPath()
+      roundedRect(
+        ctx,
+        x + 0.5,
+        yMid - RANGE_HEIGHT / 2 + 0.5,
+        rangeWidth - 1,
+        RANGE_HEIGHT - 1,
+        (RANGE_HEIGHT - 1) / 2
+      )
+      ctx.strokeStyle = theme.accentLight
+      ctx.lineWidth = 1
+      ctx.stroke()
+    }
+
+    if (label !== undefined) {
+      ctx.textAlign = "right"
+      ctx.fillStyle = theme.textDark
+      ctx.fillText(
+        label,
+        rect.x + rect.width - theme.cellHorizontalPadding,
+        yMid + getMiddleCenterBias(ctx, `12px ${theme.fontFamily}`)
+      )
+    }
+
+    ctx.restore()
+
+    return true
+  },
+  provideEditor: () => {
+    // eslint-disable-next-line react/display-name
+    return (p) => {
+      const { data, readonly } = p.value
+
+      const strValue = data.value.toString()
+      const strMin = data.min.toString()
+      const strMax = data.max.toString()
+      const strStep = data.step.toString()
+
+      const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        p.onChange({
+          ...p.value,
+          data: {
+            ...data,
+            value: Number(e.target.value),
+          },
+        })
+      }
+
+      return (
+        <label style={wrapperStyle}>
+          <input
+            style={inputStyle}
+            type="range"
+            color=""
+            value={strValue}
+            min={strMin}
+            max={strMax}
+            step={strStep}
+            onChange={onChange}
+            disabled={readonly}
+          />
+          {strValue}
+        </label>
+      )
+    }
+  },
+  onPaste: (v, d) => {
+    let num = Number.parseFloat(v)
+    num = Number.isNaN(num) ? d.value : Math.max(d.min, Math.min(d.max, num))
+    return {
+      ...d,
+      value: num,
+    }
+  },
+}
+
+export default renderer
diff --git a/components/table/views/grid/fields/field-property-editor.tsx b/components/table/views/grid/fields/field-property-editor.tsx
index 091ff601..91d964a8 100644
--- a/components/table/views/grid/fields/field-property-editor.tsx
+++ b/components/table/views/grid/fields/field-property-editor.tsx
@@ -15,6 +15,7 @@ import { FilePropertyEditor } from "./property/file/file-property-editor"
 import { FormulaPropertyEditor } from "./property/formula/formula-property-editor"
 import { LinkPropertyEditor } from "./property/link/link-property-editor"
 import { LookupPropertyEditor } from "./property/lookup/lookup-property-editor"
+import { NumberPropertyEditor } from "./property/number/number-property-editor"
 import { SelectPropertyEditor } from "./property/select/select-property-editor"
 
 export const PropertyEditorTypeMap: {
@@ -31,6 +32,7 @@ export const PropertyEditorTypeMap: {
   link: LinkPropertyEditor,
   lookup: LookupPropertyEditor,
   file: FilePropertyEditor,
+  number: NumberPropertyEditor,
 }
 
 export const NotImplementEditor = () => {
diff --git a/components/table/views/grid/fields/property/number/number-property-editor.tsx b/components/table/views/grid/fields/property/number/number-property-editor.tsx
new file mode 100644
index 00000000..ea7643f7
--- /dev/null
+++ b/components/table/views/grid/fields/property/number/number-property-editor.tsx
@@ -0,0 +1,258 @@
+import { useEffect, useState } from "react"
+import { ChevronsUpDown } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { NumberProperty } from "@/lib/fields/number"
+import { SelectField } from "@/lib/fields/select"
+import { IField } from "@/lib/store/interface"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Switch } from "@/components/ui/switch"
+
+interface IFieldPropertyEditorProps {
+  uiColumn: IField<NumberProperty>
+  onPropertyChange: (property: NumberProperty) => void
+  isCreateNew?: boolean
+}
+
+export const NumberPropertyEditor = (props: IFieldPropertyEditorProps) => {
+  const [format, setFormat] = useState<NumberProperty["format"]>(
+    props.uiColumn.property?.format ?? "number"
+  )
+  const [showAs, setShowAs] = useState<NumberProperty["showAs"]>(
+    props.uiColumn.property?.showAs ?? "number"
+  )
+  const [color, setColor] = useState<string>(
+    props.uiColumn.property?.color ?? "purple"
+  )
+  const [divideBy, setDivideBy] = useState<number>(
+    props.uiColumn.property?.divideBy ?? 100
+  )
+  const [showNumber, setShowNumber] = useState<boolean>(
+    props.uiColumn.property?.showNumber ?? true
+  )
+  const [openFormat, setOpenFormat] = useState(false)
+  const [openColor, setOpenColor] = useState(false)
+  const [colors, setColors] = useState<{ name: string; value: string }[]>([])
+  const { theme } = useTheme()
+
+  useEffect(() => {
+    setColors(SelectField.colors[theme as "light" | "dark"])
+  }, [theme])
+
+  const updateProperty = (updates: Partial<NumberProperty>) => {
+    const updatedProperty = {
+      format,
+      showAs,
+      color,
+      divideBy,
+      showNumber,
+      ...updates,
+    }
+    props.onPropertyChange(updatedProperty)
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* <div className="flex items-center justify-between">
+        <Label>Number format</Label>
+        <Popover open={openFormat} onOpenChange={setOpenFormat}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={openFormat}
+              className="w-[200px] justify-between"
+            >
+              {format.charAt(0).toUpperCase() + format.slice(1)}
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="click-outside-ignore w-[200px] p-0">
+            <Command>
+              <CommandInput placeholder="Search format..." />
+              <CommandEmpty>No format found.</CommandEmpty>
+              <CommandGroup>
+                <CommandList>
+                  <CommandItem
+                    onSelect={() => {
+                      setFormat("number")
+                      setOpenFormat(false)
+                    }}
+                  >
+                    Number
+                  </CommandItem>
+                  <CommandItem
+                    onSelect={() => {
+                      setFormat("percent")
+                      setOpenFormat(false)
+                    }}
+                  >
+                    Percentage
+                  </CommandItem>
+                  <CommandItem
+                    onSelect={() => {
+                      setFormat("currency")
+                      setOpenFormat(false)
+                    }}
+                  >
+                    Currency
+                  </CommandItem>
+                </CommandList>
+              </CommandGroup>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div> */}
+
+      <Label>Show as</Label>
+      <div className="flex gap-2">
+        <div
+          className={`rounded-md cursor-pointer p-2 border flex-1 flex flex-col items-center justify-center h-20 ${
+            showAs === "number"
+              ? "bg-gray-200 dark:bg-gray-700"
+              : "bg-white dark:bg-gray-900"
+          }`}
+          onClick={() => {
+            setShowAs("number")
+            updateProperty({ showAs: "number" })
+          }}
+        >
+          <span className="text-2xl font-bold">42</span>
+          <span>Number</span>
+        </div>
+        <div
+          className={`rounded-md cursor-pointer p-2 border flex-1 flex flex-col items-center justify-center h-20 ${
+            showAs === "bar"
+              ? "bg-gray-200 dark:bg-gray-700"
+              : "bg-white dark:bg-gray-900"
+          }`}
+          onClick={() => {
+            setShowAs("bar")
+            updateProperty({ showAs: "bar" })
+          }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            className="w-8 h-8"
+          >
+            <line
+              x1="4"
+              y1="12"
+              x2="20"
+              y2="12"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+            <circle cx="14" cy="12" r="3" fill="currentColor" />
+          </svg>
+          <span>Bar</span>
+        </div>
+      </div>
+
+      {showAs === "bar" && (
+        <>
+          <div className="flex items-center justify-between">
+            <Label>Color</Label>
+            <Popover open={openColor} onOpenChange={setOpenColor}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={openColor}
+                  className="w-[200px] justify-between"
+                >
+                  <div className="flex items-center">
+                    <div
+                      className="w-4 h-4 mr-2 rounded"
+                      style={{
+                        backgroundColor: `#${
+                          colors.find((c) => c.name === color)?.value
+                        }`,
+                      }}
+                    />
+                    {color.charAt(0).toUpperCase() + color.slice(1)}
+                  </div>
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="click-outside-ignore w-[200px] p-0">
+                <Command>
+                  <CommandInput placeholder="Search color..." />
+                  <CommandEmpty>No color found.</CommandEmpty>
+                  <CommandGroup>
+                    <CommandList>
+                      {colors.map((colorOption) => (
+                        <CommandItem
+                          key={colorOption.name}
+                          onSelect={() => {
+                            setColor(colorOption.name)
+                            setOpenColor(false)
+                            updateProperty({ color: colorOption.name })
+                          }}
+                        >
+                          <div className="flex items-center">
+                            <div
+                              className="w-4 h-4 mr-2 rounded"
+                              style={{
+                                backgroundColor: `#${colorOption.value}`,
+                              }}
+                            />
+                            {colorOption.name.charAt(0).toUpperCase() +
+                              colorOption.name.slice(1)}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandList>
+                  </CommandGroup>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label>Divide by</Label>
+            <Input
+              type="number"
+              className="w-[200px]"
+              value={divideBy}
+              onChange={(e) => {
+                const newValue = parseInt(e.target.value, 10)
+                setDivideBy(newValue)
+                updateProperty({ divideBy: newValue })
+              }}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label>Show number</Label>
+            <Switch
+              checked={showNumber}
+              onCheckedChange={(checked) => {
+                setShowNumber(checked)
+                updateProperty({ showNumber: checked })
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/components/table/views/grid/index.tsx b/components/table/views/grid/index.tsx
index 0f65d2af..00612fcb 100644
--- a/components/table/views/grid/index.tsx
+++ b/components/table/views/grid/index.tsx
@@ -313,12 +313,7 @@ export default function GridView(props: IGridProps) {
       ref={containerRef}
     >
       <div
-        className={cn(
-          "flex h-full w-full overflow-hidden rounded-md border-t",
-          {
-            "pb-8": !props.isEmbed,
-          }
-        )}
+        className={cn("flex h-full w-full overflow-hidden rounded-md border-t")}
       >
         <GridContextMenu
           handleDelRows={handleDelRows}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 07ab82fb..b532e063 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,25 +5,26 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "border border-red-400 hover:bg-accent hover:text-red-600 text-red-500",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline text-primary",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 py-2 px-4",
-        sm: "h-9 px-3 rounded-md",
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
         xs: "h-7 px-2 rounded-md",
-        lg: "h-11 px-8 rounded-md",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 929e05f5..a921025c 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
index 12d81c4a..6d7f1226 100644
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index 47b37c82..d64a6fa7 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { cva, type VariantProps } from "class-variance-authority"
@@ -13,43 +11,15 @@ const SheetTrigger = SheetPrimitive.Trigger
 
 const SheetClose = SheetPrimitive.Close
 
-const portalVariants = cva("fixed inset-0 z-50 flex", {
-  variants: {
-    position: {
-      top: "items-start",
-      bottom: "items-end",
-      left: "justify-start",
-      right: "justify-end",
-    },
-  },
-  defaultVariants: { position: "right" },
-})
-
-interface SheetPortalProps
-  extends SheetPrimitive.DialogPortalProps,
-    VariantProps<typeof portalVariants> {}
-
-const SheetPortal = ({
-  position,
-  className,
-  children,
-  ...props
-}: SheetPortalProps) => (
-  <SheetPrimitive.Portal className={cn(className)} {...props}>
-    <div className={portalVariants({ position })}>{children}</div>
-  </SheetPrimitive.Portal>
-)
-SheetPortal.displayName = SheetPrimitive.Portal.displayName
+const SheetPortal = SheetPrimitive.Portal
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, children, ...props }, ref) => (
+>(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      // "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-      //  dont need the backdrop blur
-      "fixed inset-0 z-50 transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -59,106 +29,37 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
-      position: {
-        top: "animate-in slide-in-from-top w-full duration-300",
-        bottom: "animate-in slide-in-from-bottom w-full duration-300",
-        left: "animate-in slide-in-from-left h-full duration-300",
-        right: "animate-in slide-in-from-right h-full duration-300",
-      },
-      size: {
-        content: "",
-        default: "",
-        sm: "",
-        lg: "",
-        xl: "",
-        full: "",
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
       },
     },
-    compoundVariants: [
-      {
-        position: ["top", "bottom"],
-        size: "content",
-        class: "max-h-screen",
-      },
-      {
-        position: ["top", "bottom"],
-        size: "default",
-        class: "h-1/3",
-      },
-      {
-        position: ["top", "bottom"],
-        size: "sm",
-        class: "h-1/4",
-      },
-      {
-        position: ["top", "bottom"],
-        size: "lg",
-        class: "h-1/2",
-      },
-      {
-        position: ["top", "bottom"],
-        size: "xl",
-        class: "h-5/6",
-      },
-      {
-        position: ["top", "bottom"],
-        size: "full",
-        class: "h-screen",
-      },
-      {
-        position: ["right", "left"],
-        size: "content",
-        class: "max-w-screen",
-      },
-      {
-        position: ["right", "left"],
-        size: "default",
-        class: "w-1/3",
-      },
-      {
-        position: ["right", "left"],
-        size: "sm",
-        class: "w-1/4",
-      },
-      {
-        position: ["right", "left"],
-        size: "lg",
-        class: "w-1/2",
-      },
-      {
-        position: ["right", "left"],
-        size: "xl",
-        class: "w-5/6",
-      },
-      {
-        position: ["right", "left"],
-        size: "full",
-        class: "w-screen",
-      },
-    ],
     defaultVariants: {
-      position: "right",
-      size: "default",
+      side: "right",
     },
   }
 )
 
-export interface DialogContentProps
+interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
-  DialogContentProps
->(({ position, size, className, children, ...props }, ref) => (
-  <SheetPortal position={position}>
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
-      className={cn(sheetVariants({ position, size }), className)}
+      className={cn(sheetVariants({ side }), className)}
       {...props}
     >
       {children}
@@ -225,6 +126,8 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName
 
 export {
   Sheet,
+  SheetPortal,
+  SheetOverlay,
   SheetTrigger,
   SheetClose,
   SheetContent,
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
new file mode 100644
index 00000000..881ac33b
--- /dev/null
+++ b/components/ui/sidebar.tsx
@@ -0,0 +1,762 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { Sheet, SheetContent } from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "20rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "\\"
+
+type SidebarContext = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContext | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a Sidebar.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        if (setOpenProp) {
+          return setOpenProp?.(
+            typeof value === "function" ? value(open) : value
+          )
+        }
+
+        _setOpen(value)
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="xs"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 flex-1 max-w-[--skeleton-width]"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/components/ui/sub-page-dialog.tsx b/components/ui/sub-page-dialog.tsx
new file mode 100644
index 00000000..5e9cc3f5
--- /dev/null
+++ b/components/ui/sub-page-dialog.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Maximize2, X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = ({
+  className,
+  children,
+  ...props
+}: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal className={cn(className)} {...props}>
+    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+      {children}
+    </div>
+  </DialogPrimitive.Portal>
+)
+DialogPortal.displayName = DialogPrimitive.Portal.displayName
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    hideCloseButton?: boolean
+    hideMaximizeButton?: boolean
+    onMaximize?: () => void
+  }
+>(({ className, children, onMaximize, ...props }, ref) => {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {!props.hideCloseButton && (
+          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+        {!props.hideMaximizeButton && (
+          <button
+            onClick={onMaximize}
+            className="absolute right-12 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+          >
+            <Maximize2 className="h-4 w-4" />
+            <span className="sr-only">Maximize</span>
+          </button>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+})
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index 30fc44d9..e121f0ae 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
diff --git a/electron/electron-env.d.ts b/electron/electron-env.d.ts
index 0033ac7f..2b44396f 100644
--- a/electron/electron-env.d.ts
+++ b/electron/electron-env.d.ts
@@ -30,6 +30,7 @@ interface Window {
         openTabs: string[]
         config: import('./config/index').ConfigManager
         selectFolder: () => Promise<string | undefined>
+        openFolder: (folder: string) => Promise<void>
         isDataFolderSet: boolean
         reloadApp: () => Promise<void>
     }
diff --git a/electron/file-system/space.ts b/electron/file-system/space.ts
index 313f7256..88de2dad 100644
--- a/electron/file-system/space.ts
+++ b/electron/file-system/space.ts
@@ -22,7 +22,7 @@ export const getSpaceDbPath = (spaceName: string) => {
     return path.join(spaceFolder, 'db.sqlite3')
 }
 
-export const getFileFromPath = (pathname: string) => {
+export const getSpaceFileFromPath = (pathname: string) => {
     const root = getAppConfig().dataFolder
     // root/<spaceName>/files
     const filePath = path.join(root, 'spaces', pathname)
@@ -30,4 +30,11 @@ export const getFileFromPath = (pathname: string) => {
     const file = fs.readFileSync(filePath)
     // buffer to file
     return new File([file], pathname, { type: lookup(pathname) as string || 'application/octet-stream' })
+}
+
+export const getFileFromPath = (pathname: string) => {
+    const root = getAppConfig().dataFolder
+    const filePath = path.join(root, pathname)
+    const file = fs.readFileSync(filePath)
+    return new File([file], pathname, { type: lookup(pathname) as string || 'application/octet-stream' })
 }
\ No newline at end of file
diff --git a/electron/main.ts b/electron/main.ts
index 66a1bc0d..9ed11707 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -1,6 +1,6 @@
 import { MsgType } from '@/lib/const';
 import { handleFunctionCall } from '@/lib/rpc';
-import { app, BrowserWindow, dialog, ipcMain, Tray, Menu, nativeImage } from 'electron';
+import { app, BrowserWindow, dialog, ipcMain, Tray, Menu, nativeImage, shell } from 'electron';
 import path from 'path';
 import { getDataSpace, getOrSetDataSpace } from './data-space';
 import { startServer } from './server/server';
@@ -86,6 +86,24 @@ ipcMain.handle('select-folder', async () => {
     }
 });
 
+ipcMain.handle('open-folder', (event, folder) => {
+    if (folder) {
+        shell.openPath(folder)
+            .then((result) => {
+                if (result) {
+                    log(`Error opening folder: ${result}`);
+                } else {
+                    log(`Folder opened successfully: ${folder}`);
+                }
+            })
+            .catch((error) => {
+                log(`Error opening folder: ${error}`);
+            });
+    } else {
+        log('No folder path provided');
+    }
+});
+
 ipcMain.handle('reload-app', () => {
     app.relaunch();
     win?.reload()
@@ -161,4 +179,4 @@ app.on('activate', () => {
 ipcMain.handle('quit-app', () => {
     forceQuit = true;
     app.quit();
-});
\ No newline at end of file
+});
diff --git a/electron/preload.ts b/electron/preload.ts
index 2321e79e..1b4acba4 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -48,6 +48,7 @@ async function main() {
     },
     isDataFolderSet: !!configManager.get('dataFolder'),
     selectFolder: () => ipcRenderer.invoke('select-folder'),
+    openFolder: (folder: string) => ipcRenderer.invoke('open-folder', folder),
     reloadApp: () => ipcRenderer.invoke('reload-app')
     // You can expose other APIs you need here.
     // ...
diff --git a/electron/server/server.ts b/electron/server/server.ts
index 954f4d2b..c655b52f 100644
--- a/electron/server/server.ts
+++ b/electron/server/server.ts
@@ -3,7 +3,7 @@ import { Hono } from 'hono';
 import { getOrSetDataSpace } from '../data-space';
 import { serveStatic } from '@hono/node-server/serve-static';
 import { serve } from '@hono/node-server';
-import { getFileFromPath } from '../file-system/space';
+import { getFileFromPath, getSpaceFileFromPath } from '../file-system/space';
 import aiCompletionHandler, { pathname as aiCompletionPath } from '@/worker/service-worker/routes/ai_completion';
 import aiHandler, { pathname as aiPath } from '@/worker/service-worker/ai';
 import { log } from 'electron-log';
@@ -16,6 +16,15 @@ app.use('*', async (c, next) => {
     await next();
 });
 
+const handleStaticFile = async (c: any) => {
+    const pathname = new URL(c.req.url).pathname
+    const file = getFileFromPath(pathname)
+    const headers = new Headers()
+    headers.append("Content-Type", file.type)
+    headers.append("Cross-Origin-Embedder-Policy", "require-corp")
+    return new Response(file, { headers })
+}
+
 export function startServer({ dist, port }: { dist: string, port: number }) {
 
     // host static files
@@ -56,7 +65,7 @@ export function startServer({ dist, port }: { dist: string, port: number }) {
     app.get('/:space/files/:filename', async (c) => {
         const { space, filename } = c.req.param()
         const pathname = `/${space}/files/${filename}`
-        const file = getFileFromPath(pathname)
+        const file = getSpaceFileFromPath(pathname)
         const headers = new Headers()
         headers.append("Content-Type", file.type)
         headers.append("Cross-Origin-Embedder-Policy", "require-corp")
@@ -64,6 +73,10 @@ export function startServer({ dist, port }: { dist: string, port: number }) {
         return new Response(file, { headers })
     })
 
+    app.get('/static/*', async (c) => handleStaticFile(c))
+
+    app.get('/extensions/*', async (c) => handleStaticFile(c))
+
     // Fallback to index.html for non-existent paths
     app.use('*', serveStatic({ path: `${dist}/index.html` }));
 
diff --git a/hooks/use-mobile.tsx b/hooks/use-mobile.tsx
new file mode 100644
index 00000000..2b0fe1df
--- /dev/null
+++ b/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/lib/env.ts b/lib/env.ts
index 3778b5d6..ad389b7d 100644
--- a/lib/env.ts
+++ b/lib/env.ts
@@ -1,5 +1,5 @@
 export const logger = console
-export const EIDOS_VERSION = "0.7.8"
+export const EIDOS_VERSION = "0.7.9"
 export const isDevMode = Boolean(import.meta.env?.DEV)
 export const isSelfHosted = import.meta.env?.VITE_EIDOS_SELF_HOSTED === "true"
 export const isInkServiceMode =
diff --git a/lib/fields/number.ts b/lib/fields/number.ts
index 841630fa..add814f8 100644
--- a/lib/fields/number.ts
+++ b/lib/fields/number.ts
@@ -1,16 +1,22 @@
 import type { NumberCell } from "@glideapps/glide-data-grid"
 
+import { RangeCell } from "@/components/table/views/grid/cells/range-cell"
 import { BaseField } from "./base"
 import {
-  CompareOperator,
   FieldType,
   GridCellKind,
-  NUMBER_BASED_COMPARE_OPERATORS,
+  NUMBER_BASED_COMPARE_OPERATORS
 } from "./const"
 
-type NumberProperty = {}
+export type NumberProperty = {
+  format: "number" | "percent" | "currency"
+  showAs: "number" | "bar" | "ring"
+  color: string
+  divideBy: number
+  showNumber: boolean
+}
 
-export class NumberField extends BaseField<NumberCell, NumberProperty, number> {
+export class NumberField extends BaseField<NumberCell | RangeCell, NumberProperty, number> {
   static type = FieldType.Number
 
   get compareOperators() {
@@ -21,7 +27,34 @@ export class NumberField extends BaseField<NumberCell, NumberProperty, number> {
     return rawData
   }
 
-  getCellContent(rawData: number | undefined): NumberCell {
+  getCellContent(rawData: number | undefined): NumberCell | RangeCell {
+    // if rawData is undefined, we will display a blank cell
+    if (rawData == null) {
+      return {
+        kind: GridCellKind.Number,
+        data: undefined,
+        displayData: "",
+        allowOverlay: true,
+      }
+    }
+    if (this.column.property?.showAs === "bar") {
+      return {
+        kind: GridCellKind.Custom,
+        data: {
+          kind: "range-cell",
+          min: 0,
+          max: this.column.property?.divideBy || 100,
+          step: 1,
+          label: this.column.property?.showNumber
+            ? rawData?.toString() ?? ""
+            : "",
+          value: rawData ?? 0,
+          color: this.column.property?.color,
+        },
+        copyData: rawData?.toString() ?? "",
+        allowOverlay: true,
+      }
+    }
     return {
       kind: GridCellKind.Number,
       data: rawData,
@@ -30,7 +63,12 @@ export class NumberField extends BaseField<NumberCell, NumberProperty, number> {
     }
   }
 
-  cellData2RawData(cell: NumberCell) {
+  cellData2RawData(cell: NumberCell | RangeCell) {
+    if (cell.kind === GridCellKind.Custom) {
+      return {
+        rawData: cell.data.value
+      }
+    }
     return {
       rawData: cell.data ?? null,
     }
diff --git a/lib/fields/select.ts b/lib/fields/select.ts
index edd76dfa..37a34993 100644
--- a/lib/fields/select.ts
+++ b/lib/fields/select.ts
@@ -125,6 +125,11 @@ export class SelectField extends BaseField<SelectCell, SelectProperty> {
     }, {} as Record<string, string>),
   }
 
+  /**
+   * @param colorName name of the color. eg "default" | "gray"
+   * @param theme theme of the color. eg "light" | "dark"
+   * @returns hex value of the color. eg "#cccccc"
+   */
   static getColorValue(colorName: string, theme: "light" | "dark" = "light") {
     return `#${SelectField.colorNameValueMap[theme][colorName]}`
   }
diff --git a/lib/rpc.ts b/lib/rpc.ts
index e728fbdc..210c8fae 100644
--- a/lib/rpc.ts
+++ b/lib/rpc.ts
@@ -1,4 +1,5 @@
 import { DataSpace } from "@/worker/web-worker/DataSpace"
+import { workerStore } from "@/worker/web-worker/store"
 
 export const handleFunctionCall = async (
     data: {
@@ -14,6 +15,7 @@ export const handleFunctionCall = async (
         throw new Error("DataSpace is null")
     }
     const { method, params = [] } = data
+    workerStore.currentCallUserId = data.userId
     let callMethod: Function = () => { }
     if (method.includes(".")) {
         let obj: any = dataSpace
diff --git a/lib/store/app-store.ts b/lib/store/app-store.ts
index ed12d8d8..affa9f79 100644
--- a/lib/store/app-store.ts
+++ b/lib/store/app-store.ts
@@ -2,6 +2,8 @@
 
 import { create } from "zustand"
 import { persist } from "zustand/middleware"
+import { useSidebar } from "@/components/ui/sidebar"
+import { useEffect } from "react"
 
 interface AppState {
   lastOpenedTable: string
@@ -13,18 +15,14 @@ interface AppState {
   aiModel: string
   setAIModel: (model: string) => void
 
-  isSidebarOpen: boolean
-  setSidebarOpen: (isSidebarOpen: boolean) => void
-
   isFileManagerOpen: boolean
   setFileManagerOpen: (isOpen: boolean) => void
+
 }
 
-export const useAppStore = create<AppState>()(
+const useAppStoreBase = create<AppState>()(
   persist(
     (set) => ({
-      isSidebarOpen: true,
-      setSidebarOpen: (isSidebarOpen) => set({ isSidebarOpen }),
 
       isFileManagerOpen: false,
       setFileManagerOpen: (isFileManagerOpen) => set({ isFileManagerOpen }),
@@ -44,3 +42,19 @@ export const useAppStore = create<AppState>()(
     }
   )
 )
+
+export const useAppStore = () => {
+  const store = useAppStoreBase()
+  const { open, setOpen } = useSidebar()
+
+
+
+
+  return {
+    ...store,
+    isSidebarOpen: open,
+    setSidebarOpen: (isOpen: boolean) => {
+      setOpen(isOpen)
+    }
+  }
+}
diff --git a/lib/utils.ts b/lib/utils.ts
index 31a889e4..495f1c4c 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -111,10 +111,10 @@ export const getWeek = (day: string) => {
     return parseInt(day.split("-w")[1])
   }
   const date = new Date(day)
-  const onejan = new Date(date.getFullYear(), 0, 1)
-  return Math.ceil(
-    ((date.getTime() - onejan.getTime()) / 86400000 + onejan.getDay() + 1) / 7
-  )
+  date.setHours(0, 0, 0, 0)
+  date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7)
+  const week1 = new Date(date.getFullYear(), 0, 4)
+  return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7)
 }
 
 /**
@@ -125,15 +125,24 @@ export const getWeek = (day: string) => {
 export const getDaysByYearWeek = (weekNodeId: string) => {
   const year = parseInt(weekNodeId.slice(0, 4))
   const week = parseInt(weekNodeId.slice(6))
-  const d = new Date(year, 0, 1)
-  const w = d.getDay()
-  const target = w > 4 ? 1 : 0
-  const day = d.getDate() + (w <= 4 ? 1 : 8) - w
+  
+  // Find the first day of the year
+  const firstDayOfYear = new Date(year, 0, 1)
+  
+  // Find the first Monday of the year
+  const firstMonday = new Date(year, 0, 1 + (8 - firstDayOfYear.getDay()) % 7)
+  
+  // Calculate the start date of the requested week
+  const startDate = new Date(firstMonday.getTime())
+  startDate.setDate(firstMonday.getDate() + (week - 1) * 7)
+  
   const days = []
   for (let i = 0; i < 7; i++) {
-    const date = new Date(year, 0, day + (week - 1) * 7 + i + target)
+    const date = new Date(startDate.getTime())
+    date.setDate(startDate.getDate() + i)
     days.push(getLocalDate(date))
   }
+  
   return days
 }
 
diff --git a/package.json b/package.json
index 1e08c272..cba11f3d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eidos",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "private": true,
   "type": "module",
   "description": "Eidos is an extensible framework for managing your personal data throughout your lifetime in one place.",
@@ -48,7 +48,6 @@
     "npmRebuild": true,
     "generateUpdatesFilesForAllChannels": true,
     "files": [
-      "!node_modules",
       "dist/**/*",
       "dist-electron/**/*",
       "dist-simple/**/*",
diff --git a/styles/globals.css b/styles/globals.css
index 6d0b98ba..5a885e1c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -37,6 +37,15 @@ html {
   z-index: 9;
 }
 
+
+#title-bar-mac {
+  margin-top: env(titlebar-area-y, 0);
+  height: env(titlebar-area-height, 32px);
+  width: env(titlebar-area-width, 100%);
+  z-index: 9;
+}
+
+
 #drag-region {
   -webkit-app-region: drag;
 }
@@ -44,33 +53,33 @@ html {
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
+    --foreground: 0 0% 3.9%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+    --popover-foreground: 0 0% 3.9%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+    --card-foreground: 0 0% 3.9%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
 
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
 
-    --ring: 215 20.2% 65.1%;
+    --ring: 0 0% 3.9%;
 
     --radius: 0.5rem;
 
@@ -88,37 +97,50 @@ html {
     --rhm-text-color: #24292e;
     --rhm-rect-hover-stroke: rgba(0, 0, 0, 0.14);
     --rhm-rect-active: #196127;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
 
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
 
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
 
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
 
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
 
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
 
-    --ring: 216 34% 17%;
+    --ring: 0 0% 83.1%;
 
     --radius: 0.5rem;
 
@@ -136,6 +158,19 @@ html {
     --rhm-text-color: #c9d1d9;
     --rhm-rect-hover-stroke: rgba(255, 255, 255, 0.14);
     --rhm-rect-active: #196127;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 86dceb60..05dc73d8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,6 +17,7 @@ const overrideProse = {
     background: "var(--tw-prose-hr)",
   },
 }
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
@@ -27,7 +28,7 @@ module.exports = {
       ...defaultTheme.screens,
     },
     container: {
-      center: true,
+      center: "true",
       padding: "2rem",
       screens: {
         "2xl": "1400px",
@@ -36,16 +37,38 @@ module.exports = {
     extend: {
       keyframes: {
         "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-        gradient: {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
           to: {
-            backgroundPosition: "var(--bg-size) 0",
+            height: "0",
+          },
+        },
+        "border-flicker": {
+          "0%, 100%": {
+            borderColor: "hsl(var(--primary))",
+          },
+          "50%": {
+            borderColor: "hsl(var(--secondary))",
+          },
+        },
+        gradientBorder: {
+          "0%": {
+            backgroundPosition: "0% 50%",
+          },
+          "50%": {
+            backgroundPosition: "100% 50%",
+          },
+          "100%": {
+            backgroundPosition: "0% 50%",
           },
         },
       },
@@ -53,8 +76,8 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         gradient: "gradient 8s linear infinite",
+        "border-flicker": "border-flicker 3s linear infinite",
       },
-
       typography: {
         DEFAULT: {
           css: {
@@ -64,12 +87,12 @@ module.exports = {
         },
         xl: {
           css: {
-            ...overrideProse,
+            overrideProse,
           },
         },
         "2xl": {
           css: {
-            ...overrideProse,
+            overrideProse,
           },
         },
       },
@@ -107,6 +130,16 @@ module.exports = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
       },
       borderRadius: {
         lg: `var(--radius)`,
@@ -116,31 +149,6 @@ module.exports = {
       fontFamily: {
         sans: fontFamily.sans,
       },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-        "border-flicker": {
-          "0%, 100%": { borderColor: "hsl(var(--primary))" },
-          "50%": { borderColor: "hsl(var(--secondary))" },
-        },
-        gradientBorder: {
-          "0%": { backgroundPosition: "0% 50%" },
-          "50%": { backgroundPosition: "100% 50%" },
-          "100%": { backgroundPosition: "0% 50%" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        gradient: "gradient 8s linear infinite",
-        "border-flicker": "border-flicker 3s linear infinite",
-      },
     },
   },
   plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
diff --git a/vite.config.ts b/vite.config.ts
index 0c17b327..e1e09952 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -194,7 +194,15 @@ const config = defineConfig({
       '^/[^/]+/files/[^/]+$': {
         target: 'http://localhost:13127',
         changeOrigin: true,
-        rewrite: (path) => path, // 保持路径不变
+        rewrite: (path) => path,
+      },
+      '/static/': {
+        target: 'http://localhost:13127',
+        changeOrigin: true,
+      },
+      '/extensions/': {
+        target: 'http://localhost:13127',
+        changeOrigin: true,
       },
     },
   },