[WEB-3291] dev: app sidebar revamp (#6578)

* chore: workspace constant and types updated

* chore: workspace service, store and app theme store updated

* dev: extended sidebar implementation and code refactor

* chore: ux improvements

* chore: sidebar preference endpoint updated

* chore: sidebar preference endpoint updated

* chore: sidebar preference endpoint updated

* chore: code refactor

* chore: code refactor

* chore: radix-ui react-scroll-area added to plane ui package

* chore: scrollbar color token added to tailwind config

* dev: scroll area component

* chore-scroll-area-component-improvement

* fix: build error

* chore: code refactor

---------

Co-authored-by: sangeethailango <sangeethailango21@gmail.com>

web/core/store/theme.store.ts

@@ -3,6 +3,8 @@ import { action, observable, makeObservable } from "mobx";
 export interface IThemeStore {
   // observables
   sidebarCollapsed: boolean | undefined;
+  extendedSidebarCollapsed: boolean | undefined;
+  extendedProjectSidebarCollapsed: boolean | undefined;
   profileSidebarCollapsed: boolean | undefined;
   workspaceAnalyticsSidebarCollapsed: boolean | undefined;
   issueDetailSidebarCollapsed: boolean | undefined;
@@ -11,6 +13,8 @@ export interface IThemeStore {
   projectOverviewSidebarCollapsed: boolean | undefined;
   // actions
   toggleSidebar: (collapsed?: boolean) => void;
+  toggleExtendedSidebar: (collapsed?: boolean) => void;
+  toggleExtendedProjectSidebar: (collapsed?: boolean) => void;
   toggleProfileSidebar: (collapsed?: boolean) => void;
   toggleWorkspaceAnalyticsSidebar: (collapsed?: boolean) => void;
   toggleIssueDetailSidebar: (collapsed?: boolean) => void;
@@ -22,6 +26,8 @@ export interface IThemeStore {
 export class ThemeStore implements IThemeStore {
   // observables
   sidebarCollapsed: boolean | undefined = undefined;
+  extendedSidebarCollapsed: boolean | undefined = undefined;
+  extendedProjectSidebarCollapsed: boolean | undefined = undefined;
   profileSidebarCollapsed: boolean | undefined = undefined;
   workspaceAnalyticsSidebarCollapsed: boolean | undefined = undefined;
   issueDetailSidebarCollapsed: boolean | undefined = undefined;
@@ -33,6 +39,8 @@ export class ThemeStore implements IThemeStore {
     makeObservable(this, {
       // observable
       sidebarCollapsed: observable.ref,
+      extendedSidebarCollapsed: observable.ref,
+      extendedProjectSidebarCollapsed: observable.ref,
       profileSidebarCollapsed: observable.ref,
       workspaceAnalyticsSidebarCollapsed: observable.ref,
       issueDetailSidebarCollapsed: observable.ref,
@@ -41,6 +49,8 @@ export class ThemeStore implements IThemeStore {
       projectOverviewSidebarCollapsed: observable.ref,
       // action
       toggleSidebar: action,
+      toggleExtendedSidebar: action,
+      toggleExtendedProjectSidebar: action,
       toggleProfileSidebar: action,
       toggleWorkspaceAnalyticsSidebar: action,
       toggleIssueDetailSidebar: action,
@@ -63,6 +73,32 @@ export class ThemeStore implements IThemeStore {
     localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
   };
 
+  /**
+   * Toggle the extended sidebar collapsed state
+   * @param collapsed
+   */
+  toggleExtendedSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.extendedSidebarCollapsed = !this.extendedSidebarCollapsed;
+    } else {
+      this.extendedSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("extended_sidebar_collapsed", this.extendedSidebarCollapsed.toString());
+  };
+
+  /**
+   * Toggle the extended project sidebar collapsed state
+   * @param collapsed
+   */
+  toggleExtendedProjectSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.extendedProjectSidebarCollapsed = !this.extendedProjectSidebarCollapsed;
+    } else {
+      this.extendedProjectSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("extended_project_sidebar_collapsed", this.extendedProjectSidebarCollapsed.toString());
+  };
+
   /**
    * Toggle the profile sidebar collapsed state
    * @param collapsed

web/core/store/workspace/index.ts

@@ -1,7 +1,8 @@
 import set from "lodash/set";
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
 // types
-import { IWorkspace } from "@plane/types";
+import { computedFn } from "mobx-utils";
+import { IWorkspaceSidebarNavigationItem, IWorkspace, IWorkspaceSidebarNavigation } from "@plane/types";
 // services
 import { WorkspaceService } from "@/plane-web/services";
 // store
@@ -18,6 +19,7 @@ export interface IWorkspaceRootStore {
   // computed
   currentWorkspace: IWorkspace | null;
   workspacesCreatedByCurrentUser: IWorkspace[] | null;
+  navigationPreferencesMap: Record<string, IWorkspaceSidebarNavigation>;
   // computed actions
   getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
   getWorkspaceById: (workspaceId: string) => IWorkspace | null;
@@ -28,6 +30,13 @@ export interface IWorkspaceRootStore {
   updateWorkspace: (workspaceSlug: string, data: Partial<IWorkspace>) => Promise<IWorkspace>;
   updateWorkspaceLogo: (workspaceSlug: string, logoURL: string) => void;
   deleteWorkspace: (workspaceSlug: string) => Promise<void>;
+  fetchSidebarNavigationPreferences: (workspaceSlug: string) => Promise<void>;
+  updateSidebarPreference: (
+    workspaceSlug: string,
+    key: string,
+    data: Partial<IWorkspaceSidebarNavigationItem>
+  ) => Promise<IWorkspaceSidebarNavigationItem | undefined>;
+  getNavigationPreferences: (workspaceSlug: string) => IWorkspaceSidebarNavigation | undefined;
   // sub-stores
   webhook: IWebhookStore;
   apiToken: IApiTokenStore;
@@ -38,6 +47,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
   loader: boolean = false;
   // observables
   workspaces: Record<string, IWorkspace> = {};
+  navigationPreferencesMap: Record<string, IWorkspaceSidebarNavigation> = {};
   // services
   workspaceService;
   // root store
@@ -53,6 +63,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       loader: observable.ref,
       // observables
       workspaces: observable,
+      navigationPreferencesMap: observable,
       // computed
       currentWorkspace: computed,
       workspacesCreatedByCurrentUser: computed,
@@ -65,6 +76,8 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       updateWorkspace: action,
       updateWorkspaceLogo: action,
       deleteWorkspace: action,
+      fetchSidebarNavigationPreferences: action,
+      updateSidebarPreference: action,
     });
 
     // services
@@ -183,4 +196,41 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
         this.workspaces = updatedWorkspacesList;
       });
     });
+
+  fetchSidebarNavigationPreferences = async (workspaceSlug: string) => {
+    try {
+      const response = await this.workspaceService.fetchSidebarNavigationPreferences(workspaceSlug);
+
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = response;
+      });
+    } catch (error) {
+      console.error("Failed to fetch sidebar preferences:", error);
+    }
+  };
+
+  updateSidebarPreference = async (
+    workspaceSlug: string,
+    key: string,
+    data: Partial<IWorkspaceSidebarNavigationItem>
+  ) => {
+    try {
+      const response = await this.workspaceService.updateSidebarPreference(workspaceSlug, key, data);
+
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = {
+          ...this.navigationPreferencesMap[workspaceSlug],
+          [key]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.error("Failed to update sidebar preference:", error);
+    }
+  };
+
+  getNavigationPreferences = computedFn(
+    (workspaceSlug: string): IWorkspaceSidebarNavigation | undefined => this.navigationPreferencesMap[workspaceSlug]
+  );
 }