feat: port note detail page from playground #79

Merged

forgejo_admin merged 1 commit from 71-port-note-detail into main

2026-03-27 21:54:54 +00:00

forgejo_admin commented

2026-03-27 21:41:12 +00:00

Owner

Summary

Port the note detail page from ~/pal-e-docs-playground/note.html into pal-e-app, replacing the old NoteLayout with playground CSS classes and adding backlinks, siblings, and relative time display.

Changes

src/lib/api-client.ts -- Add NoteLink interface and getNoteLinks() function for the /notes/{slug}/links endpoint
src/lib/time.ts -- New shared relativeTime() utility ("Updated 6 days ago" pattern)
src/lib/components/NoteLayout.svelte -- Rewrite to match playground note.html: breadcrumb, note-header with badges/tags/relative time, two-column layout with article + right sidebar (TOC, siblings, backlinks), children section below blocks
src/routes/notes/[slug]/+page.svelte -- Fetch backlinks via getNoteLinks, fetch siblings via parent_slug, pass new props to NoteLayout
src/routes/notes/[slug]/+page.ts -- New file: explicit ssr = false / prerender = false for client-side rendering

Test Plan

npm run build passes cleanly
Note detail page renders all 6 block types via existing BlockRenderer
TOC sidebar appears when note has headings
Backlinks sidebar appears when note has incoming links
Siblings sidebar appears when note has a parent with other children
Children section shows below content
Responsive: stacked on mobile, side-by-side at 600px+

Review Checklist

Build passes (npm run build)
Playground HTML copied literally, hardcoded data replaced with API bindings
Existing BlockRenderer reused -- no block rendering rebuilt
Playground CSS classes used (breadcrumb, note-header, note-meta, badge, tag, toc-item, backlink-item, children-section)
New API function getNoteLinks added for backlinks
Right sidebar with TOC + backlinks matches playground sidebar-right structure
+page.ts created for client-side rendering

Forgejo issue: #71
Depends on: #68 (design system foundation, merged as #75)

Closes #71

## Summary Port the note detail page from `~/pal-e-docs-playground/note.html` into pal-e-app, replacing the old NoteLayout with playground CSS classes and adding backlinks, siblings, and relative time display. ## Changes - **`src/lib/api-client.ts`** -- Add `NoteLink` interface and `getNoteLinks()` function for the `/notes/{slug}/links` endpoint - **`src/lib/time.ts`** -- New shared `relativeTime()` utility ("Updated 6 days ago" pattern) - **`src/lib/components/NoteLayout.svelte`** -- Rewrite to match playground note.html: breadcrumb, note-header with badges/tags/relative time, two-column layout with article + right sidebar (TOC, siblings, backlinks), children section below blocks - **`src/routes/notes/[slug]/+page.svelte`** -- Fetch backlinks via `getNoteLinks`, fetch siblings via parent_slug, pass new props to NoteLayout - **`src/routes/notes/[slug]/+page.ts`** -- New file: explicit `ssr = false` / `prerender = false` for client-side rendering ## Test Plan - `npm run build` passes cleanly - Note detail page renders all 6 block types via existing BlockRenderer - TOC sidebar appears when note has headings - Backlinks sidebar appears when note has incoming links - Siblings sidebar appears when note has a parent with other children - Children section shows below content - Responsive: stacked on mobile, side-by-side at 600px+ ## Review Checklist - [x] Build passes (`npm run build`) - [x] Playground HTML copied literally, hardcoded data replaced with API bindings - [x] Existing BlockRenderer reused -- no block rendering rebuilt - [x] Playground CSS classes used (breadcrumb, note-header, note-meta, badge, tag, toc-item, backlink-item, children-section) - [x] New API function `getNoteLinks` added for backlinks - [x] Right sidebar with TOC + backlinks matches playground sidebar-right structure - [x] +page.ts created for client-side rendering ## Related Notes - Forgejo issue: #71 - Depends on: #68 (design system foundation, merged as #75) Closes #71

forgejo_admin added 1 commit

2026-03-27 21:41:12 +00:00

