feat: modify shortcut key style (#3807)

apps/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx

@@ -3,20 +3,48 @@ import { SettingWrapper } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import {
+  type ShortcutsInfo,
   useEdgelessShortcuts,
   useGeneralShortcuts,
   useMarkdownShortcuts,
   usePageShortcuts,
 } from '../../../../../hooks/affine/use-shortcuts';
-import { shortcutRow } from './style.css';
+import { shortcutKey, shortcutKeyContainer, shortcutRow } from './style.css';
+
+const ShortcutsPanel = ({
+  shortcutsInfo,
+}: {
+  shortcutsInfo: ShortcutsInfo;
+}) => {
+  return (
+    <SettingWrapper title={shortcutsInfo.title}>
+      {Object.entries(shortcutsInfo.shortcuts).map(([title, shortcuts]) => {
+        return (
+          <div key={title} className={shortcutRow}>
+            <span>{title}</span>
+            <div className={shortcutKeyContainer}>
+              {shortcuts.map(key => {
+                return (
+                  <span className={shortcutKey} key={key}>
+                    {key}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </SettingWrapper>
+  );
+};
 
 export const Shortcuts = () => {
   const t = useAFFiNEI18N();
 
-  const markdownShortcuts = useMarkdownShortcuts();
+  const markdownShortcutsInfo = useMarkdownShortcuts();
-  const pageShortcuts = usePageShortcuts();
+  const pageShortcutsInfo = usePageShortcuts();
-  const edgelessShortcuts = useEdgelessShortcuts();
+  const edgelessShortcutsInfo = useEdgelessShortcuts();
-  const generalShortcuts = useGeneralShortcuts();
+  const generalShortcutsInfo = useGeneralShortcuts();
 
   return (
     <>
@@ -25,46 +53,10 @@ export const Shortcuts = () => {
         subtitle={t['Check Keyboard Shortcuts quickly']()}
         data-testid="keyboard-shortcuts-title"
       />
-      <SettingWrapper title={t['General']()}>
+      <ShortcutsPanel shortcutsInfo={generalShortcutsInfo} />
-        {Object.entries(generalShortcuts).map(([title, shortcuts]) => {
+      <ShortcutsPanel shortcutsInfo={pageShortcutsInfo} />
-          return (
+      <ShortcutsPanel shortcutsInfo={edgelessShortcutsInfo} />
-            <div key={title} className={shortcutRow}>
+      <ShortcutsPanel shortcutsInfo={markdownShortcutsInfo} />
-              <span>{title}</span>
-              <span className="shortcut">{shortcuts}</span>
-            </div>
-          );
-        })}
-      </SettingWrapper>
-      <SettingWrapper title={t['Page']()}>
-        {Object.entries(pageShortcuts).map(([title, shortcuts]) => {
-          return (
-            <div key={title} className={shortcutRow}>
-              <span>{title}</span>
-              <span className="shortcut">{shortcuts}</span>
-            </div>
-          );
-        })}
-      </SettingWrapper>
-      <SettingWrapper title={t['Edgeless']()}>
-        {Object.entries(edgelessShortcuts).map(([title, shortcuts]) => {
-          return (
-            <div key={title} className={shortcutRow}>
-              <span>{title}</span>
-              <span className="shortcut">{shortcuts}</span>
-            </div>
-          );
-        })}
-      </SettingWrapper>
-      <SettingWrapper title={t['Markdown Syntax']()}>
-        {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
-          return (
-            <div key={title} className={shortcutRow}>
-              <span>{title}</span>
-              <span className="shortcut">{shortcuts}</span>
-            </div>
-          );
-        })}
-      </SettingWrapper>
     </>
   );
 };

apps/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts

@@ -1,4 +1,4 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 
 export const shortcutRow = style({
   height: '32px',
@@ -14,8 +14,25 @@ export const shortcutRow = style({
   },
 });
 
-globalStyle(`${shortcutRow} .shortcut`, {
+export const shortcutKeyContainer = style({
-  border: '1px solid var(--affine-border-color)',
+  display: 'flex',
-  borderRadius: '8px',
+});
-  padding: '4px 18px',
+export const shortcutKey = style({
+  minWidth: '24px',
+  height: '20px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0 6px',
+  border: '1px solid var(--affine-border-color)',
+  borderRadius: '4px',
+  background: 'var(--affine-background-tertiary-color)',
+  boxShadow:
+    '0px 6px 4px 0px rgba(255, 255, 255, 0.24) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.10) inset',
+  fontSize: 'var(--affine-font-xs)',
+  selectors: {
+    '&:not(:last-of-type)': {
+      marginRight: '2px',
+    },
+  },
 });

apps/core/src/components/pure/shortcuts-modal/index.tsx

@@ -6,46 +6,80 @@ import {
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import {
+  type ShortcutsInfo,
   useEdgelessShortcuts,
   useGeneralShortcuts,
   useMarkdownShortcuts,
   usePageShortcuts,
 } from '../../../hooks/affine/use-shortcuts';
 import { KeyboardIcon } from './icons';
-import {
+import * as styles from './style.css';
-  StyledListItem,
+// import {
-  StyledModalHeader,
+//   StyledListItem,
-  StyledShortcutsModal,
+//   StyledModalHeader,
-  StyledSubTitle,
+//   StyledShortcutsModal,
-  StyledTitle,
+//   StyledSubTitle,
-} from './style';
+//   StyledTitle,
+// } from './style';
 type ModalProps = {
   open: boolean;
   onClose: () => void;
 };
 
+const ShortcutsPanel = ({
+  shortcutsInfo,
+}: {
+  shortcutsInfo: ShortcutsInfo;
+}) => {
+  return (
+    <>
+      <div className={styles.subtitle}>{shortcutsInfo.title}</div>
+
+      {Object.entries(shortcutsInfo.shortcuts).map(([title, shortcuts]) => {
+        return (
+          <div className={styles.listItem} key={title}>
+            <span>{title}</span>
+            <div className={styles.keyContainer}>
+              {shortcuts.map(key => {
+                return (
+                  <span className={styles.key} key={key}>
+                    {key}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
 export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
   const t = useAFFiNEI18N();
 
-  const markdownShortcuts = useMarkdownShortcuts();
+  const markdownShortcutsInfo = useMarkdownShortcuts();
-  const pageShortcuts = usePageShortcuts();
+  const pageShortcutsInfo = usePageShortcuts();
-  const edgelessShortcuts = useEdgelessShortcuts();
+  const edgelessShortcutsInfo = useEdgelessShortcuts();
-  const generalShortcuts = useGeneralShortcuts();
+  const generalShortcutsInfo = useGeneralShortcuts();
 
   return (
     <MuiSlide direction="left" in={open} mountOnEnter unmountOnExit>
-      <StyledShortcutsModal data-testid="shortcuts-modal">
+      <div className={styles.shortcutsModal} data-testid="shortcuts-modal">
         <MuiClickAwayListener
           onClickAway={() => {
             onClose();
           }}
         >
           <div>
-            <StyledModalHeader>
+            <div
-              <StyledTitle>
+              className={styles.modalHeader}
+              style={{ marginBottom: '-28px' }}
+            >
+              <div className={styles.title}>
                 <KeyboardIcon />
                 {t['Shortcuts']()}
-              </StyledTitle>
+              </div>
 
               <ModalCloseButton
                 top={6}
@@ -54,48 +88,14 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
                   onClose();
                 }}
               />
-            </StyledModalHeader>
+            </div>
-            <StyledSubTitle style={{ marginTop: 0 }}>
+            <ShortcutsPanel shortcutsInfo={generalShortcutsInfo} />
-              {t['General']()}
+            <ShortcutsPanel shortcutsInfo={pageShortcutsInfo} />
-            </StyledSubTitle>
+            <ShortcutsPanel shortcutsInfo={edgelessShortcutsInfo} />
-            {Object.entries(generalShortcuts).map(([title, shortcuts]) => {
+            <ShortcutsPanel shortcutsInfo={markdownShortcutsInfo} />
-              return (
-                <StyledListItem key={title}>
-                  <span>{title}</span>
-                  <span>{shortcuts}</span>
-                </StyledListItem>
-              );
-            })}
-            <StyledSubTitle>{t['Page']()}</StyledSubTitle>
-            {Object.entries(pageShortcuts).map(([title, shortcuts]) => {
-              return (
-                <StyledListItem key={title}>
-                  <span>{title}</span>
-                  <span>{shortcuts}</span>
-                </StyledListItem>
-              );
-            })}
-            <StyledSubTitle>{t['Edgeless']()}</StyledSubTitle>
-            {Object.entries(edgelessShortcuts).map(([title, shortcuts]) => {
-              return (
-                <StyledListItem key={title}>
-                  <span>{title}</span>
-                  <span>{shortcuts}</span>
-                </StyledListItem>
-              );
-            })}
-            <StyledSubTitle>{t['Markdown Syntax']()}</StyledSubTitle>
-            {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
-              return (
-                <StyledListItem key={title}>
-                  <span>{title}</span>
-                  <span>{shortcuts}</span>
-                </StyledListItem>
-              );
-            })}
           </div>
         </MuiClickAwayListener>
-      </StyledShortcutsModal>
+      </div>
     </MuiSlide>
   );
 };

apps/core/src/components/pure/shortcuts-modal/style.css.ts

@@ -0,0 +1,89 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const shortcutsModal = style({
+  width: '288px',
+  height: '74vh',
+  paddingBottom: '28px',
+  backgroundColor: 'var(--affine-white)',
+  boxShadow: 'var(--affine-popover-shadow)',
+  borderRadius: `var(--affine-popover-radius)`,
+  overflow: 'auto',
+  position: 'fixed',
+  right: '12px',
+  top: '0',
+  bottom: '0',
+  margin: 'auto',
+  zIndex: 'var(--affine-z-index-modal)',
+});
+// export const shortcutsModal = style({
+//   color: 'var(--affine-text-primary-color)',
+//   fontWeight: '500',
+//   fontSize: 'var(--affine-font-sm)',
+//   height: '44px',
+//   display: 'flex',
+//   justifyContent: 'center',
+//   alignItems: 'center',
+//   svg: {
+//     width: '20px',
+//     marginRight: '14px',
+//     color: 'var(--affine-primary-color)',
+//   },
+// });
+export const title = style({
+  color: 'var(--affine-text-primary-color)',
+  fontWeight: '500',
+  fontSize: 'var(--affine-font-sm)',
+  height: '44px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+globalStyle(`${title} svg`, {
+  width: '20px',
+  marginRight: '14px',
+  color: 'var(--affine-primary-color)',
+});
+
+export const subtitle = style({
+  fontWeight: '500',
+  fontSize: 'var(--affine-font-sm)',
+  height: '34px',
+  lineHeight: '36px',
+  marginTop: '28px',
+  padding: '0 16px',
+});
+export const modalHeader = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingTop: '8px 4px 0 4px',
+  width: '100%',
+  padding: '8px 16px 0 16px',
+  position: 'sticky',
+  left: '0',
+  top: '0',
+  background: 'var(--affine-white)',
+  transition: 'background-color 0.5s',
+});
+
+export const listItem = style({
+  height: '34px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  fontSize: 'var(--affine-font-sm)',
+  padding: '0 16px',
+});
+export const keyContainer = style({
+  display: 'flex',
+});
+
+export const key = style({
+  selectors: {
+    '&:not(:last-child)::after': {
+      content: '+',
+      margin: '0 4px',
+    },
+  },
+});

apps/core/src/components/pure/shortcuts-modal/style.ts

@@ -1,56 +0,0 @@
-import { displayFlex, styled } from '@affine/component';
-
-export const StyledShortcutsModal = styled('div')(() => ({
-  width: '288px',
-  height: '74vh',
-  paddingBottom: '28px',
-  backgroundColor: 'var(--affine-white)',
-  boxShadow: 'var(--affine-popover-shadow)',
-  borderRadius: `var(--affine-popover-radius)`,
-  overflow: 'auto',
-  boxRadius: '10px',
-  position: 'fixed',
-  right: '12px',
-  top: '0',
-  bottom: '0',
-  margin: 'auto',
-  zIndex: 'var(--affine-z-index-modal)',
-}));
-export const StyledTitle = styled('div')(() => ({
-  color: 'var(--affine-text-primary-color)',
-  fontWeight: '500',
-  fontSize: 'var(--affine-font-sm)',
-  height: '44px',
-  ...displayFlex('center', 'center'),
-  svg: {
-    width: '20px',
-    marginRight: '14px',
-    color: 'var(--affine-primary-color)',
-  },
-}));
-export const StyledSubTitle = styled('div')(() => ({
-  fontWeight: '500',
-  fontSize: 'var(--affine-font-sm)',
-  height: '34px',
-  lineHeight: '36px',
-  marginTop: '28px',
-  padding: '0 16px',
-}));
-export const StyledModalHeader = styled('div')(() => ({
-  ...displayFlex('space-between', 'center'),
-  paddingTop: '8px 4px 0 4px',
-  width: '100%',
-  padding: '8px 16px 0 16px',
-  position: 'sticky',
-  left: '0',
-  top: '0',
-  background: 'var(--affine-white)',
-  transition: 'background-color 0.5s',
-}));
-
-export const StyledListItem = styled('div')(() => ({
-  height: '34px',
-  ...displayFlex('space-between', 'center'),
-  fontSize: 'var(--affine-font-sm)',
-  padding: '0 16px',
-}));

apps/core/src/hooks/affine/use-shortcuts.ts

@@ -1,20 +1,24 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useMemo } from 'react';
 
-interface ShortcutTip {
+interface ShortcutMap {
-  [x: string]: string;
+  [x: string]: string[];
+}
+export interface ShortcutsInfo {
+  title: string;
+  shortcuts: ShortcutMap;
 }
 
-export const useWinGeneralKeyboardShortcuts = (): ShortcutTip => {
+export const useWinGeneralKeyboardShortcuts = (): ShortcutMap => {
   const t = useAFFiNEI18N();
   return useMemo(
     () => ({
-      [t['Cancel']()]: 'ESC',
+      [t['Cancel']()]: ['ESC'],
-      [t['Quick Search']()]: 'Ctrl + K',
+      [t['Quick Search']()]: ['Ctrl', 'K'],
-      [t['New Page']()]: 'Ctrl + N',
+      [t['New Page']()]: ['Ctrl', 'N'],
       // not implement yet
       // [t['Append to Daily Note']()]: 'Ctrl + Alt + A',
-      [t['Expand/Collapse Sidebar']()]: 'Ctrl + /',
+      [t['Expand/Collapse Sidebar']()]: ['Ctrl', '/'],
       // not implement yet
       // [t['Go Back']()]: 'Ctrl + [',
       // [t['Go Forward']()]: 'Ctrl + ]',
@@ -22,16 +26,16 @@ export const useWinGeneralKeyboardShortcuts = (): ShortcutTip => {
     [t]
   );
 };
-export const useMacGeneralKeyboardShortcuts = (): ShortcutTip => {
+export const useMacGeneralKeyboardShortcuts = (): ShortcutMap => {
   const t = useAFFiNEI18N();
   return useMemo(
     () => ({
-      [t['Cancel']()]: 'ESC',
+      [t['Cancel']()]: ['ESC'],
-      [t['Quick Search']()]: '⌘ + K',
+      [t['Quick Search']()]: ['⌘', 'K'],
-      [t['New Page']()]: '⌘ + N',
+      [t['New Page']()]: ['⌘', 'N'],
       // not implement yet
       // [t['Append to Daily Note']()]: '⌘ + ⌥ + A',
-      [t['Expand/Collapse Sidebar']()]: '⌘ + /',
+      [t['Expand/Collapse Sidebar']()]: ['⌘', '/'],
       // not implement yet
       // [t['Go Back']()]: '⌘ + [',
       // [t['Go Forward']()]: '⌘ + ]',
@@ -40,28 +44,28 @@ export const useMacGeneralKeyboardShortcuts = (): ShortcutTip => {
   );
 };
 
-export const useMacEdgelessKeyboardShortcuts = (): ShortcutTip => {
+export const useMacEdgelessKeyboardShortcuts = (): ShortcutMap => {
   const t = useAFFiNEI18N();
   return useMemo(
     () => ({
-      [t['Select All']()]: '⌘ + A',
+      [t['Select All']()]: ['⌘', 'A'],
-      [t['Undo']()]: '⌘ + Z',
+      [t['Undo']()]: ['⌘', 'Z'],
-      [t['Redo']()]: '⌘ + ⇧ + Z',
+      [t['Redo']()]: ['⌘', '⇧', 'Z'],
-      [t['Zoom in']()]: '⌘ + +',
+      [t['Zoom in']()]: ['⌘', '+'],
-      [t['Zoom out']()]: '⌘ + -',
+      [t['Zoom out']()]: ['⌘', '-'],
-      [t['Zoom to 100%']()]: '⌘ + 0',
+      [t['Zoom to 100%']()]: ['⌘', '0'],
-      [t['Zoom to fit']()]: '⌘ + 1',
+      [t['Zoom to fit']()]: ['⌘', '1'],
-      [t['Select']()]: 'V',
+      [t['Select']()]: ['V'],
-      [t['Text']()]: 'T',
+      [t['Text']()]: ['T'],
-      [t['Shape']()]: 'S',
+      [t['Shape']()]: ['S'],
-      [t['Image']()]: 'I',
+      [t['Image']()]: ['I'],
-      [t['Straight Connector']()]: 'L',
+      [t['Straight Connector']()]: ['L'],
-      [t['Elbowed Connector']()]: 'X',
+      [t['Elbowed Connector']()]: ['X'],
       // not implement yet
       // [t['Curve Connector']()]: 'C',
-      [t['Pen']()]: 'P',
+      [t['Pen']()]: ['P'],
-      [t['Hand']()]: 'H',
+      [t['Hand']()]: ['H'],
-      [t['Note']()]: 'N',
+      [t['Note']()]: ['N'],
       // not implement yet
       // [t['Group']()]: '⌘ + G',
       // [t['Ungroup']()]: '⌘ + ⇧ + G',
@@ -69,29 +73,29 @@ export const useMacEdgelessKeyboardShortcuts = (): ShortcutTip => {
     [t]
   );
 };
-export const useWinEdgelessKeyboardShortcuts = (): ShortcutTip => {
+export const useWinEdgelessKeyboardShortcuts = (): ShortcutMap => {
   const t = useAFFiNEI18N();
   return useMemo(
     () => ({
-      [t['Select All']()]: 'Ctrl + A',
+      [t['Select All']()]: ['Ctrl', 'A'],
-      [t['Undo']()]: 'Ctrl + Z',
+      [t['Undo']()]: ['Ctrl', 'Z'],
-      [t['Redo']()]: 'Ctrl + Y/Ctrl + Shift + Z',
+      [t['Redo']()]: ['Ctrl', 'Y/Ctrl', 'Shift', 'Z'],
-      [t['Zoom in']()]: 'Ctrl + +',
+      [t['Zoom in']()]: ['Ctrl', '+'],
-      [t['Zoom out']()]: 'Ctrl + -',
+      [t['Zoom out']()]: ['Ctrl', '-'],
-      [t['Zoom to 100%']()]: 'Ctrl + 0',
+      [t['Zoom to 100%']()]: ['Ctrl', '0'],
-      [t['Zoom to fit']()]: 'Ctrl + 1',
+      [t['Zoom to fit']()]: ['Ctrl', '1'],
-      [t['Select']()]: 'V',
+      [t['Select']()]: ['V'],
-      [t['Text']()]: 'T',
+      [t['Text']()]: ['T'],
-      [t['Shape']()]: 'S',
+      [t['Shape']()]: ['S'],
-      [t['Image']()]: 'I',
+      [t['Image']()]: ['I'],
-      [t['Straight Connector']()]: 'L',
+      [t['Straight Connector']()]: ['L'],
-      [t['Elbowed Connector']()]: 'X',
+      [t['Elbowed Connector']()]: ['X'],
       // not implement yet
       // [t['Curve Connector']()]: 'C',
-      [t['Pen']()]: 'P',
+      [t['Pen']()]: ['P'],
-      [t['Hand']()]: 'H',
+      [t['Hand']()]: ['H'],
-      [t['Note']()]: 'N',
+      [t['Note']()]: ['N'],
-      [t['Switch']()]: 'Alt + S',
+      [t['Switch']()]: ['Alt ', ''],
       // not implement yet
       // [t['Group']()]: 'Ctrl + G',
       // [t['Ungroup']()]: 'Ctrl + Shift + G',
@@ -99,31 +103,31 @@ export const useWinEdgelessKeyboardShortcuts = (): ShortcutTip => {
     [t]
   );
 };
-export const useMacPageKeyboardShortcuts = (): ShortcutTip => {
+export const useMacPageKeyboardShortcuts = (): ShortcutMap => {
   const t = useAFFiNEI18N();
   return useMemo(
     () => ({
-      [t['Undo']()]: '⌘+Z',
+      [t['Undo']()]: ['⌘', 'Z'],
-      [t['Redo']()]: '⌘+⇧+Z',
+      [t['Redo']()]: ['⌘', '⇧', 'Z'],
-      [t['Bold']()]: '⌘+B',
+      [t['Bold']()]: ['⌘', 'B'],
-      [t['Italic']()]: '⌘+I',
+      [t['Italic']()]: ['⌘', 'I'],
-      [t['Underline']()]: '⌘+U',
+      [t['Underline']()]: ['⌘', 'U'],
-      [t['Strikethrough']()]: '⌘+⇧+S',
+      [t['Strikethrough']()]: ['⌘', '⇧', 'S'],
-      [t['Inline code']()]: ' ⌘+E',
+      [t['Inline code']()]: ['⌘', 'E'],
-      [t['Code block']()]: '⌘+⌥+C',
+      [t['Code block']()]: ['⌘', '⌥', 'C'],
-      [t['Link']()]: '⌘+K',
+      [t['Link']()]: ['⌘', 'K'],
-      [t['Quick search']()]: '⌘+K',
+      [t['Quick search']()]: ['⌘', 'K'],
-      [t['Body text']()]: '⌘+⌥+0',
+      [t['Body text']()]: ['⌘', '⌥', '0'],
-      [t['Heading']({ number: '1' })]: '⌘+⌥+1',
+      [t['Heading']({ number: '1' })]: ['⌘', '⌥', '1'],
-      [t['Heading']({ number: '2' })]: '⌘+⌥+2',
+      [t['Heading']({ number: '2' })]: ['⌘', '⌥', '2'],
-      [t['Heading']({ number: '3' })]: '⌘+⌥+3',
+      [t['Heading']({ number: '3' })]: ['⌘', '⌥', '3'],
-      [t['Heading']({ number: '4' })]: '⌘+⌥+4',
+      [t['Heading']({ number: '4' })]: ['⌘', '⌥', '4'],
-      [t['Heading']({ number: '5' })]: '⌘+⌥+5',
+      [t['Heading']({ number: '5' })]: ['⌘', '⌥', '5'],
-      [t['Heading']({ number: '6' })]: '⌘+⌥+6',
+      [t['Heading']({ number: '6' })]: ['⌘', '⌥', '6'],
-      [t['Increase indent']()]: 'Tab',
+      [t['Increase indent']()]: ['Tab'],
-      [t['Reduce indent']()]: '⇧+Tab',
+      [t['Reduce indent']()]: ['⇧', 'Tab'],
-      [t['Group as Database']()]: '⌘ + G',
+      [t['Group as Database']()]: ['⌘', 'G'],
-      [t['Switch']()]: '⌥ + S',
+      [t['Switch']()]: ['⌥', 'S'],
       // not implement yet
       // [t['Move Up']()]: '⌘ + ⌥ + ↑',
       // [t['Move Down']()]: '⌘ + ⌥ + ↓',
@@ -132,53 +136,53 @@ export const useMacPageKeyboardShortcuts = (): ShortcutTip => {
   );
 };
 
-export const useMacMarkdownShortcuts = (): ShortcutTip => {
+export const useMacMarkdownShortcuts = (): ShortcutMap => {
   const t = useAFFiNEI18N();
   return useMemo(
     () => ({
-      [t['Bold']()]: '**Text** ',
+      [t['Bold']()]: ['**Text**'],
-      [t['Italic']()]: '*Text* ',
+      [t['Italic']()]: ['*Text*'],
-      [t['Underline']()]: '~Text~ ',
+      [t['Underline']()]: ['~Text~'],
-      [t['Strikethrough']()]: '~~Text~~ ',
+      [t['Strikethrough']()]: ['~~Text~~'],
-      [t['Divider']()]: '***',
+      [t['Divider']()]: ['***'],
-      [t['Inline code']()]: '`Text` ',
+      [t['Inline code']()]: ['`Text` '],
-      [t['Code block']()]: '``` Space',
+      [t['Code block']()]: ['``` Space'],
-      [t['Heading']({ number: '1' })]: '# Text',
+      [t['Heading']({ number: '1' })]: ['# Text'],
-      [t['Heading']({ number: '2' })]: '## Text',
+      [t['Heading']({ number: '2' })]: ['## Text'],
-      [t['Heading']({ number: '3' })]: '### Text',
+      [t['Heading']({ number: '3' })]: ['### Text'],
-      [t['Heading']({ number: '4' })]: '#### Text',
+      [t['Heading']({ number: '4' })]: ['#### Text'],
-      [t['Heading']({ number: '5' })]: '##### Text',
+      [t['Heading']({ number: '5' })]: ['##### Text'],
-      [t['Heading']({ number: '6' })]: '###### Text',
+      [t['Heading']({ number: '6' })]: ['###### Text'],
     }),
     [t]
   );
 };
 
-export const useWinPageKeyboardShortcuts = (): ShortcutTip => {
+export const useWinPageKeyboardShortcuts = (): ShortcutMap => {
   const t = useAFFiNEI18N();
   return useMemo(
     () => ({
-      [t['Undo']()]: 'Ctrl+Z',
+      [t['Undo']()]: ['Ctrl', 'Z'],
-      [t['Redo']()]: 'Ctrl+Y',
+      [t['Redo']()]: ['Ctrl', 'Y'],
-      [t['Bold']()]: 'Ctrl+B',
+      [t['Bold']()]: ['Ctrl', 'B'],
-      [t['Italic']()]: 'Ctrl+I',
+      [t['Italic']()]: ['Ctrl', 'I'],
-      [t['Underline']()]: 'Ctrl+U',
+      [t['Underline']()]: ['Ctrl', 'U'],
-      [t['Strikethrough']()]: 'Ctrl+Shift+S',
+      [t['Strikethrough']()]: ['Ctrl', 'Shift', 'S'],
-      [t['Inline code']()]: ' Ctrl+E',
+      [t['Inline code']()]: [' Ctrl', 'E'],
-      [t['Code block']()]: 'Ctrl+Alt+C',
+      [t['Code block']()]: ['Ctrl', 'Alt', 'C'],
-      [t['Link']()]: 'Ctrl+K',
+      [t['Link']()]: ['Ctr', 'K'],
-      [t['Quick search']()]: 'Ctrl+K',
+      [t['Quick search']()]: ['Ctrl', 'K'],
-      [t['Body text']()]: 'Ctrl+Shift+0',
+      [t['Body text']()]: ['Ctrl', 'Shift', '0'],
-      [t['Heading']({ number: '1' })]: 'Ctrl+Shift+1',
+      [t['Heading']({ number: '1' })]: ['Ctrl', 'Shift', '1'],
-      [t['Heading']({ number: '2' })]: 'Ctrl+Shift+2',
+      [t['Heading']({ number: '2' })]: ['Ctrl', 'Shift', '2'],
-      [t['Heading']({ number: '3' })]: 'Ctrl+Shift+3',
+      [t['Heading']({ number: '3' })]: ['Ctrl', 'Shift', '3'],
-      [t['Heading']({ number: '4' })]: 'Ctrl+Shift+4',
+      [t['Heading']({ number: '4' })]: ['Ctrl', 'Shift', '4'],
-      [t['Heading']({ number: '5' })]: 'Ctrl+Shift+5',
+      [t['Heading']({ number: '5' })]: ['Ctrl', 'Shift', '5'],
-      [t['Heading']({ number: '6' })]: 'Ctrl+Shift+6',
+      [t['Heading']({ number: '6' })]: ['Ctrl', 'Shift', '6'],
-      [t['Increase indent']()]: 'Tab',
+      [t['Increase indent']()]: ['Tab'],
-      [t['Reduce indent']()]: 'Shift+Tab',
+      [t['Reduce indent']()]: ['Shift+Tab'],
-      [t['Group as Database']()]: 'Ctrl + G',
+      [t['Group as Database']()]: ['Ctrl + G'],
-      ['Switch']: 'Alt + S',
+      ['Switch']: ['Alt + S'],
       // not implement yet
       // [t['Move Up']()]: 'Ctrl + Alt + ↑',
       // [t['Move Down']()]: 'Ctrl + Alt + ↓',
@@ -186,54 +190,73 @@ export const useWinPageKeyboardShortcuts = (): ShortcutTip => {
     [t]
   );
 };
-export const useWinMarkdownShortcuts = (): ShortcutTip => {
+export const useWinMarkdownShortcuts = (): ShortcutMap => {
   const t = useAFFiNEI18N();
   return useMemo(
     () => ({
-      [t['Bold']()]: '**Text** ',
+      [t['Bold']()]: ['**Text** '],
-      [t['Italic']()]: '*Text* ',
+      [t['Italic']()]: ['*Text* '],
-      [t['Underline']()]: '~Text~ ',
+      [t['Underline']()]: ['~Text~ '],
-      [t['Strikethrough']()]: '~~Text~~ ',
+      [t['Strikethrough']()]: ['~~Text~~ '],
-      [t['Divider']()]: '***',
+      [t['Divider']()]: ['***'],
-      [t['Inline code']()]: '`Text` ',
+      [t['Inline code']()]: ['`Text` '],
-      [t['Code block']()]: '``` Text',
+      [t['Code block']()]: ['``` Text'],
-      [t['Heading']({ number: '1' })]: '# Text',
+      [t['Heading']({ number: '1' })]: ['# Text'],
-      [t['Heading']({ number: '2' })]: '## Text',
+      [t['Heading']({ number: '2' })]: ['## Text'],
-      [t['Heading']({ number: '3' })]: '### Text',
+      [t['Heading']({ number: '3' })]: ['### Text'],
-      [t['Heading']({ number: '4' })]: '#### Text',
+      [t['Heading']({ number: '4' })]: ['#### Text'],
-      [t['Heading']({ number: '5' })]: '##### Text',
+      [t['Heading']({ number: '5' })]: ['##### Text'],
-      [t['Heading']({ number: '6' })]: '###### Text',
+      [t['Heading']({ number: '6' })]: ['###### Text'],
     }),
     [t]
   );
 };
 
-export const useMarkdownShortcuts = (): ShortcutTip => {
+export const useMarkdownShortcuts = (): ShortcutsInfo => {
+  const t = useAFFiNEI18N();
+
   const macMarkdownShortcuts = useMacMarkdownShortcuts();
   const winMarkdownShortcuts = useWinMarkdownShortcuts();
   const isMac = environment.isBrowser && environment.isMacOs;
-  return isMac ? macMarkdownShortcuts : winMarkdownShortcuts;
+  return {
+    title: t['Markdown Syntax'](),
+    shortcuts: isMac ? macMarkdownShortcuts : winMarkdownShortcuts,
+  };
 };
 
-export const usePageShortcuts = (): ShortcutTip => {
+export const usePageShortcuts = (): ShortcutsInfo => {
+  const t = useAFFiNEI18N();
+
   const macPageShortcuts = useMacPageKeyboardShortcuts();
   const winPageShortcuts = useWinPageKeyboardShortcuts();
   const isMac = environment.isBrowser && environment.isMacOs;
-  return isMac ? macPageShortcuts : winPageShortcuts;
+  return {
+    title: t['Page'](),
+    shortcuts: isMac ? macPageShortcuts : winPageShortcuts,
+  };
 };
 
-export const useEdgelessShortcuts = (): ShortcutTip => {
+export const useEdgelessShortcuts = (): ShortcutsInfo => {
+  const t = useAFFiNEI18N();
+
   const macEdgelessShortcuts = useMacEdgelessKeyboardShortcuts();
   const winEdgelessShortcuts = useWinEdgelessKeyboardShortcuts();
   const isMac = environment.isBrowser && environment.isMacOs;
-
+  return {
-  return isMac ? macEdgelessShortcuts : winEdgelessShortcuts;
+    title: t['Edgeless'](),
+    shortcuts: isMac ? macEdgelessShortcuts : winEdgelessShortcuts,
+  };
 };
 
-export const useGeneralShortcuts = (): ShortcutTip => {
+export const useGeneralShortcuts = (): ShortcutsInfo => {
+  const t = useAFFiNEI18N();
+
   const macGeneralShortcuts = useMacGeneralKeyboardShortcuts();
   const winGeneralShortcuts = useWinGeneralKeyboardShortcuts();
   const isMac = environment.isBrowser && environment.isMacOs;
 
-  return isMac ? macGeneralShortcuts : winGeneralShortcuts;
+  return {
+    title: t['General'](),
+    shortcuts: isMac ? macGeneralShortcuts : winGeneralShortcuts,
+  };
 };