From fc996158759bb2fc53a17f80ab6b00e6572e09bf Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 17 Oct 2023 12:18:36 +0530
Subject: [PATCH] fix: sidebar collapse state not working (#2452)

---
 web/components/project/sidebar-list-item.tsx | 30 ++++++++++----------
 web/components/project/sidebar-list.tsx      | 10 +++----
 web/components/workspace/help-section.tsx    | 26 ++++++++---------
 3 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index 5f6f090f7..cab10e7bd 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -26,7 +26,6 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { IProject } from "types";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 // components
 import { CustomMenu } from "components/ui";
 import { LeaveProjectModal, DeleteProjectModal } from "components/project";
@@ -34,7 +33,6 @@ import { PublishProjectModal } from "components/project/publish-project";
 
 type Props = {
   project: IProject;
-  sidebarCollapse: boolean;
   provided?: DraggableProvided;
   snapshot?: DraggableStateSnapshot;
   handleCopyText: () => void;
@@ -75,9 +73,9 @@ const navigation = (workspaceSlug: string, projectId: string) => [
 ];
 
 export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
-  const { project, sidebarCollapse, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
+  const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
   // store
-  const { projectPublish, project: projectStore }: RootStore = useMobxStore();
+  const { projectPublish, project: projectStore, theme: themeStore } = useMobxStore();
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -90,6 +88,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   const isAdmin = project.member_role === 20;
   const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
 
+  const isCollapsed = themeStore.sidebarCollapsed;
+
   const handleAddToFavorites = () => {
     if (!workspaceSlug) return;
 
@@ -152,7 +152,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   <button
                     type="button"
                     className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
-                      sidebarCollapse ? "" : "group-hover:!flex"
+                      isCollapsed ? "" : "group-hover:!flex"
                     } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
                     {...provided?.dragHandleProps}
                   >
@@ -161,16 +161,16 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   </button>
                 </Tooltip>
               )}
-              <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!sidebarCollapse}>
+              <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!isCollapsed}>
                 <Disclosure.Button
                   as="div"
                   className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
