ldraney/pal-e-docs-playground
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Playground: note detail page prototype — kitchen sink #1

New issue
Closed
opened 2026-03-27 00:51:03 +00:00 by forgejo_admin · 2 comments
forgejo_admin commented 2026-03-27 00:51:03 +00:00
Contributor
Copy link

Type

Feature

Lineage

Standalone — first design prototype for pal-e-docs frontend redesign. Feeds into pal-e-app implementation after Lucas approves on phone.

Repo

forgejo_admin/pal-e-docs-playground

User Story

As a reader browsing pal-e-docs,
I want to see notes with rich content (headings, code, tables, diagrams, lists) in a clean readable layout,
So that I can quickly understand and navigate the knowledge base on mobile and desktop.

Context

pal-e-app has a working block renderer but it was built without playground design approval. Note rendering is the core UX of the entire knowledge platform — it needs the playground-first treatment. Design vision: "Power of Notion with visual file relations and navigation of Obsidian." Two navigation paradigms: standard nav (sidebar tree + breadcrumbs + recency) and graph view (visual note web). Everything is a note type — the note_type field drives rendering chrome.

File Targets

Files the agent should create:

  • index.html — kitchen-sink note detail page with all 6 block types, sidebar nav, TOC, metadata
  • app.css — design tokens reused from pal-e-playground/pal-e-app/app.css, extended for note rendering

Files the agent should NOT touch:

  • Nothing else in repo yet (greenfield)

Acceptance Criteria

  • Page opens directly in browser (no build step)
  • All 6 block types render with intentional styling (heading, paragraph, code, table, list, mermaid)
  • Mermaid diagram renders via CDN script tag
  • Responsive at 390px and 1200px+
  • Lucas approves on phone at playground.tail5b443a.ts.net/pal-e-docs/
  • Zero hardcoded hex — all var(--token) references
  • Left sidebar shows note tree (recently modified + hierarchy)
  • Right sidebar shows TOC + backlinks
  • Type badge, status, tags, recency in metadata bar

Test Expectations

  • Visual: open in Chrome DevTools at 390px width, all content readable
  • Visual: open at 1200px+, three-panel layout renders correctly
  • Mermaid: diagram SVG appears (not raw text)
  • Run command: python3 -m http.server 8080 from repo root, open localhost:8080

Constraints

  • convention-frontend-css: Atkinson Hyperlegible, #fafafa bg, max-width: 48rem for content, 600px breakpoint
  • Pure HTML + CSS + vanilla JS only. No npm. No build step.
  • Hardcoded realistic data (mimic real pal-e-docs note structure)
  • Mobile-first at 390px viewport
  • One app.css file for all styles

Checklist

  • PR opened
  • Phone approval from Lucas
  • No unrelated changes

Related

  • feedback_design_vision.md — Notion + Obsidian design direction
  • sop-frontend-experiment — playground-first workflow
  • board-pal-e-docs — project board
  • phase-pal-e-docs-design-overhaul — F11 parent phase
