📝 (select-options.tsx): Refactor SelectOptions component to improve r…

…eadability and maintainability by restructuring the JSX elements and adding proper classNames 📝 (index.tsx): Introduce state for hoveredFolderId to track the currently hovered folder in the SideBarFoldersButtonsComponent for better user interaction and visual feedback. Update SidebarMenuItem to include onMouseEnter and onMouseLeave events to set and clear the hoveredFolderId state respectively. Update SidebarMenuButton className to conditionally apply background color based on the hoveredFolderId state.
langflow-ai · Dec 12, 2024 · 0ffc618 · 0ffc618
1 parent e8c2087
commit 0ffc618
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 48 deletions.
diff --git a/...core/folderSidebarComponent/components/sideBarFolderButtons/components/select-options.tsx b/...core/folderSidebarComponent/components/sideBarFolderButtons/components/select-options.tsx
@@ -27,52 +27,54 @@ export const SelectOptions = ({
   checkPathName: (folderId: string) => boolean;
 }) => {
   return (
-    <Select
-      onValueChange={(value) =>
-        handleSelectChange(
-          value,
-          item,
-          handleDeleteFolder,
-          handleDownloadFolder,
-          handleSelectFolderToRename,
-        )
-      }
-      value=""
-    >
-      <ShadTooltip content="Options" side="right" styleClasses="z-50">
-        <SelectTrigger
-          className={cn(
-            "w-fit p-0",
-            checkPathName(item.id!) ? "block" : "hidden",
-          )}
-          id={`options-trigger-${item.name}`}
-          data-testid="more-options-button"
-        >
-          <IconComponent
-            name="MoreHorizontal"
-            className="w-4 stroke-[1.5] px-0 text-muted-foreground group-hover/menu-button:text-foreground"
-          />
-        </SelectTrigger>
-      </ShadTooltip>
-      <SelectContent align="end" alignOffset={-16} position="popper">
-        {item.name !== "My Projects" && (
-          <SelectItem
-            id="rename-button"
-            value="rename"
-            data-testid="btn-rename-folder"
+    <div>
+      <Select
+        onValueChange={(value) =>
+          handleSelectChange(
+            value,
+            item,
+            handleDeleteFolder,
+            handleDownloadFolder,
+            handleSelectFolderToRename,
+          )
+        }
+        value=""
+      >
+        <ShadTooltip content="Options" side="right" styleClasses="z-50">
+          <SelectTrigger
+            className="w-fit"
+            id={`options-trigger-${item.name}`}
+            data-testid="more-options-button"
           >
-            <FolderSelectItem name="Rename" iconName="SquarePen" />
-          </SelectItem>
-        )}
-        <SelectItem value="download" data-testid="btn-download-folder">
-          <FolderSelectItem name="Download Content" iconName="Download" />
-        </SelectItem>
-        {index > 0 && (
-          <SelectItem value="delete" data-testid="btn-delete-folder">
-            <FolderSelectItem name="Delete" iconName="Trash2" />
+            <IconComponent
+              name={"MoreHorizontal"}
+              className={cn(
+                `w-4 stroke-[1.5] px-0 text-muted-foreground group-hover/menu-button:block group-hover/menu-button:text-foreground`,
+                checkPathName(item.id!) ? "block" : "hidden",
+              )}
+            />
+          </SelectTrigger>
+        </ShadTooltip>
+        <SelectContent align="end" alignOffset={-16} position="popper">
+          {item.name !== "My Projects" && (
+            <SelectItem
+              id="rename-button"
+              value="rename"
+              data-testid="btn-rename-folder"
+            >
+              <FolderSelectItem name="Rename" iconName="SquarePen" />
+            </SelectItem>
+          )}
+          <SelectItem value="download" data-testid="btn-download-folder">
+            <FolderSelectItem name="Download Content" iconName="Download" />
           </SelectItem>
-        )}
-      </SelectContent>
-    </Select>
+          {index > 0 && (
+            <SelectItem value="delete" data-testid="btn-delete-folder">
+              <FolderSelectItem name="Delete" iconName="Trash2" />
+            </SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+    </div>
   );
 };
diff --git a/...tend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx b/...tend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
@@ -333,6 +333,8 @@ const SideBarFoldersButtonsComponent = ({
     }
   };
 
+  const [hoveredFolderId, setHoveredFolderId] = useState<string | null>(null);
+
   return (
     <Sidebar
       collapsible={isMobile ? "offcanvas" : "none"}
@@ -356,7 +358,12 @@ const SideBarFoldersButtonsComponent = ({
                     (folder) => folder.name === item.name,
                   )[0];
                   return (
-                    <SidebarMenuItem key={index}>
+                    <SidebarMenuItem
+                      key={index}
+                      className="group/menu-button"
+                      onMouseEnter={() => setHoveredFolderId(item.id!)}
+                      onMouseLeave={() => setHoveredFolderId(null)}
+                    >
                       <div className="relative flex w-full">
                         <SidebarMenuButton
                           size="md"
@@ -369,7 +376,8 @@ const SideBarFoldersButtonsComponent = ({
                           isActive={checkPathName(item.id!)}
                           onClick={() => handleChangeFolder!(item.id!)}
                           className={cn(
-                            "group/menu-button flex-grow pr-8", // Added padding-right to make room for options
+                            "flex-grow pr-8",
+                            hoveredFolderId === item.id && "bg-accent",
                             checkHoveringFolder(item.id!),
                           )}
                         >
@@ -401,7 +409,7 @@ const SideBarFoldersButtonsComponent = ({
                         </SidebarMenuButton>
                         <div
                           className="absolute right-2 top-[0.45rem] flex items-center hover:text-foreground"
-                          onClick={(e) => e.stopPropagation()} // Prevent click from triggering parent button
+                          onClick={(e) => e.stopPropagation()}
                         >
                           <SelectOptions
                             item={item}