Persist print-list display sort and export format (#61)

The print-list display sort (added/name/qty) and decklist export format
(grouped/plain) reset on every reload while the render options already
persisted. Add both to the validated RenderOptions shape (per-field
enum fallback) and wire them into the existing load/save effects, so the
whole print page remembers its preferences across visits.

Author: mogja9

README.md

@@ -118,9 +118,10 @@ by added order / name / quantity and per-row -/+ quantity steppers),
 and a one-click render to home PDF or MakePlayingCards ZIP (with paper, DPI,
 gutter, and bleed options, plus an optional deck name that slugifies into the
 download filename, e.g. `my-lugia-deck.pdf`). The render options (target,
-paper, DPI, gutter, bleed, deck name) persist in localStorage and are restored
-on the next visit, with each stored field validated/clamped on load so a stale
-entry can never put the form into an invalid state. Search is served by
+paper, DPI, gutter, bleed, deck name, plus the print-list display sort and the
+export format) persist in localStorage and are restored on the next visit, with
+each stored field validated/clamped on load so a stale entry can never put the
+form into an invalid state. Search is served by
 Meilisearch with the Postgres fallback described above.
 
 **Decklist import.** Paste a Pokémon TCG Live / Limitless decklist

apps/web/app/print/page.tsx

@@ -57,19 +57,21 @@ export default function PrintPage() {
     setBleed(o.bleed);
     setGutter(o.gutter);
     setDeckName(o.deckName);
+    setPrintSort(o.printSort);
+    setExportFormat(o.exportFormat);
     hydrated.current = true;
   }, []);
   useEffect(() => {
     if (!hydrated.current) return;
     try {
       window.localStorage.setItem(
         RENDER_OPTS_KEY,
-        serializeRenderOptions({ target: target as 'pdf' | 'mpc', paper: paper as 'A4' | 'letter', dpi: dpi as '300' | '600', bleed, gutter, deckName }),
+        serializeRenderOptions({ target: target as 'pdf' | 'mpc', paper: paper as 'A4' | 'letter', dpi: dpi as '300' | '600', bleed, gutter, deckName, printSort, exportFormat }),
       );
     } catch {
       /* storage full/unavailable: a non-persisted option is not worth crashing */
     }
-  }, [target, paper, dpi, bleed, gutter, deckName]);
+  }, [target, paper, dpi, bleed, gutter, deckName, printSort, exportFormat]);
 
   const total = items.reduce((n, x) => n + x.qty, 0);
   const sheets = Math.ceil(total / 9); // 3x3 N-up

apps/web/lib/renderOptions.ts

@@ -6,13 +6,18 @@
  * lives in the component.
  */
 
+import type { PrintSort } from './printsort';
+import type { ExportFormat } from './printlist';
+
 export interface RenderOptions {
   target: 'pdf' | 'mpc';
   paper: 'A4' | 'letter';
   dpi: '300' | '600';
   bleed: boolean;
   gutter: string; // millimetres, '0'..'20'
   deckName: string;
+  printSort: PrintSort; // print-list display order
+  exportFormat: ExportFormat; // decklist export shape
 }
 
 export const DEFAULT_RENDER_OPTIONS: RenderOptions = {
@@ -22,11 +27,15 @@ export const DEFAULT_RENDER_OPTIONS: RenderOptions = {
   bleed: false,
   gutter: '4',
   deckName: '',
+  printSort: 'added',
+  exportFormat: 'grouped',
 };
 
 const TARGETS = ['pdf', 'mpc'] as const;
 const PAPERS = ['A4', 'letter'] as const;
 const DPIS = ['300', '600'] as const;
+const PRINT_SORTS = ['added', 'name', 'qty'] as const;
+const EXPORT_FORMATS = ['grouped', 'plain'] as const;
 
 function pick<T extends string>(allowed: readonly T[], v: unknown, fallback: T): T {
   return typeof v === 'string' && (allowed as readonly string[]).includes(v) ? (v as T) : fallback;
@@ -48,6 +57,8 @@ export function parseRenderOptions(raw: unknown): RenderOptions {
     bleed: typeof o.bleed === 'boolean' ? o.bleed : DEFAULT_RENDER_OPTIONS.bleed,
     gutter: clampGutter(o.gutter),
     deckName: typeof o.deckName === 'string' ? o.deckName.slice(0, 80) : DEFAULT_RENDER_OPTIONS.deckName,
+    printSort: pick(PRINT_SORTS, o.printSort, DEFAULT_RENDER_OPTIONS.printSort),
+    exportFormat: pick(EXPORT_FORMATS, o.exportFormat, DEFAULT_RENDER_OPTIONS.exportFormat),
   };
 }
 

apps/web/test/renderOptions.test.ts

@@ -15,8 +15,14 @@ test('parseRenderOptions returns defaults for non-object input', () => {
 
 test('parseRenderOptions keeps valid fields and falls back per-field', () => {
   assert.deepEqual(
-    parseRenderOptions({ target: 'mpc', paper: 'letter', dpi: '600', bleed: true, gutter: '8', deckName: 'My Deck' }),
-    { target: 'mpc', paper: 'letter', dpi: '600', bleed: true, gutter: '8', deckName: 'My Deck' },
+    parseRenderOptions({
+      target: 'mpc', paper: 'letter', dpi: '600', bleed: true, gutter: '8', deckName: 'My Deck',
+      printSort: 'qty', exportFormat: 'plain',
+    }),
+    {
+      target: 'mpc', paper: 'letter', dpi: '600', bleed: true, gutter: '8', deckName: 'My Deck',
+      printSort: 'qty', exportFormat: 'plain',
+    },
   );
   // invalid enum values fall back, valid ones survive
   const r = parseRenderOptions({ target: 'xyz', paper: 'A4', dpi: 999, bleed: 'yes' });
@@ -26,6 +32,14 @@ test('parseRenderOptions keeps valid fields and falls back per-field', () => {
   assert.equal(r.bleed, false);
 });
 
+test('validates the print-list display sort and export format', () => {
+  assert.equal(parseRenderOptions({ printSort: 'name' }).printSort, 'name');
+  assert.equal(parseRenderOptions({ printSort: 'bogus' }).printSort, 'added');
+  assert.equal(parseRenderOptions({ printSort: 42 }).printSort, 'added');
+  assert.equal(parseRenderOptions({ exportFormat: 'plain' }).exportFormat, 'plain');
+  assert.equal(parseRenderOptions({ exportFormat: 'xml' }).exportFormat, 'grouped');
+});
+
 test('clamps gutter to 0..20 integer millimetres', () => {
   assert.equal(parseRenderOptions({ gutter: '100' }).gutter, '20');
   assert.equal(parseRenderOptions({ gutter: -5 }).gutter, '0');
@@ -44,6 +58,9 @@ test('loadRenderOptions tolerates null and malformed JSON', () => {
 });
 
 test('serialize then load round-trips a valid options object', () => {
-  const o = { target: 'mpc', paper: 'letter', dpi: '600', bleed: true, gutter: '12', deckName: 'Lugia' } as const;
+  const o = {
+    target: 'mpc', paper: 'letter', dpi: '600', bleed: true, gutter: '12', deckName: 'Lugia',
+    printSort: 'qty', exportFormat: 'plain',
+  } as const;
   assert.deepEqual(loadRenderOptions(serializeRenderOptions(o)), o);
 });