feat(core): rewrite page-mode-switch with RadioGroup, bind hotkey with cmdk (#7758)

close AF-1170

- bump `@toeverything/theme`
- refactor page-mode-switch
  - use global `<RadioGroup />`
  - reuse for doc history
  - remove `styled` usage
  - bind hotkey via cmdk
- Update `<RadioGroup />` color scheme with latest design system
- Update right sidebar header tab style
- Update tooltip with shortcut for app nav button

packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx

@@ -2,9 +2,8 @@ import { IconButton } from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect } from 'react';
 
-import { useGeneralShortcuts } from '../../../hooks/affine/use-shortcuts';
 import { NavigatorService } from '../services/navigator';
 import * as styles from './navigation-buttons.css';
 
@@ -13,22 +12,6 @@ const tooltipSideBottom = { side: 'bottom' as const };
 export const NavigationButtons = () => {
   const t = useI18n();
 
-  const shortcuts = useGeneralShortcuts().shortcuts;
-
-  const shortcutsObject = useMemo(() => {
-    const goBack = t['com.affine.keyboardShortcuts.goBack']();
-    const goBackShortcut = shortcuts?.[goBack];
-
-    const goForward = t['com.affine.keyboardShortcuts.goForward']();
-    const goForwardShortcut = shortcuts?.[goForward];
-    return {
-      goBack,
-      goBackShortcut,
-      goForward,
-      goForwardShortcut,
-    };
-  }, [shortcuts, t]);
-
   const navigator = useService(NavigatorService).navigator;
 
   const backable = useLiveData(navigator.backable$);
@@ -65,11 +48,11 @@ export const NavigationButtons = () => {
     return null;
   }
 
-  // TODO(@CatsJuice): tooltip with shortcut
   return (
     <div className={styles.container}>
       <IconButton
-        tooltip={`${shortcutsObject.goBack} ${shortcutsObject.goBackShortcut}`}
+        tooltip={t['Go Back']()}
+        tooltipShortcut={['$mod', '[']}
         tooltipOptions={tooltipSideBottom}
         className={styles.button}
         data-testid="app-navigation-button-back"
@@ -80,7 +63,8 @@ export const NavigationButtons = () => {
         <ArrowLeftSmallIcon />
       </IconButton>
       <IconButton
-        tooltip={`${shortcutsObject.goForward} ${shortcutsObject.goForwardShortcut}`}
+        tooltip={t['Go Forward']()}
+        tooltipShortcut={['$mod', ']']}
         tooltipOptions={tooltipSideBottom}
         className={styles.button}
         data-testid="app-navigation-button-forward"

packages/frontend/core/src/modules/quicksearch/views/cmdk.tsx

@@ -289,6 +289,12 @@ const CMDKKeyBinding = ({ keyBinding }: { keyBinding: string }) => {
       if (fragment === '$mod') {
         return isMacOS ? '⌘' : 'Ctrl';
       }
+      if (fragment === 'Alt') {
+        return isMacOS ? '⌥' : 'Alt';
+      }
+      if (fragment.startsWith('Key')) {
+        return fragment.slice(3);
+      }
       if (fragment === 'ArrowUp') {
         return '↑';
       }

packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-header-switcher.tsx

@@ -1,6 +1,5 @@
 import { RadioGroup } from '@affine/component';
 import { useLiveData, useService } from '@toeverything/infra';
-import { cssVar } from '@toeverything/theme';
 import { useCallback } from 'react';
 
 import { ViewService } from '../../services/view';
@@ -35,6 +34,7 @@ export const SidebarHeaderSwitcher = () => {
 
   return tabItems.length ? (
     <RadioGroup
+      iconMode
       borderRadius={8}
       itemHeight={24}
       padding={4}
@@ -42,7 +42,6 @@ export const SidebarHeaderSwitcher = () => {
       items={tabItems}
       value={activeTab?.id}
       onChange={handleActiveTabChange}
-      activeItemStyle={{ color: cssVar('primaryColor') }}
     />
   ) : null;
 };