feat: track last state left and right panel (#3477)

web/containers/Providers/Responsive.tsx

@@ -1,24 +1,33 @@
-import { Fragment, PropsWithChildren, useEffect } from 'react'
+import { Fragment, PropsWithChildren, useEffect, useRef } from 'react'
 
 import { useMediaQuery } from '@janhq/joi'
-
+import { useAtom } from 'jotai'
-import { useSetAtom } from 'jotai'
 
 import { showLeftPanelAtom, showRightPanelAtom } from '@/helpers/atoms/App.atom'
 
 const Responsive = ({ children }: PropsWithChildren) => {
   const matches = useMediaQuery('(max-width: 880px)')
-  const setShowLeftPanel = useSetAtom(showLeftPanelAtom)
+  const [showLeftPanel, setShowLeftPanel] = useAtom(showLeftPanelAtom)
-  const setShowRightPanel = useSetAtom(showRightPanelAtom)
+  const [showRightPanel, setShowRightPanel] = useAtom(showRightPanelAtom)
+
+  // Refs to store the last known state of the panels
+  const lastLeftPanelState = useRef<boolean>(true)
+  const lastRightPanelState = useRef<boolean>(true)
 
   useEffect(() => {
     if (matches) {
+      // Store the last known state before closing the panels
+      lastLeftPanelState.current = showLeftPanel
+      lastRightPanelState.current = showRightPanel
+
       setShowLeftPanel(false)
       setShowRightPanel(false)
     } else {
-      setShowLeftPanel(true)
+      // Restore the last known state when the screen is resized back
-      setShowRightPanel(true)
+      setShowLeftPanel(lastLeftPanelState.current)
+      setShowRightPanel(lastRightPanelState.current)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [matches, setShowLeftPanel, setShowRightPanel])
 
   return <Fragment>{children}</Fragment>