fix: favorite improvements (#5307)

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

@@ -111,6 +111,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   const [publishModalOpen, setPublishModal] = useState(false);
   const [isMenuActive, setIsMenuActive] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
+  const [isProjectListOpen, setIsProjectListOpen] = useState(false);
   const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
   // refs
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
@@ -266,12 +267,15 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
 
   if (!project) return null;
 
+  useEffect(() => {
+    if (URLProjectId === project.id) setIsProjectListOpen(true);
+  }, [URLProjectId]);
+
   return (
     <>
       <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
       <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={() => setLeaveProjectModal(false)} />
-      <Disclosure key={`${project.id}_${URLProjectId}`} ref={projectRef} defaultOpen={URLProjectId === project.id}>
-        {({ open }) => (
+      <Disclosure key={`${project.id}_${URLProjectId}`} ref={projectRef} defaultOpen={isProjectListOpen}>
         <div
           id={`sidebar-${projectId}-${projectListType}`}
           className={cn("relative", {
@@ -319,7 +323,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                   "justify-center": isSidebarCollapsed,
                 })}
               >
-                  <Disclosure.Button as="button" className="size-8 aspect-square flex-shrink-0 grid place-items-center">
+                <Disclosure.Button
+                  as="button"
+                  className="size-8 aspect-square flex-shrink-0 grid place-items-center"
+                  onClick={() => setIsProjectListOpen(!isProjectListOpen)}
+                >
                   <div className="size-4 grid place-items-center flex-shrink-0">
                     <Logo logo={project.logo_props} size={16} />
                   </div>
@@ -340,6 +348,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                       className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {
                         "justify-center": isSidebarCollapsed,
                       })}
+                      onClick={() => setIsProjectListOpen(!isProjectListOpen)}
                     >
                       <div className="size-4 grid place-items-center flex-shrink-0">
                         <Logo logo={project.logo_props} size={16} />
@@ -367,9 +376,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                   customButtonClassName="grid place-items-center"
                   placement="bottom-start"
                 >
-                    <CustomMenu.MenuItem
-                      onClick={project.is_favorite ? handleRemoveFromFavorites : handleAddToFavorites}
-                    >
+                  <CustomMenu.MenuItem onClick={project.is_favorite ? handleRemoveFromFavorites : handleAddToFavorites}>
                     <span className="flex items-center justify-start gap-2">
                       <Star
                         className={cn("h-3.5 w-3.5 ", {
@@ -442,10 +449,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                       "inline-block": isMenuActive,
                     }
                   )}
+                  onClick={() => setIsProjectListOpen(!isProjectListOpen)}
                 >
                   <ChevronRight
                     className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
-                        "rotate-90": open,
+                      "rotate-90": isProjectListOpen,
                     })}
                   />
                 </Disclosure.Button>
@@ -453,6 +461,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
             )}
           </div>
           <Transition
+            show={isProjectListOpen}
             enter="transition duration-100 ease-out"
             enterFrom="transform scale-95 opacity-0"
             enterTo="transform scale-100 opacity-100"
@@ -460,6 +469,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
             leaveFrom="transform scale-100 opacity-100"
             leaveTo="transform scale-95 opacity-0"
           >
+            {isProjectListOpen && (
               <Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1">
                 {navigation(workspaceSlug?.toString(), project?.id).map((item) => {
                   if (
@@ -498,10 +508,10 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                   );
                 })}
               </Disclosure.Panel>
+            )}
           </Transition>
           {isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
         </div>
-        )}
       </Disclosure>
     </>
   );

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

@@ -4,7 +4,7 @@ import { useState, FC, useRef, useEffect } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import { Briefcase, ChevronRight, Plus } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
@@ -43,6 +43,8 @@ export const SidebarProjectsList: FC = observer(() => {
   const { getProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
   // router params
   const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+
   // auth
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
@@ -127,7 +129,12 @@ export const SidebarProjectsList: FC = observer(() => {
     setIsAllProjectsListOpen(isOpen);
     localStorage.setItem("isAllProjectsListOpen", isOpen.toString());
   };
-
+  useEffect(() => {
+    if (pathname.includes("projects")) {
+      setIsAllProjectsListOpen(true);
+      localStorage.setItem("isAllProjectsListOpen", "true");
+    }
+  }, [pathname]);
   return (
     <>
       {workspaceSlug && (

web/core/store/favorite.store.ts

@@ -399,6 +399,9 @@ export class FavoriteStore implements IFavoriteStore {
    */
   fetchFavorite = async (workspaceSlug: string) => {
     try {
+      this.favoriteIds = [];
+      this.favoriteMap = {};
+      this.entityMap = {};
       const favorites = await this.favoriteService.getFavorites(workspaceSlug);
       runInAction(() => {
         favorites.forEach((favorite) => {

web/core/store/pages/project-page.store.ts

@@ -53,6 +53,7 @@ export class ProjectPageStore implements IProjectPageStore {
   };
   // service
   service: ProjectPageService;
+  rootStore: CoreRootStore;
 
   constructor(private store: CoreRootStore) {
     makeObservable(this, {
@@ -70,6 +71,7 @@ export class ProjectPageStore implements IProjectPageStore {
       createPage: action,
       removePage: action,
     });
+    this.rootStore = store;
     // service
     this.service = new ProjectPageService();
     // initialize display filters of the current project
@@ -257,7 +259,10 @@ export class ProjectPageStore implements IProjectPageStore {
       if (!workspaceSlug || !projectId || !pageId) return undefined;
 
       await this.service.remove(workspaceSlug, projectId, pageId);
-      runInAction(() => unset(this.data, [pageId]));
+      runInAction(() => {
+        unset(this.data, [pageId]);
+        this.rootStore.favorite.removeFavoriteFromStore(pageId);
+      });
     } catch (error) {
       runInAction(() => {
         this.loader = undefined;