From 623fe0a2c32a452cba519c3c2015c50fea514ecc Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Sat, 26 Sep 2026 14:52:32 +0800
Subject: [PATCH] fix(web): match more-types and beta marks to the workspace
 gray

The open create-type control and Beta chips used a neutral slate fill that sat apart from the cool selection and menu highlight.
---
 apps/web/src/components/NotebookPane.test.mjs         |  2 +-
 apps/web/src/components/NotebookPane.tsx              | 11 ++++-------
 apps/web/src/components/SettingsPane.tsx              |  6 ++----
 apps/web/src/components/WorkspaceMobileChrome.tsx     |  5 ++---
 .../web/src/components/settings/PluginManagerCard.tsx |  5 ++---
 apps/web/src/lib/workspace-ui.ts                      |  4 ++++
 6 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/NotebookPane.test.mjs b/apps/web/src/components/NotebookPane.test.mjs
index 8f00f232..0ee40222 100644
--- a/apps/web/src/components/NotebookPane.test.mjs
+++ b/apps/web/src/components/NotebookPane.test.mjs
@@ -17,7 +17,7 @@ test("keeps the desktop create-note control compact with one neutral outline", (
   expect(source).toContain('className="group flex h-12 max-w-[calc(100%-2.25rem)]');
   expect(source).toContain('className="group relative flex h-12 min-w-9 flex-1');
   expect(source).toContain('before:inset-y-2.5');
-  expect(source).toContain('data-[state=open]:bg-slate-100 data-[state=open]:text-slate-950');
+  expect(source).toContain('data-[state=open]:bg-workspace-selection data-[state=open]:text-slate-950');
   expect(source).toContain('t("diagram.moreTypes")');
   expect(source).toContain('group-data-[state=open]:rotate-180');
   expect(source).toContain("edgeever-create-memo-split__more-label");
diff --git a/apps/web/src/components/NotebookPane.tsx b/apps/web/src/components/NotebookPane.tsx
index 03855105..5bfd4776 100644
--- a/apps/web/src/components/NotebookPane.tsx
+++ b/apps/web/src/components/NotebookPane.tsx
@@ -49,6 +49,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { NotebookTreeItem } from "./NotebookTreeItem";
 import { cn } from "@/lib/utils";
+import { BETA_BADGE_CLASSNAME } from "@/lib/workspace-ui";
 import type { Notebook, AuthUser, NoteCreateKind } from "@edgeever/shared";
 import type { NotebookNode, NotebookDropPosition, NotebookSortMode } from "@/lib/app-helpers";
 import type { SyncQueueSummary } from "@/lib/sync-queue";
@@ -326,16 +327,12 @@ const CreateMemoTypeItems = ({ onCreateMemo }: { onCreateMemo: (kind?: NoteCreat
       <DropdownMenuItem className="gap-2 text-xs leading-5" onSelect={() => onCreateMemo("infographic")}>
         <Presentation className="h-4 w-4 shrink-0" />
         <span className="min-w-0 flex-1 truncate">{t("infographic.name")}</span>
-        <span className="inline-flex shrink-0 items-center rounded-full border border-slate-200 bg-slate-100 px-1.5 text-xs font-normal leading-5 text-slate-600">
-          Beta
-        </span>
+        <span className={BETA_BADGE_CLASSNAME}>Beta</span>
       </DropdownMenuItem>
       <DropdownMenuItem className="gap-2 text-xs leading-5" onSelect={() => onCreateMemo("table")}>
         <TableProperties className="h-4 w-4 shrink-0" />
         <span className="min-w-0 flex-1 truncate">{t("structuredTable.name")}</span>
-        <span className="inline-flex shrink-0 items-center rounded-full border border-slate-200 bg-slate-100 px-1.5 text-xs font-normal leading-5 text-slate-600">
-          Beta
-        </span>
+        <span className={BETA_BADGE_CLASSNAME}>Beta</span>
       </DropdownMenuItem>
     </>
   );
@@ -721,7 +718,7 @@ export const NotebookPane = ({
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <button
-                className="group relative flex h-12 min-w-9 flex-1 items-center justify-center gap-0.5 px-1.5 text-xs font-medium text-slate-600 transition-colors before:absolute before:inset-y-2.5 before:left-0 before:w-px before:bg-slate-200 hover:bg-slate-50 hover:text-slate-950 focus-visible:bg-slate-50 focus-visible:text-slate-950 focus-visible:outline-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-950 disabled:cursor-not-allowed disabled:opacity-50"
+                className="group relative flex h-12 min-w-9 flex-1 items-center justify-center gap-0.5 px-1.5 text-xs font-medium text-slate-600 transition-colors before:absolute before:inset-y-2.5 before:left-0 before:w-px before:bg-[var(--workspace-divider)] hover:bg-workspace-hover hover:text-slate-950 focus-visible:bg-workspace-hover focus-visible:text-slate-950 focus-visible:outline-none data-[state=open]:bg-workspace-selection data-[state=open]:text-slate-950 disabled:cursor-not-allowed disabled:opacity-50"
                 type="button"
                 aria-label={t("diagram.createType")}
                 disabled={!canCreateMemo || isCreatingMemo}
diff --git a/apps/web/src/components/SettingsPane.tsx b/apps/web/src/components/SettingsPane.tsx
index ca44feb0..e0151d36 100644
--- a/apps/web/src/components/SettingsPane.tsx
+++ b/apps/web/src/components/SettingsPane.tsx
@@ -18,7 +18,7 @@ import { SystemInfoDialog } from "@/components/SystemInfoDialog";
 import { Button } from "@/components/ui/button";
 
 import type { EditorContentAlignment, ShortcutSettings } from "@/lib/app-helpers";
-import { WORKSPACE_PAGE_TITLE_CLASSNAME } from "@/lib/workspace-ui";
+import { BETA_BADGE_CLASSNAME, WORKSPACE_PAGE_TITLE_CLASSNAME } from "@/lib/workspace-ui";
 import { cn } from "@/lib/utils";
 import { AccountInfoCard } from "./settings/AccountInfoCard";
 import { DataExportCard } from "./settings/DataExportCard";
@@ -350,9 +350,7 @@ export const SettingsPane = ({
                         </div>
                         <span className="text-xs font-normal leading-5 text-slate-800">{item.label}</span>
                         {item.badge ? (
-                          <span className="rounded-full border border-slate-200 bg-slate-100 px-1.5 text-xs font-normal leading-5 text-slate-600">
-                            {item.badge}
-                          </span>
+                          <span className={BETA_BADGE_CLASSNAME}>{item.badge}</span>
                         ) : null}
                       </div>
                       <ChevronRight className="h-4 w-4 text-slate-400" />
diff --git a/apps/web/src/components/WorkspaceMobileChrome.tsx b/apps/web/src/components/WorkspaceMobileChrome.tsx
index bdbf578d..38194193 100644
--- a/apps/web/src/components/WorkspaceMobileChrome.tsx
+++ b/apps/web/src/components/WorkspaceMobileChrome.tsx
@@ -11,6 +11,7 @@ import {
   DrawerTitle,
 } from "@/components/ui/drawer";
 import { cn } from "@/lib/utils";
+import { BETA_BADGE_CLASSNAME } from "@/lib/workspace-ui";
 import type { NoteCreateKind, Notebook } from "@edgeever/shared";
 import type { MobileBottomNavItem, NotebookNode } from "@/lib/app-helpers";
 import {
@@ -111,9 +112,7 @@ export const MobileBottomNav = ({
             <DropdownMenuItem className="gap-2 text-xs leading-5" onSelect={() => onCreateMemo("table")}>
               <TableProperties className="h-4 w-4 shrink-0" />
               <span className="min-w-0 flex-1 truncate">{t("structuredTable.name")}</span>
-              <span className="inline-flex shrink-0 items-center rounded-full border border-slate-200 bg-slate-100 px-1.5 text-xs font-normal leading-5 text-slate-600">
-                Beta
-              </span>
+              <span className={BETA_BADGE_CLASSNAME}>Beta</span>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/apps/web/src/components/settings/PluginManagerCard.tsx b/apps/web/src/components/settings/PluginManagerCard.tsx
index c31c147f..687c5af0 100644
--- a/apps/web/src/components/settings/PluginManagerCard.tsx
+++ b/apps/web/src/components/settings/PluginManagerCard.tsx
@@ -19,6 +19,7 @@ import type { MarketplaceEntry } from "@edgeever/plugin-api";
 import { getPluginDetailPage, getPluginDetailPath, hasPluginSettings, isPluginCardCommand, type PluginDetailPage } from "@/lib/plugins/plugin-navigation";
 import type { ScheduledTask } from "@edgeever/shared";
 import { api, getOrCreateClientDeviceId } from "@/lib/api";
+import { BETA_BADGE_CLASSNAME } from "@/lib/workspace-ui";
 import { ScheduledTaskRunHistoryDialog } from "@/components/execution/ScheduledTaskRunHistoryDialog";
 import { AppConfirmDialog } from "@/components/dialogs/ConfirmDialogs";
 import {
@@ -400,9 +401,7 @@ export const PluginManagerCard = ({
           <CardTitle className="flex min-w-0 items-center gap-2 text-sm">
             <Puzzle className="h-4 w-4 shrink-0 text-slate-900" />
             {selectedPluginId ? t("plugins.details.title") : t("plugins.title")}
-            <span className="inline-flex items-center rounded-full border border-slate-200 bg-slate-100 px-1.5 text-xs font-normal leading-5 text-slate-600">
-              Beta
-            </span>
+            <span className={BETA_BADGE_CLASSNAME}>Beta</span>
           </CardTitle>
           <div className="flex shrink-0 items-center gap-1">
             {snapshot.extensions.length > 0 || (marketplaceQuery.data?.entries.length ?? 0) > 0 ? (
diff --git a/apps/web/src/lib/workspace-ui.ts b/apps/web/src/lib/workspace-ui.ts
index 34078d7c..f5c04158 100644
--- a/apps/web/src/lib/workspace-ui.ts
+++ b/apps/web/src/lib/workspace-ui.ts
@@ -1,5 +1,9 @@
 export const WORKSPACE_PAGE_TITLE_CLASSNAME = "text-sm font-semibold leading-5 text-slate-900";
 
+/** Status chip. Same cool wash as a highlighted menu row, without a neutral outline. */
+export const BETA_BADGE_CLASSNAME =
+  "inline-flex shrink-0 items-center rounded-full bg-accent px-1.5 text-xs font-normal leading-5 text-slate-600";
+
 /**
  * Editor Layout Constants
  * - EDITOR_OUTLINE_WIDTH: Width of the document outline (TOC) panel (default: 300px)