### Type Feature ### Lineage Standalone — first design prototype for pal-e-docs frontend redesign. Feeds into pal-e-app implementation after Lucas approves on phone. ### Repo `forgejo_admin/pal-e-docs-playground` ### User Story As a reader browsing pal-e-docs, I want to see notes with rich content (headings, code, tables, diagrams, lists) in a clean readable layout, So that I can quickly understand and navigate the knowledge base on mobile and desktop. ### Context pal-e-app has a working block renderer but it was built without playground design approval. Note rendering is the core UX of the entire knowledge platform — it needs the playground-first treatment. Design vision: "Power of Notion with visual file relations and navigation of Obsidian." Two navigation paradigms: standard nav (sidebar tree + breadcrumbs + recency) and graph view (visual note web). Everything is a note type — the `note_type` field drives rendering chrome. ### File Targets Files the agent should create: - `index.html` — kitchen-sink note detail page with all 6 block types, sidebar nav, TOC, metadata - `app.css` — design tokens reused from `pal-e-playground/pal-e-app/app.css`, extended for note rendering Files the agent should NOT touch: - Nothing else in repo yet (greenfield) ### Acceptance Criteria - [ ] Page opens directly in browser (no build step) - [ ] All 6 block types render with intentional styling (heading, paragraph, code, table, list, mermaid) - [ ] Mermaid diagram renders via CDN script tag - [ ] Responsive at 390px and 1200px+ - [ ] Lucas approves on phone at `playground.tail5b443a.ts.net/pal-e-docs/` - [ ] Zero hardcoded hex — all `var(--token)` references - [ ] Left sidebar shows note tree (recently modified + hierarchy) - [ ] Right sidebar shows TOC + backlinks - [ ] Type badge, status, tags, recency in metadata bar ### Test Expectations - [ ] Visual: open in Chrome DevTools at 390px width, all content readable - [ ] Visual: open at 1200px+, three-panel layout renders correctly - [ ] Mermaid: diagram SVG appears (not raw text) - Run command: `python3 -m http.server 8080` from repo root, open localhost:8080 ### Constraints - `convention-frontend-css`: Atkinson Hyperlegible, `#fafafa` bg, `max-width: 48rem` for content, 600px breakpoint - Pure HTML + CSS + vanilla JS only. No npm. No build step. - Hardcoded realistic data (mimic real pal-e-docs note structure) - Mobile-first at 390px viewport - One `app.css` file for all styles ### Checklist - [ ] PR opened - [ ] Phone approval from Lucas - [ ] No unrelated changes ### Related - `feedback_design_vision.md` — Notion + Obsidian design direction - `sop-frontend-experiment` — playground-first workflow - `board-pal-e-docs` — project board - `phase-pal-e-docs-design-overhaul` — F11 parent phase
forgejo_admin commented 2026-03-27 03:34:05 +00:00
Author
Contributor
Copy link

Scope Review: NEEDS_REFINEMENT

Review note: review-422-2026-03-26

Template complete, traceability intact, acceptance criteria testable. One issue found:

  • File Targets: stale CSS reference — pal-e-playground/pal-e-app/app.css does not exist (pal-e-playground repo has zero CSS files). Update to reference convention-frontend-css (pal-e-docs note with full token table) and/or pal-e-app/src/app.css (production implementation). An agent following the current reference would hit a dead end.
## Scope Review: NEEDS_REFINEMENT Review note: `review-422-2026-03-26` Template complete, traceability intact, acceptance criteria testable. One issue found: - **File Targets: stale CSS reference** — `pal-e-playground/pal-e-app/app.css` does not exist (pal-e-playground repo has zero CSS files). Update to reference `convention-frontend-css` (pal-e-docs note with full token table) and/or `pal-e-app/src/app.css` (production implementation). An agent following the current reference would hit a dead end.
forgejo_admin commented 2026-03-27 03:34:47 +00:00
Author
Contributor
Copy link

Fix: Stale design token source path

Updated File Targets constraint from:

Reuse design tokens from pal-e-playground/pal-e-app/app.css

To:

Design tokens sourced from convention-frontend-css (pal-e-docs note) and pal-e-app/src/app.css (production file)

The pal-e-playground/pal-e-app/app.css path was a kanban board prototype CSS, not the note rendering design system. Correct references are the convention note and the production app CSS.

### Fix: Stale design token source path Updated File Targets constraint from: > Reuse design tokens from `pal-e-playground/pal-e-app/app.css` To: > Design tokens sourced from `convention-frontend-css` (pal-e-docs note) and `pal-e-app/src/app.css` (production file) The `pal-e-playground/pal-e-app/app.css` path was a kanban board prototype CSS, not the note rendering design system. Correct references are the convention note and the production app CSS.
Commenting is not possible because the repository is archived.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ldraney/pal-e-docs-playground#1
No description provided.