[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>

Author: anmolsinghbhatia

apiserver/plane/app/views/workspace/user_preference.py

@@ -30,7 +30,6 @@ def get(self, request, slug):
         keys = [
             key
             for key, _ in WorkspaceUserPreference.UserPreferenceKeys.choices
-            if key not in ["projects"]
         ]
 
         for preference in keys:
@@ -40,20 +39,28 @@ def get(self, request, slug):
                 preference = WorkspaceUserPreference.objects.bulk_create(
                     [
                         WorkspaceUserPreference(
-                            key=key, user=request.user, workspace=workspace
+                            key=key, user=request.user, workspace=workspace, sort_order=(65535 + (i*10000))
                         )
-                        for key in create_preference_keys
+                        for i, key in enumerate(create_preference_keys)
                     ],
                     batch_size=10,
                     ignore_conflicts=True,
                 )
 
-        preference = WorkspaceUserPreference.objects.filter(
+        preferences = WorkspaceUserPreference.objects.filter(
             user=request.user, workspace_id=workspace.id
-        )
+        ).order_by("sort_order").values("key", "is_pinned", "sort_order")
+
+
+        user_preferences = {}
 
+        for preference in preferences:
+            user_preferences[(str(preference["key"]))] = {
+                "is_pinned": preference["is_pinned"],
+                "sort_order": preference["sort_order"],
+        }
         return Response(
-            preference.values("key", "is_pinned", "sort_order"),
+            user_preferences,
             status=status.HTTP_200_OK,
         )
 

apiserver/plane/db/models/workspace.py

@@ -391,13 +391,13 @@ def __str__(self):
 class WorkspaceUserPreference(BaseModel):
     """Preference for the workspace for a user"""
 
-    class UserPreferenceKeys(models.TextChoices):
-        PROJECTS = "projects", "Projects"
-        ANALYTICS = "analytics", "Analytics"
-        CYCLES = "cycles", "Cycles"
+    class UserPreferenceKeys(models.TextChoices):        
         VIEWS = "views", "Views"
+        ACTIVE_CYCLES = "active_cycles", "Active Cycles"
+        ANALYTICS = "analytics", "Analytics"
+        DRAFTS = "drafts", "Drafts"
         YOUR_WORK = "your_work", "Your Work"
-
+        ARCHIVES = "archives", "Archives"
 
     workspace = models.ForeignKey(
         "db.Workspace",

packages/constants/src/workspace.ts

@@ -84,48 +84,42 @@ export const WORKSPACE_SETTINGS = {
     i18n_label: "workspace_settings.settings.general.title",
     href: `/settings`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
   },
   members: {
     key: "members",
     i18n_label: "workspace_settings.settings.members.title",
     href: `/settings/members`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/members/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
   },
   "billing-and-plans": {
     key: "billing-and-plans",
     i18n_label: "workspace_settings.settings.billing_and_plans.title",
     href: `/settings/billing`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/billing/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing/`,
   },
   export: {
     key: "export",
     i18n_label: "workspace_settings.settings.exports.title",
     href: `/settings/exports`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/exports/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports/`,
   },
   webhooks: {
     key: "webhooks",
     i18n_label: "workspace_settings.settings.webhooks.title",
     href: `/settings/webhooks`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/webhooks/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks/`,
   },
   "api-tokens": {
     key: "api-tokens",
     i18n_label: "workspace_settings.settings.api_tokens.title",
     href: `/settings/api-tokens`,
     access: [EUserWorkspaceRoles.ADMIN],
-    highlight: (pathname: string, baseUrl: string) =>
-      pathname === `${baseUrl}/settings/api-tokens/`,
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens/`,
   },
 };
 
@@ -256,3 +250,84 @@ export const DEFAULT_GLOBAL_VIEWS_LIST: {
     i18n_label: "default_global_view.subscribed",
   },
 ];
