From e60ce7123de20b96f20cb8ca6dc2fbd1cda596f7 Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Tue, 29 Sep 2026 21:17:39 +0800
Subject: [PATCH] fix(web): use a heading icon for paragraph style

The palette glyph collapsed into a speech bubble at 16px. Rich text uses a heading mark, and Markdown source themes use a brush.
---
 apps/web/src/components/EditorToolbar.tsx | 30 ++++++++++++++---------
 apps/web/src/lib/markdown-theme.test.mjs  |  2 ++
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/EditorToolbar.tsx b/apps/web/src/components/EditorToolbar.tsx
index 9b34d971..260d4bef 100644
--- a/apps/web/src/components/EditorToolbar.tsx
+++ b/apps/web/src/components/EditorToolbar.tsx
@@ -23,7 +23,8 @@ import {
   ChevronUp,
   FileCode2,
   FileText,
-  Palette,
+  Heading,
+  Paintbrush,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { MEMO_EDITOR_TOOLBAR_COLLAPSED_CLASS_NAME } from "@/components/MemoEditorChromeDensity";
@@ -416,16 +417,23 @@ export const EditorToolbar = ({
             </>
           )}
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button
-                className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300"
-                type="button"
-                aria-label={t("editorToolbar.appearance")}
-                onMouseDown={(event) => event.preventDefault()}
-              >
-                <Palette className="h-4 w-4" />
-              </button>
-            </DropdownMenuTrigger>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300"
+                    type="button"
+                    aria-label={markdownMode ? t("editorToolbar.markdownTheme") : t("editorToolbar.blockStyle")}
+                    onMouseDown={(event) => event.preventDefault()}
+                  >
+                    {markdownMode ? <Paintbrush className="h-4 w-4" /> : <Heading className="h-4 w-4" />}
+                  </button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                {markdownMode ? t("editorToolbar.markdownTheme") : t("editorToolbar.blockStyle")}
+              </TooltipContent>
+            </Tooltip>
             <DropdownMenuContent align="start" className="max-h-80 w-52 overflow-y-auto border border-slate-200 bg-card py-1 shadow-md">
               {markdownMode ? (
                 <>
diff --git a/apps/web/src/lib/markdown-theme.test.mjs b/apps/web/src/lib/markdown-theme.test.mjs
index f71361b1..7ae7a2ff 100644
--- a/apps/web/src/lib/markdown-theme.test.mjs
+++ b/apps/web/src/lib/markdown-theme.test.mjs
@@ -76,6 +76,8 @@ describe("markdown theme contracts", () => {
     expect(toolbar).not.toContain('t("editorToolbar.editorTheme")');
     expect(toolbar).not.toContain("namedEditorThemes");
     expect(toolbar).toContain('t("editorToolbar.blockStyle")');
+    expect(toolbar).toContain("<Heading");
+    expect(toolbar).not.toContain("<Palette");
     expect(toolbar).toContain("EDITOR_HEADING_LEVELS");
   });