refactor(desktop): unify settings page rhythm and layout

apps/desktop/src/components/business/settings-section.tsx

@@ -33,7 +33,7 @@ function SettingsSection({
           <h2
             id={accessibleHeadingId}
             data-slot="settings-section-title"
-            className="text-body text-content font-medium"
+            className="text-body text-content font-semibold"
           >
             {title}
           </h2>

apps/desktop/src/components/ui/button.tsx

@@ -31,7 +31,7 @@ const buttonVariants = cva(
         field:
           "h-control-field gap-inline px-surface-inset has-[>svg]:px-module-inset",
         xs: "h-control-mini rounded-control text-metadata gap-1 px-2 has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-control-mini rounded-control has-[>svg]:px-module-inset gap-1.5 px-3",
+        sm: "h-control-mini gap-inline px-surface-inset has-[>svg]:px-module-inset",
         lg: "h-control-field rounded-control px-6 has-[>svg]:px-4",
         icon: "size-control",
         "icon-xs":

apps/desktop/src/settings/AppearanceSettings.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 
 import { SettingRow } from "@/components/business/setting-row";
 import { SettingToggle } from "@/components/business/setting-toggle";
+import { SettingsSection } from "@/components/business/settings-section";
 import { ViewSwitcher } from "@/components/business/view-switcher";
 import { Button } from "@/components/ui/button";
 import { Copy, Download, Plus, Trash2, Upload } from "@/components/ui/icons";
@@ -664,16 +665,10 @@ export function AppearanceSettings({
 
   return (
     <div className="appearance-settings">
-      <section
-        className="appearance-section"
-        aria-labelledby="appearance-color-scheme"
+      <SettingsSection
+        title={t("settings.colorScheme")}
+        headingId="appearance-color-scheme"
       >
-        <h2
-          id="appearance-color-scheme"
-          className="appearance-settings-heading"
-        >
-          {t("settings.colorScheme")}
-        </h2>
         <div
           className="appearance-scheme-grid"
           role="radiogroup"
@@ -694,15 +689,12 @@ export function AppearanceSettings({
             </label>
           ))}
         </div>
-      </section>
+      </SettingsSection>
 
-      <section
-        className="appearance-section"
-        aria-labelledby="appearance-typography"
+      <SettingsSection
+        title={t("settings.typography")}
+        headingId="appearance-typography"
       >
-        <h2 id="appearance-typography" className="appearance-settings-heading">
-          {t("settings.typography")}
-        </h2>
         <div className="appearance-profile-grid">
           {PROFILE_SCHEMES.map((scheme) => (
             <TypographyProfileEditor
@@ -734,17 +726,13 @@ export function AppearanceSettings({
             onChange={(codeFontSize) => setAppearanceSettings({ codeFontSize })}
           />
         </div>
-      </section>
+      </SettingsSection>
 
-      <section
-        className="appearance-section"
-        aria-labelledby="appearance-themes"
-      >
-        <div className="appearance-section-header">
-          <h2 id="appearance-themes" className="appearance-settings-heading">
-            {t("settings.themes")}
-          </h2>
-          <div className="appearance-section-actions">
+      <SettingsSection
+        title={t("settings.themes")}
+        headingId="appearance-themes"
+        actions={
+          <>
             <Button
               variant="secondary"
               size="sm"
@@ -774,8 +762,9 @@ export function AppearanceSettings({
               }
               tabIndex={-1}
             />
-          </div>
-        </div>
+          </>
+        }
+      >
         <div className="appearance-theme-grid">
           {catalog.map((theme) => (
             <ThemeCard
@@ -789,27 +778,18 @@ export function AppearanceSettings({
             />
           ))}
         </div>
-      </section>
-
-      <section
-        className="appearance-section appearance-editor-section"
-        aria-labelledby="appearance-theme-editor"
-      >
-        <div className="appearance-section-header">
-          <div>
-            <h2
-              id="appearance-theme-editor"
-              className="appearance-settings-heading"
-            >
-              {t("settings.themeEditor")}
-            </h2>
-            <p className="appearance-section-hint">
-              {activeTheme.builtin
-                ? t("settings.builtinThemeHint")
-                : t("settings.customThemeHint")}
-            </p>
-          </div>
-          <div className="appearance-section-actions">
+      </SettingsSection>
+
+      <SettingsSection
+        title={t("settings.themeEditor")}
+        headingId="appearance-theme-editor"
+        description={
+          activeTheme.builtin
+            ? t("settings.builtinThemeHint")
+            : t("settings.customThemeHint")
+        }
+        actions={
+          <>
             <Button
               variant="ghost"
               size="sm"
@@ -829,8 +809,9 @@ export function AppearanceSettings({
                 <Trash2 />
               </TooltipButton>
             )}
-          </div>
-        </div>
+          </>
+        }
+      >
         <div className="appearance-editor-surface">
           {!activeTheme.builtin && (
             <SettingRow
@@ -865,15 +846,12 @@ export function AppearanceSettings({
             />
           </div>
         </div>
-      </section>
+      </SettingsSection>
 
-      <section
-        className="appearance-section"
-        aria-labelledby="appearance-surfaces"
+      <SettingsSection
+        title={t("settings.surfaces")}
+        headingId="appearance-surfaces"
       >
-        <h2 id="appearance-surfaces" className="appearance-settings-heading">
-          {t("settings.surfaces")}
-        </h2>
         <div className="appearance-profile-grid">
           {PROFILE_SCHEMES.map((scheme) => (
             <SurfaceProfileEditor
@@ -885,15 +863,12 @@ export function AppearanceSettings({
             />
           ))}
         </div>
-      </section>
+      </SettingsSection>
 
-      <section
-        className="appearance-section"
-        aria-labelledby="appearance-preferences"
+      <SettingsSection
+        title={t("settings.appearancePreferences")}
+        headingId="appearance-preferences"
       >
-        <h2 id="appearance-preferences" className="appearance-settings-heading">
-          {t("settings.appearancePreferences")}
-        </h2>
         <div className="appearance-setting-group">
           <SettingToggle
             label={t("settings.pointerCursors")}
@@ -954,7 +929,7 @@ export function AppearanceSettings({
             />
           </SettingRow>
         </div>
-      </section>
+      </SettingsSection>
 
       {status && (
         <p className="appearance-status" role="status">

apps/desktop/src/settings/MemorySettings.tsx

@@ -85,6 +85,7 @@ import {
   originLabelKey,
 } from "./memory-model";
 import type { MemoryFilter, MemoryView } from "./memory-model";
+import { GroupHeading } from "./SettingsPrimitives";
 
 import "./memory-settings.css";
 
@@ -616,7 +617,7 @@ function DetailPanel({
       </div>
       <section className="memory-detail-section">
         <div className="memory-detail-section-title">
-          <h3>{t("memory.evidence")}</h3>
+          <GroupHeading className="pt-0">{t("memory.evidence")}</GroupHeading>
           <Button
             variant="ghost"
             size="xs"
@@ -662,7 +663,7 @@ function DetailPanel({
         )}
       </section>
       <section className="memory-detail-section">
-        <h3>{t("memory.usageHistory")}</h3>
+        <GroupHeading className="pt-0">{t("memory.usageHistory")}</GroupHeading>
         {usages.length === 0 ? (
           <p className="memory-detail-muted">{t("memory.noUsage")}</p>
         ) : (
@@ -1061,7 +1062,9 @@ export function MemorySettingsPage({
         </summary>
         <div className="memory-disclosure-body">
           <div className="memory-policy-column">
-            <h2>{t("memory.globalDefaults")}</h2>
+            <GroupHeading className="pt-0">
+              {t("memory.globalDefaults")}
+            </GroupHeading>
             <SettingToggle
               checked={settings.enabled}
               label={t("memory.enabled")}
@@ -1093,7 +1096,9 @@ export function MemorySettingsPage({
             />
           </div>
           <div className="memory-policy-column">
-            <h2>{t("memory.projectOverrides")}</h2>
+            <GroupHeading className="pt-0">
+              {t("memory.projectOverrides")}
+            </GroupHeading>
             <p className="text-metadata text-muted-foreground">
               {t("memory.projectOverridesHint")}
             </p>

apps/desktop/src/settings/SettingsPage.tsx

@@ -31,7 +31,6 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { cssVars } from "@/lib/cssVars";
-import { cn } from "@/lib/utils";
 
 import { resetVisualAppearanceSettings } from "../appearance";
 import {
@@ -463,13 +462,7 @@ export function SettingsPage({
         </header>
 
         <ScrollArea key={tab} className="min-h-0 flex-1">
-          <div
-            className={cn(
-              "settings-page mx-auto w-full",
-              tab === "profile" && "settings-profile-page",
-              tab === "worktrees" && "settings-worktrees-page"
-            )}
-          >
+          <div className="settings-page mx-auto w-full">
             {tab === "project" && onSelectProject && (
               <Select
                 value={projectPath}

apps/desktop/src/settings/SettingsPrimitives.tsx

@@ -55,9 +55,20 @@ export function ProjectRow(props: RowProps) {
   );
 }
 
-export function GroupHeading({ children }: { children: ReactNode }) {
+export function GroupHeading({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
   return (
-    <h3 className="pt-section text-body text-foreground font-semibold">
+    <h3
+      className={cn(
+        "pt-section text-body text-content font-semibold",
+        className
+      )}
+    >
       {children}
     </h3>
   );

apps/desktop/src/settings/appearance-settings.css

@@ -6,44 +6,9 @@
   gap: var(--ds-space-page-section);
 }
 
-.appearance-section {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: var(--ds-space-surface-inset);
-}
-
-.appearance-section-header {
-  display: flex;
-  min-width: 0;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: var(--ds-space-section);
-}
-
-.appearance-section-actions {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--ds-space-control-group);
-}
-
-.appearance-settings-heading {
-  margin: 0;
-  color: var(--ds-color-text);
-  font-size: var(--ds-type-section-size);
-  font-weight: var(--ds-font-weight-medium);
-  line-height: var(--ds-type-section-leading);
-}
-
-.appearance-section-hint {
-  max-width: 36rem;
-  margin: var(--ds-space-optical) 0 0;
-  color: var(--ds-color-text-muted);
-  font-size: var(--ds-type-body-size);
-  line-height: var(--ds-type-body-leading);
+/* The typography section stacks two blocks inside one shared SettingsSection content. */
+.appearance-profile-grid + .appearance-setting-group {
+  margin-top: var(--ds-space-surface-inset);
 }
 
 .appearance-scheme-grid {
@@ -564,16 +529,6 @@
   .appearance-profile-grid {
     grid-template-columns: minmax(0, 1fr);
   }
-
-  .appearance-section-header {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: var(--ds-space-module-inset);
-  }
-
-  .appearance-section-actions {
-    justify-content: flex-start;
-  }
 }
 
 @container (max-width: 30rem) {