feat: display density -- Comfortable/Compact appearance preference (goal 0096) (#213)

Adds a Settings -> Appearance density control (Comfortable/Compact,
Comfortable default) that tightens row-based surfaces' vertical
padding without any component restructuring. A Go-persisted
SettingsService preference (mirrors the existing MCP-write-toggle
Get/Set shape) is applied as a data-density attribute on each
window's document root -- both the main app and the Quick Panel's
own separate Wails window -- via one shared frontend/src/shared/density.ts
helper.

Mechanism: a single --mill-density-row-pad-y custom property, defined
at index.css's root under [data-density="compact"] with a companion-
breakpoint floor that restores the 44px touch target, consumed by
each in-scope surface's own CSS module (InventoryList, CommandPalette,
QuickPanel, ReviewView/ActivityView's shared ListCard .card, Atlas's
card-page .entry rows) via its own current value as the var()
fallback -- so Comfortable (the attribute absent) stays byte-identical
to today.

DataTable cell padding is scoped out: its cellPadding preset sets
--cell-padding-block directly on the Table element itself, which
shadows any ancestor-scoped override per CSS custom-property cascade
rules (a directly-matching rule always beats an inherited value) --
the same reason Primer's ActionList row padding IS reachable (it only
reads --control-medium-paddingBlock, never sets it locally).


Claude-Session: https://claude.ai/code/session_01FW5GkkAG8du7tNdYLk2zSd

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: alicoding

frontend/bindings/github.com/alicoding/mill/internal/services/settingssvc/settingsservice.ts

@@ -160,6 +160,17 @@ export function GetBuildInfo(): $CancellablePromise<$models.BuildInfo> {
     return $Call.ByID(2673585232);
 }
 
