From d9c9d85d385d5f6063522ed109184d6875538abc Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 14 Aug 2024 12:53:53 +0530
Subject: [PATCH] [WEB-2221] fix: app sidebar and favorites improvement (#5357)

* fix: project collapsible toggle

* fix: project favorite redirection

* chore: favorite redirection scroll into view implementation

* fix: use favorite item details project details
---
 .../favorite-items/common/favorite-item-title.tsx    | 12 ++++++++++--
 .../favorites/favorite-items/common/helper.tsx       |  2 +-
 .../sidebar/favorites/favorite-items/root.tsx        |  8 +++++++-
 .../workspace/sidebar/projects-list-item.tsx         |  2 ++
 web/core/hooks/use-favorite-item-details.tsx         |  4 +++-
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
index d8fc0d0b3..5b25b858a 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
@@ -3,6 +3,7 @@ import React, { FC } from "react";
 import Link from "next/link";
 
 type Props = {
+  projectId: string | null;
   href: string;
   title: string;
   icon: JSX.Element;
@@ -10,14 +11,21 @@ type Props = {
 };
 
 export const FavoriteItemTitle: FC<Props> = (props) => {
-  const { href, title, icon, isSidebarCollapsed } = props;
+  const { projectId, href, title, icon, isSidebarCollapsed } = props;
 
   const linkClass = "flex items-center gap-1.5 truncate w-full";
   const collapsedClass =
     "group/project-item cursor-pointer relative group w-full flex items-center justify-center gap-1.5 rounded px-2 py-1 outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 active:bg-custom-sidebar-background-90 truncate p-0 size-8 aspect-square mx-auto";
 
+  const handleOnClick = () => {
+    if (projectId) {
+      const projectItem = document.getElementById(`${projectId}`);
+      projectItem?.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
-    <Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable>
+    <Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable onClick={handleOnClick}>
       <span className="flex items-center justify-center size-5">{icon}</span>
       {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
     </Link>
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
index 8f7fb9859..e2f303afe 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
@@ -44,6 +44,6 @@ const entityPaths: Record<string, string> = {
 export const generateFavoriteItemLink = (workspaceSlug: string, favorite: IFavorite) => {
   const entityPath = entityPaths[favorite.entity_type];
   return entityPath
-    ? `/${workspaceSlug}/projects/${favorite.project_id}/${entityPath}/${favorite.entity_identifier || ""}`
+    ? `/${workspaceSlug}/projects/${favorite.project_id}/${entityPath}/${entityPath === "issues" ? "" : favorite.entity_identifier || ""}`
     : `/${workspaceSlug}`;
 };
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
index b001b7f69..cb9449f94 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
@@ -90,7 +90,13 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
     <>
       <FavoriteItemWrapper elementRef={elementRef} isMenuActive={isMenuActive} sidebarCollapsed={sidebarCollapsed}>
         {!sidebarCollapsed && <FavoriteItemDragHandle isDragging={isDragging} sort_order={favorite.sort_order} />}
-        <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} isSidebarCollapsed={!!sidebarCollapsed} />
+        <FavoriteItemTitle
+          href={itemLink}
+          projectId={favorite.project_id}
+          icon={itemIcon}
+          title={itemTitle}
+          isSidebarCollapsed={!!sidebarCollapsed}
+        />
         {!sidebarCollapsed && (
           <FavoriteItemQuickAction
             favorite={favorite}
diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx
index ea52fc29b..a9fdb002a 100644
--- a/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -269,6 +269,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
 
   useEffect(() => {
     if (URLProjectId === project.id) setIsProjectListOpen(true);
+    else setIsProjectListOpen(false);
   }, [URLProjectId]);
 
   return (
@@ -291,6 +292,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                 "p-0 size-8 aspect-square justify-center mx-auto": isSidebarCollapsed,
               }
             )}
+            id={`${project?.id}`}
           >
             {!disableDrag && (
               <Tooltip
diff --git a/web/core/hooks/use-favorite-item-details.tsx b/web/core/hooks/use-favorite-item-details.tsx
index 6e5c3b98d..8bf17b8a7 100644
--- a/web/core/hooks/use-favorite-item-details.tsx
+++ b/web/core/hooks/use-favorite-item-details.tsx
@@ -13,7 +13,7 @@ export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorit
 
   // store hooks
   const { getViewById } = useProjectView();
-  const { currentProjectDetails } = useProject();
+  const { getProjectById } = useProject();
   const { getCycleById } = useCycle();
   const { getModuleById } = useModule();
 
@@ -23,6 +23,8 @@ export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorit
   const cycleDetail = getCycleById(favoriteItemId ?? "");
   const moduleDetail = getModuleById(favoriteItemId ?? "");
 
+  const currentProjectDetails = getProjectById(favorite.project_id ?? "");
+
   let itemIcon;
   let itemTitle;
   const itemLink = generateFavoriteItemLink(workspaceSlug.toString(), favorite);