File list: align the Modified and Size columns with tabular figures

Dates and sizes in the file list now line up into clean vertical columns without switching to a monospace font, matching the organized look of Total Commander while keeping the macOS system font.

- Render the Modified and Size columns with `font-variant-numeric: tabular-nums`, so every digit takes the same advance and the slashes/colons/right-aligned sizes stack across rows.
- Remove the old `|` split-date machinery (`.date-left`/`.date-right`, `dateLeft`, `DATE_PARTS_GAP`, the per-half measurement). Every token format emits a fixed character count, so with tabular figures the time halves align on their own; dates now render as one segment list.
- Teach the column-width measurer about tabular figures: canvas/pretext can't measure the `tnum` feature, so it sizes numeric columns to the font's widest digit (`tabularize`), which prevents digit-heavy rows (`11/11/1111`) from clipping.
- Pad the `system` format to fixed-width locale components (2-digit month/day/hour/minute), so locale formats align too: en-US becomes `02/03/2025, 08:32 PM` instead of `2/3/25, 8:32:26 PM`. The locale still owns field order, separators, and the 12-/24-hour choice.
- Make ISO 8601 the default date format (was system default).
- Drop the leftover `|` from the Custom format default (now `YYYY-MM-DD HH:mm`) and its description, and fix the stale `Short` option example.
- Update colocated docs and tests.

Author: vdavid

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

@@ -28,9 +28,13 @@ Virtual-scrolling file list components for rendering 100k+ file directories with
 - **`getDirSizeDisplayState()` (in `full-list-utils.ts`) is the single source of truth for a directory's size-column
   state.** Both `FullList.svelte`'s size cell and `measure-column-widths.ts` consume it; don't re-inline the
   dir/scanning/stale decision in either, or the rendered text and pre-measured width drift.
-- **Two paired-constant gotchas in `measure-column-widths.ts`**: `DATE_PARTS_GAP` (4px) mirrors `.date-right`'s
-  `margin-left: var(--spacing-xs)`, and `HEADER_CHROME_ACTIVE/INACTIVE` mirror `SortableHeader`'s gap + caret (12px
-  active / 0 inactive). Change the CSS and you must change the constant, or split-date / header column widths drift
+- **The Size and Modified columns render with `font-variant-numeric: tabular-nums`** (equal-width digits, so dates and
+  right-aligned sizes line up into columns without a monospace font). Canvas/pretext can't measure that feature, so
+  `measure-column-widths.ts` models it by substituting every digit with the widest one (`tabularize`) before measuring.
+  Keep the CSS and the measurer in sync: if you drop tabular figures from a numeric column, drop the `tabularize` call
+  for it too, or the column over-reserves width.
+- **Paired-constant gotcha in `measure-column-widths.ts`**: `HEADER_CHROME_ACTIVE/INACTIVE` mirror `SortableHeader`'s
+  gap + caret (12px active / 0 inactive). Change the CSS and you must change the constant, or header column widths drift
   (pretext measures without a reference element, so nothing is derived from the live DOM).
 - **Index-size refresh (`refresh_listing_index_sizes`) refetches column widths through the existing `cacheGeneration`
   reset path, not a separate trigger.** Adding one double-fetches.

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

@@ -165,15 +165,14 @@ when that row is actually on screen. Otherwise the size column would stay oversi
 `SelectionInfo` keeps using `measureDateColumnWidth` (worst-case sampling) because it renders a single-entry snapshot
 with no "visible set" to measure from.
 
-**Decision**: Date column may split into two aligned sub-columns via a `|` in the format string **Why**: Time digits
-across rows zigzag horizontally when date widths vary (e.g., locale formats, custom strings). The split makes the right
-halves line up. The contract: `formatDateForDisplay` (in `lib/settings/format-utils.ts`) returns a `FormattedDate` whose
-`parts: { left: DateSegment[], right: DateSegment[] | null }` carries both halves as ordered segment lists;
-`computeFullListColumnWidths` measures each half separately (via `joinSegments`) and exposes a `dateLeft` width;
-`FullList` walks each half's segments (wrapping any with a non-null `ageClass` in an age-tier span and emitting the rest
-as plain text) into `.date-left` (inline-block, fixed width, right-aligned) followed by `.date-right`
-(`margin-left: var(--spacing-xs)`). Tooltips/MCP/status bar still see joined strings via `FormattedDate.text` (exposed
-as the `formatDateTime` shortcut).
+**Decision**: The date column renders as one segment list with tabular figures, no split. **Why**: Earlier the column
+split into a fixed-width date half plus a time half so the times lined up across rows despite proportional digits. With
+`font-variant-numeric: tabular-nums` on `.col-date` every digit takes the same advance, and every token format (`YYYY`=4
+digits, the rest zero-padded to 2) emits a fixed character count, so all dates are the same width and align on their
+own. The contract: `formatDateForDisplay` (in `lib/settings/format-utils.ts`) returns a `FormattedDate` whose
+`parts.left` carries the ordered segment list (`parts.right` stays `null`); `computeFullListColumnWidths` measures the
+joined string once per row (tabular-aware, see the digit gotcha below); `FullList` walks the segments, wrapping any with
+a non-null `ageClass` in an age-tier span. Tooltips/MCP/status bar see the joined string via `FormattedDate.text`.
 
 **Decision**: Column-width measurers (canvas in `full-list-utils.ts`, pretext in `measure-column-widths.ts`) cache their
 measurer/context per text scale and rebuild on the **debounced** "settled" scale event from