feat: port note detail page from playground

ci/woodpecker/pr/woodpecker Pipeline failed

Details

6159a6b33f

Rewrite NoteLayout.svelte to match playground note.html layout:
- Use playground CSS classes (breadcrumb, note-header, note-meta,
  badge, tag, children-section, toc-item, backlink-item)
- Add right sidebar with TOC, siblings, and backlinks sections
- Add children section below block content
- Add relative time display ("Updated 6 days ago")
- Responsive: stacked on mobile, side-by-side on desktop

Add API support for note links (backlinks):
- NoteLink interface and getNoteLinks() in api-client.ts
- Fetch /notes/{slug}/links endpoint, filter for incoming direction
- Fetch sibling notes via parent_slug when parent exists

Add +page.ts for explicit client-side rendering config.
Add shared relativeTime utility in lib/time.ts.

Closes #71

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-03-27 21:41:52 +00:00

Author

Owner

QA Review: PR #79

Files Reviewed

src/lib/api-client.ts -- NoteLink interface + getNoteLinks()
src/lib/time.ts -- relativeTime utility
src/lib/components/NoteLayout.svelte -- full rewrite to playground layout
src/routes/notes/[slug]/+page.svelte -- backlinks, siblings, links fetching
src/routes/notes/[slug]/+page.ts -- client-side rendering config

Findings

Correct:

All 6 block types render via existing BlockRenderer (not rebuilt)
Playground CSS classes used throughout: breadcrumb, note-header, note-meta, badge badge--{type}, tag, meta-time, toc-item, backlink-item, children-section, child-card, tree-dot, sidebar-section, sidebar-label, empty-state
Two-column responsive layout: stacked mobile, side-by-side at 600px breakpoint
getNoteLinks follows existing api-client patterns exactly (apiFetch, encodeURIComponent)
Parallel fetching with Promise.all for initial data, sequential for dependent fetches (children, parent, siblings)
Sticky sidebar positioning matches playground right sidebar behavior
Build passes cleanly

Nits (non-blocking):

relativeTime in time.ts does not guard against invalid date strings (NaN from new Date("garbage")). Low risk since API always returns ISO dates, but a defensive check would be more robust.
The siblings fetch is sequential after parentNote (inside the same try/catch). Could be parallelized with Promise.all([getNote(...), listNotes(...)]) for slightly faster load, but the current approach is correct and simpler.

No blocking issues found.

VERDICT: APPROVE

## QA Review: PR #79 ### Files Reviewed - `src/lib/api-client.ts` -- NoteLink interface + getNoteLinks() - `src/lib/time.ts` -- relativeTime utility - `src/lib/components/NoteLayout.svelte` -- full rewrite to playground layout - `src/routes/notes/[slug]/+page.svelte` -- backlinks, siblings, links fetching - `src/routes/notes/[slug]/+page.ts` -- client-side rendering config ### Findings **Correct:** - All 6 block types render via existing BlockRenderer (not rebuilt) - Playground CSS classes used throughout: `breadcrumb`, `note-header`, `note-meta`, `badge badge--{type}`, `tag`, `meta-time`, `toc-item`, `backlink-item`, `children-section`, `child-card`, `tree-dot`, `sidebar-section`, `sidebar-label`, `empty-state` - Two-column responsive layout: stacked mobile, side-by-side at 600px breakpoint - `getNoteLinks` follows existing api-client patterns exactly (apiFetch, encodeURIComponent) - Parallel fetching with Promise.all for initial data, sequential for dependent fetches (children, parent, siblings) - Sticky sidebar positioning matches playground right sidebar behavior - Build passes cleanly **Nits (non-blocking):** 1. `relativeTime` in `time.ts` does not guard against invalid date strings (NaN from `new Date("garbage")`). Low risk since API always returns ISO dates, but a defensive check would be more robust. 2. The siblings fetch is sequential after parentNote (inside the same try/catch). Could be parallelized with `Promise.all([getNote(...), listNotes(...)])` for slightly faster load, but the current approach is correct and simpler. **No blocking issues found.** ### VERDICT: APPROVE