From efca651429cfb65c6ef4109878a74f97a8ad5f1c Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Mon, 16 Oct 2023 20:27:06 +0800
Subject: [PATCH] feat(core): add history shortcut (#4595)

---
 .../src/components/root-app-sidebar/index.tsx |   7 +-
 apps/core/src/hooks/affine/use-shortcuts.ts   |  10 +-
 apps/core/src/hooks/use-shortcut-commands.ts  |  49 ++++++
 .../src/components/app-sidebar/index.tsx      |   5 +-
 .../app-sidebar/sidebar-header/index.tsx      |  85 +++++++---
 tests/affine-desktop/e2e/basic.spec.ts        | 153 ++++++++++--------
 6 files changed, 209 insertions(+), 100 deletions(-)
 create mode 100644 apps/core/src/hooks/use-shortcut-commands.ts

diff --git a/apps/core/src/components/root-app-sidebar/index.tsx b/apps/core/src/components/root-app-sidebar/index.tsx
index c6c496211..7c97d09e7 100644
--- a/apps/core/src/components/root-app-sidebar/index.tsx
+++ b/apps/core/src/components/root-app-sidebar/index.tsx
@@ -27,7 +27,9 @@ import { forwardRef, useCallback, useEffect, useMemo } from 'react';
 import { openWorkspaceListModalAtom } from '../../atoms';
 import { useHistoryAtom } from '../../atoms/history';
 import { useAppSetting } from '../../atoms/settings';
+import { useGeneralShortcuts } from '../../hooks/affine/use-shortcuts';
 import { useTrashModalHelper } from '../../hooks/affine/use-trash-modal-helper';
+import { useRegisterBlocksuiteEditorCommands } from '../../hooks/use-shortcut-commands';
 import type { AllWorkspace } from '../../shared';
 import { currentCollectionsAtom } from '../../utils/user-setting';
 import { CollectionsList } from '../pure/workspace-slider-bar/collections';
@@ -105,6 +107,8 @@ export const RootAppSidebar = ({
   const [openUserWorkspaceList, setOpenUserWorkspaceList] = useAtom(
     openWorkspaceListModalAtom
   );
+  const generalShortcutsInfo = useGeneralShortcuts();
+
   const onClickNewPage = useCallback(async () => {
     const page = createPage();
     await page.waitForLoaded();
@@ -161,7 +165,7 @@ export const RootAppSidebar = ({
   const closeUserWorkspaceList = useCallback(() => {
     setOpenUserWorkspaceList(false);
   }, [setOpenUserWorkspaceList]);
-
+  useRegisterBlocksuiteEditorCommands(router.back, router.forward);
   return (
     <>
       <AppSidebar
@@ -173,6 +177,7 @@ export const RootAppSidebar = ({
             environment.isMacOs
           )
         }
+        generalShortcutsInfo={generalShortcutsInfo}
       >
         <MoveToTrash.ConfirmModal
           open={trashConfirmOpen}
diff --git a/apps/core/src/hooks/affine/use-shortcuts.ts b/apps/core/src/hooks/affine/use-shortcuts.ts
index 0fc2497cd..c0e73761a 100644
--- a/apps/core/src/hooks/affine/use-shortcuts.ts
+++ b/apps/core/src/hooks/affine/use-shortcuts.ts
@@ -81,9 +81,8 @@ export const useWinGeneralKeyboardShortcuts = (): ShortcutMap => {
       // not implement yet
       // [t('appendDailyNote')]: 'Ctrl + Alt + A',
       [t('expandOrCollapseSidebar')]: ['Ctrl', '/'],
-      // not implement yet
-      // [t('goBack')]: 'Ctrl + [',
-      // [t('goForward')]: 'Ctrl + ]',
+      [t('goBack')]: ['Ctrl + ['],
+      [t('goForward')]: ['Ctrl + ]'],
     }),
     [t]
   );
@@ -98,9 +97,8 @@ export const useMacGeneralKeyboardShortcuts = (): ShortcutMap => {
       // not implement yet
       // [t('appendDailyNote')]: '⌘ + ⌥ + A',
       [t('expandOrCollapseSidebar')]: ['⌘', '/'],
-      // not implement yet
-      // [t('goBack')]: '⌘ + [',
-      // [t('goForward')]: '⌘ + ]',
+      [t('goBack')]: ['⌘ + ['],
+      [t('goForward')]: ['⌘ + ]'],
     }),
     [t]
   );
diff --git a/apps/core/src/hooks/use-shortcut-commands.ts b/apps/core/src/hooks/use-shortcut-commands.ts
new file mode 100644
index 000000000..e8003ddac
--- /dev/null
+++ b/apps/core/src/hooks/use-shortcut-commands.ts
@@ -0,0 +1,49 @@
+import {
+  PreconditionStrategy,
+  registerAffineCommand,
+} from '@toeverything/infra/command';
+import { useEffect } from 'react';
+
+export function useRegisterBlocksuiteEditorCommands(
+  back: () => unknown,
+  forward: () => unknown
+) {
+  useEffect(() => {
+    const unsubs: Array<() => void> = [];
+
+    unsubs.push(
+      registerAffineCommand({
+        id: 'affine:shortcut-history-go-back',
+        category: 'affine:general',
+        preconditionStrategy: PreconditionStrategy.Never,
+        icon: 'none',
+        label: 'go back',
+        keyBinding: {
+          binding: '$mod+[',
+        },
+        run() {
+          back();
+        },
+      })
+    );
+    unsubs.push(
+      registerAffineCommand({
+        id: 'affine:shortcut-history-go-forward',
+        category: 'affine:general',
+        preconditionStrategy: PreconditionStrategy.Never,
+        icon: 'none',
+        label: 'go forward',
+        keyBinding: {
+          binding: '$mod+]',
+        },
+        run() {
+          forward();
+        },
+      })
+    );
+
+    return () => {
+      unsubs.forEach(unsub => unsub());
+    };
+  }, [back, forward]);
+}
diff --git a/packages/component/src/components/app-sidebar/index.tsx b/packages/component/src/components/app-sidebar/index.tsx
index 49e3b597e..78afc6023 100644
--- a/packages/component/src/components/app-sidebar/index.tsx
+++ b/packages/component/src/components/app-sidebar/index.tsx
@@ -110,7 +110,10 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
         data-enable-animation={enableAnimation && !isResizing}
       >
         <nav className={navStyle} ref={navRef} data-testid="app-sidebar">
-          <SidebarHeader router={props.router} />
+          <SidebarHeader
+            router={props.router}
+            generalShortcutsInfo={props.generalShortcutsInfo}
+          />
           <div className={navBodyStyle} data-testid="sliderBar-inner">
             {props.children}
           </div>
diff --git a/packages/component/src/components/app-sidebar/sidebar-header/index.tsx b/packages/component/src/components/app-sidebar/sidebar-header/index.tsx
index 3090b5208..539231831 100644
--- a/packages/component/src/components/app-sidebar/sidebar-header/index.tsx
+++ b/packages/component/src/components/app-sidebar/sidebar-header/index.tsx
@@ -1,6 +1,9 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useAtomValue } from 'jotai';
+import { useMemo } from 'react';
 
 import type { History } from '..';
 import {
@@ -17,10 +20,32 @@ export type SidebarHeaderProps = {
     forward: () => unknown;
     history: History;
   };
+  generalShortcutsInfo?: {
+    shortcuts: {
+      [title: string]: string[];
+    };
+  };
 };
 
 export const SidebarHeader = (props: SidebarHeaderProps) => {
   const open = useAtomValue(appSidebarOpenAtom);
+  const t = useAFFiNEI18N();
+
+  const shortcuts = props.generalShortcutsInfo?.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]);
+
   return (
     <div
       className={navHeaderStyle}
@@ -29,33 +54,43 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
     >
       <SidebarSwitch show={open} />
       <div className={navHeaderNavigationButtons}>
-        <IconButton
-          className={navHeaderButton}
-          data-testid="app-sidebar-arrow-button-back"
-          disabled={props.router?.history.current === 0}
-          onClick={() => {
-            props.router?.back();
-          }}
+        <Tooltip
+          content={`${shortcutsObject.goBack} ${shortcutsObject.goBackShortcut}`}
+          side="bottom"
         >
-          <ArrowLeftSmallIcon />
-        </IconButton>
-        <IconButton
-          className={navHeaderButton}
-          data-testid="app-sidebar-arrow-button-forward"
-          disabled={
-            props.router
-              ? (props.router.history.stack.length > 0 &&
-                  props.router.history.current ===
-                    props.router.history.stack.length - 1) ||
-                props.router.history.stack.length === 0
-              : true
-          }
-          onClick={() => {
-            props.router?.forward();
-          }}
+          <IconButton
+            className={navHeaderButton}
+            data-testid="app-sidebar-arrow-button-back"
+            disabled={props.router?.history.current === 0}
+            onClick={() => {
+              props.router?.back();
+            }}
+          >
+            <ArrowLeftSmallIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          content={`${shortcutsObject.goForward} ${shortcutsObject.goForwardShortcut}`}
+          side="bottom"
         >
-          <ArrowRightSmallIcon />
-        </IconButton>
+          <IconButton
+            className={navHeaderButton}
+            data-testid="app-sidebar-arrow-button-forward"
+            disabled={
+              props.router
+                ? (props.router.history.stack.length > 0 &&
+                    props.router.history.current ===
+                      props.router.history.stack.length - 1) ||
+                  props.router.history.stack.length === 0
+                : true
+            }
+            onClick={() => {
+              props.router?.forward();
+            }}
+          >
+            <ArrowRightSmallIcon />
+          </IconButton>
+        </Tooltip>
       </div>
     </div>
   );
diff --git a/tests/affine-desktop/e2e/basic.spec.ts b/tests/affine-desktop/e2e/basic.spec.ts
index 5b97c3677..b20f3beb5 100644
--- a/tests/affine-desktop/e2e/basic.spec.ts
+++ b/tests/affine-desktop/e2e/basic.spec.ts
@@ -1,12 +1,19 @@
-import { platform } from 'node:os';
+// import { platform } from 'node:os';
 
 import { test } from '@affine-test/kit/electron';
+import { withCtrlOrMeta } from '@affine-test/kit/utils/keyboard';
 import { getBlockSuiteEditorTitle } from '@affine-test/kit/utils/page-logic';
 import {
   clickSideBarCurrentWorkspaceBanner,
   clickSideBarSettingButton,
 } from '@affine-test/kit/utils/sidebar';
-import { expect } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
+
+const historyShortcut = async (page: Page, command: 'goBack' | 'goForward') => {
+  await withCtrlOrMeta(page, () =>
+    page.keyboard.press(command === 'goBack' ? '[' : ']', { delay: 50 })
+  );
+};
 
 test('new page', async ({ page, workspace }) => {
   await page.getByTestId('new-page-button').click({
@@ -18,73 +25,85 @@ test('new page', async ({ page, workspace }) => {
 });
 
 // macOS only
-if (platform() === 'darwin') {
-  test('app sidebar router forward/back', async ({ page }) => {
-    await page.getByTestId('help-island').click();
-    await page.getByTestId('easy-guide').click();
-    await page.getByTestId('onboarding-modal-next-button').click();
-    await page.getByTestId('onboarding-modal-close-button').click();
-    {
-      // create pages
-      await page.waitForTimeout(500);
-      await page.getByTestId('new-page-button').click({
-        delay: 100,
-      });
-      await page.waitForSelector('v-line');
-      const title = getBlockSuiteEditorTitle(page);
-      await title.focus();
-      await title.pressSequentially('test1', {
-        delay: 100,
-      });
-      await page.waitForTimeout(500);
-      await page.getByTestId('new-page-button').click({
-        delay: 100,
-      });
-      await page.waitForSelector('v-line');
+// if (platform() === 'darwin') {
+test('app sidebar router forward/back', async ({ page }) => {
+  await page.getByTestId('help-island').click();
+  await page.getByTestId('easy-guide').click();
+  await page.getByTestId('onboarding-modal-next-button').click();
+  await page.getByTestId('onboarding-modal-close-button').click();
+  {
+    // create pages
+    await page.waitForTimeout(500);
+    await page.getByTestId('new-page-button').click({
+      delay: 100,
+    });
+    await page.waitForSelector('v-line');
+    const title = getBlockSuiteEditorTitle(page);
+    await title.focus();
+    await title.pressSequentially('test1', {
+      delay: 100,
+    });
+    await page.waitForTimeout(500);
+    await page.getByTestId('new-page-button').click({
+      delay: 100,
+    });
+    await page.waitForSelector('v-line');
 
-      await title.focus();
-      await title.pressSequentially('test2', {
-        delay: 100,
-      });
-      await page.waitForTimeout(500);
-      await page.getByTestId('new-page-button').click({
-        delay: 100,
-      });
-      await page.waitForSelector('v-line');
-      await title.focus();
-      await title.pressSequentially('test3', {
-        delay: 100,
-      });
-    }
-    {
-      const title = (await page
-        .locator('.affine-doc-page-block-title')
-        .textContent()) as string;
-      expect(title.trim()).toBe('test3');
-    }
+    await title.focus();
+    await title.pressSequentially('test2', {
+      delay: 100,
+    });
+    await page.waitForTimeout(500);
+    await page.getByTestId('new-page-button').click({
+      delay: 100,
+    });
+    await page.waitForSelector('v-line');
+    await title.focus();
+    await title.pressSequentially('test3', {
+      delay: 100,
+    });
+  }
+  {
+    const title = (await page
+      .locator('.affine-doc-page-block-title')
+      .textContent()) as string;
+    expect(title.trim()).toBe('test3');
+  }
 
-    await page.click('[data-testid="app-sidebar-arrow-button-back"]');
-    await page.waitForTimeout(1000);
-    await page.click('[data-testid="app-sidebar-arrow-button-back"]');
-    await page.waitForTimeout(1000);
-    {
-      const title = (await page
-        .locator('.affine-doc-page-block-title')
-        .textContent()) as string;
-      expect(title.trim()).toBe('test1');
-    }
-    await page.click('[data-testid="app-sidebar-arrow-button-forward"]');
-    await page.waitForTimeout(1000);
-    await page.click('[data-testid="app-sidebar-arrow-button-forward"]');
-    await page.waitForTimeout(1000);
-    {
-      const title = (await page
-        .locator('.affine-doc-page-block-title')
-        .textContent()) as string;
-      expect(title.trim()).toBe('test3');
-    }
-  });
-}
+  await page.click('[data-testid="app-sidebar-arrow-button-back"]');
+  await page.click('[data-testid="app-sidebar-arrow-button-back"]');
+  {
+    const title = (await page
+      .locator('.affine-doc-page-block-title')
+      .textContent()) as string;
+    expect(title.trim()).toBe('test1');
+  }
+  await page.click('[data-testid="app-sidebar-arrow-button-forward"]');
+  await page.click('[data-testid="app-sidebar-arrow-button-forward"]');
+  {
+    const title = (await page
+      .locator('.affine-doc-page-block-title')
+      .textContent()) as string;
+    expect(title.trim()).toBe('test3');
+  }
+  await historyShortcut(page, 'goBack');
+  await historyShortcut(page, 'goBack');
+  {
+    const title = (await page
+      .locator('.affine-doc-page-block-title')
+      .textContent()) as string;
+    expect(title.trim()).toBe('test1');
+  }
+  await historyShortcut(page, 'goForward');
+  await historyShortcut(page, 'goForward');
+  {
+    const title = (await page
+      .locator('.affine-doc-page-block-title')
+      .textContent()) as string;
+    expect(title.trim()).toBe('test3');
+  }
+});
+// }
 
 test('clientBorder value should disable by default on window', async ({
   page,