From 8845bb9b4b4d36a26a9624fc81050a4c20619c99 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Sat, 2 Sep 2023 03:28:16 +0800
Subject: [PATCH] chore: optimized style (#4098)

---
 .../operation-menu.tsx                        |  4 +++-
 .../pure/trash-button-group/index.tsx         |  1 +
 .../WorkspaceSelector/loading-icon.tsx        | 21 +++++++++++-------
 .../WorkspaceSelector/workspace-selector.tsx  | 22 +++++++++++++------
 apps/core/src/hooks/use-datasource-sync.ts    | 21 ++++++++++--------
 .../components/block-suite-editor/index.tsx   |  5 ++++-
 .../operation-menu-items/move-to-trash.tsx    |  1 +
 .../component/src/ui/button/styles.css.ts     |  2 ++
 .../e2e/local-first-trash-page.spec.ts        | 19 ++++++++++++++++
 9 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx b/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
index 18cf04e27b..5eff34ee68 100644
--- a/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
+++ b/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
@@ -171,7 +171,9 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
       />
     </>
   );
-
+  if (pageMeta.trash) {
+    return null;
+  }
   return (
     <>
       <FlexWrapper alignItems="center" justifyContent="center">
diff --git a/apps/core/src/components/pure/trash-button-group/index.tsx b/apps/core/src/components/pure/trash-button-group/index.tsx
index 068968ebde..6a47a9c04d 100644
--- a/apps/core/src/components/pure/trash-button-group/index.tsx
+++ b/apps/core/src/components/pure/trash-button-group/index.tsx
@@ -35,6 +35,7 @@ export const TrashButtonGroup = () => {
     <div className={group}>
       <div className={buttonContainer}>
         <Button
+          data-testid="page-restore-button"
           type="primary"
           onClick={() => {
             restoreFromTrash(pageId);
diff --git a/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/loading-icon.tsx b/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/loading-icon.tsx
index b939e6521b..9921cf517d 100644
--- a/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/loading-icon.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/loading-icon.tsx
@@ -11,20 +11,25 @@ export const Loading = ({ size, speed = 1.2 }: LoadingProps) => {
   return (
     <svg
       className={loading}
-      viewBox="0 0 1024 1024"
-      focusable="false"
-      data-icon="loading"
-      width={size ? `${size}px` : '.8em'}
-      height={size ? `${size}px` : '.8em'}
-      fill="currentColor"
-      aria-hidden="true"
+      width={size ? `${size}px` : '16px'}
+      height={size ? `${size}px` : '16px'}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
       style={{
         ...assignInlineVars({
           [speedVar]: `${speed}s`,
         }),
       }}
     >
-      <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+      <path
+        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM4.95017 12C4.95017 15.8935 8.10648 19.0498 12 19.0498C15.8935 19.0498 19.0498 15.8935 19.0498 12C19.0498 8.10648 15.8935 4.95017 12 4.95017C8.10648 4.95017 4.95017 8.10648 4.95017 12Z"
+        fill="var(--affine-black-10)"
+      />
+      <path
+        d="M20.525 12C21.3396 12 22.0111 11.3361 21.8914 10.5303C21.7714 9.72269 21.5527 8.93094 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C15.0691 2.44732 14.2773 2.22859 13.4697 2.10859C12.6639 1.98886 12 2.66038 12 3.475C12 4.28962 12.6674 4.93455 13.4643 5.10374C13.8853 5.19314 14.2983 5.32113 14.6979 5.48665C15.5533 5.84095 16.3304 6.36024 16.9851 7.0149C17.6398 7.66955 18.1591 8.44674 18.5133 9.30208C18.6789 9.70167 18.8069 10.1147 18.8963 10.5357C19.0655 11.3326 19.7104 12 20.525 12Z"
+        fill="var(--affine-primary-color)"
+      />
     </svg>
   );
 };
diff --git a/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx b/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx
index ce199973dc..dca54d7fa8 100644
--- a/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx
@@ -116,6 +116,20 @@ const WorkspaceStatus = ({
       return CloudWorkspaceStatus();
     }
   }, [forceSyncStatus.type]);
+
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      if (
+        currentWorkspace.flavour === WorkspaceFlavour.LOCAL ||
+        forceSyncStatus.type === 'syncing'
+      ) {
+        return;
+      }
+      startForceSync();
+    },
+    [currentWorkspace.flavour, forceSyncStatus.type, startForceSync]
+  );
   return (
     <div style={{ display: 'flex' }}>
       <Tooltip
@@ -130,13 +144,7 @@ const WorkspaceStatus = ({
           }}
           ref={setContainer}
           onMouseLeave={() => setIsHovered(false)}
-          onClick={useCallback(
-            (e: MouseEvent<HTMLDivElement>) => {
-              e.stopPropagation();
-              startForceSync();
-            },
-            [startForceSync]
-          )}
+          onClick={handleClick}
         >
           {currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD ? (
             !isOnline ? (
diff --git a/apps/core/src/hooks/use-datasource-sync.ts b/apps/core/src/hooks/use-datasource-sync.ts
index 9b4df60a29..9524327f9a 100644
--- a/apps/core/src/hooks/use-datasource-sync.ts
+++ b/apps/core/src/hooks/use-datasource-sync.ts
@@ -53,16 +53,19 @@ export function useDatasourceSync(workspace: Workspace) {
         remoteProvider.datasource,
         localProvider.datasource
       )
-        .then(() => {
-          startTransition(() => {
-            setStatus({
-              type: 'synced',
+        .then(async () => {
+          // by default, the syncing status will show for 2.4s
+          setTimeout(() => {
+            startTransition(() => {
+              setStatus({
+                type: 'synced',
+              });
+              pushNotification({
+                title: 'Synced successfully',
+                type: 'success',
+              });
             });
-            pushNotification({
-              title: 'Synced successfully',
-              type: 'success',
-            });
-          });
+          }, 2400);
         })
         .catch(error => {
           startTransition(() => {
diff --git a/packages/component/src/components/block-suite-editor/index.tsx b/packages/component/src/components/block-suite-editor/index.tsx
index 40f3597e1b..44476ab1b1 100644
--- a/packages/component/src/components/block-suite-editor/index.tsx
+++ b/packages/component/src/components/block-suite-editor/index.tsx
@@ -102,6 +102,9 @@ const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
   }, [editor]);
 
   useEffect(() => {
+    if (page.meta.trash) {
+      return;
+    }
     editor
       .createBlockHub()
       .then(blockHub => {
@@ -122,7 +125,7 @@ const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
       }
       blockHubRef.current?.remove();
     };
-  }, [editor, page.awarenessStore, setBlockHub]);
+  }, [editor, page.awarenessStore, page.meta.trash, setBlockHub]);
 
   // issue: https://github.com/toeverything/AFFiNE/issues/2004
   const className = `editor-wrapper ${editor.mode}-mode ${
diff --git a/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx b/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
index 8900bba831..3cc3331c48 100644
--- a/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
+++ b/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
@@ -43,6 +43,7 @@ const ConfirmModal = ({
       content={t['will be moved to Trash']({
         title: title || 'Untitled',
       })}
+      confirmButtonTestId="confirm-delete-page"
       confirmText={t.Delete()}
       confirmType="error"
       {...confirmModalProps}
diff --git a/packages/component/src/ui/button/styles.css.ts b/packages/component/src/ui/button/styles.css.ts
index b2e02ae5b6..bc7b57134f 100644
--- a/packages/component/src/ui/button/styles.css.ts
+++ b/packages/component/src/ui/button/styles.css.ts
@@ -86,6 +86,8 @@ export const radioButtonContent = style({
 export const radioUncheckedButton = style([
   radioButtonContent,
   {
+    color: 'var(--affine-text-secondary-color)',
+    filter: 'none',
     selectors: {
       '[data-state="checked"] > &': {
         display: 'none',
diff --git a/tests/affine-local/e2e/local-first-trash-page.spec.ts b/tests/affine-local/e2e/local-first-trash-page.spec.ts
index 72ff4b482f..be63f53142 100644
--- a/tests/affine-local/e2e/local-first-trash-page.spec.ts
+++ b/tests/affine-local/e2e/local-first-trash-page.spec.ts
@@ -1,6 +1,7 @@
 import { test } from '@affine-test/kit/playwright';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
+  clickPageMoreActions,
   getBlockSuiteEditorTitle,
   newPage,
   waitEditorLoad,
@@ -43,3 +44,21 @@ test('New a page , then delete it in all pages, finally find it in trash', async
 
   expect(currentWorkspace.flavour).toContain('local');
 });
+
+test('New a page , then delete it in page, blockHub and option menu will not appear ', async ({
+  page,
+}) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  const title = getBlockSuiteEditorTitle(page);
+  await title.type('test');
+  await clickPageMoreActions(page);
+  await page.getByTestId('editor-option-menu-delete').click();
+  await page.getByTestId('confirm-delete-page').click();
+  await expect(page.getByTestId('header-dropDownButton')).not.toBeVisible();
+  await expect(page.getByTestId('block-hub')).not.toBeVisible();
+  await page.getByTestId('page-restore-button').click();
+  await expect(page.getByTestId('header-dropDownButton')).toBeVisible();
+  await expect(page.getByTestId('block-hub')).toBeVisible();
+});