Brief mode: Variable column widths that fit filenames

- Each column shrink-wraps to its widest visible filename, capped at the existing `maxFilenameWidth` and floored at `MIN_COLUMN_WIDTH`.
- Measured via `@chenglou/pretext` in a new `measure-brief-column-widths.ts`, cached per column index in a `SvelteMap`.
- `transition: width 300ms ease` animates the changes. Nav snaps via the same 2-rAF `skipTransition` trick as Full mode. Reset on `itemsPerColumn` change (height resize reshuffles column contents).
- Tradeoff: virtual-scroll math stays on the cap width, so the scrollbar slightly overestimates total content width when columns are narrow. Documented as a Decision in `views/CLAUDE.md`.

Author: vdavid

apps/desktop/src/lib/file-explorer/views/BriefList.svelte

@@ -23,6 +23,8 @@
     import { buildDirSizeTooltip, hasSizeMismatch } from './full-list-utils'
     import { getRowHeight, formatFileSize, getSizeMismatchWarning, getStripedRows } from '$lib/settings/reactive-settings.svelte'
     import { getSetting } from '$lib/settings/settings-store'
+    import { measureWidestFilename } from './measure-brief-column-widths'
+    import { SvelteMap } from 'svelte/reactivity'
     import { formatNumber, pluralize } from '../selection/selection-info-utils'
     import { isScanning, isAggregating } from '$lib/indexing/index-state.svelte'
     import { iconCacheCleared } from '$lib/icon-cache'
@@ -246,6 +248,45 @@
         return columns
     })
 
+    // ==== Per-column shrink-wrap widths ====
+    // Each Brief column sizes to its widest visible filename, capped at `maxFilenameWidth`
+    // and floored at `MIN_COLUMN_WIDTH`. Virtual-scroll math stays on the cap (so the
+    // scrollbar math doesn't need to know variable widths), while each rendered column
+    // gets its own measured width — `transition: width 300ms ease` smooths the change.
+    //
+    // Reset on nav/listing change (via the cache-reset effect) and when `itemsPerColumn`
+    // changes (height resize reshuffles which files are in which column).
+    const columnWidthsMap = new SvelteMap<number, number>()
+    let skipTransition = $state(false)
+    let prevItemsPerColumn = 0
+
+    $effect(() => {
+        // Reset when column index semantics change.
+        if (itemsPerColumn !== prevItemsPerColumn) {
+            columnWidthsMap.clear()
+            prevItemsPerColumn = itemsPerColumn
+        }
+    })
+
+    $effect(() => {
+        // Re-measure whenever visible columns (or their cached contents) change.
+        const cols = visibleColumns
+        const cap = maxFilenameWidth
+        for (const col of cols) {
+            const files = col.files.map((f) => f.file)
+            const widest = measureWidestFilename(files)
+            if (widest === 0) continue // measurer unavailable (SSR/jsdom)
+            const width = Math.min(cap, Math.max(MIN_COLUMN_WIDTH, widest + COLUMN_PADDING))
+            if (columnWidthsMap.get(col.columnIndex) !== width) {
+                columnWidthsMap.set(col.columnIndex, width)
+            }
+        }
+    })
+
+    function getColumnWidth(colIndex: number): number {
+        return columnWidthsMap.get(colIndex) ?? maxFilenameWidth
+    }
+
     // Fetch on scroll
     function handleScroll() {
         cancelClickToRename()
@@ -420,6 +461,15 @@
             cachedEntries = []
             cachedRange = { start: 0, end: 0 }
             prevCacheProps = currentProps
+            // Drop measured widths so the new listing starts fresh, and snap the
+            // animation for one paint so the persistent header/columns don't slide.
+            columnWidthsMap.clear()
+            skipTransition = true
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    skipTransition = false
+                })
+            })
         }
 
         void fetchVisibleRange()
