mirror of
https://github.com/delibae/claude-prism.git
synced 2026-08-28 05:14:59 +00:00
Refactor the project wizard's inline template grid into a full-featured template gallery system with search, category filtering, and rich previews. Template data architecture (template-registry.ts): - Define TemplateDefinition schema with categories, subcategories, tags, packages, accent colors, and bibliography flag - Expand from 8 to 12 templates: add IEEE, ACM, Technical Report, Newsletter - Provide registry API: getAllTemplates, getTemplateById, searchTemplates, getTemplatesByCategory Template gallery UI (components/template-gallery/): - template-gallery.tsx: main layout with search bar (Cmd+K), category sidebar, responsive grid, grouped-by-category default view, empty state - template-card.tsx: cards with 9 CSS-based document thumbnail layouts (paper, slides, poster, CV, letter, book, report, newsletter, blank) and hover preview button - category-sidebar.tsx: category navigation with per-category template counts - template-preview.tsx: dialog showing LaTeX source, package list, tags, document class metadata, and "Use Template" CTA State management (template-store.ts): - Zustand store for gallery state: search query, category filter, template selection, and preview modal state with computed filtered results Project wizard refactor (project-wizard.tsx): - Replace inline TemplateGrid and hardcoded template array with the new TemplateGallery component - Use template.hasBibliography flag instead of hardcoded ID check for references.bib generation - Fix overflow handling for step 2 scrollable content
3.2 KiB
3.2 KiB
Template Gallery — Shared Task Notes
What's Done (Phase 1 + Phase 2 start)
Template Data Architecture (Phase 1)
src/lib/template-registry.ts— Template schema with rich metadata: categories, subcategories, tags, packages, accent colors, bibliography flag. 12 templates total (was 8). New: IEEE, ACM, Technical Report, Newsletter. Registry API:getAllTemplates(),getTemplateById(),searchTemplates(),getTemplatesByCategory().src/stores/template-store.ts— Zustand store for gallery state: search query, category filter, template selection, preview state.computeFiltered()handles combined search+category filtering.
Visual Gallery UI (Phase 2 start)
src/components/template-gallery/— New component directory:template-gallery.tsx— Main gallery: search bar (⌘K), category sidebar + grid layout, grouped view when no filter active, empty statetemplate-card.tsx— Cards with CSS-based document thumbnail placeholders (9 distinct layouts: paper, slides, poster, CV, letter, book, report, newsletter, blank). Hover reveals "Preview" buttoncategory-sidebar.tsx— Category navigation with template countstemplate-preview.tsx— Dialog showing LaTeX source, package list, tags, metadata, "Use Template" CTAindex.ts— Barrel export
Wizard Refactor
project-wizard.tsx— Now usesTemplateGalleryfor step 1 instead of old inlineTemplateGrid. Step 2 (project details) unchanged. All project creation logic preserved. Usestemplate.hasBibliographyinstead of hardcoded ID check.
Next Priorities
Phase 2 completion
- Keyboard navigation — Arrow keys to navigate grid, Enter to select, Tab between sections
- Animations — Consider adding
framer-motion(not currently installed) for card entrance animations and page transitions - Responsive grid — Test and tune grid breakpoints for various window sizes
Phase 3: Template Preview System
- PDF thumbnail generation — Compile templates to PDF, render first page as image using pdfjs-dist (already a dependency). Store as cached images. Replace CSS placeholders with actual rendered thumbnails
- Live preview in modal — Show rendered PDF in the preview dialog instead of just source code
- Multi-page preview — For templates like presentations/books
- Side-by-side compare — Allow comparing two templates
Phase 4: Package Integration
- Package browser — Curated CTAN package list
- Package adding — Let users add packages before project creation
- Compatibility checker — Warn about conflicting packages
Phase 5: More Templates
- Springer, APA, MLA, Chicago style templates
- User template library — Save customized templates
- Template import — From .tex files or Overleaf
Technical Notes
- No
framer-motioninstalled — animations use Tailwind CSStw-animate-css. Install if needed for gallery transitions line-clamp-2used in template-card.tsx — may need@tailwindcss/line-clampif not natively supported (TW4 may include it)- Template IDs changed:
paper→paper-standard,cv→cv-modern, etc. Old IDs no longer exist react-pdfandpdfjs-distalready installed — ready for thumbnail generation work