mirror of
https://github.com/delibae/claude-prism.git
synced 2026-08-28 05:14:59 +00:00
c5c3085626
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
47 lines
3.2 KiB
Markdown
47 lines
3.2 KiB
Markdown
# 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 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: `paper` → `paper-standard`, `cv` → `cv-modern`, etc. Old IDs no longer exist
|
|
- `react-pdf` and `pdfjs-dist` already installed — ready for thumbnail generation work
|