From 2adfd7deeae9f0a7198176ecb5b564dcb375b9db Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Sun, 6 Sep 2026 23:34:02 +0800
Subject: [PATCH] fix(web): clarify focus mode entry

---
 apps/web/src/components/DiagramEditorPane.tsx |  3 +-
 apps/web/src/components/EditorPane.tsx        | 30 ++++++++-----------
 .../src/components/FocusModeEntry.test.mjs    | 30 +++++++++++++++++++
 3 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 apps/web/src/components/FocusModeEntry.test.mjs

diff --git a/apps/web/src/components/DiagramEditorPane.tsx b/apps/web/src/components/DiagramEditorPane.tsx
index 57cca4c4..eec985f3 100644
--- a/apps/web/src/components/DiagramEditorPane.tsx
+++ b/apps/web/src/components/DiagramEditorPane.tsx
@@ -2077,8 +2077,9 @@ export const DiagramEditorPane = ({
             <div className="hidden items-center gap-1 lg:flex">
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button size="icon" variant={desktopFocusMode ? "soft" : "ghost"} aria-label={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")} aria-pressed={desktopFocusMode} onClick={onToggleDesktopFocusMode}>
+                  <Button size="sm" variant={desktopFocusMode ? "soft" : "ghost"} aria-label={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")} aria-pressed={desktopFocusMode} onClick={onToggleDesktopFocusMode}>
                     {desktopFocusMode ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+                    <span>{t(desktopFocusMode ? "editor.exitFocusMode" : "editor.focusMode")}</span>
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>{t(desktopFocusMode ? "editor.exitFocusMode" : "editor.focusMode")}</TooltipContent>
diff --git a/apps/web/src/components/EditorPane.tsx b/apps/web/src/components/EditorPane.tsx
index abd88054..8fd14824 100644
--- a/apps/web/src/components/EditorPane.tsx
+++ b/apps/web/src/components/EditorPane.tsx
@@ -3853,24 +3853,6 @@ const RichEditorPane = ({
               </button>
             </div>
             <div className="hidden items-center gap-1 lg:flex">
-              <TooltipProvider delayDuration={0} skipDelayDuration={0}>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="icon"
-                      variant={desktopFocusMode ? "soft" : "ghost"}
-                      aria-label={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")}
-                      aria-pressed={desktopFocusMode}
-                      onClick={onToggleDesktopFocusMode}
-                    >
-                      {desktopFocusMode ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom">
-                    {t(desktopFocusMode ? "editor.exitFocusMode" : "editor.focusMode")}
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
               <IconTooltip label={t("editor.previousMemo")}>
                 <Button size="icon" variant="ghost" aria-label={t("editor.previousMemo")} onClick={onOpenPreviousMemo} disabled={!hasPreviousMemo}>
                   <ChevronLeft className="h-4 w-4" />
@@ -4295,6 +4277,18 @@ const RichEditorPane = ({
                 </Button>
               </IconTooltip>
             )}
+            <Button
+              className="hidden shrink-0 lg:inline-flex"
+              size="sm"
+              variant={desktopFocusMode ? "soft" : "ghost"}
+              title={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")}
+              aria-label={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")}
+              aria-pressed={desktopFocusMode}
+              onClick={onToggleDesktopFocusMode}
+            >
+              {desktopFocusMode ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+              <span>{t(desktopFocusMode ? "editor.exitFocusMode" : "editor.focusMode")}</span>
+            </Button>
           </div>
         </div>
         {noteSearchOpen ? (
diff --git a/apps/web/src/components/FocusModeEntry.test.mjs b/apps/web/src/components/FocusModeEntry.test.mjs
new file mode 100644
index 00000000..647b8297
--- /dev/null
+++ b/apps/web/src/components/FocusModeEntry.test.mjs
@@ -0,0 +1,30 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+
+const editorPaneSource = readFileSync(new URL("./EditorPane.tsx", import.meta.url), "utf8");
+const diagramEditorPaneSource = readFileSync(new URL("./DiagramEditorPane.tsx", import.meta.url), "utf8");
+
+const expectDiscoverableFocusModeEntry = (source) => {
+  const normalizedSource = source.replace(/\s+/g, " ");
+  expect(normalizedSource).toContain('size="sm" variant={desktopFocusMode ? "soft" : "ghost"}');
+  expect(normalizedSource).toContain('<span>{t(desktopFocusMode ? "editor.exitFocusMode" : "editor.focusMode")}</span>');
+  expect(source).not.toContain('size="sm"\n                      variant="solid"');
+};
+
+describe("focus mode entry", () => {
+  test("labels a restrained action in every desktop note editor instead of relying on an ambiguous icon", () => {
+    expectDiscoverableFocusModeEntry(editorPaneSource);
+    expectDiscoverableFocusModeEntry(diagramEditorPaneSource);
+  });
+
+  test("groups the standard editor entry with note view controls instead of top-level navigation", () => {
+    const readingProtectionIconIndex = editorPaneSource.indexOf(
+      '{desktopReadingProtection ? <Lock className="h-4 w-4" /> : <LockOpen className="h-4 w-4" />}',
+    );
+    const focusModeEntryIndex = editorPaneSource.indexOf(
+      'title={t(desktopFocusMode ? "editor.exitFocusMode" : "editor.enterFocusMode")}',
+    );
+    expect(readingProtectionIconIndex).toBeGreaterThan(-1);
+    expect(focusModeEntryIndex).toBeGreaterThan(readingProtectionIconIndex);
+  });
+});