feat: persist sidebar open/close state #17559
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## new-navigation #17559 +/- ##
==================================================
- Coverage 46.50% 46.32% -0.18%
==================================================
Files 768 770 +2
Lines 25020 25140 +120
Branches 5745 5756 +11
==================================================
+ Hits 11635 11646 +11
- Misses 11927 12031 +104
- Partials 1458 1463 +5 |
src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx
Outdated
Show resolved
Hide resolved
| setIsSidebarOpen(!mdBreakpoint); | ||
| }, [mdBreakpoint, setIsSidebarOpen]); | ||
| if (sideBarOpenStatus !== SidebarOpenStatus.MANUAL_OPEN && sideBarOpenStatus !== SidebarOpenStatus.MANUAL_CLOSED) { | ||
| setSidebarOpenStatus(mdBreakpoint ? SidebarOpenStatus.CLOSED : SidebarOpenStatus.OPEN); |
There was a problem hiding this comment.
Here we don't care if status was SidebarOpenStatus.CLOSED or SidebarOpenStatus.OPEN, so if we will use instead of those two one SidebarOpenStatus.AUTO to persist status and true/false for openStatus, we can write here
if (sideBarOpenStatus === SidebarOpenStatus.AUTO) {
setSidebarOpenStatus(!mdBreakpoint);
}
There was a problem hiding this comment.
yep agreed. Actually a useEffect is not even needed here since there are no effects in there.
The entire code should be something like
const mdBreaking = ...
const sideBarOpen = sidebarStatus === AUTO ? mdBreaking : sidebarStatus === OPEN;
There was a problem hiding this comment.
done in f83d6e8
| isOpen: boolean; | ||
| setIsOpen: (isOpen: boolean) => void; | ||
| toggleIsOpen: () => void; | ||
| openStatus: SidebarOpenStatus; |
There was a problem hiding this comment.
openStatus is never set to MANUAL_... statuses, right? - then I'd set it to boolean
There was a problem hiding this comment.
done in f83d6e8
| export const SidebarOpenStatus = { | ||
| OPEN: 'OPEN', | ||
| CLOSED: 'CLOSED', | ||
| MANUAL_OPEN: 'MANUAL_OPEN', | ||
| MANUAL_CLOSED: 'MANUAL_CLOSED', | ||
| } as const; |
There was a problem hiding this comment.
As @svitovyda suggested, this can be simplified to
{
OPEN, // When the user has decided to open manually
CLOSED, // when the user has decided to manually close
AUTO, // Will automatically adapt to the screen size
}There was a problem hiding this comment.
done in f83d6e8
|
Description
Persist Sidebar Open/Close State
This pull request introduces a feature to persist the open/close state of the sidebar across sessions. The state is saved to
localStorageusing Zustand'spersistmiddleware. This ensures that the sidebar retains its state even after a page refresh or browser restart.Changes
Define Sidebar Open Status Constants:
SidebarOpenStatusas an object withOPEN,CLOSED,MANUAL_OPEN, andMANUAL_CLOSEDstates.SidebarOpenStatusfor better TypeScript support.Update Zustand Store:
openStatusto track the sidebar's state.openStatus.persistmiddleware to store theopenStatusinlocalStorage.Update Sidebar Component:
useEffecthook to respect the manually setopenStatus.openStatusand screen size breakpoint.Screenshots/Screencast (for UI changes)
REC-20240612162615.mp4