+
+export interface IWorkspaceSidebarNavigationItem {
+  key: string;
+  labelTranslationKey: string;
+  href: string;
+  access: EUserWorkspaceRoles[];
+}
+
+export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspaceSidebarNavigationItem> = {
+  "your-work": {
+    key: "your_work",
+    labelTranslationKey: "your_work",
+    href: `/profile/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+  views: {
+    key: "views",
+    labelTranslationKey: "views",
+    href: `/workspace-views/all-issues/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+  "active-cycles": {
+    key: "active_cycles",
+    labelTranslationKey: "cycles",
+    href: `/active-cycles/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+  analytics: {
+    key: "analytics",
+    labelTranslationKey: "analytics",
+    href: `/analytics/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+  drafts: {
+    key: "drafts",
+    labelTranslationKey: "drafts",
+    href: `/drafts/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+  archives: {
+    key: "archives",
+    labelTranslationKey: "archives",
+    href: `/projects/archives/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+};
+export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["views"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["active-cycles"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["analytics"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["your-work"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["drafts"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["archives"],
+];
+
+export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspaceSidebarNavigationItem> = {
+  home: {
+    key: "home",
+    labelTranslationKey: "home.title",
+    href: `/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+  notifications: {
+    key: "notifications",
+    labelTranslationKey: "notification.label",
+    href: `/notifications/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+  projects: {
+    key: "projects",
+    labelTranslationKey: "projects",
+    href: `/projects/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+};
+
+export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["home"],
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["notifications"],
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
+];

packages/hooks/src/use-outside-click-detector.tsx

@@ -8,9 +8,9 @@ export const useOutsideClickDetector = (
   const handleClick = (event: MouseEvent) => {
     if (ref.current && !ref.current.contains(event.target as any)) {
       // check for the closest element with attribute name data-prevent-outside-click
-      const preventOutsideClickElement = (
-        event.target as unknown as HTMLElement | undefined
-      )?.closest("[data-prevent-outside-click]");
+      const preventOutsideClickElement = (event.target as unknown as HTMLElement | undefined)?.closest(
+        "[data-prevent-outside-click]"
+      );
       // if the closest element with attribute name data-prevent-outside-click is found, return
       if (preventOutsideClickElement) {
         return;

packages/types/src/workspace.d.ts

@@ -1,10 +1,4 @@
-import type {
-  ICycle,
-  IProjectMember,
-  IUser,
-  IUserLite,
-  IWorkspaceViewProps,
-} from "@plane/types";
+import type { ICycle, IProjectMember, IUser, IUserLite, IWorkspaceViewProps, TPaginationInfo } from "@plane/types";
 import { EUserWorkspaceRoles } from "@plane/constants"; // TODO: check if importing this over here causes circular dependency
 import { TUserPermissions } from "./enums";
 
@@ -229,3 +223,13 @@ export interface IWorkspaceAnalyticsResponse {
 export type TWorkspacePaginationInfo = TPaginationInfo & {
   results: IWorkspace[];
 };
+
+export interface IWorkspaceSidebarNavigationItem {
+  key?: string;
+  is_pinned: boolean;
+  sort_order: number;
+}
+
+export interface IWorkspaceSidebarNavigation {
+  [key: string]: IWorkspaceSidebarNavigationItem;
+}

packages/ui/src/icons/overview-icon.tsx

@@ -2,20 +2,13 @@ import * as React from "react";
 
 import { ISvgIcons } from "./type";
 
-export const OverviewIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className = "" }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+export const OverviewIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
+  <svg viewBox="0 0 16 16" className={className} xmlns="http://www.w3.org/2000/svg" {...rest}>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M2.5 3C2.5 2.86739 2.55268 2.74021 2.64645 2.64645C2.74021 2.55268 2.86739 2.5 3 2.5H3.5C9.02267 2.5 13.5 6.97733 13.5 12.5V13C13.5 13.1326 13.4473 13.2598 13.3536 13.3536C13.2598 13.4473 13.1326 13.5 13 13.5H12.5C12.3674 13.5 12.2402 13.4473 12.1464 13.3536C12.0527 13.2598 12 13.1326 12 13V12.5C12 7.80533 8.19467 4 3.5 4H3C2.86739 4 2.74021 3.94732 2.64645 3.85355C2.55268 3.75979 2.5 3.63261 2.5 3.5V3ZM2.5 7.5C2.5 7.36739 2.55268 7.24022 2.64645 7.14645C2.74021 7.05268 2.86739 7 3 7H3.5C4.22227 7 4.93747 7.14226 5.60476 7.41866C6.27205 7.69506 6.87837 8.10019 7.38909 8.61091C7.89981 9.12164 8.30494 9.72795 8.58134 10.3952C8.85774 11.0625 9 11.7777 9 12.5V13C9 13.1326 8.94732 13.2598 8.85355 13.3536C8.75978 13.4473 8.63261 13.5 8.5 13.5H8C7.86739 13.5 7.74022 13.4473 7.64645 13.3536C7.55268 13.2598 7.5 13.1326 7.5 13V12.5C7.5 11.4391 7.07857 10.4217 6.32843 9.67157C5.57828 8.92143 4.56087 8.5 3.5 8.5H3C2.86739 8.5 2.74021 8.44732 2.64645 8.35355C2.55268 8.25978 2.5 8.13261 2.5 8V7.5ZM2.5 12.5C2.5 12.2348 2.60536 11.9804 2.79289 11.7929C2.98043 11.6054 3.23478 11.5 3.5 11.5C3.76522 11.5 4.01957 11.6054 4.20711 11.7929C4.39464 11.9804 4.5 12.2348 4.5 12.5C4.5 12.7652 4.39464 13.0196 4.20711 13.2071C4.01957 13.3946 3.76522 13.5 3.5 13.5C3.23478 13.5 2.98043 13.3946 2.79289 13.2071C2.60536 13.0196 2.5 12.7652 2.5 12.5Z"
-      fill="#455068"
+      fill="currentColor"
     />
   </svg>
 );