feat(web): migrate settings header to shared contract

Author: pallyoung

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

@@ -941,19 +941,24 @@ describe("SettingsPage", () => {
     expect(routerMocks.navigate).toHaveBeenCalledWith("/");
   });
 
-  it("renders a compact desktop header with only the settings title", async () => {
+  it("renders the desktop settings header through the shared PageHeader contract", async () => {
     const sendCommand = vi.fn().mockResolvedValue({});
     const store = createConnectedStore(sendCommand);
 
     renderSettingsPage(store);
 
-    const desktopHeader = document.querySelector(".settings-header__desktop") as HTMLElement | null;
+    const desktopHeader = document.querySelector(
+      ".settings-header .page-header"
+    ) as HTMLElement | null;
     const mobileHeader = document.querySelector(
       ".settings-header .mobile-page-header"
     ) as HTMLElement | null;
-    const headerCopy = document.querySelector(".settings-header__copy") as HTMLElement | null;
+    const headerCopy = document.querySelector(
+      ".settings-header .page-header__copy"
+    ) as HTMLElement | null;
 
     expect(desktopHeader).not.toBeNull();
+    expect(desktopHeader).toHaveClass("page-header--secondary");
     expect(mobileHeader).toBeNull();
     expect(screen.getByRole("heading", { name: "设置" })).toBeInTheDocument();
     expect(
@@ -962,7 +967,7 @@ describe("SettingsPage", () => {
     expect(headerCopy).not.toBeNull();
     expect(within(headerCopy as HTMLElement).queryByText("Coder Studio")).toBeNull();
     expect(within(headerCopy as HTMLElement).queryByText("设置已自动保存")).toBeNull();
-    expect(document.querySelector(".settings-header__section-pill")).toBeNull();
+    expect(document.querySelector(".settings-header__desktop")).toBeNull();
   });
 
   it("renders a mobile category list and returns from detail content to the settings root", async () => {

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

@@ -22,7 +22,7 @@ import {
   resolveSupervisorRetryOnTimeout,
 } from "@coder-studio/core";
 import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
-import { Check, ChevronLeft, ChevronRight } from "lucide-react";
+import { Check, ChevronRight } from "lucide-react";
 import { useEffect, useId, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { localeAtom, themeAtom } from "../../../atoms/app-ui";
@@ -38,6 +38,7 @@ import { useTranslation } from "../../../lib/i18n";
 import { getThemeById, resolveStoredThemeId, THEMES } from "../../../theme";
 import { notificationPreferencesAtom } from "../../notifications/atoms";
 import { MobilePageHeader } from "../../shared/components/mobile-page-header";
+import { PageHeader } from "../../shared/components/page-header";
 import {
   getTerminalFontSizePreference,
   hasExplicitTerminalFontSizeSetting,
@@ -610,19 +611,13 @@ export function SettingsPage() {
             backLabel={t("action.back")}
           />
         ) : (
-          <div className="settings-header__desktop">
-            <button
-              type="button"
-              className="page-header__back settings-header__back"
-              onClick={handleBack}
-            >
-              <ChevronLeft size={16} />
-              <span>{t("action.back")}</span>
-            </button>
-            <div className="settings-header__copy">
-              <h1 className="page-title settings-header__title">{t("settings.title")}</h1>
-            </div>
-          </div>
+          <PageHeader
+            title={t("settings.title")}
+            titleAs="h1"
+            level="secondary"
+            onBack={handleBack}
+            backLabel={t("action.back")}
+          />
         )}
       </header>
 

packages/web/src/styles/components.css

@@ -743,36 +743,6 @@
   border-bottom: 1px solid var(--border);
 }
 
-.settings-header__desktop {
-  width: 100%;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--sp-3);
-}
-
-.settings-header__back {
-  flex-shrink: 0;
-  min-height: 30px;
-  font-size: var(--text-xs);
-}
-
-.settings-header__copy {
-  min-width: 0;
-  display: flex;
-  flex: 0 1 auto;
-  flex-direction: column;
-  justify-content: flex-start;
-  gap: 0;
-}
-
-.settings-header__title {
-  margin: 0;
-  font-size: 18px;
-  line-height: 1.05;
-}
-
 .settings-body {
   display: flex;
   flex: 1;

packages/web/src/styles/components.theme.test.ts

@@ -725,9 +725,7 @@ describe("components.css theme-sensitive surfaces", () => {
   it("keeps settings navigation aligned with desktop editor chrome on both desktop and mobile", () => {
     const settingsPage = getLastRuleBlock(".settings-page");
     const baseSettingsHeader = getRuleBlocksFrom(stylesheet, ".settings-header")[0];
-    const desktopSettingsHeader = getLastRuleBlock(".settings-header__desktop");
-    const desktopSettingsCopy = getLastRuleBlock(".settings-header__copy");
-    const desktopSettingsTitle = getLastRuleBlock(".settings-header__title");
+    const desktopSettingsHeader = getLastRuleBlock(".page-header--secondary");
     const settingsBody = getLastRuleBlock(".settings-body");
     const settingsSidebar = getLastRuleBlock(".settings-sidebar");
     const settingsContent = getLastRuleBlock(".settings-content");
@@ -757,16 +755,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(baseSettingsHeader).toContain("background: var(--bg-surface)");
     expect(baseSettingsHeader).toContain("border-bottom: 1px solid var(--border)");
     expect(baseSettingsHeader).toContain("padding: var(--sp-1) var(--sp-4)");
-    expect(desktopSettingsHeader).toContain("width: 100%");
-    expect(desktopSettingsHeader).toContain("margin: 0");
-    expect(desktopSettingsHeader).toContain("display: flex");
-    expect(desktopSettingsHeader).toContain("align-items: center");
-    expect(desktopSettingsHeader).toContain("justify-content: flex-start");
-    expect(desktopSettingsCopy).toContain("justify-content: flex-start");
-    expect(desktopSettingsCopy).toContain("flex: 0 1 auto");
-    expect(desktopSettingsCopy).toContain("gap: 0");
-    expect(desktopSettingsTitle).toContain("font-size: 18px");
-    expect(desktopSettingsTitle).toContain("line-height: 1.05");
+    expect(desktopSettingsHeader).toContain("min-height: 48px");
     expect(settingsBody).toContain("align-items: stretch");
     expect(settingsBody).toContain("background: var(--bg-page)");
     expect(settingsSidebar).toContain("background: var(--bg-panel)");