🎨 style: Ensure Side Panel state Remains on Refresh (#2210)

client/src/components/Chat/Presentation.tsx

@@ -54,6 +54,7 @@ export default function Presentation({
 
   const defaultLayout = resizableLayout ? JSON.parse(resizableLayout) : undefined;
   const defaultCollapsed = collapsedPanels ? JSON.parse(collapsedPanels) : undefined;
+  const fullCollapse = localStorage.getItem('fullPanelCollapse') === 'true';
 
   const layout = () => (
     <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white pt-0 dark:bg-gray-800">
@@ -70,7 +71,11 @@ export default function Presentation({
         ref={drop}
         className="relative flex w-full grow overflow-hidden bg-white dark:bg-gray-800"
       >
-        <SidePanel defaultLayout={defaultLayout} defaultCollapsed={defaultCollapsed}>
+        <SidePanel
+          defaultLayout={defaultLayout}
+          defaultCollapsed={defaultCollapsed}
+          fullPanelCollapse={fullCollapse}
+        >
           <div className="flex h-full flex-col" role="presentation" tabIndex={0}>
             {children}
             {isActive && <DragDropOverlay />}

client/src/components/SidePanel/SidePanel.tsx

@@ -21,6 +21,7 @@ interface SidePanelProps {
   defaultLayout?: number[] | undefined;
   defaultCollapsed?: boolean;
   navCollapsedSize?: number;
+  fullPanelCollapse?: boolean;
   children: React.ReactNode;
 }
 
@@ -29,13 +30,15 @@ const defaultMinSize = 20;
 const SidePanel = ({
   defaultLayout = [97, 3],
   defaultCollapsed = false,
+  fullPanelCollapse = false,
   navCollapsedSize = 3,
   children,
 }: SidePanelProps) => {
-  const [minSize, setMinSize] = useState(defaultMinSize);
   const [isHovering, setIsHovering] = useState(false);
+  const [minSize, setMinSize] = useState(defaultMinSize);
   const [newUser, setNewUser] = useLocalStorage('newUser', true);
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const [fullCollapse, setFullCollapse] = useState(fullPanelCollapse);
   const [collapsedSize, setCollapsedSize] = useState(navCollapsedSize);
   const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
   const { data: keyExpiry = { expiresAt: undefined } } = useUserKeyQuery(EModelEndpoint.assistants);
@@ -80,10 +83,11 @@ const SidePanel = ({
       label: '',
       icon: ArrowRightToLine,
       onClick: () => {
-        console.log('hide-panel');
         setIsCollapsed(true);
         setCollapsedSize(0);
-        setMinSize(defaultMinSize - 1);
+        setMinSize(defaultMinSize);
+        setFullCollapse(true);
+        localStorage.setItem('fullPanelCollapse', 'true');
         panelRef.current?.collapse();
       },
       id: 'hide-panel',
@@ -105,15 +109,16 @@ const SidePanel = ({
       setIsCollapsed(true);
       setCollapsedSize(0);
       setMinSize(defaultMinSize);
+      setFullCollapse(true);
+      localStorage.setItem('fullPanelCollapse', 'true');
       panelRef.current?.collapse();
       return;
     } else {
       setIsCollapsed(defaultCollapsed);
       setCollapsedSize(navCollapsedSize);
       setMinSize(defaultMinSize);
-      panelRef.current?.collapse();
     }
-  }, [isSmallScreen, defaultCollapsed, navCollapsedSize]);
+  }, [isSmallScreen, defaultCollapsed, navCollapsedSize, fullPanelCollapse]);
 
   const toggleNavVisible = useCallback(() => {
     if (newUser) {
@@ -123,6 +128,8 @@ const SidePanel = ({
       if (prev) {
         setMinSize(defaultMinSize);
         setCollapsedSize(navCollapsedSize);
+        setFullCollapse(false);
+        localStorage.setItem('fullPanelCollapse', 'false');
       }
       return !prev;
     });
@@ -158,8 +165,7 @@ const SidePanel = ({
                   setIsHovering={setIsHovering}
                   className={cn(
                     'fixed top-1/2',
-                    (isCollapsed && (minSize === 0 || collapsedSize === 0)) ||
+                    (isCollapsed && (minSize === 0 || collapsedSize === 0)) || fullCollapse
-                      minSize === defaultMinSize - 1
                       ? 'mr-9'
                       : 'mr-16',
                   )}
@@ -169,7 +175,7 @@ const SidePanel = ({
               </div>
             </Tooltip>
           </TooltipProvider>
-          {(!isCollapsed || (minSize > 0 && minSize !== defaultMinSize - 1)) && (
+          {(!isCollapsed || minSize > 0) && !isSmallScreen && !fullCollapse && (
             <ResizableHandleAlt withHandle className="bg-transparent dark:text-white" />
           )}
           <ResizablePanel
@@ -195,7 +201,7 @@ const SidePanel = ({
               'sidenav hide-scrollbar border-l border-gray-200 bg-white transition-opacity dark:border-gray-800/50 dark:bg-gray-850',
               isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]',
               (isSmallScreen && isCollapsed && (minSize === 0 || collapsedSize === 0)) ||
-                minSize === defaultMinSize - 1
+                fullCollapse
                 ? 'hidden min-w-0'
                 : 'opacity-100',
             )}
@@ -225,6 +231,8 @@ const SidePanel = ({
         className={`nav-mask${!isCollapsed ? ' active' : ''}`}
         onClick={() => {
           setIsCollapsed(() => {
+            localStorage.setItem('fullPanelCollapse', 'true');
+            setFullCollapse(true);
             setCollapsedSize(0);
             setMinSize(0);
             return false;