feat: regroup mobile settings homepage

Author: pallyoung

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

@@ -272,6 +272,36 @@ describe("SettingsPage", () => {
     ).toBeTruthy();
   });
 
+  it("renders the mobile settings homepage as grouped sections without the legacy hero", async () => {
+    viewportMocks.viewport = "mobile";
+    const store = createConnectedStore(vi.fn().mockResolvedValue({}));
+
+    renderSettingsPage(store);
+
+    expect(await screen.findByText("工作区与运行")).toBeInTheDocument();
+    expect(screen.getByText("界面与交互")).toBeInTheDocument();
+    expect(document.querySelector(".settings-mobile-root-hero")).toBeNull();
+
+    const buttons = screen.getAllByRole("button");
+    const labels = buttons.map((button) => button.getAttribute("aria-label")).filter(Boolean);
+
+    expect(labels).toEqual(expect.arrayContaining(["通用", "Agents", "外观", "快捷键"]));
+    expect(labels.indexOf("通用")).toBeLessThan(labels.indexOf("Agents"));
+    expect(labels.indexOf("Agents")).toBeLessThan(labels.indexOf("外观"));
+    expect(labels.indexOf("外观")).toBeLessThan(labels.indexOf("快捷键"));
+  });
+
+  it("localizes the new mobile settings homepage section headings", async () => {
+    viewportMocks.viewport = "mobile";
+    window.localStorage.setItem("ui.locale", JSON.stringify("en"));
+    const store = createConnectedStore(vi.fn().mockResolvedValue({}));
+
+    renderSettingsPage(store);
+
+    expect(await screen.findByText("Workspace & Runtime")).toBeInTheDocument();
+    expect(screen.getByText("Interface & Interaction")).toBeInTheDocument();
+  });
+
   it("does not render default Agent Provider selection in general settings", async () => {
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "settings.get") {

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

@@ -138,6 +138,20 @@ function getMobileSectionHintKey(section: SettingsSection) {
   }
 }
 
+const MOBILE_SETTINGS_GROUPS = [
+  {
+    titleKey: "settings.mobile_groups.workspace_runtime",
+    sections: ["general", "providers"],
+  },
+  {
+    titleKey: "settings.mobile_groups.interface_interaction",
+    sections: ["appearance", "shortcuts"],
+  },
+] as const satisfies readonly {
+  titleKey: string;
+  sections: readonly SettingsSection[];
+}[];
+
 /**
  * Settings Page
  *
@@ -449,30 +463,42 @@ export function SettingsPage() {
 
   const renderMobileRoot = () => (
     <main className="settings-content settings-content--mobile-root">
-      <section className="settings-mobile-root-hero">
-        <div className="settings-mobile-root-hero__eyebrow">{t("settings.title")}</div>
-        <p className="settings-mobile-root-hero__body">{t("settings.autosave_hint")}</p>
-      </section>
-      <div className="settings-mobile-list">
-        {availableSections.map(({ id, labelKey, iconSemantic }) => (
-          <button
-            key={id}
-            type="button"
-            className="settings-mobile-item"
-            aria-label={t(labelKey)}
-            onClick={() => setNavigationState({ kind: "detail", section: id })}
-          >
-            <span className="settings-mobile-item__icon-shell" aria-hidden="true">
-              <span className="settings-mobile-item__icon">
-                <ThemedIcon semantic={iconSemantic} size={18} />
-              </span>
-            </span>
-            <span className="settings-mobile-item__copy">
-              <span className="settings-mobile-item__label">{t(labelKey)}</span>
-              <span className="settings-mobile-item__hint">{t(getMobileSectionHintKey(id))}</span>
-            </span>
-            <ChevronRight size={16} className="settings-mobile-item__arrow" />
-          </button>
+      <div className="settings-mobile-root" data-testid="settings-mobile-root">
+        {MOBILE_SETTINGS_GROUPS.map((group) => (
+          <section key={group.titleKey} className="settings-mobile-group">
+            <h2 className="settings-mobile-group__title">{t(group.titleKey)}</h2>
+            <div className="settings-mobile-group__list">
+              {group.sections.map((sectionId) => {
+                const section = availableSections.find((entry) => entry.id === sectionId);
+                if (!section) {
+                  return null;
+                }
+
+                return (
+                  <button
+                    key={section.id}
+                    type="button"
+                    className="settings-mobile-item"
+                    aria-label={t(section.labelKey)}
+                    onClick={() => setNavigationState({ kind: "detail", section: section.id })}
+                  >
+                    <span className="settings-mobile-item__icon-shell" aria-hidden="true">
+                      <span className="settings-mobile-item__icon">
+                        <ThemedIcon semantic={section.iconSemantic} size={18} />
+                      </span>
+                    </span>
+                    <span className="settings-mobile-item__copy">
+                      <span className="settings-mobile-item__label">{t(section.labelKey)}</span>
+                      <span className="settings-mobile-item__hint">
+                        {t(getMobileSectionHintKey(section.id))}
+                      </span>
+                    </span>
+                    <ChevronRight size={16} className="settings-mobile-item__arrow" />
+                  </button>
+                );
+              })}
+            </div>
+          </section>
         ))}
       </div>
     </main>

packages/web/src/locales/en.json

@@ -489,6 +489,10 @@
     "general": "General",
     "appearance": "Appearance",
     "providers": "Agents",
+    "mobile_groups": {
+      "workspace_runtime": "Workspace & Runtime",
+      "interface_interaction": "Interface & Interaction"
+    },
     "autosave_hint": "Settings saved automatically",
     "load_failed": "Failed to load settings",
     "load_failed_unknown": "Server did not return settings data",

packages/web/src/locales/zh.json

@@ -489,6 +489,10 @@
     "general": "通用",
     "appearance": "外观",
     "providers": "Agents",
+    "mobile_groups": {
+      "workspace_runtime": "工作区与运行",
+      "interface_interaction": "界面与交互"
+    },
     "autosave_hint": "设置已自动保存",
     "load_failed": "设置加载失败",
     "load_failed_unknown": "未收到服务端返回的设置数据",