feat(core): add tooltips to sidebar resize handle (#8717)

close PD-1865
![CleanShot 2024-11-06 at 12 52 35@2x](https://github.com/user-attachments/assets/b7353448-f8c5-4cfb-bfed-d1acff2923c4)

packages/frontend/core/src/modules/app-sidebar/views/index.css.ts

@@ -105,3 +105,8 @@ export const sidebarFloatMaskStyle = style({
     },
   },
 });
+
+export const resizeHandleShortcutStyle = style({
+  alignItems: 'flex-end',
+  marginBottom: '2px',
+});

packages/frontend/core/src/modules/app-sidebar/views/index.tsx

@@ -3,6 +3,7 @@ import { ResizePanel } from '@affine/component/resize-panel';
 import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
 import { NavigateContext } from '@affine/core/components/hooks/use-navigate-helper';
 import { WorkspaceNavigator } from '@affine/core/components/workspace-selector';
+import { useI18n } from '@affine/i18n';
 import {
   useLiveData,
   useService,
@@ -23,6 +24,7 @@ import {
   navHeaderStyle,
   navStyle,
   navWrapperStyle,
+  resizeHandleShortcutStyle,
   sidebarFloatMaskStyle,
 } from './index.css';
 import { SidebarHeader } from './sidebar-header';
@@ -170,6 +172,13 @@ export function AppSidebar({ children }: PropsWithChildren) {
         })}
         resizeHandleOffset={0}
         resizeHandleVerticalPadding={clientBorder ? 16 : 0}
+        resizeHandleTooltip={<ResizeHandleTooltipContent />}
+        resizeHandleTooltipOptions={{
+          side: 'right',
+          align: 'center',
+        }}
+        resizeHandleTooltipShortcut={['$mod', '/']}
+        resizeHandleTooltipShortcutClassName={resizeHandleShortcutStyle}
         data-transparent
         data-open={sidebarState !== 'close'}
         data-has-border={hasRightBorder}
@@ -198,6 +207,16 @@ export function AppSidebar({ children }: PropsWithChildren) {
   );
 }
 
+const ResizeHandleTooltipContent = () => {
+  const t = useI18n();
+  return (
+    <div>
+      <div>{t['com.affine.rootAppSidebar.resize-handle.tooltip.drag']()}</div>
+      <div>{t['com.affine.rootAppSidebar.resize-handle.tooltip.click']()}</div>
+    </div>
+  );
+};
+
 export function FallbackHeader() {
   return (
     <div className={styles.fallbackHeader}>

packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx

@@ -1,5 +1,4 @@
 import { IconButton } from '@affine/component';
-import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { SidebarIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -45,11 +44,6 @@ export const SidebarSwitch = ({
     appSidebarService.toggleSidebar();
   }, [appSidebarService, open]);
 
-  const t = useI18n();
-  const tooltipContent = open
-    ? t['com.affine.sidebarSwitch.collapse']()
-    : t['com.affine.sidebarSwitch.expand']();
-
   return (
     <div
       ref={switchRef}
@@ -59,12 +53,6 @@ export const SidebarSwitch = ({
       onMouseEnter={handleMouseEnter}
     >
       <IconButton
-        tooltip={tooltipContent}
-        tooltipShortcut={['$mod', '/']}
-        tooltipOptions={{
-          side: open ? 'bottom' : 'right',
-          rootOptions: { delayDuration: 700 },
-        }}
         className={className}
         size="24"
         style={{