From 9df338274db1ad0189805073847b71e67788f417 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Wed, 15 Jan 2025 12:22:37 +0000
Subject: [PATCH] chore(core): update tooltip of mode switcher (#9711)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [BS-2325](https://linear.app/affine-design/issue/BS-2325/tooltips-显示)

https://github.com/user-attachments/assets/bd4c6045-8de1-4e72-87ab-2d1d3262e6b7
---
 .../block-suite-mode-switch/index.tsx         | 23 +++++----------
 .../block-suite-mode-switch/switch-items.tsx  | 28 +++++++++++++++----
 packages/frontend/i18n/src/resources/en.json  |  2 ++
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
index 11ffd32478..f3e7b0ee3e 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
@@ -1,4 +1,4 @@
-import { RadioGroup, type RadioItem, Tooltip } from '@affine/component';
+import { RadioGroup, type RadioItem } from '@affine/component';
 import { registerAffineCommand } from '@affine/core/commands';
 import { EditorService } from '@affine/core/modules/editor';
 import { ViewService, WorkbenchService } from '@affine/core/modules/workbench';
@@ -92,21 +92,12 @@ export const EditorModeSwitch = () => {
   }, [currentMode, isActiveView, isSharedMode, onModeChange, t, trash]);
 
   return (
-    <Tooltip
-      content={t['Switch']()}
-      shortcut={['$alt', 'S']}
-      side="bottom"
-      options={{ hidden: trash || isSharedMode }}
-    >
-      <div>
-        <PureEditorModeSwitch
-          mode={currentMode}
-          setMode={onModeChange}
-          hidePage={shouldHide('page')}
-          hideEdgeless={shouldHide('edgeless')}
-        />
-      </div>
-    </Tooltip>
+    <PureEditorModeSwitch
+      mode={currentMode}
+      setMode={onModeChange}
+      hidePage={shouldHide('page')}
+      hideEdgeless={shouldHide('edgeless')}
+    />
   );
 };
 
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx
index 87f5baa59e..021fe8f0f4 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx
@@ -1,7 +1,9 @@
+import { Tooltip } from '@affine/component';
 import {
   type CustomLottieProps,
   InternalLottie,
 } from '@affine/component/internal-lottie';
+import { useI18n } from '@affine/i18n';
 import type { HTMLAttributes } from 'react';
 import type React from 'react';
 import { cloneElement, useState } from 'react';
@@ -58,19 +60,33 @@ const edgelessLottieOptions = {
 export const PageSwitchItem = (
   props: Omit<HoverAnimateControllerProps, 'children'>
 ) => {
+  const t = useI18n();
   return (
-    <HoverAnimateController {...props}>
-      <InternalLottie options={pageLottieOptions} />
-    </HoverAnimateController>
+    <Tooltip
+      content={t['com.affine.header.mode-switch.page']()}
+      shortcut={['$alt', 'S']}
+      side="bottom"
+    >
+      <HoverAnimateController {...props}>
+        <InternalLottie options={pageLottieOptions} />
+      </HoverAnimateController>
+    </Tooltip>
   );
 };
 
 export const EdgelessSwitchItem = (
   props: Omit<HoverAnimateControllerProps, 'children'>
 ) => {
+  const t = useI18n();
   return (
-    <HoverAnimateController {...props}>
-      <InternalLottie options={edgelessLottieOptions} />
-    </HoverAnimateController>
+    <Tooltip
+      content={t['com.affine.header.mode-switch.edgeless']()}
+      shortcut={['$alt', 'S']}
+      side="bottom"
+    >
+      <HoverAnimateController {...props}>
+        <InternalLottie options={edgelessLottieOptions} />
+      </HoverAnimateController>
+    </Tooltip>
   );
 };
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 588ab161fc..5fd3a06774 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -514,6 +514,8 @@
   "com.affine.filter.save-view": "Save view",
   "com.affine.filter.true": "true",
   "com.affine.filterList.button.add": "Add filter",
+  "com.affine.header.mode-switch.page": "View in Page mode",
+  "com.affine.header.mode-switch.edgeless": "View in Edgeless Canvas",
   "com.affine.header.option.add-tag": "Add tag",
   "com.affine.header.option.duplicate": "Duplicate",
   "com.affine.header.option.open-in-desktop": "Open in desktop app",