From 23b0d4339d821b08cef32774dda02f560d7b3100 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 18 Feb 2025 20:49:17 +0530
Subject: [PATCH] [WEB-3422] fix: app sidebar fixes and improvements (#6633)

* chore: app sidebar improvements

* chore: overview icon updated
---
 apiserver/plane/db/models/workspace.py        |  1 +
 packages/constants/src/workspace.ts           | 20 ++++++++--------
 packages/ui/src/icons/overview-icon.tsx       |  4 ++--
 .../(projects)/extended-project-sidebar.tsx   | 12 +++++++++-
 .../(projects)/extended-sidebar.tsx           |  2 +-
 .../[workspaceSlug]/(projects)/sidebar.tsx    |  8 +++----
 .../sidebar/extended-sidebar-item.tsx         |  6 ++---
 .../components/workspace/sidebar/helper.tsx   |  2 +-
 .../workspace/sidebar/sidebar-item.tsx        |  3 +--
 .../sidebar/favorites/favorites-menu.tsx      |  8 +++----
 .../workspace/sidebar/projects-list-item.tsx  |  2 +-
 .../workspace/sidebar/sidebar-menu-items.tsx  | 24 +++++++++----------
 12 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/apiserver/plane/db/models/workspace.py b/apiserver/plane/db/models/workspace.py
index 4f592ce8a..2c0370a61 100644
--- a/apiserver/plane/db/models/workspace.py
+++ b/apiserver/plane/db/models/workspace.py
@@ -396,6 +396,7 @@ class WorkspaceUserPreference(BaseModel):
         ACTIVE_CYCLES = "active_cycles", "Active Cycles"
         ANALYTICS = "analytics", "Analytics"
         DRAFTS = "drafts", "Drafts"
+        YOUR_WORK = "your_work", "Your Work"
         ARCHIVES = "archives", "Archives"
 
     workspace = models.ForeignKey(
diff --git a/packages/constants/src/workspace.ts b/packages/constants/src/workspace.ts
index b2f8b9d18..d1389759c 100644
--- a/packages/constants/src/workspace.ts
+++ b/packages/constants/src/workspace.ts
@@ -259,6 +259,12 @@ export interface IWorkspaceSidebarNavigationItem {
 }
 
 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",
@@ -287,6 +293,7 @@ export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspa
 export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
   WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["views"],
   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"],
 ];
@@ -298,14 +305,8 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspac
     href: `/`,
     access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
   },
-  "your-work": {
-    key: "your_work",
-    labelTranslationKey: "your_work",
-    href: `/profile/`,
-    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
-  },
-  notifications: {
-    key: "notifications",
+  inbox: {
+    key: "inbox",
     labelTranslationKey: "notification.label",
     href: `/notifications/`,
     access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
@@ -320,7 +321,6 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspac
 
 export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
   WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["home"],
-  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["your-work"],
-  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["notifications"],
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["inbox"],
   WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
 ];
diff --git a/packages/ui/src/icons/overview-icon.tsx b/packages/ui/src/icons/overview-icon.tsx
index 6c32881d8..bcf371244 100644
--- a/packages/ui/src/icons/overview-icon.tsx
+++ b/packages/ui/src/icons/overview-icon.tsx
@@ -3,11 +3,11 @@ import * as React from "react";
 import { ISvgIcons } from "./type";
 
 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}>
+  <svg viewBox="0 0 12 12" className={className} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
     <path
       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"
