[WEB-4002] fix: sidebar tab highlight (#7011)

* fix: work item tab highlight

* chore: code refactor

* chore: code refactor

* chore: code refactor

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

@@ -3,7 +3,7 @@
 import React, { FC, useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import { FileText, Layers } from "lucide-react";
 import { EUserPermissionsLevel, EUserPermissions, EUserProjectRoles } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -12,7 +12,7 @@ import { Tooltip, DiceIcon, ContrastIcon, LayersIcon, Intake } from "@plane/ui";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
 // hooks
-import { useAppTheme, useProject, useUserPermissions } from "@/hooks/store";
+import { useAppTheme, useIssueDetail, useProject, useUserPermissions } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane-web constants
 
@@ -24,6 +24,7 @@ export type TNavigationItem = {
   shouldRender: boolean;
   sortOrder: number;
   i18n_key: string;
+  key: string;
 };
 
 type TProjectItemsProps = {
@@ -35,15 +36,23 @@ type TProjectItemsProps = {
 
 export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
   const { workspaceSlug, projectId, additionalNavigationItems, isSidebarCollapsed } = props;
+  const { workItem: workItemIdentifierFromRoute } = useParams();
   // store hooks
   const { t } = useTranslation();
   const { toggleSidebar } = useAppTheme();
   const { getPartialProjectById } = useProject();
   const { isMobile } = usePlatformOS();
   const { allowPermissions } = useUserPermissions();
+  const {
+    issue: { getIssueIdByIdentifier, getIssueById },
+  } = useIssueDetail();
   // pathname
   const pathname = usePathname();
   // derived values
+  const workItemId = workItemIdentifierFromRoute
+    ? getIssueIdByIdentifier(workItemIdentifierFromRoute?.toString())
+    : undefined;
+  const workItem = workItemId ? getIssueById(workItemId) : undefined;
   const project = getPartialProjectById(projectId);
   // handlers
   const handleProjectClick = () => {
@@ -58,6 +67,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
     (workspaceSlug: string, projectId: string): TNavigationItem[] => [
       {
         i18n_key: "sidebar.work_items",
+        key: "work_items",
         name: "Work items",
         href: `/${workspaceSlug}/projects/${projectId}/issues`,
         icon: LayersIcon,
@@ -67,6 +77,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
       },
       {
         i18n_key: "sidebar.cycles",
+        key: "cycles",
         name: "Cycles",
         href: `/${workspaceSlug}/projects/${projectId}/cycles`,
         icon: ContrastIcon,
@@ -76,6 +87,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
       },
       {
         i18n_key: "sidebar.modules",
+        key: "modules",
         name: "Modules",
         href: `/${workspaceSlug}/projects/${projectId}/modules`,
         icon: DiceIcon,
@@ -85,6 +97,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
       },
       {
         i18n_key: "sidebar.views",
+        key: "views",
         name: "Views",
         href: `/${workspaceSlug}/projects/${projectId}/views`,
         icon: Layers,
@@ -94,6 +107,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
       },
       {
         i18n_key: "sidebar.pages",
+        key: "pages",
         name: "Pages",
         href: `/${workspaceSlug}/projects/${projectId}/pages`,
         icon: FileText,
@@ -103,6 +117,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
       },
       {
         i18n_key: "sidebar.intake",
+        key: "intake",
         name: "Intake",
         href: `/${workspaceSlug}/projects/${projectId}/intake`,
         icon: Intake,
@@ -134,6 +149,23 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
     return sortedNavigationItems;
   }, [workspaceSlug, projectId, baseNavigation, additionalNavigationItems]);
 
+  const isActive = useCallback(
+    (item: TNavigationItem) => {
+      // work item condition
+      const workItemCondition = workItemId && workItem && !workItem?.is_epic && workItem?.project_id === projectId;
+      // epic condition
+      const epicCondition = workItemId && workItem && workItem?.is_epic && workItem?.project_id === projectId;
+      // is active
+      const isWorkItemActive = item.key === "work_items" && workItemCondition;
+      const isEpicActive = item.key === "epics" && epicCondition;
+      // pathname condition
+      const isPathnameActive = pathname.includes(item.href);
+      // return
+      return isWorkItemActive || isEpicActive || isPathnameActive;
+    },
+    [pathname, workItem, workItemId, projectId]
+  );
+
   return (
     <>
       {navigationItemsMemo.map((item) => {
@@ -154,11 +186,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
             <Link href={item.href} onClick={handleProjectClick}>
               <SidebarNavItem
                 className={`pl-[18px] ${isSidebarCollapsed ? "p-0 size-7 justify-center mx-auto" : ""}`}
-                isActive={
-                  item.i18n_key === "sidebar.work_items"
-                    ? pathname.includes(item.href) || pathname.includes(`/${workspaceSlug}/browse/`)
-                    : pathname.includes(item.href)
-                }
+                isActive={!!isActive(item)}
               >
                 <div className="flex items-center gap-1.5 py-[1px]">
                   <item.icon

web/core/store/issue/issue.store.ts

@@ -7,6 +7,7 @@ import { computedFn } from "mobx-utils";
 import { TIssue } from "@plane/types";
 // helpers
 import { getCurrentDateTimeInISO } from "@/helpers/date-time.helper";
+import { rootStore } from "@/lib/store-context";
 // services
 import { deleteIssueFromLocal } from "@/local-db/utils/load-issues";
 import { updatePersistentLayer } from "@/local-db/utils/utils";
@@ -59,6 +60,12 @@ export class IssueStore implements IIssueStore {
     if (issues && issues.length <= 0) return;
     runInAction(() => {
       issues.forEach((issue) => {
+        // add issue identifier to the issuesIdentifierMap
+        const projectIdentifier = rootStore.projectRoot.project.getProjectIdentifierById(issue?.project_id);
+        const workItemSequenceId = issue?.sequence_id;
+        const issueIdentifier = `${projectIdentifier}-${workItemSequenceId}`;
+        set(this.issuesIdentifierMap, issueIdentifier, issue.id);
+
         if (!this.issuesMap[issue.id]) set(this.issuesMap, issue.id, issue);
         else update(this.issuesMap, issue.id, (prevIssue) => ({ ...prevIssue, ...issue }));
       });