From 75adf7d603b1b7eae7aee5c6610c0a789f7e0aa7 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 22:05:06 -0500
Subject: [PATCH] =?UTF-8?q?style(desktop):=20flatten=20appearance=20settin?=
 =?UTF-8?q?gs=20=E2=80=94=20drop=20card-in-card=20sections?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove the outer card chrome (border/bg/shadow/rounded) wrapping each
appearance section so they're flat headings + option grids instead of
boxes nested inside boxes, matching the other settings pages.
---
 .../src/app/settings/appearance-settings.tsx  | 75 ++++++++++---------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/apps/desktop/src/app/settings/appearance-settings.tsx b/apps/desktop/src/app/settings/appearance-settings.tsx
index 4abd79c8d..8bf208b5a 100644
--- a/apps/desktop/src/app/settings/appearance-settings.tsx
+++ b/apps/desktop/src/app/settings/appearance-settings.tsx
@@ -1,4 +1,5 @@
 import { useStore } from '@nanostores/react'
+import type { ReactNode } from 'react'
 
 import { triggerHaptic } from '@/lib/haptics'
 import { Check } from '@/lib/icons'
@@ -51,6 +52,20 @@ function ThemePreview({ name }: { name: string }) {
   )
 }
 
+function SectionHead({ title, description, pill }: { title: string; description: string; pill?: ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div>
+        <div className="text-[length:var(--conversation-text-font-size)] font-medium">{title}</div>
+        <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+          {description}
+        </div>
+      </div>
+      {pill}
+    </div>
+  )
+}
+
 export function AppearanceSettings() {
   const { themeName, mode, availableThemes, setTheme, setMode } = useTheme()
   const toolViewMode = useStore($toolViewMode)
@@ -58,24 +73,18 @@ export function AppearanceSettings() {
 
   return (
     <SettingsContent>
-      <div className="space-y-5">
-        <div>
-          <p className="max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-            These are desktop-only display preferences. Mode controls brightness; theme controls the accent palette and
-            chat surface styling.
-          </p>
-        </div>
+      <div className="grid gap-8">
+        <p className="max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+          These are desktop-only display preferences. Mode controls brightness; theme controls the accent palette and
+          chat surface styling.
+        </p>
 
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">Color Mode</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                Pick a fixed mode or let Hermes follow your system setting.
-              </div>
-            </div>
-            <Pill>{prettyName(mode)}</Pill>
-          </div>
+        <section className="grid gap-3">
+          <SectionHead
+            description="Pick a fixed mode or let Hermes follow your system setting."
+            pill={<Pill>{prettyName(mode)}</Pill>}
+            title="Color Mode"
+          />
           <div className="grid gap-2 sm:grid-cols-3">
             {MODE_OPTIONS.map(({ id, label, description, icon: Icon }) => {
               const active = mode === id
@@ -113,16 +122,12 @@ export function AppearanceSettings() {
           </div>
         </section>
 
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">Tool Call Display</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                Product hides raw tool payloads; Technical shows full input/output.
-              </div>
-            </div>
-            <Pill>{toolViewMode === 'technical' ? 'Technical' : 'Product'}</Pill>
-          </div>
+        <section className="grid gap-3">
+          <SectionHead
+            description="Product hides raw tool payloads; Technical shows full input/output."
+            pill={<Pill>{toolViewMode === 'technical' ? 'Technical' : 'Product'}</Pill>}
+            title="Tool Call Display"
+          />
           <div className="grid gap-2 sm:grid-cols-2">
             {(
               [
@@ -170,16 +175,12 @@ export function AppearanceSettings() {
           </div>
         </section>
 
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">Theme</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                Desktop palettes only. The selected mode is applied on top.
-              </div>
-            </div>
-            {activeTheme && <Pill>{activeTheme.label}</Pill>}
-          </div>
+        <section className="grid gap-3">
+          <SectionHead
+            description="Desktop palettes only. The selected mode is applied on top."
+            pill={activeTheme ? <Pill>{activeTheme.label}</Pill> : undefined}
+            title="Theme"
+          />
           <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
             {availableThemes.map(theme => {
               const active = themeName === theme.name