feat(dashboard): implement Phase 9 dashboard template and TypeScript for Carousel-style dashboard

Replace library browser with Carousel-style collections carousel:

Template Changes (templates/dashboard.templ):
Complete rewrite from library browser to collections carousel:

1. Dashboard Main Template:
   - Sticky library selector dropdown
   - Customize dashboard button (settings modal)
   - Refresh button
   - Loading spinner for async operations
   - Collections container with carousels

2. CollectionCarousel Component:
   - Collection header with icon, title, description
   - View All link for system collections
   - Horizontal scrollable carousel track
   - Left/right navigation buttons
   - Book cards with cover images
   - Empty state handling

3. BookCard Component:
   - Aspect ratio [2/3] book cover
   - Cover image with fallback to placeholder
   - Title and author display
   - Click handler for viewing book details
   - Hover scale animation

4. DashboardSettingsModal Component:
   - Draggable collection list for reordering
   - Toggle switches for collection visibility
   - "System" badges for system collections
   - "Restore" buttons for system collections
   - Items per section slider (10-50, step 5)
   - Save/Cancel buttons

Template Features:
- Uses IsSystem boolean instead of Type string
- data-is-system attribute for JavaScript
- data-collection-id for DOM manipulation
- Supports drag-and-drop reordering
- Settings modal with live preview

TypeScript Implementation (web/src/dashboard.ts):

Core Functions:
- scrollCarousel: Smooth horizontal scrolling
- openDashboardSettings/closeDashboardSettings: Modal control
- toggleCollectionVisibility: Toggle visibility switches
- saveDashboardSettings: Save preferences to API
  * Collects hidden_collections and collection_order
  * Calls PUT /api/dashboard/preferences
  * Reloads page on success
- restoreSystemCollection: Reset system collection to defaults
  * Confirmation dialog
  * Calls POST /api/dashboard/restore-system-collection
  * Shows toast notifications
- switchLibrary: Switch between libraries
  * Async fetch from API
  * Re-renders collections
- renderCollections: Client-side rendering of collections
- renderBookCard: Generate book card HTML
- viewBook: Placeholder for book detail view
- reloadPage: Refresh page
- updateItemsCount: Update slider display
- initDragAndDrop: Drag-and-drop event handlers

Event Handling:
- Event delegation for performance
- data-action attributes for handler routing
- Proper type checking and null safety
- Error handling with toast notifications

Type Safety:
- Uses SectionData and BookInfo from api.d.ts
- Proper TypeScript types throughout
- Null checks for DOM elements
- Type assertions where needed

This implements Phase 9: Dashboard Template with unified collections terminology and full TypeScript interactivity.

This commit is contained in:

john-okeefe

2026-02-19 21:11:53 -05:00

parent 77c7ef965f

commit a1a14c2af8

3 changed files with 1126 additions and 580 deletions

templates/dashboard_templ.go

+546 -3

View File

File diff suppressed because one or more lines are too long