[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

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>

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}`;
 };

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}

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

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);