[WEB-5609] fix: extended sidebar item pin/unpin #8287

Author: anmolsinghbhatia

apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx

@@ -17,9 +17,8 @@ import { cn } from "@plane/utils";
 import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
-// plane web imports
+import { useWorkspaceNavigationPreferences } from "@/hooks/use-navigation-preferences";
 // local imports
 import { UpgradeBadge } from "../upgrade-badge";
 import { getSidebarNavigationItemIcon } from "./helper";
@@ -50,33 +49,16 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
   const pathname = usePathname();
   const { workspaceSlug } = useParams();
   // store hooks
-  const { getNavigationPreferences, updateSidebarPreference } = useWorkspace();
   const { toggleExtendedSidebar } = useAppTheme();
   const { data } = useUser();
   const { allowPermissions } = useUserPermissions();
+  const { preferences: workspacePreferences, toggleWorkspaceItem } = useWorkspaceNavigationPreferences();
 
   // derived values
-  const sidebarPreference = getNavigationPreferences(workspaceSlug.toString());
-  const isPinned = sidebarPreference?.[item.key]?.is_pinned;
+  const isPinned = workspacePreferences.items[item.key]?.is_pinned ?? false;
 
   const handleLinkClick = () => toggleExtendedSidebar(true);
 
-  const itemHref =
-    item.key === "your_work"
-      ? `/${workspaceSlug.toString()}${item.href}${data?.id}`
-      : `/${workspaceSlug.toString()}${item.href}`;
-  const isActive = itemHref === pathname;
-
-  const pinNavigationItem = (workspaceSlug: string, key: string) => {
-    updateSidebarPreference(workspaceSlug, key, { is_pinned: true });
-  };
-
-  const unPinNavigationItem = (workspaceSlug: string, key: string) => {
-    updateSidebarPreference(workspaceSlug, key, { is_pinned: false });
-  };
-
-  const icon = getSidebarNavigationItemIcon(item.key);
-
   useEffect(() => {
     const element = navigationIemRef.current;
     const dragHandleElement = dragHandleRef.current;
@@ -146,14 +128,32 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
     );
   }, [isLastChild, handleOnNavigationItemDrop, disableDrag, disableDrop, item.key]);
 
+  const itemHref =
+    item.key === "your_work"
+      ? `/${workspaceSlug.toString()}${item.href}${data?.id}`
+      : `/${workspaceSlug.toString()}${item.href}`;
+  const isActive = itemHref === pathname;
+
+  const pinNavigationItem = (key: string) => {
+    toggleWorkspaceItem(key, true);
+  };
+
+  const unPinNavigationItem = (key: string) => {
+    toggleWorkspaceItem(key, false);
+  };
+
+  const icon = getSidebarNavigationItemIcon(item.key);
+
   if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
     return null;
   }
 
   return (
     <div
       id={`sidebar-${item.key}`}
-      className={cn("relative", { "bg-custom-sidebar-background-80 opacity-60": isDragging })}
+      className={cn("relative", {
+        "bg-custom-sidebar-background-80 opacity-60": isDragging,
+      })}
       ref={navigationIemRef}
     >
       <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
@@ -167,15 +167,16 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
           <Tooltip
             // isMobile={isMobile}
             tooltipContent={t("drag_to_rearrange")}
-            position="top-end"
+            position="top-start"
             disabled={isDragging}
           >
             <button
               type="button"
               className={cn(
-                "flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+                "flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab group-hover/project-item:opacity-100 opacity-0",
                 {
                   "cursor-grabbing": isDragging,
+                  "opacity-100": isDragging,
                 }
               )}
               ref={dragHandleRef}
@@ -201,14 +202,14 @@ export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props:
               <Tooltip tooltipContent="Unpin">
                 <PinOff
                   className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
-                  onClick={() => unPinNavigationItem(workspaceSlug.toString(), item.key)}
+                  onClick={() => unPinNavigationItem(item.key)}
                 />
               </Tooltip>
             ) : (
               <Tooltip tooltipContent="Pin">
                 <Pin
                   className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
-                  onClick={() => pinNavigationItem(workspaceSlug.toString(), item.key)}
+                  onClick={() => pinNavigationItem(item.key)}
                 />
               </Tooltip>
             )}