+/**
+ * GetDisplayDensity returns the persisted preference, defaulting to
+ * Comfortable when unset or set to anything other than the one
+ * recognized override -- Comfortable is required to match today's
+ * unset behavior exactly (docs/goals/0096's "zero visual diff when
+ * unset" acceptance bar).
+ */
+export function GetDisplayDensity(): $CancellablePromise<string> {
+    return $Call.ByID(3640093526);
+}
+
 /**
  * GetLaunchAtLogin queries the real OS state (System Events' login
  * items list) rather than a persisted preference -- authoritative even
@@ -357,6 +368,15 @@ export function SetAttentionIdleThreshold(seconds: number): $CancellablePromise<
     return $Call.ByID(454955395, seconds);
 }
 
+/**
+ * SetDisplayDensity persists the preference. Rejects any value besides
+ * the two locked tiers so a typo'd/future caller can't wedge the
+ * preference into a state no CSS selector matches.
+ */
+export function SetDisplayDensity(density: string): $CancellablePromise<void> {
+    return $Call.ByID(1473451146, density);
+}
+
 /**
  * SetKeybinding overrides commandID's binding to mods+key, rejecting a
  * combo already claimed by another command's override, or by a

frontend/e2e/display-density.spec.ts

@@ -0,0 +1,80 @@
+import { test, expect } from './fixtures/server'
+
+// docs/goals/0096-display-density.md: Comfortable/Compact, a
+// Settings-driven app root attribute (data-density) that tightens
+// row-based surfaces' vertical padding. Measures a real workflow row's
+// rendered height rather than any internal Primer class/DOM shape --
+// robust to how ActionList happens to structure its own markup, and a
+// direct proxy for the CSS custom property chain this goal wires
+// (index.css's --mill-density-row-pad-y -> InventoryList.module.css's
+// --control-medium-paddingBlock override).
+
+async function firstWorkflowRow(page: import('@playwright/test').Page) {
+  await page.getByRole('link', { name: 'Workflows' }).click()
+  const row = page.locator('[data-testid="inventory-row"][data-entity="workflow"]').first()
+  await expect(row).toBeVisible()
+  return row
+}
+
+async function setDensity(page: import('@playwright/test').Page, label: 'Comfortable' | 'Compact') {
+  await page.getByRole('link', { name: 'Settings' }).click()
+  await expect(page.getByTestId('settings-view')).toBeVisible()
+  await page.getByTestId('density-control').getByRole('button', { name: label }).click()
+}
+
+test('Compact visibly tightens a workflow row, persists across reload, and Comfortable restores the original height', async ({ page }) => {
+  await page.goto('/')
+
+  const comfortableRow = await firstWorkflowRow(page)
+  const comfortableBox = await comfortableRow.boundingBox()
+  const comfortableHeight = comfortableBox?.height ?? 0
+  expect(comfortableHeight).toBeGreaterThan(0)
+
+  await setDensity(page, 'Compact')
+  const compactRow = await firstWorkflowRow(page)
+  await expect.poll(async () => (await compactRow.boundingBox())?.height ?? 0).toBeLessThan(comfortableHeight)
+
+  await page.reload()
+  const afterReloadRow = await firstWorkflowRow(page)
+  await expect.poll(async () => (await afterReloadRow.boundingBox())?.height ?? 0).toBeLessThan(comfortableHeight)
+
+  // Leaves the shared e2e settings file back at the default, matching
+  // this repo's other settings specs' own cleanup discipline.
+  await setDensity(page, 'Comfortable')
+  const restoredRow = await firstWorkflowRow(page)
+  await expect.poll(async () => (await restoredRow.boundingBox())?.height ?? 0).toBe(comfortableHeight)
+})
+
+test('Density select reflects the persisted preference on a fresh Settings visit', async ({ page }) => {
+  await page.goto('/')
+  await setDensity(page, 'Compact')
+
+  await page.reload()
+  await page.getByRole('link', { name: 'Settings' }).click()
+  await expect(page.getByTestId('density-control').getByRole('button', { name: 'Compact' })).toHaveAttribute('aria-pressed', 'true')
+
+  // Cleanup, same reasoning as the test above.
+  await setDensity(page, 'Comfortable')
+})
+
+test.describe('mobile viewport', () => {
+  test.use({ viewport: { width: 390, height: 844 } })
+
+  test('Compact keeps a 44px workflow row touch target at the companion breakpoint', async ({ page }) => {
+    await page.goto('/')
+    await page.getByTestId('mobile-nav-toggle').click()
+    await page.getByRole('link', { name: 'Settings' }).click()
+    await expect(page.getByTestId('settings-view')).toBeVisible()
+    await page.getByTestId('density-control').getByRole('button', { name: 'Compact' }).click()
+
+    await page.getByTestId('mobile-nav-toggle').click()
+    const row = await firstWorkflowRow(page)
+    const box = await row.boundingBox()
+    expect(box?.height ?? 0).toBeGreaterThanOrEqual(44)
+
+    // Cleanup, same reasoning as the tests above.
+    await page.getByTestId('mobile-nav-toggle').click()
+    await page.getByRole('link', { name: 'Settings' }).click()
+    await page.getByTestId('density-control').getByRole('button', { name: 'Comfortable' }).click()
+  })
+})

frontend/src/app/App.tsx

@@ -23,6 +23,7 @@ import { CommandPalette } from "./CommandPalette";
 import { ShortcutsHelpDialog } from "./ShortcutsHelpDialog";
 import { BuildIdentityBadge } from "./BuildIdentityBadge";
 import { COLOR_MODE_STORAGE_KEY, SIDEBAR_OPEN_STORAGE_KEY } from "./theme";
+import { applyDensity } from "../shared/density";
 import { pageIconFor, pageLabelFor } from './pageMeta'
 import { useMillNavigate } from './useMillNavigate'
 import { useKeymapDispatch } from './useKeymapDispatch'
@@ -205,6 +206,15 @@ function App() {
     SettingsService.IsIsolatedData().then(setIsIsolatedData).catch(console.error);
   }, []);
 
+  // Display density (docs/goals/0096): applied once here, on mount, so
+  // a Compact preference holds from first paint even when Settings is
+  // never opened -- SettingsView applies its own change instantly
+  // (ahead of this fetch) when the control is used, this covers every
+  // other launch.
+  useEffect(() => {
+    SettingsService.GetDisplayDensity().then((d) => applyDensity(d === 'compact' ? 'compact' : 'comfortable')).catch(console.error);
+  }, []);
+
   useEffect(() => {
     SettingsService.GetBuildInfo().then(setBuildInfo).catch(console.error);
     SettingsService.AppVersion().then(setAppVersion).catch(console.error);

frontend/src/app/CommandPalette.module.css

@@ -24,6 +24,11 @@
    here). */
 .list {
   max-height: min(60vh, 480px);
+  /* Display density (docs/goals/0096) -- same ActionList row-padding
+     override as shared/InventoryList.module.css's own .list rule; see
+     its comment for why this is safe to scope here rather than
+     globally. */
+  --control-medium-paddingBlock: var(--mill-density-row-pad-y);
 }
 
 /* Workflow pin toggle (docs/goals/BACKLOG.md Standing #5) -- same pair

frontend/src/app/QuickPanel.module.css

@@ -11,6 +11,14 @@
   background: var(--bgColor-default);
   color: var(--fgColor-default);
   overflow: hidden;
+  /* Display density (docs/goals/0096) -- same ActionList row-padding
+     override as shared/InventoryList.module.css's own .list rule (see
+     its comment); scoped here rather than on the FilteredActionList
+     element itself since QuickPanel.tsx is at architecture.md's
+     500-line cap and can't take a className-prop edit -- .panel is
+     already its ancestor, so the override reaches the same rows either
+     way. */
+  --control-medium-paddingBlock: var(--mill-density-row-pad-y);
 }
 
 .status {

frontend/src/app/QuickPanelApp.tsx

@@ -1,6 +1,9 @@
+import { useEffect } from 'react'
 import { ThemeProvider, BaseStyles } from '@primer/react'
 import { QuickPanel } from './QuickPanel'
 import { COLOR_MODE_STORAGE_KEY } from './theme'
+import { SettingsService } from '../shared/bindings'
+import { applyDensity } from '../shared/density'
 
 // docs/adr/0033-quick-panel-second-window.md: the dedicated shell for
 // the Quick Panel's own Wails window (loaded at the '#/quickpanel' hash
@@ -13,6 +16,23 @@ import { COLOR_MODE_STORAGE_KEY } from './theme'
 // 'auto' independently of it.
 export function QuickPanelApp() {
   const initialColorMode = (localStorage.getItem(COLOR_MODE_STORAGE_KEY) as 'light' | 'dark' | 'auto' | null) ?? 'auto'
+
+  // Display density (docs/goals/0096): a second, independent instance
+  // of App.tsx's own mount-time fetch+apply -- this window is a
+  // separate Wails webview/JS context (goal 0017's per-window fetch
+  // pattern, QuickPanel.tsx's own comment), so App.tsx's effect never
+  // reaches it. Re-applied on every window focus (not just mount) since
+  // QuickPanel.tsx itself is at architecture.md's 500-line cap and
+  // can't grow its own focus-triggered refresh list to include this.
+  useEffect(() => {
+    const fetchAndApply = () => {
+      SettingsService.GetDisplayDensity().then((d) => applyDensity(d === 'compact' ? 'compact' : 'comfortable')).catch(console.error)
+    }
+    fetchAndApply()
+    window.addEventListener('focus', fetchAndApply)
+    return () => window.removeEventListener('focus', fetchAndApply)
+  }, [])
+
   return (
     <ThemeProvider colorMode={initialColorMode}>
       <BaseStyles>

frontend/src/app/index.css

@@ -38,6 +38,34 @@
    (deliberately, not here) -- see that file's header comment for why
    this needed a real separate file rather than living in this one. */
 
+/* Display density (docs/goals/0096): one row-vertical-padding lever,
+   read by every in-scope surface's own CSS module (InventoryList,
+   CommandPalette, QuickPanel, ReviewView's ListCard .card, Atlas's
+   card-page .entry rows) via var(--mill-density-row-pad-y, <that
+   surface's own current value>) -- undefined here at rest, so
+   Comfortable (the attribute absent) falls through to each surface's
+   own unchanged fallback with zero diff. Scoped to [data-density] on
+   the document root, not .app-shell: the Quick Panel is a second,
+   separate Wails window/document with no .app-shell element of its own
+   (docs/adr/0033), and this rule must reach both. 4px is Primer's own
+   --base-size-4 step, ~67% of ActionList's 6px default row padding --
+   the dominant lever among the in-scope surfaces' current values. */
+:root[data-density="compact"] {
+    --mill-density-row-pad-y: var(--base-size-4, 4px);
+}
+/* Touch-target floor (docs/goals/0096's DoR: "floor wins over
+   density"): at the companion breakpoint, compact's row padding
+   restores to whatever keeps a single-line ActionList row's total
+   height at or above the 44px minimum target (20px label line-height +
+   2*12px), overriding the desktop compact value above rather than
+   compounding with it. Comfortable is untouched at any width -- this
+   query only ever fires under [data-density="compact"]. */
+@media (max-width: 767px) {
+    :root[data-density="compact"] {
+        --mill-density-row-pad-y: var(--base-size-12, 12px);
+    }
+}
+
 * { box-sizing: border-box; }
 
 html {

frontend/src/atlas/AtlasCardPage.module.css

@@ -131,7 +131,11 @@
 .entry {
     border: 1px solid var(--borderColor-muted);
     border-radius: 6px;
-    padding: 8px 10px;
+    /* Display density (docs/goals/0096): only the vertical component
+       reads the density var -- see shared/ListCard.module.css's .card
+       for the same split and its own reasoning. */
+    padding-block: var(--mill-density-row-pad-y, 8px);
+    padding-inline: 10px;
     cursor: pointer;
 }
 .entry:hover {

frontend/src/locales/en/views.json

@@ -19,7 +19,10 @@
       "themeLabel": "Color theme",
       "lightLabel": "Light theme",
       "darkLabel": "Dark theme",
-      "systemLabel": "Match system theme"
+      "systemLabel": "Match system theme",
+      "densityLabel": "Density",
+      "comfortableOption": "Comfortable",
+      "compactOption": "Compact"
     },
     "general": {
       "launchAtLoginLabel": "Launch Mill at login",

frontend/src/shared/InventoryList.module.css

@@ -14,6 +14,22 @@
 }
 .muted { color: var(--fgColor-muted); }
 
+/* Display density (docs/goals/0096): overrides Primer's own
+   ActionList.Item row-padding token, scoped to just this list (not
+   globally -- --control-medium-paddingBlock also drives Button
+   padding elsewhere in the app, which density must never touch). A
+   directly-set value on the row's own element would shadow an
+   inherited one (confirmed against the installed @primer/react's
+   compiled ActionList CSS -- DataTable's cellPadding preset works the
+   same way, which is why table cell padding stays out of density's
+   reach), but ActionList never sets this token on itself, only reads
+   it, so setting it here on an ancestor reaches every row underneath
+   uncontested. Undefined var(--mill-density-row-pad-y) at Comfortable
+   falls through to Primer's own unchanged default. */
+.list {
+    --control-medium-paddingBlock: var(--mill-density-row-pad-y);
+}
+
 /* Single-line label discipline (goal 0007's dense-row pattern): the
    label ellipsizes against whatever width ActionList's content slot
    grants it; badges hold the line and never wrap underneath. min-width