File list: Align date+time across rows via | split in date format

vdavid · vdavid · commit 474f74140289 · 2026-05-05T23:33:42.000+02:00
A date format may contain a single optional `|` that splits each formatted cell into a left half (typically the date) and a right half (typically the time). The Modified column then shrink-wraps both halves separately so the right halves line up across rows even when date widths vary.

- `formatDateTimePartsWithFormat` returns `{ left, right | null }`. `formatDateTimeWithFormat` keeps returning a single string (parts joined with a space) for tooltips, MCP, and the status bar.
- Built-in `iso` and `short` formats include `|` internally; default custom format updated to `YYYY-MM-DD | HH:mm`.
- `computeFullListColumnWidths` exposes a `dateLeft` width; `FullList` renders `.date-left` (inline-block, fixed width, right-aligned) and `.date-right` (margin-left `--spacing-xs`).
- Whitespace around `|` is trimmed; a degenerate `format |` with empty right side is treated as no-split.
- Test mocks updated to include `formatDateTimeParts`.
diff --git a/apps/desktop/src/lib/file-explorer/pane/file-pane-keyboard.test.ts b/apps/desktop/src/lib/file-explorer/pane/file-pane-keyboard.test.ts
@@ -105,6 +105,7 @@ vi.mock('$lib/icon-cache', async () => {
 vi.mock('$lib/settings/reactive-settings.svelte', () => ({
   getRowHeight: vi.fn().mockReturnValue(24),
   formatDateTime: vi.fn().mockReturnValue('2025-01-01 00:00'),
+  formatDateTimeParts: vi.fn().mockReturnValue({ left: '2025-01-01', right: '00:00' }),
   formatFileSize: vi.fn().mockReturnValue('1.0 KB'),
   getUseAppIconsForDocuments: vi.fn().mockReturnValue(true),
   getSizeDisplayMode: vi.fn().mockReturnValue('smart'),
diff --git a/apps/desktop/src/lib/file-explorer/pane/selection-consistency.test.ts b/apps/desktop/src/lib/file-explorer/pane/selection-consistency.test.ts
@@ -107,6 +107,7 @@ vi.mock('$lib/icon-cache', async () => {
 vi.mock('$lib/settings/reactive-settings.svelte', () => ({
   getRowHeight: vi.fn().mockReturnValue(24),
   formatDateTime: vi.fn().mockReturnValue('2025-01-01 00:00'),
+  formatDateTimeParts: vi.fn().mockReturnValue({ left: '2025-01-01', right: '00:00' }),
   formatFileSize: vi.fn().mockReturnValue('1.0 KB'),
   getUseAppIconsForDocuments: vi.fn().mockReturnValue(true),
   getSizeDisplayMode: vi.fn().mockReturnValue('smart'),
diff --git a/apps/desktop/src/lib/file-explorer/pane/volume-breadcrumb.test.ts b/apps/desktop/src/lib/file-explorer/pane/volume-breadcrumb.test.ts
@@ -103,6 +103,7 @@ vi.mock('$lib/icon-cache', async () => {
 vi.mock('$lib/settings/reactive-settings.svelte', () => ({
   getRowHeight: vi.fn().mockReturnValue(24),
   formatDateTime: vi.fn().mockReturnValue('2025-01-01 00:00'),
+  formatDateTimeParts: vi.fn().mockReturnValue({ left: '2025-01-01', right: '00:00' }),
   formatFileSize: vi.fn().mockReturnValue('1.0 KB'),
   getUseAppIconsForDocuments: vi.fn().mockReturnValue(true),
   getSizeDisplayMode: vi.fn().mockReturnValue('smart'),
diff --git a/apps/desktop/src/lib/file-explorer/views/FullList.a11y.test.ts b/apps/desktop/src/lib/file-explorer/views/FullList.a11y.test.ts
@@ -38,6 +38,8 @@ vi.mock('$lib/settings/reactive-settings.svelte', () => ({
   getIsCompactDensity: () => false,
   getUseAppIconsForDocuments: () => true,
   formatDateTime: (t: number | undefined) => (t ? '2025-03-14 10:30' : ''),
+  formatDateTimeParts: (t: number | undefined) =>
+    t ? { left: '2025-03-14', right: '10:30' } : { left: '', right: null },
   formatFileSize: (n: number) => `${String(n)} B`,
   getSizeDisplayMode: () => 'smart',
   getSizeMismatchWarning: () => false,
diff --git a/apps/desktop/src/lib/file-explorer/views/FullList.svelte b/apps/desktop/src/lib/file-explorer/views/FullList.svelte
@@ -40,7 +40,7 @@
     import {
         getRowHeight,
         getIsCompactDensity,
-        formatDateTime,
+        formatDateTimeParts,
         formatFileSize,
         getSizeDisplayMode,
         getSizeMismatchWarning,
@@ -159,7 +159,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 })
+    let columnWidths = $state({ ext: 60, size: 115, date: 80, dateLeft: 0 })
     let skipTransition = $state(false)
 
     /**
@@ -241,7 +241,7 @@
         columnWidths = computeFullListColumnWidths({
             entries: visible,
             parentDirStats: parentStats,
-            formatDateTime,
+            formatDateTimeParts,
             sizeDisplayMode,
             indexing,
             showSizeMismatchWarning,
@@ -630,6 +630,7 @@
                         ? getDisplaySize(file.size, file.physicalSize, sizeDisplayMode)
                         : undefined}
                     {@const sizeOverride = pickSizeDisplay(file)}
+                    {@const dateParts = formatDateTimeParts(file.modifiedAt)}
                     <!-- svelte-ignore a11y_interactive_supports_focus -->
                     <div
                         id={`file-${String(globalIndex)}`}
@@ -768,7 +769,15 @@
                                 >
                             {/if}
                         </span>
-                        <span class="col-date">{formatDateTime(file.modifiedAt)}</span>
+                        <span class="col-date">
+                            {#if dateParts.right !== null && columnWidths.dateLeft > 0}
+                                <span class="date-left" style="width: {columnWidths.dateLeft}px"
+                                    >{dateParts.left}</span
+                                ><span class="date-right">{dateParts.right}</span>
+                            {:else}
+                                {dateParts.left}
+                            {/if}
+                        </span>
                     </div>
                 {/each}
             </div>
@@ -989,6 +998,24 @@
         text-overflow: ellipsis;
         font-size: var(--font-size-sm);
         color: var(--color-text-secondary);
+        white-space: nowrap;
+    }
+
+    /* 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 {
diff --git a/apps/desktop/src/lib/file-explorer/views/measure-column-widths.test.ts b/apps/desktop/src/lib/file-explorer/views/measure-column-widths.test.ts
@@ -30,7 +30,10 @@ function entry(overrides: Partial<FileEntry>): FileEntry {
 
 const baseArgs = {
   parentDirStats: null,
-  formatDateTime: (t: number) => new Date(t * 1000).toISOString().slice(0, 19).replace('T', ' '),
+  formatDateTimeParts: (t: number) => ({
+    left: new Date(t * 1000).toISOString().slice(0, 19).replace('T', ' '),
+    right: null,
+  }),
   sizeDisplayMode: 'smart' as const,
   indexing: false,
   showSizeMismatchWarning: false,
@@ -107,17 +110,58 @@ describe('computeFullListColumnWidths', () => {
     _setMeasureForTests(fakeMeasure)
     const short = computeFullListColumnWidths({
       ...baseArgs,
-      formatDateTime: () => 'today',
+      formatDateTimeParts: () => ({ left: 'today', right: null }),
       entries: [entry({ name: 'a', modifiedAt: 1 })],
     })
     const long = computeFullListColumnWidths({
       ...baseArgs,
-      formatDateTime: () => '2026-12-31 23:59:59',
+      formatDateTimeParts: () => ({ left: '2026-12-31 23:59:59', right: null }),
       entries: [entry({ name: 'a', modifiedAt: 1 })],
     })
     expect(long.date).toBeGreaterThan(short.date)
   })
 
+  it('reports dateLeft and total width when rows have split dates', () => {
+    _setMeasureForTests(fakeMeasure)
+    const w = computeFullListColumnWidths({
+      ...baseArgs,
+      formatDateTimeParts: () => ({ left: '2026-12-31', right: '23:59' }),
+      entries: [entry({ name: 'a', modifiedAt: 1 })],
+    })
+    // left "2026-12-31" = 10 × 7 = 70; right "23:59" = 5 × 7 = 35; gap = 4.
+    // Total 70 + 4 + 35 = 109, which beats MIN_DATE_WIDTH (70).
+    expect(w.dateLeft).toBe(70)
+    expect(w.date).toBe(109)
+  })
+
+  it('uses the widest left half across all rows when splits are uneven', () => {
+    _setMeasureForTests(fakeMeasure)
+    let i = 0
+    const formatDateTimeParts = () => {
+      const lefts = ['short', '2026-01-30']
+      const left = lefts[i % 2]
+      i++
+      return { left, right: '14:30' }
+    }
+    const w = computeFullListColumnWidths({
+      ...baseArgs,
+      formatDateTimeParts,
+      entries: [entry({ name: 'a', modifiedAt: 1 }), entry({ name: 'b', modifiedAt: 2 })],
+    })
+    // dateLeft = max("short" = 35, "2026-01-30" = 70) = 70.
+    expect(w.dateLeft).toBe(70)
+  })
+
+  it('keeps dateLeft at zero when no row produces a split', () => {
+    _setMeasureForTests(fakeMeasure)
+    const w = computeFullListColumnWidths({
+      ...baseArgs,
+      formatDateTimeParts: () => ({ left: '2026-12-31 23:59', right: null }),
+      entries: [entry({ name: 'a', modifiedAt: 1 })],
+    })
+    expect(w.dateLeft).toBe(0)
+  })
+
   it('reserves icon width when a directory has a stale size during indexing', () => {
     _setMeasureForTests(fakeMeasure)
     const idle = computeFullListColumnWidths({
diff --git a/apps/desktop/src/lib/file-explorer/views/measure-column-widths.ts b/apps/desktop/src/lib/file-explorer/views/measure-column-widths.ts
@@ -12,6 +12,7 @@ import * as pretext from '@chenglou/pretext'
 import { formatSizeForDisplay } from '../selection/selection-info-utils'
 import type { FileEntry, SortColumn } from '../types'
 import type { FileSizeFormat } from '$lib/settings/types'
+import type { DateTimeParts } from '$lib/settings/format-utils'
 import { createPretextMeasure } from '$lib/utils/shorten-middle'
 
 import type { DirStats } from './file-list-utils'
@@ -20,7 +21,14 @@ import { getDisplayExtension, getDisplaySize, hasSizeMismatch } from './full-lis
 export interface ColumnWidths {
   ext: number
   size: number
+  /** Total date column width (including the inter-half gap when split). */
   date: number
+  /**
+   * Pixel width of the left half of split date cells. Used as the inline-block
+   * width of `.date-left` so the right halves (typically the time) line up
+   * across rows. Zero when no visible row produces a `|` split.
+   */
+  dateLeft: number
 }
 
 /**
@@ -59,6 +67,14 @@ const MIN_EXT_WIDTH = 28
 const MIN_SIZE_WIDTH = 40
 const MIN_DATE_WIDTH = 70
 
+/**
+ * Visual gap between the date and time halves of a split date cell.
+ * `var(--spacing-xs)` (4px) — set as `margin-left` on `.date-right` in
+ * `FullList.svelte`. Mirror this value if the CSS changes, or split-date
+ * columns will be one or two pixels off.
+ */
+const DATE_PARTS_GAP = 4
+
 /**
  * Cap-width sample for the Ext column. A pathological extension like
  * `extension-extension-extension-…` would otherwise stretch the column wide
@@ -133,6 +149,36 @@ function sizeTextForEntry(
   return s !== undefined ? sizeCellText(s, sizeFormatOpts) : ''
 }
 
+/**
+ * Running maxima for the date column. `total` is the row width when the date
+ * is not split; `splitLeft` and `splitRight` accumulate when at least one row
+ * has a `|` split. Pulled into its own helper to keep
+ * `computeFullListColumnWidths` under the lint complexity cap.
+ */
+interface DateMaxima {
+  total: number
+  splitLeft: number
+  splitRight: number
+}
+
+function foldDate(
+  current: DateMaxima,
+  parts: { left: string; right: string | null },
+  measure: (text: string) => number,
+): DateMaxima {
+  if (parts.right === null) {
+    const w = measure(parts.left)
+    return w > current.total ? { ...current, total: w } : current
+  }
+  const lw = measure(parts.left)
+  const rw = measure(parts.right)
+  return {
+    total: current.total,
+    splitLeft: lw > current.splitLeft ? lw : current.splitLeft,
+    splitRight: rw > current.splitRight ? rw : current.splitRight,
+  }
+}
+
 /** Pixel width of the size-column icons that follow the text for this row. */
 function sizeIconSuffixForEntry(entry: FileEntry, indexing: boolean, showSizeMismatchWarning: boolean): number {
   let suffix = 0
@@ -153,7 +199,7 @@ function sizeIconSuffixForEntry(entry: FileEntry, indexing: boolean, showSizeMis
 export function computeFullListColumnWidths(args: {
   entries: FileEntry[]
   parentDirStats?: DirStats | null
-  formatDateTime: (timestamp: number) => string
+  formatDateTimeParts: (timestamp: number) => DateTimeParts
   sizeDisplayMode: 'smart' | 'logical' | 'physical'
   indexing: boolean
   showSizeMismatchWarning: boolean
@@ -163,7 +209,7 @@ export function computeFullListColumnWidths(args: {
   const {
     entries,
     parentDirStats,
-    formatDateTime,
+    formatDateTimeParts,
     sizeDisplayMode,
     indexing,
     showSizeMismatchWarning,
@@ -173,7 +219,7 @@ export function computeFullListColumnWidths(args: {
 
   const measure = getMeasure()
   if (!measure) {
-    return { ext: MIN_EXT_WIDTH, size: MIN_SIZE_WIDTH, date: MIN_DATE_WIDTH }
+    return { ext: MIN_EXT_WIDTH, size: MIN_SIZE_WIDTH, date: MIN_DATE_WIDTH, dateLeft: 0 }
   }
 
   const chromeFor = (column: SortColumn): number => (sortBy === column ? HEADER_CHROME_ACTIVE : HEADER_CHROME_INACTIVE)
@@ -193,6 +239,11 @@ export function computeFullListColumnWidths(args: {
   // widest icon suffix we've seen so we can add it to the data width.
   let sizeIconSuffixMax = 0
 
+  // Track the two halves of split date cells separately so the renderer can
+  // line up the right halves across rows. `splitLeft`/`splitRight` stay at 0
+  // unless at least one row has a `|` split.
+  let date: DateMaxima = { total: dateMax, splitLeft: 0, splitRight: 0 }
+
   for (const entry of entries) {
     const ext = getDisplayExtension(entry.name, entry.isDirectory)
     if (ext) {
@@ -207,10 +258,10 @@ export function computeFullListColumnWidths(args: {
     if (iconSuffix > sizeIconSuffixMax) sizeIconSuffixMax = iconSuffix
 
     if (entry.modifiedAt !== undefined) {
-      const w = measure(formatDateTime(entry.modifiedAt))
-      if (w > dateMax) dateMax = w
+      date = foldDate(date, formatDateTimeParts(entry.modifiedAt), measure)
     }
   }
+  dateMax = date.total
 
   // The ".." row borrows the current folder's recursive size — often the largest
   // number in the listing, so fold it in or the column snaps wider the moment it loads.
@@ -222,9 +273,18 @@ export function computeFullListColumnWidths(args: {
     }
   }
 
+  // If any row had a split date, fold the two halves into the total. Header
+  // overhead (caret allowance for sortBy='modified') is already baked into
+  // the initial dateMax; we just take the larger of header and split-data.
+  if (date.splitLeft > 0 || date.splitRight > 0) {
+    const splitTotal = date.splitLeft + DATE_PARTS_GAP + date.splitRight
+    if (splitTotal > dateMax) dateMax = splitTotal
+  }
+
   return {
     ext: Math.max(MIN_EXT_WIDTH, Math.ceil(extMax + WIDTH_PADDING)),
     size: Math.max(MIN_SIZE_WIDTH, Math.ceil(sizeMax + WIDTH_PADDING)),
     date: Math.max(MIN_DATE_WIDTH, Math.ceil(dateMax + WIDTH_PADDING)),
+    dateLeft: Math.ceil(date.splitLeft),
   }
 }
diff --git a/apps/desktop/src/lib/file-explorer/views/view-modes.test.ts b/apps/desktop/src/lib/file-explorer/views/view-modes.test.ts
@@ -24,6 +24,7 @@ vi.mock('$lib/icon-cache', () => ({
 vi.mock('$lib/settings/reactive-settings.svelte', () => ({
   getRowHeight: vi.fn().mockReturnValue(24),
   formatDateTime: vi.fn().mockReturnValue('2025-01-01 00:00'),
+  formatDateTimeParts: vi.fn().mockReturnValue({ left: '2025-01-01', right: '00:00' }),
   formatFileSize: vi.fn().mockReturnValue('1.0 KB'),
   getUseAppIconsForDocuments: vi.fn().mockReturnValue(true),
 }))
diff --git a/apps/desktop/src/lib/settings/format-utils.test.ts b/apps/desktop/src/lib/settings/format-utils.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { formatDateTimeWithFormat, formatFileSizeWithFormat } from './format-utils'
+import { formatDateTimeWithFormat, formatDateTimePartsWithFormat, formatFileSizeWithFormat } from './format-utils'
 
 // Fixed timestamp: 2024-03-15 14:30:45 UTC
 // We use a local date to avoid timezone flakiness
@@ -45,6 +45,49 @@ describe('formatDateTimeWithFormat', () => {
   })
 })
 
+describe('formatDateTimePartsWithFormat', () => {
+  it('returns empty parts for missing timestamp', () => {
+    expect(formatDateTimePartsWithFormat(null, 'iso', '')).toEqual({ left: '', right: null })
+    expect(formatDateTimePartsWithFormat(undefined, 'iso', '')).toEqual({ left: '', right: null })
+    expect(formatDateTimePartsWithFormat(0, 'iso', '')).toEqual({ left: '', right: null })
+  })
+
+  it('splits ISO into date and time halves', () => {
+    expect(formatDateTimePartsWithFormat(timestamp, 'iso', '')).toEqual({ left: '2024-03-15', right: '14:30' })
+  })
+
+  it('splits short into date and time halves', () => {
+    expect(formatDateTimePartsWithFormat(timestamp, 'short', '')).toEqual({ left: '03/15', right: '14:30' })
+  })
+
+  it('splits a custom format on `|` and trims whitespace around it', () => {
+    expect(formatDateTimePartsWithFormat(timestamp, 'custom', 'YYYY/MM/DD | HH:mm:ss')).toEqual({
+      left: '2024/03/15',
+      right: '14:30:45',
+    })
+  })
+
+  it('returns no right half for a custom format without `|`', () => {
+    expect(formatDateTimePartsWithFormat(timestamp, 'custom', 'YYYY/MM/DD HH:mm')).toEqual({
+      left: '2024/03/15 14:30',
+      right: null,
+    })
+  })
+
+  it('treats a degenerate `format |` (empty right side) as no split', () => {
+    expect(formatDateTimePartsWithFormat(timestamp, 'custom', 'YYYY-MM-DD |')).toEqual({
+      left: '2024-03-15',
+      right: null,
+    })
+  })
+
+  it('keeps system-locale output unsplit', () => {
+    const parts = formatDateTimePartsWithFormat(timestamp, 'system', '')
+    expect(parts.right).toBeNull()
+    expect(parts.left.length).toBeGreaterThan(0)
+  })
+})
+
 describe('formatFileSizeWithFormat', () => {
   describe('binary (base 1024)', () => {
     it('formats 0 bytes', () => {
diff --git a/apps/desktop/src/lib/settings/format-utils.ts b/apps/desktop/src/lib/settings/format-utils.ts
diff --git a/apps/desktop/src/lib/settings/reactive-settings.svelte.ts b/apps/desktop/src/lib/settings/reactive-settings.svelte.ts
diff --git a/apps/desktop/src/lib/settings/settings-registry.ts b/apps/desktop/src/lib/settings/settings-registry.ts
