feat: improve the tree view design

outerbase · Aug 11, 2024 · 1b95138 · 1b95138
1 parent 7d76b51
commit 1b95138
Show file tree

Hide file tree

Showing 11 changed files with 289 additions and 268 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -26,7 +26,7 @@ body {
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: #fff;
     --foreground: 222.2 84% 4.9%;
 
     --color-surface: #fff;

diff --git a/src/app/storybook/listview/page.tsx b/src/app/storybook/listview/page.tsx
@@ -39,7 +39,7 @@ export default function ListViewStorybookPage() {
               },
               {
                 name: "delete_movies",
-                key: "movies.delete_reviews",
+                key: "movies.delete_movies",
                 icon: LucideTable,
               },
             ],
@@ -73,6 +73,31 @@ export default function ListViewStorybookPage() {
           onSelectChange={setSelected}
         />
       </div>
+      <br />
+      <div className="w-[300px] border-r">
+        <ListView
+          items={[
+            {
+              name: "insert_movies",
+              key: "movies.insert_movies",
+              icon: LucideTable,
+              data: {},
+            },
+            {
+              name: "update_movies",
+              key: "movies.update_users",
+              icon: LucideTable,
+              data: {},
+            },
+            {
+              name: "delete_movies",
+              key: "movies.delete_movies",
+              icon: LucideTable,
+              data: {},
+            },
+          ]}
+        />
+      </div>
     </body>
   );
 }
diff --git a/src/components/gui/database-gui.tsx b/src/components/gui/database-gui.tsx
@@ -134,7 +134,7 @@ export default function DatabaseGui() {
         <ResizablePanel minSize={5} defaultSize={defaultWidthPercentage}>
           <SidebarTab tabs={sidebarTabs} />
         </ResizablePanel>
-        <ResizableHandle />
+        <ResizableHandle withHandle />
         <ResizablePanel defaultSize={100 - defaultWidthPercentage}>
           <WindowTabs
             menu={tabSideMenu}

diff --git a/src/components/gui/sidebar-tab.tsx b/src/components/gui/sidebar-tab.tsx
@@ -127,11 +127,11 @@ export default function SidebarTab({ tabs }: Readonly<SidebarTabProps>) {
               key={tab.key}
               style={{
                 contentVisibility: selected ? "auto" : "hidden",
-                zIndex: selected ? 1 : 0,
+                zIndex: selected ? 0 : -1,
                 position: "absolute",
                 display: "flex",
                 left: 0,
-                right: 5,
+                right: 0,
                 bottom: 0,
                 top: 0,
               }}

diff --git a/src/components/gui/sidebar/saved-doc-tab/create-namespace-button.tsx b/src/components/gui/sidebar/saved-doc-tab/create-namespace-button.tsx
@@ -57,7 +57,7 @@ export default function CreateNamespaceButton({
           <Button
             size="sm"
             variant="ghost"
-            className=" mx-2 mb-2 -mt-2 w-full justify-start"
+            className="mb-1 flex w-full justify-start"
           >
             <LucidePlus className="w-4 h-4 mr-2" />
             Create Namespace