feat(component): shortcut style for tooltip (#7721)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/2e68337c-91f1-4ea7-8426-7fb33be02081.png)

- New `shortcut` prop for `<Tooltip />`
  - single key
      ```tsx
      <Tooltip shortcut="T" />
      ```
  - multiple
      ```tsx
      <Tooltip shortcut={["⌘",  "K"]} />
      ```
- Round tooltip's arrow
- Use new design system colors
- Replace some usage
  - App sidebar switch
  - Editor mode switch
  - New tab (new)

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

@@ -18,9 +18,6 @@ export const SidebarSwitch = ({
   const tooltipContent = open
     ? t['com.affine.sidebarSwitch.collapse']()
     : t['com.affine.sidebarSwitch.expand']();
-  // TODO(@CatsJuice): Tooltip shortcut style
-  const collapseKeyboardShortcuts =
-    environment.isBrowser && environment.isMacOs ? ' ⌘+/' : ' Ctrl+/';
 
   return (
     <div
@@ -29,7 +26,8 @@ export const SidebarSwitch = ({
       data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
     >
       <IconButton
-        tooltip={tooltipContent + ' ' + collapseKeyboardShortcuts}
+        tooltip={tooltipContent}
+        tooltipShortcut={['$mod', '/']}
         tooltipOptions={{ side: open ? 'bottom' : 'right' }}
         className={className}
         size="24"

packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx

@@ -13,7 +13,7 @@ import { useCallback, useEffect } from 'react';
 
 import type { DocCollection } from '../../../shared';
 import { toast } from '../../../utils';
-import { StyledEditorModeSwitch, StyledKeyboardItem } from './style';
+import { StyledEditorModeSwitch } from './style';
 import { EdgelessSwitchItem, PageSwitchItem } from './switch-items';
 
 export type EditorModeSwitchProps = {
@@ -24,17 +24,7 @@ export type EditorModeSwitchProps = {
   isPublic?: boolean;
   publicMode?: DocMode;
 };
-const TooltipContent = () => {
-  const t = useI18n();
-  return (
-    <>
-      {t['Switch']()}
-      <StyledKeyboardItem>
-        {!environment.isServer && environment.isMacOs ? '⌥ + S' : 'Alt + S'}
-      </StyledKeyboardItem>
-    </>
-  );
-};
+
 export const EditorModeSwitch = ({
   style,
   docCollection,
@@ -106,7 +96,9 @@ export const EditorModeSwitch = ({
 
   return (
     <Tooltip
-      content={<TooltipContent />}
+      content={t['Switch']()}
+      shortcut={['$alt', 'S']}
+      side="bottom"
       options={{
         hidden: isPublic || trash,
       }}

packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/style.ts

@@ -1,5 +1,6 @@
 import { displayFlex, styled } from '@affine/component';
 
+// TODO(@CatsJuice): refactor this component
 export const StyledEditorModeSwitch = styled('div')<{
   switchLeft: boolean;
   showAlone?: boolean;
@@ -59,14 +60,3 @@ export const StyledSwitchItem = styled('button')<{
     },
   };
 });
-
-export const StyledKeyboardItem = styled('span')(() => {
-  return {
-    marginLeft: '10px',
-    fontSize: 'var(--affine-font-xs)',
-    paddingLeft: '5px',
-    paddingRight: '5px',
-    backgroundColor: 'var(--affine-white-10)',
-    borderRadius: '4px',
-  };
-});