refactor(infra): directory structure (#4615)

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

@@ -0,0 +1,99 @@
+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 {
+  navHeaderButton,
+  navHeaderNavigationButtons,
+  navHeaderStyle,
+} from '../index.css';
+import { appSidebarOpenAtom } from '../index.jotai';
+import { SidebarSwitch } from './sidebar-switch';
+
+export type SidebarHeaderProps = {
+  router?: {
+    back: () => unknown;
+    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}
+      data-open={open}
+      data-is-macos-electron={environment.isDesktop && environment.isMacOs}
+    >
+      <SidebarSwitch show={open} />
+      <div className={navHeaderNavigationButtons}>
+        <Tooltip
+          content={`${shortcutsObject.goBack} ${shortcutsObject.goBackShortcut}`}
+          side="bottom"
+        >
+          <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"
+        >
+          <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>
+  );
+};
+
+export * from './sidebar-switch';

packages/frontend/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts

@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+
+export const sidebarSwitch = style({
+  opacity: 0,
+  width: 0,
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  transition: 'all .3s ease-in-out',
+  selectors: {
+    '&[data-show=true]': {
+      opacity: 1,
+      width: '32px',
+      flexShrink: 0,
+      fontSize: '24px',
+      pointerEvents: 'auto',
+    },
+  },
+});

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

@@ -0,0 +1,38 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { SidebarIcon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
+import { useAtom } from 'jotai';
+
+import { appSidebarOpenAtom } from '../index.jotai';
+import * as styles from './sidebar-switch.css';
+
+export const SidebarSwitch = ({ show }: { show: boolean }) => {
+  const [open, setOpen] = useAtom(appSidebarOpenAtom);
+  const t = useAFFiNEI18N();
+  const tooltipContent = open
+    ? t['com.affine.sidebarSwitch.collapse']()
+    : t['com.affine.sidebarSwitch.expand']();
+  const collapseKeyboardShortcuts =
+    environment.isBrowser && environment.isMacOs ? ' ⌘+/' : ' Ctrl+/';
+
+  return (
+    <Tooltip
+      content={tooltipContent + ' ' + collapseKeyboardShortcuts}
+      side={open ? 'bottom' : 'right'}
+    >
+      <IconButton
+        className={styles.sidebarSwitch}
+        data-show={show}
+        size="large"
+        data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
+        style={{
+          zIndex: 1,
+        }}
+        onClick={() => setOpen(open => !open)}
+      >
+        <SidebarIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};