feat(electron): track router history (#2336)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

packages/component/src/components/app-sidebar/index.tsx

@@ -21,9 +21,10 @@ import {
   updateAvailableAtom,
 } from './index.jotai';
 import { ResizeIndicator } from './resize-indicator';
+import type { SidebarHeaderProps } from './sidebar-header';
 import { SidebarHeader } from './sidebar-header';
 
-export type AppSidebarProps = PropsWithChildren;
+export type AppSidebarProps = PropsWithChildren<SidebarHeaderProps>;
 
 function useEnableAnimation() {
   const [enable, setEnable] = useState(false);
@@ -35,6 +36,11 @@ function useEnableAnimation() {
   return enable;
 }
 
+export type History = {
+  stack: string[];
+  current: number;
+};
+
 export function AppSidebar(props: AppSidebarProps): ReactElement {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const appSidebarWidth = useAtomValue(appSidebarWidthAtom);
@@ -91,7 +97,7 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
         data-enable-animation={enableAnimation && !isResizing}
       >
         <nav className={navStyle} ref={navRef} data-testid="app-sidebar">
-          <SidebarHeader />
+          <SidebarHeader router={props.router} />
           <div className={navBodyStyle} data-testid="sliderBar-inner">
             {props.children}
           </div>

packages/component/src/components/app-sidebar/sidebar-header/index.tsx

@@ -7,10 +7,19 @@ import {
 } from '@blocksuite/icons';
 import { useAtom } from 'jotai';
 
+import type { History } from '..';
 import { navHeaderStyle, sidebarButtonStyle } from '../index.css';
 import { appSidebarOpenAtom } from '../index.jotai';
 
-export const SidebarHeader = () => {
+export type SidebarHeaderProps = {
+  router?: {
+    back: () => unknown;
+    forward: () => unknown;
+    history: History;
+  };
+};
+
+export const SidebarHeader = (props: SidebarHeaderProps) => {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);
   const environment = getEnvironment();
   const isMacosDesktop = environment.isDesktop && environment.isMacOs;
@@ -24,16 +33,26 @@ export const SidebarHeader = () => {
         <>
           <IconButton
             size="middle"
+            data-testid="app-sidebar-arrow-button-back"
+            disabled={props.router?.history.current === 0}
             onClick={() => {
-              window.history.back();
+              props.router?.back();
             }}
           >
             <ArrowLeftSmallIcon />
           </IconButton>
           <IconButton
             size="middle"
+            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
+                : false
+            }
             onClick={() => {
-              window.history.forward();
+              props.router?.forward();
             }}
           >
             <ArrowRightSmallIcon />