claude-prism/SHARED_TASK_NOTES.md
delibae c5c3085626 feat: extract template gallery into dedicated components with expanded template library
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
2026-02-22 06:15:12 +09:00

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.
  • 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 state
    • template-card.tsx — Cards with CSS-based document thumbnail placeholders (9 distinct layouts: paper, slides, poster, CV, letter, book, report, newsletter, blank). Hover reveals "Preview" button
    • category-sidebar.tsx — Category navigation with template counts
    • template-preview.tsx — Dialog showing LaTeX source, package list, tags, metadata, "Use Template" CTA
    • index.ts — Barrel export

Wizard Refactor

  • project-wizard.tsx — Now uses TemplateGallery for step 1 instead of old inline TemplateGrid. Step 2 (project details) unchanged. All project creation logic preserved. Uses template.hasBibliography instead 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-motion installed — animations use Tailwind CSS tw-animate-css. Install if needed for gallery transitions
  • line-clamp-2 used in template-card.tsx — may need @tailwindcss/line-clamp if not natively supported (TW4 may include it)
  • Template IDs changed: paperpaper-standard, cvcv-modern, etc. Old IDs no longer exist
  • react-pdf and pdfjs-dist already installed — ready for thumbnail generation work