feat: persist sidebar open/close state (#17559)

* feat: persist sidebar open/close state

* fix typo

* remove extra comments

* feat: handle very long folder names

* feat: folders empty state

* refactor: get rid of hook and make status 3 options

Author: thisisamir98

src/script/page/LeftSidebar/panels/Conversations/ConversationHeader/ConversationHeader.styles.ts

@@ -33,6 +33,9 @@ export const label: CSSObject = {
   fontWeight: 'var(--font-weight-semibold)',
   fontSize: 'var(--font-size-base)',
   paddingBlock: '8px',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
 };
 
 export const button: CSSObject = {

src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationFolderTab.tsx

@@ -19,11 +19,18 @@
 
 import cx from 'classnames';
 
+import {useMatchMedia} from '@wireapp/react-ui-kit';
+
 import {Config} from 'src/script/Config';
 import {createLabel} from 'src/script/conversation/ConversationLabelRepository';
 import {ConversationRepository} from 'src/script/conversation/ConversationRepository';
 import {Conversation} from 'src/script/entity/Conversation';
-import {SidebarTabs, useFolderState, useSidebarStore} from 'src/script/page/LeftSidebar/panels/Conversations/state';
+import {
+  SidebarStatus,
+  SidebarTabs,
+  useFolderState,
+  useSidebarStore,
+} from 'src/script/page/LeftSidebar/panels/Conversations/state';
 import {ContextMenuEntry, showContextMenu} from 'src/script/ui/ContextMenu';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {t} from 'Util/LocalizerUtil';
@@ -52,9 +59,11 @@ export const ConversationFolderTab = ({
   unreadConversations = [],
   dataUieName,
 }: ConversationFolderTabProps) => {
-  const {isOpen: isSidebarOpen, setIsOpen: setIsSidebarOpen} = useSidebarStore();
+  const {status: sidebarStatus, setStatus: setSidebarStatus} = useSidebarStore();
   const {openFolder, isFoldersTabOpen, toggleFoldersTab, expandedFolder} = useFolderState();
   const {conversationLabelRepository} = conversationRepository;
+  const mdBreakpoint = useMatchMedia('(max-width: 1000px)');
+  const isSideBarOpen = sidebarStatus === SidebarStatus.AUTO ? mdBreakpoint : sidebarStatus === SidebarStatus.OPEN;
 
   function toggleFolder(folderId: string) {
     openFolder(folderId);
@@ -86,13 +95,13 @@ export const ConversationFolderTab = ({
   }
 
   function handleToggleFoldersTab(event: React.MouseEvent<HTMLButtonElement>) {
-    if (isSidebarOpen) {
+    if (isSideBarOpen) {
       toggleFoldersTab();
       return;
     }
 
     if (folders.length === 0) {
-      setIsSidebarOpen(true);
+      setSidebarStatus(SidebarStatus.OPEN);
       return;
     }
 

src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx

@@ -49,7 +49,7 @@ import {ConversationsList} from './ConversationsList';
 import {ConversationTabs} from './ConversationTabs';
 import {EmptyConversationList} from './EmptyConversationList';
 import {getTabConversations} from './helpers';
-import {SidebarTabs, useFolderState, useSidebarStore} from './state';
+import {SidebarStatus, SidebarTabs, useFolderState, useSidebarStore} from './state';
 
 import {CallingViewMode, CallState} from '../../../../calling/CallState';
 import {createLabel} from '../../../../conversation/ConversationLabelRepository';
@@ -99,13 +99,7 @@ const Conversations: React.FC<ConversationsProps> = ({
   userState = container.resolve(UserState),
   selfUser,
 }) => {
-  const {
-    isOpen: isSideBarOpen,
-    toggleIsOpen: toggleSidebarIsOpen,
-    setIsOpen: setIsSidebarOpen,
-    currentTab,
-    setCurrentTab,
-  } = useSidebarStore();
+  const {currentTab, status: sidebarStatus, setStatus: setSidebarStatus, setCurrentTab} = useSidebarStore();
   const [conversationsFilter, setConversationsFilter] = useState<string>('');
   const [isConversationFilterFocused, setIsConversationFilterFocused] = useState(false);
   const {classifiedDomains, isTeam} = useKoSubscribableChildren(teamState, ['classifiedDomains', 'isTeam']);
@@ -148,6 +142,9 @@ const Conversations: React.FC<ConversationsProps> = ({
   const {openFolder, closeFolder, expandedFolder, isFoldersTabOpen, toggleFoldersTab} = useFolderState();
   const {currentFocus, handleKeyDown, resetConversationFocus} = useConversationFocus(conversations);
 
+  const mdBreakpoint = useMatchMedia('(max-width: 1000px)');
+  const isSideBarOpen = sidebarStatus === SidebarStatus.AUTO ? mdBreakpoint : sidebarStatus === SidebarStatus.OPEN;
+
   const {conversations: currentTabConversations, searchInputPlaceholder} = getTabConversations({
     currentTab,
     conversations,
@@ -167,17 +164,12 @@ const Conversations: React.FC<ConversationsProps> = ({
     if (isFoldersTabOpen) {
       toggleFoldersTab();
     }
-    toggleSidebarIsOpen();
+
+    setSidebarStatus(isSideBarOpen ? SidebarStatus.CLOSED : SidebarStatus.OPEN);
   }
 
   const hasNoConversations = conversations.length + connectRequests.length === 0;
 
-  const mdBreakpoint = useMatchMedia('(max-width: 1000px)');
-
-  useEffect(() => {
-    setIsSidebarOpen(!mdBreakpoint);
-  }, [mdBreakpoint, setIsSidebarOpen]);
-
   useEffect(() => {
     if (activeConversation && !conversationState.isVisible(activeConversation)) {
       // If the active conversation is not visible, switch to the recent view

src/script/page/LeftSidebar/panels/Conversations/EmptyConversationList/EmptyConversationList.tsx

@@ -47,7 +47,7 @@ export const EmptyConversationList = ({currentTab, onChangeTab, searchValue = ''
     </Button>
   );
 
-  if (currentTab === SidebarTabs.RECENT) {
+  if (currentTab === SidebarTabs.RECENT || currentTab === SidebarTabs.FOLDER) {
     return (
       <div css={wrapper}>
         <div>

src/script/page/LeftSidebar/panels/Conversations/state.ts

@@ -18,6 +18,7 @@
  */
 
 import {create} from 'zustand';
+import {persist, createJSONStorage} from 'zustand/middleware';
 
 type FolderState = {
   expandedFolder: string;
@@ -68,22 +69,37 @@ export enum SidebarTabs {
   PREFERENCES,
 }
 
+export const SidebarStatus = {
+  OPEN: 'OPEN',
+  CLOSED: 'CLOSED',
+  AUTO: 'AUTO',
+} as const;
+
+export type SidebarStatus = (typeof SidebarStatus)[keyof typeof SidebarStatus];
+
 export interface SidebarStore {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  toggleIsOpen: () => void;
+  status: SidebarStatus;
+  setStatus: (status: SidebarStatus) => void;
   currentTab: SidebarTabs;
   setCurrentTab: (tab: SidebarTabs) => void;
 }
 
-const useSidebarStore = create<SidebarStore>((set, get) => ({
-  currentTab: SidebarTabs.RECENT,
-  setCurrentTab: (tab: SidebarTabs) => {
-    set({currentTab: tab});
-  },
-  isOpen: true,
-  setIsOpen: isOpen => set({isOpen}),
-  toggleIsOpen: () => set({isOpen: !get().isOpen}),
-}));
+const useSidebarStore = create<SidebarStore>()(
+  persist(
+    set => ({
+      currentTab: SidebarTabs.RECENT,
+      setCurrentTab: (tab: SidebarTabs) => {
+        set({currentTab: tab});
+      },
+      status: SidebarStatus.CLOSED,
+      setStatus: status => set({status: status}),
+    }),
+    {
+      name: 'sidebar-store',
+      storage: createJSONStorage(() => localStorage),
+      partialize: state => ({status: state.status}),
+    },
+  ),
+);
 
 export {useFolderState, useSidebarStore};

src/style/list/conversations.less

@@ -167,6 +167,12 @@
     font-size: 12px;
     font-weight: 400;
 
+    > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .conversations-sidebar-btn--badge {
       top: 8px;
       left: 8px;