From b0e941e4e2db1c3cc60bdd1507bed5ba4743d67d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 20 Mar 2025 16:43:45 +0530
Subject: [PATCH] [WEB-3590] chore: sidebar enhancements (#6780)

* chore: implement optimistic update for extended sidebar item

* chore: replace eye icon with pin icon for show/hide functionality

* chore: code refactor

* chore: code refactor
---
 .../sidebar/extended-sidebar-item.tsx          | 14 +++++++-------
 web/core/store/workspace/index.ts              | 18 +++++++++++++++---
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx b/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
index 22cfe08421..5bb2fe885f 100644
--- a/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
+++ b/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
@@ -5,7 +5,7 @@ import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
-import { Eye, EyeClosed } from "lucide-react";
+import { Pin, PinOff } from "lucide-react";
 // plane imports
 import { EUserPermissionsLevel, IWorkspaceSidebarNavigationItem } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -197,16 +197,16 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
               </div>
             )}
             {isPinned ? (
-              <Tooltip tooltipContent="Hide tab">
-                <Eye
-                  className="size-4 flex-shrink-0 hover:text-custom-text-200 text-custom-text-300 outline-none"
+              <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)}
                 />
               </Tooltip>
             ) : (
-              <Tooltip tooltipContent="Show tab">
-                <EyeClosed
-                  className="size-4 flex-shrink-0 hover:text-custom-text-200 text-custom-text-400 outline-none"
+              <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)}
                 />
               </Tooltip>
diff --git a/web/core/store/workspace/index.ts b/web/core/store/workspace/index.ts
index f46ecc273e..811d0f9633 100644
--- a/web/core/store/workspace/index.ts
+++ b/web/core/store/workspace/index.ts
@@ -1,3 +1,4 @@
+import clone from "lodash/clone";
 import set from "lodash/set";
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
 // types
@@ -214,18 +215,29 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
     key: string,
     data: Partial<IWorkspaceSidebarNavigationItem>
   ) => {
+    // Store the data before update to use for reverting if needed
+    const beforeUpdateData = clone(this.navigationPreferencesMap[workspaceSlug]?.[key]);
     try {
-      const response = await this.workspaceService.updateSidebarPreference(workspaceSlug, key, data);
-
       runInAction(() => {
         this.navigationPreferencesMap[workspaceSlug] = {
           ...this.navigationPreferencesMap[workspaceSlug],
-          [key]: response,
+          [key]: {
+            ...beforeUpdateData,
+            ...data,
+          },
         };
       });
 
+      const response = await this.workspaceService.updateSidebarPreference(workspaceSlug, key, data);
       return response;
     } catch (error) {
+      // Revert to original data if API call fails
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = {
+          ...this.navigationPreferencesMap[workspaceSlug],
+          [key]: beforeUpdateData,
+        };
+      });
       console.error("Failed to update sidebar preference:", error);
     }
   };