@@ -210,10 +209,11 @@ layout recalc. `transform` uses GPU compositor for 60fps.
 200], don't re-fetch. If scrolled to [250, 300], expand fetch to [0, 550] to include buffer. `shouldResetCache()`
 handles this.
 
-**Gotcha**: `DATE_PARTS_GAP` (4px) in `measure-column-widths.ts` mirrors the `margin-left: var(--spacing-xs)` on
-`.date-right` in `FullList.svelte`. **Why**: The measurer adds it to the total date column width when any visible row
-splits via `|`. If you change either value, change both: split-date columns will be one or two pixels off from what the
-renderer actually draws otherwise.
+**Gotcha**: The Size and Modified columns render with `font-variant-numeric: tabular-nums`, but canvas/pretext can't
+measure that OpenType feature (the canvas `font` shorthand has no slot for it). **Why**: `measure-column-widths.ts`
+models it by substituting every digit with the font's widest digit (`tabularize`) before measuring, so the
+shrink-wrapped column matches what the DOM draws. Without it, a row of narrow digits (`11/11/1111`) renders wider than
+measured and ellipsizes. If you drop tabular figures from a numeric column, drop its `tabularize` call too.
 
 **Gotcha**: `HEADER_CHROME_ACTIVE/INACTIVE` in `measure-column-widths.ts` are tied to `SortableHeader`'s flex gap +
 caret glyph (4px gap + 8px caret = 12px active, 0px inactive). The button keeps 4px horizontal padding for hover-state

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

@@ -213,7 +213,7 @@
     const indexing = $derived(isScanning() || isAggregating())
 
     // Column widths are declared after the virtual window, which gates parent-row inclusion.
-    let columnWidths = $state({ ext: 60, size: 115, date: 80, dateLeft: 0 })
+    let columnWidths = $state({ ext: 60, size: 115, date: 80 })
     let skipTransition = $state(false)
 
     /** Icon column width in the grid template, tracks density × text scale. */
@@ -1013,21 +1013,9 @@
                             {/if}
                         </span>
                         <span class="col-date">
