[WEB-3422] fix: app sidebar fixes and improvements

apiserver/plane/db/models/workspace.py

@@ -396,7 +396,6 @@ class UserPreferenceKeys(models.TextChoices):
         ACTIVE_CYCLES = "active_cycles", "Active Cycles"
         ANALYTICS = "analytics", "Analytics"
         DRAFTS = "drafts", "Drafts"
-        YOUR_WORK = "your_work", "Your Work"
         ARCHIVES = "archives", "Archives"
 
     workspace = models.ForeignKey(

packages/constants/src/workspace.ts

@@ -259,24 +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",
     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",
@@ -298,9 +286,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["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"],
 ];
@@ -312,6 +298,12 @@ 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",
     labelTranslationKey: "notification.label",
@@ -328,6 +320,7 @@ 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["projects"],
 ];

web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx

@@ -98,7 +98,7 @@ export const ExtendedProjectSidebar = observer(() => {
       <div
         ref={extendedProjectSidebarRef}
         className={cn(
-          "fixed top-0 h-full z-[19] flex flex-col gap-2 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-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 shadow-md",
           {
             "translate-x-0 opacity-100": extendedProjectSidebarCollapsed,
             "-translate-x-full opacity-0": !extendedProjectSidebarCollapsed,
@@ -107,7 +107,7 @@ export const ExtendedProjectSidebar = observer(() => {
           }
         )}
       >
-        <div className="flex flex-col gap-1 w-full">
+        <div className="flex flex-col gap-1 w-full sticky top-4 pt-0 px-4">
           <div className="flex items-center justify-between">
             <span className="text-sm font-semibold text-custom-text-300 py-1.5">Projects</span>
             {isAuthorizedUser && (
@@ -135,7 +135,7 @@ export const ExtendedProjectSidebar = observer(() => {
             />
           </div>
         </div>
-        <div className="flex flex-col gap-0.5">
+        <div className="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto vertical-scrollbar scrollbar-sm flex-grow mt-4 px-4">
           {filteredProjects.map((projectId, index) => (
             <SidebarProjectsListItem
               key={projectId}
@@ -146,6 +146,7 @@ export const ExtendedProjectSidebar = observer(() => {
               disableDrop={false}
               isLastChild={index === joinedProjects.length - 1}
               handleOnProjectDrop={handleOnProjectDrop}
+              renderInExtendedSidebar
             />
           ))}
         </div>

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 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",
         {
           "translate-x-0 opacity-100": extendedSidebarCollapsed,
           "-translate-x-full opacity-0": !extendedSidebarCollapsed,

web/ce/components/sidebar/project-navigation-root.tsx

@@ -7,9 +7,12 @@ import { ProjectNavigation } from "@/components/workspace";
 type TProjectItemsRootProps = {
   workspaceSlug: string;
   projectId: string;
+  isSidebarCollapsed: boolean;
 };
 
 export const ProjectNavigationRoot: FC<TProjectItemsRootProps> = (props) => {
-  const { workspaceSlug, projectId } = props;
-  return <ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} />;
+  const { workspaceSlug, projectId, isSidebarCollapsed } = props;
+  return (
+    <ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} isSidebarCollapsed={isSidebarCollapsed} />
+  );
 };

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", "notifications", "pi-chat", "projects"];
+  const staticItems = ["home", "your-work", "notifications", "pi-chat", "projects"];
 
   if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
     return null;
@@ -79,11 +79,6 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
             {icon}
             {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
           </div>
-          {!sidebarCollapsed && item.key === "active_cycles" && (
-            <div className="flex-shrink-0">
-              <UpgradeBadge />
-            </div>
-          )}
         </SidebarNavItem>
       </Link>
     </Tooltip>

web/core/components/workspace/sidebar/project-navigation.tsx

@@ -30,13 +30,14 @@ type TProjectItemsProps = {
   workspaceSlug: string;
   projectId: string;
   additionalNavigationItems?: (workspaceSlug: string, projectId: string) => TNavigationItem[];
+  isSidebarCollapsed: boolean;
 };
 
 export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
-  const { workspaceSlug, projectId, additionalNavigationItems } = props;
+  const { workspaceSlug, projectId, additionalNavigationItems, isSidebarCollapsed } = props;
   // store hooks
   const { t } = useTranslation();
-  const { sidebarCollapsed: isSidebarCollapsed, toggleSidebar } = useAppTheme();
+  const { toggleSidebar } = useAppTheme();
   const { getPartialProjectById } = useProject();
   const { isMobile } = usePlatformOS();
   const { allowPermissions } = useUserPermissions();

web/core/components/workspace/sidebar/projects-list-item.tsx

@@ -43,13 +43,22 @@ type Props = {
   disableDrag?: boolean;
   disableDrop?: boolean;
   isLastChild: boolean;
+  renderInExtendedSidebar?: boolean;
 };
 
 export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
-  const { projectId, handleCopyText, disableDrag, disableDrop, isLastChild, handleOnProjectDrop, projectListType } =
-    props;
+  const {
+    projectId,
+    handleCopyText,
+    disableDrag,
+    disableDrop,
+    isLastChild,
+    handleOnProjectDrop,
+    projectListType,
+    renderInExtendedSidebar = false,
+  } = props;
   // store hooks
-  const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
+  const { sidebarCollapsed } = useAppTheme();
   const { t } = useTranslation();
   const { setTrackElement } = useEventTracker();
   const { getPartialProjectById } = useProject();
@@ -89,6 +98,8 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     setLeaveProjectModal(true);
   };
 
+  const isSidebarCollapsed = sidebarCollapsed && !renderInExtendedSidebar;
+
   useEffect(() => {
     const element = projectRef.current;
     const dragHandleElement = dragHandleRef.current;
@@ -390,7 +401,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
           >
             {isProjectListOpen && (
               <Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1">
-                <ProjectNavigationRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+                <ProjectNavigationRoot
+                  workspaceSlug={workspaceSlug.toString()}
+                  projectId={projectId.toString()}
+                  isSidebarCollapsed={!!isSidebarCollapsed}
+                />
               </Disclosure.Panel>
             )}
           </Transition>

web/core/components/workspace/sidebar/projects-list.tsx

@@ -243,18 +243,39 @@ export const SidebarProjectsList: FC = observer(() => {
                   })}
                   static
                 >
-                  {joinedProjects.slice(0, 7).map((projectId, index) => (
-                    <SidebarProjectsListItem
-                      key={projectId}
-                      projectId={projectId}
-                      handleCopyText={() => handleCopyText(projectId)}
-                      projectListType={"JOINED"}
-                      disableDrag={false}
-                      disableDrop={false}
-                      isLastChild={index === joinedProjects.length - 1}
-                      handleOnProjectDrop={handleOnProjectDrop}
-                    />
-                  ))}
+                  <>
+                    {joinedProjects.slice(0, 7).map((projectId, index) => (
+                      <SidebarProjectsListItem
+                        key={projectId}
+                        projectId={projectId}
+                        handleCopyText={() => handleCopyText(projectId)}
+                        projectListType={"JOINED"}
+                        disableDrag={false}
+                        disableDrop={false}
+                        isLastChild={index === joinedProjects.length - 1}
+                        handleOnProjectDrop={handleOnProjectDrop}
+                      />
+                    ))}
+                    {joinedProjects.length > 7 && (
+                      <SidebarNavItem
+                        className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
+                      >
+                        <button
+                          onClick={() => toggleExtendedProjectSidebar()}
+                          id="extended-project-sidebar-toggle"
+                          className={cn(
+                            "flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350",
+                            {
+                              "justify-center": sidebarCollapsed,
+                            }
+                          )}
+                        >
+                          <Ellipsis className="size-4" />
+                          {!sidebarCollapsed && <span>More</span>}
+                        </button>
+                      </SidebarNavItem>
+                    )}
+                  </>
                 </Disclosure.Panel>
               )}
             </Transition>
@@ -278,21 +299,6 @@ export const SidebarProjectsList: FC = observer(() => {
             {!isCollapsed && t("add_project")}
           </button>
         )}
-
-        {joinedProjects.length > 7 && (
-          <SidebarNavItem className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}>
-            <button
-              onClick={() => toggleExtendedProjectSidebar()}
-              id="extended-project-sidebar-toggle"
-              className={cn("flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350", {
-                "justify-center": sidebarCollapsed,
-              })}
-            >
-              <Ellipsis className="size-4" />
-              {!sidebarCollapsed && <span>More</span>}
-            </button>
-          </SidebarNavItem>
-        )}
       </div>
     </>
   );