From 28810935da230d56ee5cb1e23ff410421ae61a83 Mon Sep 17 00:00:00 2001
From: Sawyer <sawyer@dirtroad.dev>
Date: Wed, 30 Sep 2026 14:27:58 -0700
Subject: [PATCH] fix(web): Settings keeps the theme picker in the profile menu
 only and shows the page title (CL-9670)

---
 apps/web/src/pages/settings-page.tsx      | 12 ++++-----
 apps/web/src/settings/account-section.tsx | 30 +----------------------
 apps/web/src/settings/index.ts            |  2 +-
 apps/web/src/settings/rows.css            | 23 +++++++++++------
 apps/web/src/settings/strings.ts          |  6 -----
 apps/web/src/settings/styles.css          | 26 ++++++++++++++++++++
 6 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/apps/web/src/pages/settings-page.tsx b/apps/web/src/pages/settings-page.tsx
index b31f9219cb..9e1d473043 100644
--- a/apps/web/src/pages/settings-page.tsx
+++ b/apps/web/src/pages/settings-page.tsx
@@ -59,13 +59,11 @@ export function SettingsRoute({
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <StageTopBar
-        crumbs={
-          activeSection === undefined
-            ? [{ label: "Settings" }]
-            : [{ label: "Settings", href: SETTINGS_PATH_PREFIX }, { label: activeSection.title }]
-        }
-      />
+      <StageTopBar crumbs={[{ label: "Settings" }]} />
+      <div className="settings-page-head">
+        <h1>Settings</h1>
+        <p>Personal and shared, side by side.</p>
+      </div>
       <div className="settings-layout min-h-0 flex-1">
         <SettingsNav path={path} onNavigate={navigate} />
         <div className="min-h-0 flex-1 overflow-y-auto">
diff --git a/apps/web/src/settings/account-section.tsx b/apps/web/src/settings/account-section.tsx
index 8f1a0c3bfc..86dcbf71fe 100644
--- a/apps/web/src/settings/account-section.tsx
+++ b/apps/web/src/settings/account-section.tsx
@@ -12,9 +12,8 @@ import { resolveAvatarFill } from "@/chat";
 import { IdentityAvatar } from "@/chat/avatar";
 import webPackage from "../../package.json";
 import { getAccount, type Account } from "./api";
-import { Segmented, SettingsGroup, SettingsRow } from "./rows";
+import { SettingsGroup, SettingsRow } from "./rows";
 import { SETTINGS_STRINGS } from "./strings";
-import { isTheme, setTheme, useTheme } from "../theme-store";
 
 /** The repo's own issue tracker — read off this package's manifest (set
  * from `git remote`) rather than a hardcoded org/repo guess. */
@@ -39,7 +38,6 @@ export function AccountSection({ onSignOut }: { readonly onSignOut?: () => void
           />
         )}
       </QueryView>
-      <AppearanceSection />
     </>
   );
 }
@@ -127,29 +125,3 @@ export function AccountSectionView({
     </SettingsGroup>
   );
 }
-
-/** Theme row, wired to the theme store, which applies and persists the choice. */
-export function AppearanceSection() {
-  const theme = useTheme();
-  return (
-    <SettingsGroup title={SETTINGS_STRINGS.appearanceSectionTitle}>
-      <SettingsRow
-        title={SETTINGS_STRINGS.appearanceThemeLabel}
-        actions={
-          <Segmented
-            label={SETTINGS_STRINGS.appearanceThemeLabel}
-            value={theme}
-            options={[
-              { value: "light", label: SETTINGS_STRINGS.themeLight },
-              { value: "dark", label: SETTINGS_STRINGS.themeDark },
-              { value: "canvas", label: SETTINGS_STRINGS.themeCanvas },
-            ]}
-            onChange={(next) => {
-              if (isTheme(next)) setTheme(next);
-            }}
-          />
-        }
-      />
-    </SettingsGroup>
-  );
-}
diff --git a/apps/web/src/settings/index.ts b/apps/web/src/settings/index.ts
index f60e17c542..753d15b624 100644
--- a/apps/web/src/settings/index.ts
+++ b/apps/web/src/settings/index.ts
@@ -3,7 +3,7 @@ export type { SettingsContext, SettingsSection, SettingsSectionGroup } from "./s
 
 export { resolveSettingsSectionGroups, insertEveryoneSections } from "./section-registry";
 
-export { AccountSection, AccountSectionView, AppearanceSection } from "./account-section";
+export { AccountSection, AccountSectionView } from "./account-section";
 // NotificationsSection is not exported: it is draft-only and not in the
 // registry. Re-export when a preference store backs it.
 export { AuditSection } from "./audit-section";
diff --git a/apps/web/src/settings/rows.css b/apps/web/src/settings/rows.css
index b22233356e..99a07ddf9b 100644
--- a/apps/web/src/settings/rows.css
+++ b/apps/web/src/settings/rows.css
@@ -74,24 +74,31 @@
   display: inline-flex;
   padding: 2px;
   gap: 2px;
-  border: 1px solid var(--border);
-  border-radius: 999px;
+  border-radius: var(--r-md);
+  background: var(--hover);
 }
 
 .settings-seg-option {
-  padding: 0.3rem 0.9rem;
+  height: 28px;
+  padding: 0 12px;
   border: 0;
-  border-radius: 999px;
+  border-radius: 6px;
   background: transparent;
-  color: var(--muted-foreground);
+  color: var(--ink-3);
   font: inherit;
-  font-size: 0.8125rem;
+  font-size: 13px;
+  font-weight: 700;
   cursor: pointer;
 }
 
+.settings-seg-option:hover {
+  color: var(--ink);
+}
+
 .settings-seg-option[aria-checked="true"] {
-  background: var(--primary);
-  color: var(--primary-foreground);
+  background: var(--surface);
+  color: var(--ink);
+  box-shadow: var(--raised);
 }
 
 .settings-seg-option:focus-visible {
diff --git a/apps/web/src/settings/strings.ts b/apps/web/src/settings/strings.ts
index a9ae7e8ff1..0e5ae27269 100644
--- a/apps/web/src/settings/strings.ts
+++ b/apps/web/src/settings/strings.ts
@@ -40,12 +40,6 @@ export const SETTINGS_STRINGS = {
   accountEmailCopiedToast: "Copied",
   accountEmailCopyError: "Couldn't copy the email",
 
-  appearanceSectionTitle: "Appearance",
-  appearanceThemeLabel: "Theme",
-  themeLight: "Light",
-  themeDark: "Dark",
-  themeCanvas: "Canvas",
-
   peopleSectionTitle: "People",
   peopleSectionDescription: "Everyone with a seat on this workbench.",
   peopleLoadError: "this workbench's people",
diff --git a/apps/web/src/settings/styles.css b/apps/web/src/settings/styles.css
index 05eebf457a..21d3d93b3f 100644
--- a/apps/web/src/settings/styles.css
+++ b/apps/web/src/settings/styles.css
@@ -747,3 +747,29 @@
   font-weight: 600;
   color: var(--ink-2);
 }
+
+.settings-page-head {
+  flex-shrink: 0;
+  padding: 24px 28px 16px;
+}
+
+/* react-ui's SettingsPanel card: ring-as-border like the mockup's raised cards. */
+.settings-stage-body > section.border {
+  border-color: transparent;
+  border-radius: 12px;
+  box-shadow: var(--raised);
+}
+
+.settings-page-head h1 {
+  margin: 0;
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.settings-page-head p {
+  margin: 6px 0 0;
+  color: var(--ink-2);
+  font-size: 15px;
+}