+      d="M0.5 1C0.5 0.867392 0.552678 0.740215 0.646447 0.646447C0.740215 0.552678 0.867392 0.5 1 0.5H1.5C7.02267 0.5 11.5 4.97733 11.5 10.5V11C11.5 11.1326 11.4473 11.2598 11.3536 11.3536C11.2598 11.4473 11.1326 11.5 11 11.5H10.5C10.3674 11.5 10.2402 11.4473 10.1464 11.3536C10.0527 11.2598 10 11.1326 10 11V10.5C10 5.80533 6.19467 2 1.5 2H1C0.867392 2 0.740215 1.94732 0.646447 1.85355C0.552678 1.75979 0.5 1.63261 0.5 1.5V1ZM0.5 5.5C0.5 5.36739 0.552678 5.24022 0.646447 5.14645C0.740215 5.05268 0.867392 5 1 5H1.5C2.22227 5 2.93747 5.14226 3.60476 5.41866C4.27205 5.69506 4.87837 6.10019 5.38909 6.61091C5.89981 7.12164 6.30494 7.72795 6.58134 8.39524C6.85774 9.06253 7 9.77773 7 10.5V11C7 11.1326 6.94732 11.2598 6.85355 11.3536C6.75978 11.4473 6.63261 11.5 6.5 11.5H6C5.86739 11.5 5.74022 11.4473 5.64645 11.3536C5.55268 11.2598 5.5 11.1326 5.5 11V10.5C5.5 9.43913 5.07857 8.42172 4.32843 7.67157C3.57828 6.92143 2.56087 6.5 1.5 6.5H1C0.867392 6.5 0.740215 6.44732 0.646447 6.35355C0.552678 6.25978 0.5 6.13261 0.5 6V5.5ZM0.5 10.5C0.5 10.2348 0.605357 9.98043 0.792893 9.79289C0.98043 9.60536 1.23478 9.5 1.5 9.5C1.76522 9.5 2.01957 9.60536 2.20711 9.79289C2.39464 9.98043 2.5 10.2348 2.5 10.5C2.5 10.7652 2.39464 11.0196 2.20711 11.2071C2.01957 11.3946 1.76522 11.5 1.5 11.5C1.23478 11.5 0.98043 11.3946 0.792893 11.2071C0.605357 11.0196 0.5 10.7652 0.5 10.5Z"
       fill="currentColor"
     />
   </svg>
diff --git a/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
index d8a6b791b..66baa1eb9 100644
--- a/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -14,6 +14,7 @@ import { CreateProjectModal } from "@/components/project";
 import { SidebarProjectsListItem } from "@/components/workspace";
 // hooks
 import { orderJoinedProjects } from "@/helpers/project.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
 import { useAppTheme, useProject, useUserPermissions } from "@/hooks/store";
 import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
 import { TProject } from "@/plane-web/types";
