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

@@ -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">

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>
-  );
-}

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";

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 {

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",

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;
+}