fix(ui): stabilize download table column interactions

src/utils/downloadTableColumns.test.ts

@@ -2,6 +2,9 @@ import { describe, expect, it } from 'vitest';
 import {
   DEFAULT_COLUMN_ALIGNMENTS,
   DEFAULT_COLUMN_ORDER,
+  DEFAULT_COLUMN_WIDTHS,
+  buildColumnGridTemplate,
+  getColumnGridColumn,
   normalizeColumnAlignments,
   normalizeColumnOrder,
   normalizeColumnWidths,
@@ -26,7 +29,7 @@ describe('download table column preferences', () => {
       220,
       80,
       80,
-      140,
+      144,
     ]);
 
     expect(normalizeColumnWidths([0, 100, 220, 100, 80, 170])[0]).toBe(160);
@@ -50,4 +53,13 @@ describe('download table column preferences', () => {
     expect(normalizeColumnOrder(null)).toEqual([...DEFAULT_COLUMN_ORDER]);
     expect(normalizeColumnAlignments(null)).toEqual(DEFAULT_COLUMN_ALIGNMENTS);
   });
+
+  it('keeps user widths fixed while reserving a shared trailing spacer track', () => {
+    expect(buildColumnGridTemplate([...DEFAULT_COLUMN_ORDER], [...DEFAULT_COLUMN_WIDTHS])).toBe(
+      '340px 100px 220px 100px 80px minmax(0, 1fr) 170px'
+    );
+    expect(getColumnGridColumn('Date Added', [...DEFAULT_COLUMN_ORDER])).toBe('7');
+    expect(getColumnGridColumn('Date Added', ['Date Added', ...DEFAULT_COLUMN_ORDER.slice(0, -1)])).toBeUndefined();
+    expect(getColumnGridColumn('ETA', ['Date Added', 'File Name', 'Size', 'Status', 'Speed', 'ETA'])).toBe('7');
+  });
 });

src/utils/downloadTableColumns.ts

@@ -13,7 +13,7 @@ export const DEFAULT_COLUMN_ORDER = [
 ] as const satisfies readonly DownloadTableColumnKey[];
 
 export const DEFAULT_COLUMN_WIDTHS = [340, 100, 220, 100, 80, 170] as const;
-export const COLUMN_MINIMUMS = [160, 58, 92, 58, 48, 112] as const;
+export const COLUMN_MINIMUMS = [160, 58, 92, 58, 48, 144] as const;
 
 export const COLUMN_WIDTHS_STORAGE_KEY = 'firelink-download-column-widths';
 export const COLUMN_ORDER_STORAGE_KEY = 'firelink-download-column-order';
@@ -87,3 +87,23 @@ export const normalizeColumnAlignments = (value: unknown): Record<DownloadTableC
 
 export const columnIndex = (key: DownloadTableColumnKey): number =>
   DEFAULT_COLUMN_ORDER.indexOf(key);
+
+export const buildColumnGridTemplate = (
+  order: DownloadTableColumnKey[],
+  widths: number[]
+): string => {
+  const normalizedWidths = normalizeColumnWidths(widths);
+  const orderedWidths = order.map(key => normalizedWidths[columnIndex(key)]);
+  return [
+    ...orderedWidths.slice(0, -1).map(width => `${width}px`),
+    'minmax(0, 1fr)',
+    `${orderedWidths[orderedWidths.length - 1]}px`,
+  ].join(' ');
+};
+
+export const getColumnGridColumn = (
+  key: DownloadTableColumnKey,
+  order: DownloadTableColumnKey[]
+): string | undefined => key === order[order.length - 1]
+  ? `${order.length + 1}`
+  : undefined;