[WEB-5170] feat: navigation revamp

apps/api/plane/app/urls/project.py

@@ -14,6 +14,7 @@
     ProjectPublicCoverImagesEndpoint,
     UserProjectRolesEndpoint,
     ProjectArchiveUnarchiveEndpoint,
+    ProjectMemberPreferenceEndpoint,
 )
 
 
@@ -125,4 +126,9 @@
         ProjectArchiveUnarchiveEndpoint.as_view(),
         name="project-archive-unarchive",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/preferences/member/<uuid:member_id>/",
+        ProjectMemberPreferenceEndpoint.as_view(),
+        name="project-member-preference",
+    ),
 ]

apps/api/plane/app/urls/workspace.py

@@ -253,9 +253,4 @@
         WorkspaceUserPreferenceViewSet.as_view(),
         name="workspace-user-preference",
     ),
-    path(
-        "workspaces/<str:slug>/sidebar-preferences/<str:key>/",
-        WorkspaceUserPreferenceViewSet.as_view(),
-        name="workspace-user-preference",
-    ),
 ]

apps/api/plane/app/views/__init__.py

@@ -18,6 +18,7 @@
     ProjectMemberViewSet,
     ProjectMemberUserEndpoint,
     UserProjectRolesEndpoint,
+    ProjectMemberPreferenceEndpoint,
 )
 
 from .user.base import (

apps/api/plane/app/views/project/member.py

@@ -300,3 +300,37 @@ def get(self, request, slug):
 
         project_members = {str(member["project_id"]): member["role"] for member in project_members}
         return Response(project_members, status=status.HTTP_200_OK)
+
+
+class ProjectMemberPreferenceEndpoint(BaseAPIView):
+    def get_project_member(self, slug, project_id, member_id):
+        return ProjectMember.objects.get(
+            project_id=project_id,
+            member_id=member_id,
+            workspace__slug=slug,
+        )
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def patch(self, request, slug, project_id, member_id):
+        project_member = self.get_project_member(slug, project_id, member_id)
+
+        current_preferences = project_member.preferences or {}
+        current_preferences["navigation"] = request.data["navigation"]
+
+        project_member.preferences = current_preferences
+        project_member.save(update_fields=["preferences"])
+
+        return Response({"preferences": project_member.preferences}, status=status.HTTP_200_OK)
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def get(self, request, slug, project_id, member_id):
+        project_member = self.get_project_member(slug, project_id, member_id)
+
+        response = {
+            "preferences": project_member.preferences,
+            "project_id": project_member.project_id,
+            "member_id": project_member.member_id,
+            "workspace_id": project_member.workspace_id,
+        }
+
+        return Response(response, status=status.HTTP_200_OK)

apps/api/plane/app/views/workspace/user_preference.py

@@ -65,15 +65,23 @@ def get(self, request, slug):
         )
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
-    def patch(self, request, slug, key):
-        preference = WorkspaceUserPreference.objects.filter(key=key, workspace__slug=slug, user=request.user).first()
+    def patch(self, request, slug):
+        for data in request.data:
+            key = data.pop("key", None)
+            if not key:
+                continue
 
-        if preference:
-            serializer = WorkspaceUserPreferenceSerializer(preference, data=request.data, partial=True)
+            preference = WorkspaceUserPreference.objects.filter(key=key, workspace__slug=slug).first()
 
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+            if not preference:
+                continue
 
-        return Response({"detail": "Preference not found"}, status=status.HTTP_404_NOT_FOUND)
+            if "is_pinned" in data:
+                preference.is_pinned = data["is_pinned"]
+
+            if "sort_order" in data:
+                preference.sort_order = data["sort_order"]
+
+            preference.save(update_fields=["is_pinned", "sort_order"])
+
+        return Response({"message": "Successfully updated"}, status=status.HTTP_200_OK)

apps/api/plane/db/models/project.py

@@ -59,7 +59,7 @@ def get_default_props():
 
 
 def get_default_preferences():
-    return {"pages": {"block_display": True}}
+    return {"pages": {"block_display": True}, "navigation": {"default_tab": "work_items", "hide_in_more_menu": []}}
 
 
 class Project(BaseModel):

apps/api/plane/db/models/workspace.py

@@ -417,6 +417,7 @@ class UserPreferenceKeys(models.TextChoices):
         DRAFTS = "drafts", "Drafts"
         YOUR_WORK = "your_work", "Your Work"
         ARCHIVES = "archives", "Archives"