-                            {#if date.parts.right !== null && columnWidths.dateLeft > 0}
-                                <span class="date-left" style="width: {columnWidths.dateLeft}px"
-                                    >{#each date.parts.left as seg, i (i)}{#if seg.ageClass}<span
-                                                class={seg.ageClass}>{seg.text}</span
-                                            >{:else}{seg.text}{/if}{/each}</span
-                                ><span class="date-right"
-                                    >{#each date.parts.right as seg, i (i)}{#if seg.ageClass}<span
-                                                class={seg.ageClass}>{seg.text}</span
-                                            >{:else}{seg.text}{/if}{/each}</span
-                                >
-                            {:else}
-                                {#each date.parts.left as seg, i (i)}{#if seg.ageClass}<span class={seg.ageClass}
-                                            >{seg.text}</span
-                                        >{:else}{seg.text}{/if}{/each}
-                            {/if}
+                            {#each date.parts.left as seg, i (i)}{#if seg.ageClass}<span class={seg.ageClass}
+                                        >{seg.text}</span
+                                    >{:else}{seg.text}{/if}{/each}
                         </span>
                     </div>
                 {/each}
@@ -1323,6 +1311,10 @@
         align-items: center;
         gap: var(--spacing-xxs);
         font-size: var(--font-size-sm);
+        /* Equal-width digits so right-aligned sizes line up into columns even in
+           our proportional system font. The measurer mirrors this by sizing the
+           column to the widest digit (see `measure-column-widths.ts`). */
+        font-variant-numeric: tabular-nums;
     }
 
     /* Groups the number triads into one flex item so the right-edge alignment is
@@ -1358,6 +1350,11 @@
         font-size: var(--font-size-sm);
         color: var(--color-text-secondary);
         white-space: nowrap;
+        /* Equal-width digits so every row's date lines up into vertical columns
+           (the slashes/colons stack) without a monospace font. Each token format
+           emits a fixed character count, so with tabular figures every date is
+           the same width and the times align with no split-cell trick. */
+        font-variant-numeric: tabular-nums;
     }
 
     /* The age class lives on child spans. On selected or cursor-active rows,
@@ -1385,23 +1382,6 @@
         color: var(--color-selection-fg);
     }
 
-    /* Split date cells: `.date-left` is fixed-width (set inline from the
-       column-widths measurer) so the right halves align across rows. The 4px
-       margin on `.date-right` is mirrored as `DATE_PARTS_GAP` in
-       `measure-column-widths.ts`; keep them in sync. */
-    .date-left {
-        display: inline-block;
-        text-align: right;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        vertical-align: bottom;
-    }
-
-    .date-right {
-        margin-left: var(--spacing-xs);
-    }
-
     .file-entry.is-selected .col-name {
         color: var(--color-selection-fg);
     }

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

@@ -30,15 +30,15 @@ function entry(overrides: Partial<FileEntry>): FileEntry {
 
 /**
  * Build a stub `FormattedDate` for tests that don't care about per-component
- * coloring. Each half is a single literal segment so `joinSegments`
- * reproduces it as the full string.
+ * coloring. The whole string is one literal segment so `joinSegments`
+ * reproduces it.
  */
-function stubDate(left: string, right: string | null = null) {
+function stubDate(text: string) {
   return {
-    text: right === null ? left : `${left} ${right}`,
+    text,
     parts: {
-      left: [{ text: left, ageClass: null }],
-      right: right === null ? null : [{ text: right, ageClass: null }],
+      left: [{ text, ageClass: null }],
+      right: null,
     },
   }
 }
@@ -135,47 +135,33 @@ describe('computeFullListColumnWidths', () => {
     expect(long.date).toBeGreaterThan(short.date)
   })
 
-  it('reports dateLeft and total width when rows have split dates', () => {
+  it('widens the date column to fit the full formatted date', () => {
     _setMeasureForTests(fakeMeasure)
     const w = computeFullListColumnWidths({
       ...baseArgs,
-      formattedDate: () => stubDate('2026-12-31', '23:59'),
+      formattedDate: () => stubDate('2026-12-31 23:59'),
       entries: [entry({ name: 'a', modifiedAt: 1 })],
     })
-    // left "2026-12-31" = 10 × 7 = 70; right "23:59" = 5 × 7 = 35; gap = 4.
-    // splitTotal = 70 + 2 (left pad) + 4 + 35 = 111. Final date adds another
-    // 2 px pad for the right half: 111 + 2 = 113. Still beats MIN_DATE_WIDTH (70).
-    // dateLeft = 70 + 2 (pad) = 72.
-    expect(w.dateLeft).toBe(72)
-    expect(w.date).toBe(113)
+    // "2026-12-31 23:59" = 16 chars × 7 = 112 + 2 px pad = 114. Beats MIN_DATE_WIDTH (70).
+    expect(w.date).toBe(16 * 7 + 2)
   })
 
-  it('uses the widest left half across all rows when splits are uneven', () => {
+  it('uses the widest date across all rows', () => {
     _setMeasureForTests(fakeMeasure)
     let i = 0
     const formattedDate = () => {
-      const lefts = ['short', '2026-01-30']
-      const left = lefts[i % 2]
+      const texts = ['1/1 0:00', '2026-12-31 23:59']
+      const text = texts[i % 2]
       i++
-      return stubDate(left, '14:30')
+      return stubDate(text)
     }
     const w = computeFullListColumnWidths({
       ...baseArgs,
       formattedDate,
       entries: [entry({ name: 'a', modifiedAt: 1 }), entry({ name: 'b', modifiedAt: 2 })],
     })
-    // dateLeft = max("short" = 35, "2026-01-30" = 70) = 70, then + 2 px pad = 72.
-    expect(w.dateLeft).toBe(72)
-  })
-
-  it('keeps dateLeft at zero when no row produces a split', () => {
-    _setMeasureForTests(fakeMeasure)
-    const w = computeFullListColumnWidths({
-      ...baseArgs,
-      formattedDate: () => stubDate('2026-12-31 23:59'),
-      entries: [entry({ name: 'a', modifiedAt: 1 })],
-    })
-    expect(w.dateLeft).toBe(0)
+    // Widest is "2026-12-31 23:59" = 16 × 7 = 112 + 2 px pad = 114.
+    expect(w.date).toBe(16 * 7 + 2)
   })
 
   it('reserves icon width when a directory has a stale size during indexing', () => {