diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx index b6eb0c708..698869f98 100644 --- a/web/components/project/sidebar-list.tsx +++ b/web/components/project/sidebar-list.tsx @@ -5,22 +5,30 @@ import { observer } from "mobx-react"; import { useRouter } from "next/router"; import { ChevronDown, ChevronRight, Plus } from "lucide-react"; import { Disclosure, Transition } from "@headlessui/react"; +// types import { IProject } from "@plane/types"; -// hooks +// ui import { TOAST_TYPE, setToast } from "@plane/ui"; +// components import { CreateProjectModal, ProjectSidebarListItem } from "@/components/project"; +// constants import { EUserWorkspaceRoles } from "@/constants/workspace"; +// helpers import { cn } from "@/helpers/common.helper"; import { orderJoinedProjects } from "@/helpers/project.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper"; +// hooks import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store"; -// ui -// components -// helpers -// constants export const ProjectSidebarList: FC = observer(() => { + // get local storage data for isFavoriteProjectsListOpen and isAllProjectsListOpen + const isFavProjectsListOpenInLocalStorage = localStorage.getItem("isFavoriteProjectsListOpen"); + const isAllProjectsListOpenInLocalStorage = localStorage.getItem("isAllProjectsListOpen"); // states + const [isFavoriteProjectsListOpen, setIsFavoriteProjectsListOpen] = useState( + isFavProjectsListOpenInLocalStorage === "true" + ); + const [isAllProjectsListOpen, setIsAllProjectsListOpen] = useState(isAllProjectsListOpenInLocalStorage === "true"); const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false); const [isProjectModalOpen, setIsProjectModalOpen] = useState(false); const [isScrolled, setIsScrolled] = useState(false); // scroll animation state @@ -122,6 +130,16 @@ export const ProjectSidebarList: FC = observer(() => { ); }, [containerRef]); + const toggleListDisclosure = (isOpen: boolean, type: "all" | "favorite") => { + if (type === "all") { + setIsAllProjectsListOpen(isOpen); + localStorage.setItem("isAllProjectsListOpen", isOpen.toString()); + } else { + setIsFavoriteProjectsListOpen(isOpen); + localStorage.setItem("isFavoriteProjectsListOpen", isOpen.toString()); + } + }; + return ( <> {workspaceSlug && ( @@ -147,42 +165,48 @@ export const ProjectSidebarList: FC = observer(() => { >
{favoriteProjects && favoriteProjects.length > 0 && ( - - {({ open }) => ( - <> - {!isCollapsed && ( -
- - Favorites - {open ? : } - - {isAuthorizedUser && ( - + + <> + {!isCollapsed && ( +
+ toggleListDisclosure(!isFavoriteProjectsListOpen, "favorite")} + > + Favorites + {isFavoriteProjectsListOpen ? ( + + ) : ( + )} -
- )} - - + + {isAuthorizedUser && ( + + )} +
+ )} + + {isFavoriteProjectsListOpen && ( + {favoriteProjects.map((projectId, index) => ( { /> ))} - - - )} + )} + +
)}
{joinedProjects && joinedProjects.length > 0 && ( - - {({ open }) => ( - <> - {!isCollapsed && ( -
- - Your projects - {open ? : } - - {isAuthorizedUser && ( - + + <> + {!isCollapsed && ( +
+ toggleListDisclosure(!isAllProjectsListOpen, "all")} + > + Your projects + {isAllProjectsListOpen ? ( + + ) : ( + )} -
- )} - - + + {isAuthorizedUser && ( + + )} +
+ )} + + {isAllProjectsListOpen && ( + {joinedProjects.map((projectId, index) => ( { /> ))} - - - )} + )} + +
)}