fix: a series of bugs

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -20,10 +20,12 @@ import {
   AddIcon,
 } from '@blocksuite/icons';
 import Link from 'next/link';
+import { Tooltip } from '@/ui/tooltip';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
 
 import { IconButton } from '@/ui/button';
+import useLocalStorage from '@/hooks/use-local-storage';
 
 const FavoriteList = ({ showList }: { showList: boolean }) => {
   const { pageList, openPage } = useEditor();
@@ -45,7 +47,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
               openPage(pageMeta.id);
             }}
           >
-            {pageMeta.title || pageMeta.id}
+            {pageMeta.title || 'Untitled'}
           </StyledSubListItem>
         );
       })}
@@ -57,11 +59,13 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
 };
 export const WorkSpaceSliderBar = () => {
   const { triggerQuickSearchModal, triggerImportModal } = useModal();
-  const [show, setShow] = useState(false);
   const [showSubFavorite, setShowSubFavorite] = useState(true);
   const { createPage, getPageMeta, openPage } = useEditor();
   const router = useRouter();
 
+  const [showTip, setShowTip] = useState(false);
+  const [show, setShow] = useLocalStorage('AFFINE_SLIDE_BAR', false, true);
+
   return (
     <>
       <StyledSliderBar show={show}>
@@ -120,14 +124,27 @@ export const WorkSpaceSliderBar = () => {
           <AddIcon /> New Page
         </StyledNewPageButton>
       </StyledSliderBar>
-      <StyledArrowButton
-        isShow={show}
-        onClick={() => {
-          setShow(!show);
-        }}
+      <Tooltip
+        content={show ? 'Collapse sidebar' : 'Expand sidebar'}
+        placement="right"
+        visible={showTip}
       >
-        <Arrow />
-      </StyledArrowButton>
+        <StyledArrowButton
+          isShow={show}
+          onClick={() => {
+            setShow(!show);
+            setShowTip(false);
+          }}
+          onMouseEnter={() => {
+            setShowTip(true);
+          }}
+          onMouseLeave={() => {
+            setShowTip(false);
+          }}
+        >
+          <Arrow />
+        </StyledArrowButton>
+      </Tooltip>
     </>
   );
 };