@@ -85,6 +86,15 @@ export const ExtendedProjectSidebar = observer(() => {
     "extended-project-sidebar-toggle"
   );
 
+  const handleCopyText = (projectId: string) => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("link_copied"),
+        message: t("project_link_copied_to_clipboard"),
+      });
+    });
+  };
   return (
     <>
       {workspaceSlug && (
@@ -140,7 +150,7 @@ export const ExtendedProjectSidebar = observer(() => {
             <SidebarProjectsListItem
               key={projectId}
               projectId={projectId}
-              handleCopyText={() => {}}
+              handleCopyText={() => handleCopyText(projectId)}
               projectListType={"JOINED"}
               disableDrag={false}
               disableDrop={false}
diff --git a/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx b/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx
index e88fa33bb..ab81d5603 100644
--- a/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx
@@ -104,7 +104,7 @@ export const ExtendedAppSidebar = observer(() => {
     <div
       ref={extendedSidebarRef}
       className={cn(
-        "fixed top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md",
+        "fixed top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md pb-6",
         {
           "translate-x-0 opacity-100": extendedSidebarCollapsed,
           "-translate-x-full opacity-0": !extendedSidebarCollapsed,
diff --git a/web/app/[workspaceSlug]/(projects)/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/sidebar.tsx
index ff345dcf0..27a73137e 100644
--- a/web/app/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/sidebar.tsx
@@ -90,11 +90,9 @@ export const AppSidebar: FC = observer(() => {
             })}
           >
             <SidebarMenuItems />
-            <hr
-              className={cn("flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1", {
-                "opacity-0": !sidebarCollapsed,
-              })}
-            />
+            {sidebarCollapsed && (
+              <hr className="flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1" />
+            )}
             {/* Favorites Menu */}
             {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}
             {/* Teams List */}
diff --git a/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx b/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
index 663776eb4..22cfe0842 100644
--- a/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
+++ b/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
@@ -169,7 +169,7 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
             <button
               type="button"
               className={cn(
-                "hidden group-hover/project-item: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",
                 {
                   // "cursor-not-allowed opacity-60": project.sort_order === null,
                   "cursor-grabbing": isDragging,
@@ -199,14 +199,14 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
             {isPinned ? (
               <Tooltip tooltipContent="Hide tab">
                 <Eye
-                  className="size-4 flex-shrink-0 invisible group-hover:visible text-custom-text-300 outline-none"
+                  className="size-4 flex-shrink-0 hover:text-custom-text-200 text-custom-text-300 outline-none"
                   onClick={() => unPinNavigationItem(workspaceSlug.toString(), item.key)}
                 />
               </Tooltip>
             ) : (
               <Tooltip tooltipContent="Show tab">
                 <EyeClosed
-                  className="size-4 flex-shrink-0 invisible group-hover:visible text-custom-text-400 outline-none"
+                  className="size-4 flex-shrink-0 hover:text-custom-text-200 text-custom-text-400 outline-none"
                   onClick={() => pinNavigationItem(workspaceSlug.toString(), item.key)}
                 />
               </Tooltip>
diff --git a/web/ce/components/workspace/sidebar/helper.tsx b/web/ce/components/workspace/sidebar/helper.tsx
index b2dafda09..d00b0c361 100644
--- a/web/ce/components/workspace/sidebar/helper.tsx
+++ b/web/ce/components/workspace/sidebar/helper.tsx
@@ -6,7 +6,7 @@ export const getSidebarNavigationItemIcon = (key: string, className: string = ""
   switch (key) {
     case "home":
       return <Home className={cn("size-4 flex-shrink-0", className)} />;
-    case "notifications":
+    case "inbox":
       return <Inbox className={cn("size-4 flex-shrink-0", className)} />;
     case "projects":
       return <Briefcase className={cn("size-4 flex-shrink-0", className)} />;
diff --git a/web/ce/components/workspace/sidebar/sidebar-item.tsx b/web/ce/components/workspace/sidebar/sidebar-item.tsx
index 9b5d56e61..8ea0a98ce 100644
--- a/web/ce/components/workspace/sidebar/sidebar-item.tsx
+++ b/web/ce/components/workspace/sidebar/sidebar-item.tsx
@@ -42,7 +42,7 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
     if (extendedSidebarCollapsed) toggleExtendedSidebar();
   };
 
-  const staticItems = ["home", "your-work", "notifications", "pi-chat", "projects"];
+  const staticItems = ["home", "inbox", "pi-chat", "projects"];
 
   if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
     return null;
@@ -74,7 +74,6 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
           className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
           isActive={isActive}
         >
-          {/* <icon className="size-4" /> */}
           <div className="flex items-center gap-1.5 py-[1px]">
             {icon}
             {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
index 6b1be6490..bbb98aab4 100644
--- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -285,11 +285,9 @@ export const SidebarFavoritesMenu = observer(() => {
         </Transition>
       </Disclosure>
 
-      <hr
-        className={cn("flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1", {
-          "opacity-0": !sidebarCollapsed || favoriteIds.length === 0,
-        })}
-      />
+      {sidebarCollapsed && favoriteIds.length > 0 && (
+        <hr className="flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1" />
+      )}
     </>
   );
 });
diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx
index 3c245a62a..a776cada4 100644
--- a/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -238,7 +238,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                     {
                       "cursor-not-allowed opacity-60": project.sort_order === null,
                       "cursor-grabbing": isDragging,
-                      flex: isMenuActive,
+                      flex: isMenuActive || renderInExtendedSidebar,
                       "!hidden": isSidebarCollapsed,
                     }
                   )}
diff --git a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
index 9e3bfc3bc..bedfa02a3 100644
--- a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
+++ b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -51,19 +51,19 @@ export const SidebarMenuItems = observer(() => {
         {sortedNavigationItems.map((item, _index) => (
           <SidebarItem key={`dynamic_${_index}`} item={item} />
         ))}
+        <SidebarNavItem className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}>
+          <button
+            onClick={() => toggleExtendedSidebar()}
+            className={cn("flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350", {
+              "justify-center": sidebarCollapsed,
+            })}
+            id="extended-sidebar-toggle"
+          >
+            <Ellipsis className="size-4" />
+            {!sidebarCollapsed && <span>More</span>}
+          </button>
+        </SidebarNavItem>
       </div>
-      <SidebarNavItem className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}>
-        <button
-          onClick={() => toggleExtendedSidebar()}
-          className={cn("flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350", {
-            "justify-center": sidebarCollapsed,
-          })}
-          id="extended-sidebar-toggle"
-        >
-          <Ellipsis className="size-4" />
-          {!sidebarCollapsed && <span>More</span>}
-        </button>
-      </SidebarNavItem>
     </>
   );
 });