@@ -563,7 +613,11 @@
             <!-- Visible window positioned with translateX -->
             <div class="virtual-window" style="transform: translateX({virtualWindow.offset}px);">
                 {#each visibleColumns as column (column.columnIndex)}
-                    <div class="column" style="width: {maxFilenameWidth}px;">
+                    <div
+                        class="column"
+                        class:no-transition={skipTransition}
+                        style="width: {getColumnWidth(column.columnIndex)}px;"
+                    >
                         {#each column.files as { file, globalIndex } (file.path)}
                             {@const syncIcon = getSyncIconPath(syncStatusMap[file.path])}
                             <!-- svelte-ignore a11y_click_events_have_key_events,a11y_interactive_supports_focus -->
@@ -676,6 +730,17 @@
         flex-shrink: 0;
         display: flex;
         flex-direction: column;
+        transition: width 300ms ease;
+    }
+
+    .column.no-transition {
+        transition: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .column {
+            transition: none;
+        }
     }
 
     .file-entry {

apps/desktop/src/lib/file-explorer/views/CLAUDE.md

@@ -7,7 +7,7 @@ without DOM performance issues.
 
 ### Components
 
-- **BriefList.svelte** – Horizontal columns, fixed-width items, horizontal scrolling
+- **BriefList.svelte** – Horizontal columns, per-column shrink-wrapped widths (capped), horizontal scrolling
 - **FullList.svelte** – Vertical rows, full metadata display, vertical scrolling
 - **virtual-scroll.ts** – Pure math functions for calculating visible windows
 - **file-list-utils.ts** – Shared helpers: entry caching, icon prefetching, sync status
@@ -17,6 +17,8 @@ without DOM performance issues.
 - **measure-column-widths.ts** – `computeFullListColumnWidths()`: pixel-accurate widths for the Ext / Size / Modified
   columns based on the currently loaded entries. Uses `@chenglou/pretext` for canvas-based measurement (no DOM reflow).
   FullList transitions `grid-template-columns` over 300ms so widths refine smoothly as more entries stream in.
+- **measure-brief-column-widths.ts** – `measureWidestFilename()`: widest filename's pixel width in a Brief column,
+  measured via pretext. Caller adds icon/gap/padding chrome and clamps to the min/max column-width range.
 - **FullList.svelte** – Reads `listing.sizeDisplay` (via `getSizeDisplayMode()`) and `listing.sizeMismatchWarning` (via
   `getSizeMismatchWarning()`) settings. Uses UnoCSS/Lucide `i-lucide:circle-alert` for size mismatch warnings and
   `i-lucide:hourglass` for stale index indicators
@@ -71,6 +73,14 @@ window requires fresh data. Parent bumps `cacheGeneration`, triggering re-fetch.
 **Decision**: Icon prefetching only for visible entries **Why**: With 50k files, prefetching all icons = 50k IPC calls.
 Virtual scrolling renders only ~50 items, so prefetch only visible. Re-fetch on scroll.
 
+**Decision**: Brief columns shrink-wrap to the widest filename in each column (capped at the existing
+`maxFilenameWidth`, floored at `MIN_COLUMN_WIDTH`) **Why**: Long filenames deserve their full width while short ones let
+the user scan more columns at once. Widths are measured per visible column via pretext and cached in a
+`SvelteMap<columnIndex, width>`; uncached columns fall back to the cap. `transition: width 300ms ease` animates width
+changes. **Tradeoff**: the virtual-scroll math stays on the cap width (so the scrollbar still computes
+`totalColumns × cap`). When real columns are narrower than the cap, the scrollbar slightly overestimates the total —
+users can scroll a few pixels past the last visible column. Considered acceptable for the visual payoff.
+
 **Decision**: Shrink-wrap Ext / Size / Modified columns from the rows **currently on screen**, not the prefetch buffer
 or the full directory **Why**: The name column should keep every spare pixel, so columns track live content. Pretext's
 canvas measurement is fast enough to recompute on every scroll row-crossing and window resize. The 300ms
@@ -111,9 +121,12 @@ those CSS values or the caret size/markup, update the two constants or column wi
 from the live DOM because pretext measurement runs without a reference element — everything is computed from the
 pre-known chrome formula.
 
-**Gotcha**: FullList's `grid-template-columns` transition would "slide" the header on dir switches, because the header
-lives outside the virtual scroll and persists across navs **Why**: When `shouldResetCache` fires, a `skipTransition`
-flag is set and cleared after two `requestAnimationFrame` ticks (one to paint with `transition: none`, one more before
-re-enabling). Widths also don't update while `cachedEntries` is empty AND `parentDirStats` is null, so the brief
-post-nav gap doesn't collapse them to header-only floors. Combined, nav = snap; within-dir scroll/resize/stream-in =
-animated.
+**Gotcha**: Width transitions would "slide" on dir switches, because the header (FullList) and columns (BriefList)
+persist across navs **Why**: When `shouldResetCache` fires, both lists set a `skipTransition` flag and clear it after
+two `requestAnimationFrame` ticks (one to paint with `transition: none`, one more before re-enabling). FullList also
+holds widths while `cachedEntries` is empty so the brief post-nav gap doesn't collapse to header-only floors. Combined,
+nav = snap; within-dir scroll/resize/stream-in = animated.
+
+**Gotcha**: BriefList's `columnWidthsMap` is keyed by `columnIndex`, which depends on `itemsPerColumn` **Why**: A height
+resize changes how many files fit in a column, which reshuffles which file lands in which column index. Stale widths
+would stick to the wrong columns. A dedicated `$effect` clears the map when `itemsPerColumn` changes — don't remove it.

apps/desktop/src/lib/file-explorer/views/measure-brief-column-widths.test.ts

@@ -0,0 +1,57 @@
+/**
+ * Tests for measure-brief-column-widths.ts. Replaces pretext's measurer with
+ * a deterministic `text.length * 7` stand-in for readable assertions.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+
+import type { FileEntry } from '../types'
+
+import { _setBriefMeasureForTests, measureWidestFilename } from './measure-brief-column-widths'
+
+const fakeMeasure = (text: string): number => text.length * 7
+
+function entry(name: string): FileEntry {
+  return {
+    name,
+    path: `/x/${name}`,
+    isDirectory: false,
+    isSymlink: false,
+    size: 0,
+    permissions: 0o644,
+    owner: 'u',
+    group: 'g',
+    iconId: 'text',
+    extendedMetadataLoaded: false,
+  }
+}
+
+describe('measureWidestFilename', () => {
+  afterEach(() => {
+    _setBriefMeasureForTests(null)
+  })
+
+  it('returns 0 when no measurer is available', () => {
+    _setBriefMeasureForTests(null)
+    // jsdom has no canvas, so the real measurer will set measureUnavailable=true
+    // and return 0 — the caller should fall back to the cap width.
+    expect(measureWidestFilename([entry('anything.txt')])).toBe(0)
+  })
+
+  it('returns the widest name across the column', () => {
+    _setBriefMeasureForTests(fakeMeasure)
+    const w = measureWidestFilename([entry('a.txt'), entry('longer.md'), entry('z')])
+    expect(w).toBe('longer.md'.length * 7)
+  })
+
+  it('returns 0 for an empty column', () => {
+    _setBriefMeasureForTests(fakeMeasure)
+    expect(measureWidestFilename([])).toBe(0)
+  })
+
+  it('handles unicode names by character count via the fake measurer', () => {
+    _setBriefMeasureForTests(fakeMeasure)
+    const w = measureWidestFilename([entry('ábc'), entry('日本語.txt')])
+    // "日本語.txt" has 7 code units (3 CJK + 4 ASCII)
+    expect(w).toBe('日本語.txt'.length * 7)
+  })
+})

apps/desktop/src/lib/file-explorer/views/measure-brief-column-widths.ts

@@ -0,0 +1,61 @@
+/**
+ * Brief-mode per-column width measurement. Each column shrink-wraps to its
+ * widest filename; the caller caps the result at whatever max width the
+ * container + backend font metrics dictate. Uses `@chenglou/pretext` for
+ * pixel-accurate text measurement without DOM reflow.
+ */
+
+import * as pretext from '@chenglou/pretext'
+
+import type { FileEntry } from '../types'
+import { createPretextMeasure } from '$lib/utils/shorten-middle'
+
+/**
+ * CSS `font` shorthand matching `.brief-list` (`var(--font-system)` at 12px).
+ * Kept in sync with `apps/desktop/src/app.css` — pretext warns `system-ui`
+ * is unsafe for layout accuracy, so we lead with `-apple-system`.
+ */
+const FONT = '12px -apple-system, BlinkMacSystemFont, sans-serif'
+
+let measureWidthCached: ((text: string) => number) | null = null
+let measureUnavailable = false
+
+function getMeasure(): ((text: string) => number) | null {
+  if (measureWidthCached) return measureWidthCached
+  if (measureUnavailable) return null
+  if (typeof document === 'undefined') return null
+  try {
+    const candidate = createPretextMeasure(FONT, pretext)
+    candidate('probe')
+    measureWidthCached = candidate
+    return measureWidthCached
+  } catch {
+    measureUnavailable = true
+    return null
+  }
+}
+
+/** Exposed for tests to inject a fake measurer. */
+export function _setBriefMeasureForTests(fn: ((text: string) => number) | null): void {
+  measureWidthCached = fn
+  measureUnavailable = false
+}
+
+/**
+ * Returns the widest filename's pixel width across `files`. The caller is
+ * responsible for adding icon/gap/padding chrome and clamping between min
+ * and max column widths.
+ *
+ * Returns 0 when no measurer is available (SSR or jsdom without canvas) —
+ * the caller should fall back to the default cap in that case.
+ */
+export function measureWidestFilename(files: FileEntry[]): number {
+  const measure = getMeasure()
+  if (!measure) return 0
+  let max = 0
+  for (const f of files) {
+    const w = measure(f.name)
+    if (w > max) max = w
+  }
+  return max
+}