fix: unify sidebar switch (#2616)

packages/component/src/components/app-sidebar/sidebar-header/index.tsx

@@ -1,15 +1,12 @@
 import { getEnvironment } from '@affine/env/config';
-import {
-  ArrowLeftSmallIcon,
-  ArrowRightSmallIcon,
-  SidebarIcon,
-} from '@blocksuite/icons';
-import { useAtom } from 'jotai';
+import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
+import { useAtomValue } from 'jotai';
 
 import { IconButton } from '../../..';
 import type { History } from '..';
-import { navHeaderStyle, sidebarButtonStyle } from '../index.css';
+import { navHeaderStyle } from '../index.css';
 import { appSidebarOpenAtom } from '../index.jotai';
+import { SidebarSwitch } from './sidebar-switch';
 
 export type SidebarHeaderProps = {
   router?: {
@@ -20,7 +17,7 @@ export type SidebarHeaderProps = {
 };
 
 export const SidebarHeader = (props: SidebarHeaderProps) => {
-  const [open, setOpen] = useAtom(appSidebarOpenAtom);
+  const open = useAtomValue(appSidebarOpenAtom);
   const environment = getEnvironment();
   return (
     <div className={navHeaderStyle} data-open={open}>
@@ -57,13 +54,9 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
           {!environment.isMacOs && <div style={{ flex: 1 }} />}
         </>
       )}
-      <IconButton
-        data-testid="app-sidebar-arrow-button-collapse"
-        className={sidebarButtonStyle}
-        onClick={() => setOpen(open => !open)}
-      >
-        <SidebarIcon width={24} height={24} />
-      </IconButton>
+      {open && <SidebarSwitch />}
     </div>
   );
 };
+
+export * from './sidebar-switch';

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx

@@ -0,0 +1,31 @@
+import { IconButton, Tooltip } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { SidebarIcon } from '@blocksuite/icons';
+import { useAtom } from 'jotai';
+
+import { sidebarButtonStyle } from '../index.css';
+import { appSidebarOpenAtom } from '../index.jotai';
+
+export const SidebarSwitch = () => {
+  const [open, setOpen] = useAtom(appSidebarOpenAtom);
+  const t = useAFFiNEI18N();
+  const tooltipContent = open ? t['Collapse sidebar']() : t['Expand sidebar']();
+  const collapseKeyboardShortcuts =
+    environment.isBrowser && environment.isMacOs ? ' ⌘+/' : ' Ctrl+/';
+
+  return (
+    <Tooltip
+      content={tooltipContent + ' ' + collapseKeyboardShortcuts}
+      placement="right"
+      zIndex={1000}
+    >
+      <IconButton
+        data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
+        className={sidebarButtonStyle}
+        onClick={() => setOpen(open => !open)}
+      >
+        <SidebarIcon width={24} height={24} />
+      </IconButton>
+    </Tooltip>
+  );
+};