Fixing issues with Tree and Navigation

dust-tt · Jan 2, 2025 · 199e983 · 199e983
1 parent 440e5d0
commit 199e983
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 174 deletions.
diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -16,7 +16,6 @@ import {
   NavigationListLabel,
   PlusIcon,
   RobotIcon,
-  ScrollArea,
   TrashIcon,
   XMarkIcon,
 } from "@dust-tt/sparkle";
@@ -278,7 +277,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
                 Error loading conversations
               </Label>
             )}
-            <ScrollArea className="w-full px-2">
+            <NavigationList className="w-full px-2">
               {conversationsByDate &&
                 Object.keys(conversationsByDate).map((dateLabel) => (
                   <RenderConversations
@@ -292,7 +291,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
                     owner={owner}
                   />
                 ))}
-            </ScrollArea>
+            </NavigationList>
           </div>
         </div>
       </div>
@@ -318,18 +317,16 @@ const RenderConversations = ({
   }
 
   return (
-    <div>
+    <>
       <NavigationListLabel label={dateLabel} />
-      <NavigationList>
-        {conversations.map((conversation) => (
-          <RenderConversation
-            key={conversation.sId}
-            conversation={conversation}
-            {...props}
-          />
-        ))}
-      </NavigationList>
-    </div>
+      {conversations.map((conversation) => (
+        <RenderConversation
+          key={conversation.sId}
+          conversation={conversation}
+          {...props}
+        />
+      ))}
+    </>
   );
 };
 

diff --git a/front/components/navigation/NavigationSidebar.tsx b/front/components/navigation/NavigationSidebar.tsx
@@ -93,13 +93,13 @@ export const NavigationSidebar = React.forwardRef<
                   />
                 ))}
               </TabsList>
-              {navs.map((tab) => (
-                <TabsContent key={tab.id} value={tab.id}>
-                  {subNavigation && tab.isCurrent(activePath) && (
-                    <>
-                      {subNavigation.map((nav) => (
-                        <div key={nav.id} className="px-2">
-                          <NavigationList>
+              <NavigationList className="px-2">
+                {navs.map((tab) => (
+                  <TabsContent key={tab.id} value={tab.id}>
+                    {subNavigation && tab.isCurrent(activePath) && (
+                      <>
+                        {subNavigation.map((nav) => (
+                          <div key={nav.id}>
                             {nav.label && (
                               <NavigationListLabel
                                 label={nav.label}
@@ -136,13 +136,13 @@ export const NavigationSidebar = React.forwardRef<
                                 )}
                               </React.Fragment>
                             ))}
-                          </NavigationList>
-                        </div>
-                      ))}
-                    </>
-                  )}
-                </TabsContent>
-              ))}
+                          </div>
+                        ))}
+                      </>
+                    )}
+                  </TabsContent>
+                ))}
+              </NavigationList>
             </Tabs>
           </div>
         )}

