Refine theme settings picker

Author: pallyoung

packages/web/src/features/settings/components/settings-page.test.tsx

@@ -1008,7 +1008,7 @@ describe("SettingsPage", () => {
     });
   });
 
-  it("renders appearance option groups through shared pills with group semantics", async () => {
+  it("renders appearance theme and language controls with shared semantics", async () => {
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "settings.get") {
         return {
@@ -1022,31 +1022,21 @@ describe("SettingsPage", () => {
     renderSettingsPage(store);
     fireEvent.click(screen.getByRole("button", { name: "外观" }));
 
-    const mintThemePill = await screen.findByRole("button", { name: "Mint" });
-    const darkVariantPill = screen.getByRole("button", { name: "深色" });
-    const lightVariantPill = screen.getByRole("button", { name: "浅色" });
+    const themePicker = await screen.findByRole("combobox", { name: "主题" });
     const chineseLanguagePill = screen.getByRole("button", { name: "中文" });
 
-    expect(
-      screen.getByRole("group", {
-        name: "主题系列",
-      })
-    ).toHaveAccessibleDescription("选择应用主题");
-    expect(
-      screen.getByRole("group", {
-        name: "明暗模式",
-      })
-    ).toHaveAccessibleDescription("选择应用主题");
+    expect(themePicker).toHaveAccessibleDescription("选择应用主题");
+    expect(screen.getByRole("option", { name: "Mint 深色" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "Mint 浅色" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "高对比深色" })).toBeInTheDocument();
     expect(
       screen.getByRole("group", {
         name: "语言",
       })
     ).toHaveAccessibleDescription("选择界面语言");
     expect(screen.queryByRole("group", { name: "终端渲染器" })).not.toBeInTheDocument();
     expect(screen.queryByRole("switch", { name: "选中自动复制" })).not.toBeInTheDocument();
-    expect(mintThemePill).toHaveAttribute("aria-pressed", "true");
-    expect(darkVariantPill).toHaveAttribute("aria-pressed", "true");
-    expect(lightVariantPill).toHaveAttribute("aria-pressed", "false");
+    expect(themePicker).toHaveValue("mint-dark");
     expect(chineseLanguagePill).toHaveAttribute("aria-pressed", "true");
   });
 
@@ -1112,7 +1102,7 @@ describe("SettingsPage", () => {
     expect(screen.queryByText("选中自动复制")).not.toBeInTheDocument();
   });
 
-  it("updates theme family and variant through the shared appearance pills", async () => {
+  it("updates theme through a single shared appearance picker", async () => {
     window.localStorage.setItem("ui.locale", JSON.stringify("en"));
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "settings.get") {
@@ -1125,14 +1115,13 @@ describe("SettingsPage", () => {
     renderSettingsPage(store);
     fireEvent.click(screen.getByRole("button", { name: "Appearance" }));
 
-    expect(await screen.findByRole("button", { name: "Mint" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Graphite" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Nord" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "High Contrast" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Dark" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Light" })).toBeInTheDocument();
+    const picker = await screen.findByRole("combobox", { name: "Theme" });
+    expect(screen.getByRole("option", { name: "Mint Dark" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "Graphite Dark" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "Graphite Light" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "Nord Light" })).toBeInTheDocument();
 
-    fireEvent.click(screen.getByRole("button", { name: "Graphite" }));
+    fireEvent.change(picker, { target: { value: "graphite-dark" } });
 
     await waitFor(() => {
       expect(sendCommand).toHaveBeenCalledWith(
@@ -1150,7 +1139,7 @@ describe("SettingsPage", () => {
 
     expect(document.documentElement).toHaveAttribute("data-theme", "graphite-dark");
 
-    fireEvent.click(screen.getByRole("button", { name: "Light" }));
+    fireEvent.change(picker, { target: { value: "graphite-light" } });
 
     await waitFor(() => {
       expect(sendCommand).toHaveBeenCalledWith(
@@ -1167,15 +1156,10 @@ describe("SettingsPage", () => {
     });
 
     expect(document.documentElement).toHaveAttribute("data-theme", "graphite-light");
-    expect(screen.getByRole("button", { name: "Graphite" })).toHaveAttribute(
-      "aria-pressed",
-      "true"
-    );
-    expect(screen.getByRole("button", { name: "Light" })).toHaveAttribute("aria-pressed", "true");
-    expect(screen.getByRole("button", { name: "Dark" })).toHaveAttribute("aria-pressed", "false");
+    expect(picker).toHaveValue("graphite-light");
   });
 
-  it("hydrates theme family and variant from settings.get themeId", async () => {
+  it("hydrates the single theme picker from settings.get themeId", async () => {
     window.localStorage.setItem("ui.locale", JSON.stringify("en"));
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "settings.get") {
@@ -1191,9 +1175,7 @@ describe("SettingsPage", () => {
     fireEvent.click(screen.getByRole("button", { name: "Appearance" }));
 
     await waitFor(() => {
-      expect(screen.getByRole("button", { name: "Nord" })).toHaveAttribute("aria-pressed", "true");
-      expect(screen.getByRole("button", { name: "Light" })).toHaveAttribute("aria-pressed", "true");
-      expect(screen.getByRole("button", { name: "Dark" })).toHaveAttribute("aria-pressed", "false");
+      expect(screen.getByRole("combobox", { name: "Theme" })).toHaveValue("nord-light");
     });
   });
 
@@ -1213,8 +1195,7 @@ describe("SettingsPage", () => {
     fireEvent.click(screen.getByRole("button", { name: "Appearance" }));
 
     await waitFor(() => {
-      expect(screen.getByRole("button", { name: "Mint" })).toHaveAttribute("aria-pressed", "true");
-      expect(screen.getByRole("button", { name: "Light" })).toHaveAttribute("aria-pressed", "true");
+      expect(screen.getByRole("combobox", { name: "Theme" })).toHaveValue("mint-light");
       expect(document.documentElement).toHaveAttribute("data-theme", "mint-light");
     });
   });
@@ -1235,11 +1216,7 @@ describe("SettingsPage", () => {
     fireEvent.click(screen.getByRole("button", { name: "Appearance" }));
 
     await waitFor(() => {
-      expect(screen.getByRole("button", { name: "Graphite" })).toHaveAttribute(
-        "aria-pressed",
-        "true"
-      );
-      expect(screen.getByRole("button", { name: "Light" })).toHaveAttribute("aria-pressed", "true");
+      expect(screen.getByRole("combobox", { name: "Theme" })).toHaveValue("graphite-light");
       expect(document.documentElement).toHaveAttribute("data-theme", "graphite-light");
     });
   });
@@ -1260,7 +1237,9 @@ describe("SettingsPage", () => {
 
     renderSettingsPage(store);
     fireEvent.click(screen.getByRole("button", { name: "Appearance" }));
-    fireEvent.click(await screen.findByRole("button", { name: "Graphite" }));
+    fireEvent.change(await screen.findByRole("combobox", { name: "Theme" }), {
+      target: { value: "graphite-dark" },
+    });
 
     await waitFor(() => {
       expect(sendCommand).toHaveBeenCalledWith(
@@ -1283,11 +1262,7 @@ describe("SettingsPage", () => {
       await settingsGetPromise;
     });
 
-    expect(screen.getByRole("button", { name: "Graphite" })).toHaveAttribute(
-      "aria-pressed",
-      "true"
-    );
-    expect(screen.getByRole("button", { name: "Dark" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("combobox", { name: "Theme" })).toHaveValue("graphite-dark");
     expect(document.documentElement).toHaveAttribute("data-theme", "graphite-dark");
   });
 

packages/web/src/features/settings/components/settings-page.tsx

@@ -32,17 +32,10 @@ import {
   serverInfoAtom,
 } from "../../../atoms/connection";
 import { resolvedActiveWorkspaceIdAtom } from "../../../atoms/workspaces";
-import { Input, Notice, Pill, Switch } from "../../../components/ui";
+import { Input, Notice, Pill, Select, Switch } from "../../../components/ui";
 import { useViewport } from "../../../hooks/use-viewport";
 import { useTranslation } from "../../../lib/i18n";
-import {
-  getThemeById,
-  getThemeFamily,
-  getThemeIdForFamilyVariant,
-  getThemeVariant,
-  resolveStoredThemeId,
-  type ThemeFamily,
-} from "../../../theme";
+import { getThemeById, resolveStoredThemeId, THEMES } from "../../../theme";
 import { notificationPreferencesAtom } from "../../notifications/atoms";
 import { MobilePageHeader } from "../../shared/components/mobile-page-header";
 import {
@@ -73,8 +66,6 @@ type SettingsNavigationState =
 type SettingsContentLayoutMode = "default" | "fill-height";
 
 const DEFAULT_SETTINGS_SECTION: SettingsSection = SETTINGS_SECTIONS[0].id;
-const THEME_FAMILIES: ReadonlyArray<ThemeFamily> = ["mint", "graphite", "nord", "hc"];
-const THEME_VARIANTS = ["dark", "light"] as const;
 
 function isStandaloneWebApp(): boolean {
   if (typeof window === "undefined") {
@@ -1210,14 +1201,15 @@ function AppearanceSettings({ locale, setLocale, theme, setTheme }: AppearanceSe
   const t = useTranslation();
   const themeTitleId = useId();
   const themeDescId = useId();
-  const themeFamilyTitleId = useId();
-  const themeVariantTitleId = useId();
+  const themeSelectId = useId();
   const languageTitleId = useId();
   const languageDescId = useId();
   const dispatch = useAtomValue(dispatchCommandAtom);
   const currentThemeId = resolveStoredThemeId(theme);
-  const currentThemeFamily = getThemeFamily(currentThemeId);
-  const currentThemeVariant = getThemeVariant(currentThemeId);
+  const themeOptions = THEMES.map((registeredTheme) => ({
+    value: registeredTheme.id,
+    label: t(registeredTheme.labelKey),
+  }));
 
   const saveSettings = async (settings: Record<string, unknown>) => {
     await dispatch("settings.update", { settings });
@@ -1234,20 +1226,6 @@ function AppearanceSettings({ locale, setLocale, theme, setTheme }: AppearanceSe
     void saveSettings({ appearance: { themeId: resolvedTheme.id } });
   };
 
-  const handleThemeFamilyChange = (family: ThemeFamily) => {
-    const nextThemeId = getThemeIdForFamilyVariant(family, currentThemeVariant);
-    if (nextThemeId) {
-      handleThemeChange(nextThemeId);
-    }
-  };
-
-  const handleThemeVariantChange = (variant: (typeof THEME_VARIANTS)[number]) => {
-    const nextThemeId = getThemeIdForFamilyVariant(currentThemeFamily, variant);
-    if (nextThemeId) {
-      handleThemeChange(nextThemeId);
-    }
-  };
-
   return (
     <div className="settings-section">
       <div className="settings-group">
@@ -1257,48 +1235,15 @@ function AppearanceSettings({ locale, setLocale, theme, setTheme }: AppearanceSe
         <p className="settings-group-desc" id={themeDescId}>
           {t("settings.theme.hint")}
         </p>
-
-        <h3 className="settings-group-title" id={themeFamilyTitleId}>
-          {t("settings.theme.family")}
-        </h3>
-        <div
+        <Select
+          id={themeSelectId}
           aria-describedby={themeDescId}
-          aria-labelledby={themeFamilyTitleId}
-          className="settings-pills"
-          role="group"
-        >
-          {THEME_FAMILIES.map((family) => (
-            <Pill
-              key={family}
-              leadingIcon={currentThemeFamily === family ? <Check size={12} /> : undefined}
-              onClick={() => handleThemeFamilyChange(family)}
-              active={currentThemeFamily === family}
-            >
-              {t(`settings.theme.family_${family}`)}
-            </Pill>
-          ))}
-        </div>
-
-        <h3 className="settings-group-title" id={themeVariantTitleId}>
-          {t("settings.theme.variant")}
-        </h3>
-        <div
-          aria-describedby={themeDescId}
-          aria-labelledby={themeVariantTitleId}
-          className="settings-pills"
-          role="group"
-        >
-          {THEME_VARIANTS.map((variant) => (
-            <Pill
-              key={variant}
-              leadingIcon={currentThemeVariant === variant ? <Check size={12} /> : undefined}
-              onClick={() => handleThemeVariantChange(variant)}
-              active={currentThemeVariant === variant}
-            >
-              {t(`settings.theme.variant_${variant}`)}
-            </Pill>
-          ))}
-        </div>
+          aria-label={t("settings.theme.title")}
+          className="settings-input-compact"
+          options={themeOptions}
+          value={currentThemeId}
+          onValueChange={handleThemeChange}
+        />
       </div>
 
       <div className="settings-group">