style: move trash button group to page bottom (#3352)

apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx

@@ -43,6 +43,9 @@ export const EditorModeSwitch = ({
   assertExists(pageMeta);
   const { trash } = pageMeta;
   useEffect(() => {
+    if (trash) {
+      return;
+    }
     const keydown = (e: KeyboardEvent) => {
       if (
         !environment.isServer && environment.isMacOs
@@ -64,7 +67,7 @@ export const EditorModeSwitch = ({
     document.addEventListener('keydown', keydown, { capture: true });
     return () =>
       document.removeEventListener('keydown', keydown, { capture: true });
-  }, [setSetting, t]);
+  }, [setSetting, t, trash]);
 
   return (
     <Tooltip content={<TooltipContent />}>
@@ -77,6 +80,7 @@ export const EditorModeSwitch = ({
           data-testid="switch-page-mode-button"
           active={currentMode === 'page'}
           hide={trash && currentMode !== 'page'}
+          trash={trash}
           onClick={() => {
             setSetting(setting => {
               if (setting?.mode !== 'page') {
@@ -90,6 +94,7 @@ export const EditorModeSwitch = ({
           data-testid="switch-edgeless-mode-button"
           active={currentMode === 'edgeless'}
           hide={trash && currentMode !== 'edgeless'}
+          trash={trash}
           onClick={() => {
             setSetting(setting => {
               if (setting?.mode !== 'edgeless') {

apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts

@@ -34,14 +34,19 @@ export const StyledEditorModeSwitch = styled('div')<{
 export const StyledSwitchItem = styled('button')<{
   active?: boolean;
   hide?: boolean;
-}>(({ active = false, hide = false }) => {
+  trash?: boolean;
+}>(({ active = false, hide = false, trash = false }) => {
   return {
     width: '24px',
     height: '24px',
     borderRadius: '8px',
     WebkitAppRegion: 'no-drag',
     boxShadow: active ? 'var(--affine-shadow-1)' : 'none',
-    color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
+    color: active
+      ? trash
+        ? 'var(--affine-error-color)'
+        : 'var(--affine-primary-color)'
+      : 'var(--affine-icon-color)',
     display: hide ? 'none' : 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',

apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/switch-items.tsx

@@ -8,12 +8,14 @@ import { StyledSwitchItem } from './style';
 type HoverAnimateControllerProps = {
   active?: boolean;
   hide?: boolean;
+  trash?: boolean;
   children: React.ReactElement;
 } & HTMLAttributes<HTMLButtonElement>;
 
 const HoverAnimateController = ({
   active,
   hide,
+  trash,
   children,
   ...props
 }: HoverAnimateControllerProps) => {
@@ -22,6 +24,7 @@ const HoverAnimateController = ({
     <StyledSwitchItem
       hide={hide}
       active={active}
+      trash={trash}
       onMouseEnter={() => {
         setStartAnimate(true);
       }}

apps/core/src/components/blocksuite/workspace-header/header-right-items/styles.css.ts

@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css';
+
+export const group = style({
+  width: '100%',
+  position: 'absolute',
+  bottom: '100px',
+  left: '0',
+  display: 'flex',
+  gap: '24px',
+  justifyContent: 'center',
+});
+export const buttonContainer = style({
+  boxShadow: 'var(--affine-float-button-shadow-2)',
+  borderRadius: '8px',
+});

apps/core/src/components/blocksuite/workspace-header/header-right-items/trash-button-group.tsx

@@ -10,7 +10,7 @@ import { useCallback, useState } from 'react';
 import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../../../../hooks/use-navigate-helper';
-
+import { buttonContainer, group } from './styles.css';
 export const TrashButtonGroup = () => {
   // fixme(himself65): remove these hooks ASAP
   const [workspace] = useCurrentWorkspace();
@@ -29,25 +29,29 @@ export const TrashButtonGroup = () => {
   const [open, setOpen] = useState(false);
 
   return (
-    <>
-      <Button
-        shape="round"
-        style={{ marginRight: '24px' }}
-        onClick={() => {
-          restoreFromTrash(pageId);
-        }}
-      >
-        {t['Restore it']()}
-      </Button>
-      <Button
-        shape="round"
-        type="error"
-        onClick={() => {
-          setOpen(true);
-        }}
-      >
-        {t['Delete permanently']()}
-      </Button>
+    <div className={group}>
+      <div className={buttonContainer}>
+        <Button
+          type="processing"
+          onClick={() => {
+            restoreFromTrash(pageId);
+          }}
+          size="large"
+        >
+          {t['Restore it']()}
+        </Button>
+      </div>
+      <div className={buttonContainer}>
+        <Button
+          type="error"
+          onClick={() => {
+            setOpen(true);
+          }}
+          size="large"
+        >
+          {t['Delete permanently']()}
+        </Button>
+      </div>
       <Confirm
         title={t['TrashButtonGroupTitle']()}
         content={t['TrashButtonGroupDescription']()}
@@ -65,7 +69,7 @@ export const TrashButtonGroup = () => {
           setOpen(false);
         }}
       />
-    </>
+    </div>
   );
 };
 

apps/core/src/components/blocksuite/workspace-header/header.tsx

@@ -23,7 +23,6 @@ import { currentModeAtom } from '../../../atoms/mode';
 import type { AffineOfficialWorkspace } from '../../../shared';
 import DownloadClientTip from './download-tips';
 import { EditorOptionMenu } from './header-right-items/editor-option-menu';
-import TrashButtonGroup from './header-right-items/trash-button-group';
 import * as styles from './styles.css';
 import { OSWarningMessage, shouldShowWarning } from './utils';
 
@@ -38,7 +37,6 @@ export type BaseHeaderProps<
 
 export enum HeaderRightItemName {
   EditorOptionMenu = 'editorOptionMenu',
-  TrashButtonGroup = 'trashButtonGroup',
   // some windows only items
   WindowsAppControls = 'windowsAppControls',
 }
@@ -56,16 +54,10 @@ type HeaderItem = {
 };
 
 const HeaderRightItems: Record<HeaderRightItemName, HeaderItem> = {
-  [HeaderRightItemName.TrashButtonGroup]: {
-    Component: TrashButtonGroup,
-    availableWhen: (_, currentPage) => {
-      return currentPage?.meta.trash === true;
-    },
-  },
   [HeaderRightItemName.EditorOptionMenu]: {
     Component: EditorOptionMenu,
     availableWhen: (_, currentPage, { isPublic }) => {
-      return !isPublic;
+      return !isPublic && currentPage?.meta.trash !== true;
     },
   },
   [HeaderRightItemName.WindowsAppControls]: {