diff --git a/front/components/spaces/SpaceSideBarMenu.tsx b/front/components/spaces/SpaceSideBarMenu.tsx
@@ -7,7 +7,6 @@ import {
   NavigationList,
   NavigationListLabel,
   PlusIcon,
-  ScrollArea,
   Tree,
 } from "@dust-tt/sparkle";
 import type {
@@ -106,74 +105,65 @@ export default function SpaceSideBarMenu({
     return spaces.map((space) => (
       <Fragment key={`space-${space.sId}`}>
         {space.kind === "system" ? (
-          <NavigationList>
-            <SystemSpaceMenu owner={owner} space={space} />
-          </NavigationList>
+          <SystemSpaceMenu owner={owner} space={space} />
         ) : (
-          <NavigationList>
-            <SpaceMenu
-              owner={owner}
-              space={space}
-              isMember={!!spacesAsUser.find((v) => v.sId === space.sId)}
-            />
-          </NavigationList>
+          <SpaceMenu
+            owner={owner}
+            space={space}
+            isMember={!!spacesAsUser.find((v) => v.sId === space.sId)}
+          />
         )}
       </Fragment>
     ));
   };
 
   return (
     <div className="flex h-0 min-h-full w-full overflow-y-auto">
-      <ScrollArea className="w-full">
-        <div className="px-2 pb-2">
-          <NavigationList>
-            {sortedGroupedSpaces.map(({ section, spaces }, index) => {
-              if (section === "public" && !spaces.length) {
-                return null;
-              }
-
-              if (section === "restricted" && !spaces.length && !isAdmin) {
-                return null;
-              }
-
-              const sectionDetails = getSpaceSectionDetails(section);
-
-              return (
-                <Fragment key={`space-section-${index}`}>
-                  <div className="flex items-center justify-between pr-1">
-                    <NavigationListLabel
-                      label={sectionDetails.label}
-                      variant="secondary"
+      <NavigationList className="w-full px-2 pb-2">
+        {sortedGroupedSpaces.map(({ section, spaces }, index) => {
+          if (section === "public" && !spaces.length) {
+            return null;
+          }
+
+          if (section === "restricted" && !spaces.length && !isAdmin) {
+            return null;
+          }
+
+          const sectionDetails = getSpaceSectionDetails(section);
+
+          return (
+            <Fragment key={`space-section-${index}`}>
+              <div className="flex items-center justify-between pr-1">
+                <NavigationListLabel
+                  label={sectionDetails.label}
+                  variant="secondary"
+                />
+                {sectionDetails.displayCreateSpaceButton &&
+                  isAdmin &&
+                  openSpaceCreationModal && (
+                    <Button
+                      className="mt-4"
+                      size="xs"
+                      variant="ghost"
+                      label="New"
+                      icon={PlusIcon}
+                      onClick={() =>
+                        openSpaceCreationModal({
+                          defaultRestricted: sectionDetails.defaultRestricted,
+                        })
+                      }
                     />
-                    {sectionDetails.displayCreateSpaceButton &&
-                      isAdmin &&
-                      openSpaceCreationModal && (
-                        <Button
-                          className="mt-4"
-                          size="xs"
-                          variant="ghost"
-                          label="New"
-                          icon={PlusIcon}
-                          onClick={() =>
-                            openSpaceCreationModal({
-                              defaultRestricted:
-                                sectionDetails.defaultRestricted,
-                            })
-                          }
-                        />
-                      )}
-                  </div>
-                  {renderSpaceItems(
-                    spaces.toSorted(compareSpaces),
-                    spacesAsUser,
-                    owner
                   )}
-                </Fragment>
-              );
-            })}
-          </NavigationList>
-        </div>
-      </ScrollArea>
+              </div>
+              {renderSpaceItems(
+                spaces.toSorted(compareSpaces),
+                spacesAsUser,
+                owner
+              )}
+            </Fragment>
+          );
+        })}
+      </NavigationList>
     </div>
   );
 }

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.350",
+  "version": "0.2.351",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

diff --git a/sparkle/src/components/NavigationList.tsx b/sparkle/src/components/NavigationList.tsx
@@ -13,42 +13,28 @@ import { Button } from "@sparkle/components/Button";
 import { MoreIcon } from "@sparkle/icons";
 import { cn } from "@sparkle/lib/utils";
 
-const listStyles = cva("s-flex", {
-  variants: {
-    layout: {
-      container: "s-gap-1 s-relative s-flex-col s-overflow-hidden",
-      item: cn(
-        "s-box-border s-items-center s-w-full s-flex s-gap-1.5 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-xl s-text-sm s-px-3 s-py-2 s-transition-colors s-duration-300",
-        "data-[disabled]:s-pointer-events-none data-[disabled]:s-text-muted-foreground",
-        "hover:s-text-foreground hover:s-bg-structure-150"
-      ),
+const NavigationListItemStyles = cva(
+  "s-box-border s-flex s-items-center s-w-full s-gap-1.5 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-xl s-text-sm s-px-3 s-py-2 s-transition-colors s-duration-300 data-[disabled]:s-pointer-events-none data-[disabled]:s-text-muted-foreground hover:s-text-foreground hover:s-bg-structure-150",
+  {
+    variants: {
+      state: {
+        active: "active:s-bg-structure-200",
+        selected: "s-text-foreground s-font-medium s-bg-structure-150",
+        unselected: "s-text-muted-foreground",
+      },
     },
-    state: {
-      active: "active:s-bg-structure-200",
-      selected: "s-text-foreground s-font-medium s-bg-structure-150",
-      unselected: "s-text-muted-foreground",
+    defaultVariants: {
+      state: "unselected",
     },
-  },
-  defaultVariants: {
-    layout: "container",
-    state: "unselected",
-  },
-});
-
-const labelStyles = cva(
-  "s-font-semibold s-pt-6 s-pb-2 s-text-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
+  }
 );
 
 const NavigationList = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollArea
-    ref={ref}
-    className={cn(listStyles({ layout: "container" }), className)}
-    {...props}
-  >
-    {children}
+  <ScrollArea ref={ref} className={className} {...props}>
+    <div className="s-flex s-flex-col s-gap-0.5">{children}</div>
     <ScrollBar />
   </ScrollArea>
 ));
@@ -109,8 +95,7 @@ const NavigationListItem = React.forwardRef<
           <div
             className={cn(
               "s-peer/menu-button",
-              listStyles({
-                layout: "item",
+              NavigationListItemStyles({
                 state: selected
                   ? "selected"
                   : isPressed
@@ -181,6 +166,10 @@ const variantStyles = cva("", {
   },
 });
 
+const labelStyles = cva(
+  "s-font-semibold s-pt-4 s-pb-2 s-text-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
+);
+
 interface NavigationListLabelProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof variantStyles> {

diff --git a/sparkle/src/components/Tree.tsx b/sparkle/src/components/Tree.tsx
@@ -1,12 +1,11 @@
 import React, { ComponentType, ReactNode, useState } from "react";
 
-import Spinner from "@sparkle/components/Spinner";
+import { Button, Spinner } from "@sparkle/components/";
 import { ArrowDownSIcon, ArrowRightSIcon } from "@sparkle/icons";
 import { cn } from "@sparkle/lib/utils";
 
 import { Checkbox, CheckboxProps } from "./Checkbox";
 import { Icon } from "./Icon";
-import { IconButton } from "./IconButton";
 
 export interface TreeProps {
   children?: ReactNode;
@@ -64,9 +63,9 @@ export function Tree({
 }
 
 const treeItemStyleClasses = {
-  base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-py-2",
+  base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-h-9",
   isNavigatableBase:
-    "s-rounded-xl s-pl-1.5 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
+    "s-rounded-xl s-pl-1 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
   isNavigatableUnselected: "s-bg-structure-150/0 hover:s-bg-structure-150",
   isNavigatableSelected: "s-font-medium s-bg-structure-150",
 };
@@ -160,10 +159,10 @@ Tree.Item = function ({
         onClick={onItemClick}
       >
         {type === "node" && (
-          <IconButton
+          <Button
             icon={isExpanded ? ArrowDownSIcon : ArrowRightSIcon}
             size="xs"
-            variant="outline"
+            variant="ghost-secondary"
             onClick={(e) => {
               e.stopPropagation();
               if (effectiveOnChevronClick) {