[alpha.5] S3 — Desktop Reader Route Registry

[SisyphusZheng]

Parent

#114 — v0.41.0-alpha.5: SPA Mode + Deno Desktop Proof

What to build

Implement all 5 route components in app/routes.ts. All routes return DOM Node/DocumentFragment (no Preact/React). Wire into reader.ts via defineApp({ mode: 'spa', routes }).

Routes

Route	Component	Loader	Action	Notes
/	Bookshelf	Load books from books.json	—	Show covers/titles/progress. Continue reading affordance. Empty state.
/books/:id	Reading surface	Load book + progress	Create note	<embed> the PDF. Show book title, page nav, note form. Missing id → error state.
/notes	Note list	Load notes from storage	—	Group by book. Link back to /books/:id. Empty state.
/search?q=	Search results	Search books/notes by q param	—	Highlight matches. Empty state for no results. + decoding tested.
/settings	Settings panel	Load settings from storage	Save settings	Theme (light/dark/sepia), font size, line height, measure. Live preview.

Component pattern (DOM-returning)

// routes.ts
export function bookshelfRoute(): DocumentFragment {
  const frag = document.createDocumentFragment();
  // ... build DOM elements with dom.ts helpers
  return frag;
}

Data flow (SPA loader/action contract from #117/#118)

defineApp({
  mode: 'spa',
  routes: [
    {
      path: '/books/:id',
      component: readingRoute,
      loader: async ({ params }) => {
        const book = books.find(b => b.id === params.id);
        const progress = loadProgress(params.id);
        return { book, progress };
      },
      action: async ({ params }) => {
        // handle note creation form submit
      }
    }
  ]
})

Integration with other slices

• S4 (storage): routes call storage.loadProgress(), storage.loadNotes(), storage.saveNote(), storage.loadSettings(), storage.saveSettings()
• S2 (fixtures): / reads fixtures/books.json
• S5 (UX): keyboard shortcuts and theme controls in separate slice

Acceptance criteria

• / renders bookshelf with book titles and cover placeholders
• /books/:id renders <embed> PDF + book metadata
• /books/:id shows error state for missing book
• /notes shows notes grouped by book (empty state when no notes)
• /search?q=test shows search results (empty state for no results)
• /search?q=hello+world correctly decodes to "hello world"
• /settings shows theme/font/line-height controls
• Each route returns a valid DOM DocumentFragment
• Unit tests: route table completeness, error states, query decoding

Blocked by

• [alpha.5] S1 — Desktop Reader Shell Scaffold #122 (S1 — Shell)

[SisyphusZheng]

Closing as completed or superseded by the alpha.5 train.

Evidence:

• PR feat(alpha.5): SPA mode + client router + desktop proof #121 (feat(alpha.5): SPA mode + client router + desktop proof) was merged and its Alpha.5 Issue Coverage table marks the alpha.5 items done/superseded and lists them for closure: feat(alpha.5): SPA mode + client router + desktop proof #121
• v0.41.0-alpha.5 was published as a GitHub prerelease: https://github.com/open-element/openelement/releases/tag/v0.41.0-alpha.5
• The AutoFlow release workflow for v0.41.0-alpha.5 completed successfully: https://github.com/open-element/openelement/actions/runs/28499891702

The post-release package condition for #120 is now satisfied by the published 0.41.0-alpha.5 package line.