-                    sidebarCollapse ? "justify-center" : `justify-between`
+                    isCollapsed ? "justify-center" : `justify-between`
                   }`}
                 >
                   <div
                     className={`flex items-center flex-grow w-full truncate gap-x-2 ${
-                      sidebarCollapse ? "justify-center" : ""
+                      isCollapsed ? "justify-center" : ""
                     }`}
                   >
                     {project.emoji ? (
@@ -187,11 +187,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       </span>
                     )}
 
-                    {!sidebarCollapse && (
+                    {!isCollapsed && (
                       <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p>
                     )}
                   </div>
-                  {!sidebarCollapse && (
+                  {!isCollapsed && (
                     <ChevronDown
                       className={`h-4 w-4 flex-shrink-0 ${
                         open ? "rotate-180" : ""
@@ -201,7 +201,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                 </Disclosure.Button>
               </Tooltip>
 
-              {!sidebarCollapse && (
+              {!isCollapsed && (
                 <CustomMenu
                   className="hidden group-hover:block flex-shrink-0"
                   buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
@@ -298,7 +298,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
               leaveFrom="transform scale-100 opacity-100"
               leaveTo="transform scale-95 opacity-0"
             >
-              <Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
+              <Disclosure.Panel className={`space-y-2 mt-1 ${isCollapsed ? "" : "ml-[2.25rem]"}`}>
                 {navigation(workspaceSlug as string, project?.id).map((item) => {
                   if (
                     (item.name === "Cycles" && !project.cycle_view) ||
@@ -315,17 +315,17 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                           tooltipContent={`${project?.name}: ${item.name}`}
                           position="right"
                           className="ml-2"
-                          disabled={!sidebarCollapse}
+                          disabled={!isCollapsed}
                         >
                           <div
                             className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
                               router.asPath.includes(item.href)
                                 ? "bg-custom-primary-100/10 text-custom-primary-100"
                                 : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                            } ${sidebarCollapse ? "justify-center" : ""}`}
+                            } ${isCollapsed ? "justify-center" : ""}`}
                           >
                             <item.Icon className="h-4 w-4" />
-                            {!sidebarCollapse && item.name}
+                            {!isCollapsed && item.name}
                           </div>
                         </Tooltip>
                       </a>
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index cd6eae038..8ff868689 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -83,6 +83,8 @@ export const ProjectSidebarList: FC = observer(() => {
       });
   };
 
+  const isCollapsed = themeStore.sidebarCollapsed || false;
+
   /**
    * Implementing scroll animation styles based on the scroll length of the container
    */
@@ -126,7 +128,7 @@ export const ProjectSidebarList: FC = observer(() => {
                   <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
                     {({ open }) => (
                       <>
-                        {!themeStore?.sidebarCollapsed && (
+                        {!isCollapsed && (
                           <div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
                             <Disclosure.Button
                               as="button"
@@ -164,7 +166,6 @@ export const ProjectSidebarList: FC = observer(() => {
                                   <ProjectSidebarListItem
                                     key={project.id}
                                     project={project}
-                                    sidebarCollapse={themeStore?.sidebarCollapsed || false}
                                     provided={provided}
                                     snapshot={snapshot}
                                     handleCopyText={() => handleCopyText(project.id)}
@@ -192,7 +193,7 @@ export const ProjectSidebarList: FC = observer(() => {
                   <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
                     {({ open }) => (
                       <>
-                        {!themeStore?.sidebarCollapsed && (
+                        {!isCollapsed && (
                           <div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
                             <Disclosure.Button
                               as="button"
@@ -233,7 +234,6 @@ export const ProjectSidebarList: FC = observer(() => {
                                     <ProjectSidebarListItem
                                       key={project.id}
                                       project={project}
-                                      sidebarCollapse={themeStore?.sidebarCollapsed || false}
                                       provided={provided}
                                       snapshot={snapshot}
                                       handleCopyText={() => handleCopyText(project.id)}
@@ -266,7 +266,7 @@ export const ProjectSidebarList: FC = observer(() => {
             }}
           >
             <Plus className="h-5 w-5" />
-            {!themeStore?.sidebarCollapsed && "Add Project"}
+            {!isCollapsed && "Add Project"}
           </button>
         )}
       </div>
diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
index 03d0cef8b..da4b23bf1 100644
--- a/web/components/workspace/help-section.tsx
+++ b/web/components/workspace/help-section.tsx
@@ -51,27 +51,25 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
 
   useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
 
+  const isCollapsed = themeStore.sidebarCollapsed || false;
+
   return (
     <>
       <div
         className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 py-2 px-4 ${
-          themeStore?.sidebarCollapsed ? "flex-col" : ""
+          isCollapsed ? "flex-col" : ""
         }`}
       >
-        {!themeStore?.sidebarCollapsed && (
+        {!isCollapsed && (
           <div className="w-1/2 text-center cursor-default rounded-md px-2.5 py-1.5 font-medium outline-none text-sm bg-green-500/10 text-green-500">
             Free Plan
           </div>
         )}
-        <div
-          className={`flex items-center gap-1 ${
-            themeStore?.sidebarCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"
-          }`}
-        >
+        <div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"}`}>
           <button
             type="button"
             className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
-              themeStore?.sidebarCollapsed ? "w-full" : ""
+              isCollapsed ? "w-full" : ""
             }`}
             onClick={() => {
               const e = new KeyboardEvent("keydown", {
@@ -85,7 +83,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <button
             type="button"
             className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
-              themeStore?.sidebarCollapsed ? "w-full" : ""
+              isCollapsed ? "w-full" : ""
             }`}
             onClick={() => setIsNeedHelpOpen((prev) => !prev)}
           >
@@ -94,18 +92,18 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <button
             type="button"
             className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
-            onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)}
+            onClick={() => themeStore.setSidebarCollapsed(!isCollapsed)}
           >
             <MoveLeft className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
             className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
-              themeStore?.sidebarCollapsed ? "w-full" : ""
+              isCollapsed ? "w-full" : ""
             }`}
-            onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)}
+            onClick={() => themeStore.setSidebarCollapsed(!isCollapsed)}
           >
-            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${themeStore?.sidebarCollapsed ? "rotate-180" : ""}`} />
+            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
           </button>
         </div>
 
@@ -121,7 +119,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           >
             <div
               className={`absolute bottom-2 min-w-[10rem] ${
-                themeStore?.sidebarCollapsed ? "left-full" : "-left-[75px]"
+                isCollapsed ? "left-full" : "-left-[75px]"
               } rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs whitespace-nowrap divide-y divide-custom-border-200`}
               ref={helpOptionsRef}
             >