+        STICKIES = "stickies", "Stickies"
 
     workspace = models.ForeignKey(
         "db.Workspace",

apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx

@@ -2,13 +2,13 @@ import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { useParams, usePathname } from "next/navigation";
 import { SIDEBAR_WIDTH } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 // components
 import { ResizableSidebar } from "@/components/sidebar/resizable-sidebar";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { useAppRail } from "@/hooks/use-app-rail";
 // local imports
 import { ExtendedAppSidebar } from "./extended-sidebar";
 import { AppSidebar } from "./sidebar";
@@ -26,14 +26,19 @@ export const ProjectAppSidebar = observer(function ProjectAppSidebar() {
   const { storedValue, setValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
   // states
   const [sidebarWidth, setSidebarWidth] = useState<number>(storedValue ?? SIDEBAR_WIDTH);
-  // hooks
-  const { shouldRenderAppRail } = useAppRail();
+  // routes
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
   // derived values
   const isAnyExtendedSidebarOpen = isExtendedSidebarOpened;
 
+  const isNotificationsPath = pathname.includes(`/${workspaceSlug}/notifications`);
+
   // handlers
   const handleWidthChange = (width: number) => setValue(width);
 
+  if (isNotificationsPath) return null;
+
   return (
     <>
       <ResizableSidebar
@@ -55,7 +60,6 @@ export const ProjectAppSidebar = observer(function ProjectAppSidebar() {
         }
         isAnyExtendedSidebarExpanded={isAnyExtendedSidebarOpen}
         isAnySidebarDropdownOpen={isAnySidebarDropdownOpen}
-        disablePeekTrigger={shouldRenderAppRail}
       >
         <AppSidebar />
       </ResizableSidebar>

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx

@@ -1,61 +1,43 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// plane imports
-import { EProjectFeatureKey } from "@plane/constants";
-import { Breadcrumbs, Header } from "@plane/ui";
-// components
-import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
-import { IssueDetailQuickActions } from "@/components/issues/issue-detail/issue-detail-quick-actions";
 // hooks
+import { Header, Row } from "@plane/ui";
+import { AppHeader } from "@/components/core/app-header";
+import { TabNavigationRoot } from "@/components/navigation";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
-import { useProject } from "@/hooks/store/use-project";
-import { useAppRouter } from "@/hooks/use-app-router";
-import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+// local components
+import { WorkItemDetailsHeader } from "./work-item-header";
 
-export const ProjectIssueDetailsHeader = observer(function ProjectIssueDetailsHeader() {
+export const ProjectWorkItemDetailsHeader = observer(function ProjectWorkItemDetailsHeader() {
   // router
-  const router = useAppRouter();
   const { workspaceSlug, workItem } = useParams();
   // store hooks
-  const { getProjectById, loader } = useProject();
   const {
     issue: { getIssueById, getIssueIdByIdentifier },
   } = useIssueDetail();
   // derived values
   const issueId = getIssueIdByIdentifier(workItem?.toString());
-  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
-  const projectId = issueDetails ? issueDetails?.project_id : undefined;
-  const projectDetails = projectId ? getProjectById(projectId?.toString()) : undefined;
-
-  if (!workspaceSlug || !projectId || !issueId) return null;
+  const issueDetails = issueId ? getIssueById(issueId?.toString()) : undefined;
 
   return (
-    <Header>
-      <Header.LeftItem>
-        <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
-          <CommonProjectBreadcrumbs
-            workspaceSlug={workspaceSlug?.toString()}
-            projectId={projectId?.toString()}
-            featureKey={EProjectFeatureKey.WORK_ITEMS}
-          />
-          <Breadcrumbs.Item
-            component={
-              <BreadcrumbLink
-                label={projectDetails && issueDetails ? `${projectDetails.identifier}-${issueDetails.sequence_id}` : ""}
-              />
-            }
-          />
-        </Breadcrumbs>
-      </Header.LeftItem>
-      <Header.RightItem>
-        {projectId && issueId && (
-          <IssueDetailQuickActions
-            workspaceSlug={workspaceSlug?.toString()}
-            projectId={projectId?.toString()}
-            issueId={issueId?.toString()}
-          />
-        )}
-      </Header.RightItem>
-    </Header>
+    <>
+      <div className="z-20">
+        <Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
+          <div className="flex items-center gap-2 divide-x divide-custom-border-100 h-full w-full">
+            <div className="flex items-center h-full w-full flex-1">
+              <Header className="h-full">
+                <Header.LeftItem className="h-full max-w-full">
+                  <TabNavigationRoot
+                    workspaceSlug={workspaceSlug}
+                    projectId={issueDetails?.project_id?.toString() ?? ""}
+                  />
+                </Header.LeftItem>
+              </Header>
+            </div>
+          </div>
+        </Row>
+      </div>
+      <AppHeader header={<WorkItemDetailsHeader />} />
+    </>
   );
 });

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx

@@ -1,13 +1,12 @@
 // components
 import { Outlet } from "react-router";
-import { AppHeader } from "@/components/core/app-header";
 import { ContentWrapper } from "@/components/core/content-wrapper";
-import { ProjectIssueDetailsHeader } from "./header";
+import { ProjectWorkItemDetailsHeader } from "./header";
 
 export default function ProjectIssueDetailsLayout() {
   return (
     <>
-      <AppHeader header={<ProjectIssueDetailsHeader />} />
+      <ProjectWorkItemDetailsHeader />
       <ContentWrapper className="overflow-hidden">
         <Outlet />
       </ContentWrapper>

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane ui
+import { WorkItemsIcon } from "@plane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { IssueDetailQuickActions } from "@/components/issues/issue-detail/issue-detail-quick-actions";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+export const WorkItemDetailsHeader = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, workItem } = useParams();
+  // store hooks
+  const { getProjectById, loader } = useProject();
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail();
+  // derived values
+  const issueId = getIssueIdByIdentifier(workItem?.toString());
+  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
+  const projectId = issueDetails ? issueDetails?.project_id : undefined;
+  const projectDetails = projectId ? getProjectById(projectId?.toString()) : undefined;
+
+  if (!workspaceSlug || !projectId || !issueId) return null;
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label="Work Items"
+                href={`/${workspaceSlug}/projects/${projectId}/issues/`}
+                icon={<WorkItemsIcon className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
+          />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={projectDetails && issueDetails ? `${projectDetails.identifier}-${issueDetails.sequence_id}` : ""}
+              />
+            }
+          />
+        </Breadcrumbs>
+      </Header.LeftItem>
+      <Header.RightItem>
+        {projectId && issueId && (
+          <IssueDetailQuickActions
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
+            issueId={issueId?.toString()}
+          />
+        )}
+      </Header.RightItem>
+    </Header>
+  );
+});