feat(templates): gallery IA — category chips + Interactive/Databases sections#124
Merged
Conversation
Add a `tags` field (`interactive`/`slides`/`database`) to PageTemplate, classify the 7 built-in templates, and render them as chips on each gallery card so the reader knows what a template demonstrates before inserting it. Also correct the stale "five showcases" doc comment (there are three block-doc artifacts and four databases). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KFk2T9k3p7ghCjdzMfkA5w
…abases Split the flat card grid into tag-derived sections with headers, and let the dialog body scroll so the sections fit on smaller viewports. Card DOM order is preserved, so keyboard navigation still flows across every card. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KFk2T9k3p7ghCjdzMfkA5w
The template-gallery command searched for a "meeting planner" template that doesn't exist. Point the palette keywords at the real block-doc templates instead (grocery, savings, intake). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KFk2T9k3p7ghCjdzMfkA5w
- project-intake is authored as a 4-slide present deck (top-level dividers + notes), so splitSlides() renders it as a real deck. Add the missing `slides` tag so the gallery surfaces the Slides chip. - Reword two stale "five showcases / two fixtures" copies to match the TPL-1 canonical wording (three block-doc showcases / four database fixtures): e2e header comment + unit-test description. - Add the missing `map` keyword for field-map in the command palette. - Make the gallery scrollport padding symmetric (-m-1 p-1) so top/bottom cards' focus rings clear on short viewports. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KFk2T9k3p7ghCjdzMfkA5w
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The template gallery gave zero signal about what each template demonstrates before you inserted it. Every card sat in one flat, uncategorised grid — a document that's secretly a live slide deck looked identical to a plain database, so the only way to find out was to create the page and poke around. Nothing told the reader "this one is interactive", "this one presents as slides", or "this one is a database".
Epic: Templates that showcase OpenBook — interactive + slides (IA 2026-07). Closes TPL-1, TPL-2, TPL-10.
Solution
tags: TemplateTag[]('interactive' | 'slides' | 'database') toPageTemplateinpackages/sdk/src/templates.ts.project-intake's tags: it is authored as a 4-slide present deck (top-leveldividers +notes), sosplitSlides()renders it as a real deck — it now correctly carries bothinteractiveandslides(wasinteractiveonly).mapcommand-palette keyword for field-map; make the scrollport padding symmetric (-m-1 p-1) so top/bottom focus rings clear on short viewports.No new dependencies.
Before / After
Flat, uncategorised grid — no chips, no sections. A live slide deck looks the same as a database.
Two sections ("Interactive documents" / "Databases") with category chips on every card. Project intake now shows both Interactive + Slides.
project-intakeclassificationinteractiveonly, despite being a 4-slide deckinteractive+slides(matchessplitSlides())mapadded)Test procedure
pnpm verify— green (exit 0): build:libs; typecheck all packages; lint all packages; unit tests sdk 171 / ui 950 / server 645; e2e MCP suite 40/40 checks.packages/ui/src/lib/__tests__/templates.test.ts— 15/15 passing (incl. the reworded "three showcases / four fixtures" case).@visualsnapshot (templates.spec.ts) changes intentionally — cards now carry chips and sit under section headers. The Chromatic baseline will need accepting.Operational notes
pnpm verifygreen · gates cleared: code review ✓ (Quinn), design review ✓ (Devon, after the intake-slides fix).🤖 Generated with Claude Code
https://claude.ai/code/session_01KFk2T9k3p7ghCjdzMfkA5w