From 3758532d3118a056dba885de1e99c56782213e8c Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Tue, 17 Feb 2026 21:58:37 -0500
Subject: [PATCH] docs(dashboard): update plan to support post-TypeScript
 conversion patterns

- Add prerequisites section (TypeScript conversion must be completed first)
- Update execution order: TypeScript (16-21 days) then dashboard (3-4 days)
- Revise Phase 7 TypeScript implementation:
  - Change file locations from web/src/ to web/ts/features/dashboard/
  - Replace inline onclick with data-action attributes
  - Use shared apiClient instead of raw fetch()
  - Add event delegation with on() utility
  - Import showToast from core instead of global
  - Add type definitions matching Go handlers
- Update templates to load new TypeScript module paths
- Add summary of key changes from original plan
- Ensure consistency with TypeScript Conversion Plan patterns
---
 CAROUSEL_DASHBOARD_PLAN.md | 1031 ++++++++++++------------------------
 1 file changed, 349 insertions(+), 682 deletions(-)

diff --git a/CAROUSEL_DASHBOARD_PLAN.md b/CAROUSEL_DASHBOARD_PLAN.md
index e6bc33d..b8e0d4d 100644
--- a/CAROUSEL_DASHBOARD_PLAN.md
+++ b/CAROUSEL_DASHBOARD_PLAN.md
@@ -1,6 +1,7 @@
 # 🎬 Carousel-Style Dashboard Redesign Plan
 
 ## Overview
+
 Transform the current dashboard into a **production-ready** horizontal carousel layout like Audiobookshelf/Kavita, with:
 - Smart sections (Continue Reading, Recently Added, etc.)
 - User collections as sections
@@ -11,6 +12,27 @@ Transform the current dashboard into a **production-ready** horizontal carousel
 
 ---
 
+## ⚠️ Prerequisites: TypeScript Conversion First
+
+**IMPORTANT:** This plan assumes the **TypeScript Conversion Plan** has been completed first.
+
+**Required Infrastructure from TypeScript Conversion Plan:**
+- ✅ `web/ts/core/api.ts` - Centralized API client with auth
+- ✅ `web/ts/core/toast.ts` - Toast notification system
+- ✅ `web/ts/shared/events.ts` - Event delegation utilities
+- ✅ `web/ts/core/storage.ts` - localStorage wrapper
+- ✅ `web/ts/core/dom.ts` - DOM utilities (escapeHtml, etc.)
+- ✅ Event delegation pattern established (data attributes)
+- ✅ TypeScript compilation pipeline in place (`npm run build:ts`)
+
+**Execution Order:**
+1. Complete TypeScript Conversion Plan (16-21 days)
+2. Execute this updated Carousel Dashboard Plan (3-4 days)
+
+**Timeline:** 19-25 days total (no rework, consistent patterns)
+
+---
+
 ## 🏗️ Architecture Compliance
 
 ### Project Guidelines Alignment
@@ -25,18 +47,20 @@ This plan **adheres to** all PROJECT_GUIDELINES.md requirements with explicit us
 - New API endpoints for mobile app compatibility
 - Bruno tests already created in `bruno/dashboard/`
 
-✅ **Frontend Standards**:
+✅ **Frontend Standards** (Updated for Post-TypeScript Conversion):
 - **TailwindCSS classes ONLY** - no custom CSS
-- **Inline JavaScript** - matches existing dashboard.templ pattern
+- **TypeScript** in `web/ts/features/dashboard/` (no inline JavaScript)
 - **Procedural/imperative style** - no OOP (classes, inheritance, this-capture)
 - **SSR for initial data** - no AJAX on page load
 - **Progressive enhancement** - works without JavaScript
 - **HTMX for CRUD operations** (library switching, settings updates)
+- **Event delegation pattern** - `data-action` attributes (no inline `onclick`)
+- **Shared API client** - `apiClient` from `web/ts/core/api.ts`
 
 ✅ **Code Organization**:
 - **Template types in templates/types.go** - SectionData, BookCardData
 - **All business logic in services** - reusable for SSR/API/mobile
-- **Minimal project structure changes** - contextually appropriate directories
+- **TypeScript in web/ts/features/dashboard/** - follows TypeScript Conversion Plan structure
 
 ✅ **Database Operations**:
 - **Merge into existing schema.sql** - no migration files
@@ -46,9 +70,9 @@ This plan **adheres to** all PROJECT_GUIDELINES.md requirements with explicit us
 
 ✅ **API Documentation**:
 - **Bruno tests** already created in `bruno/dashboard/`
-- **Three-context testing** (no user, user, admin)
-- **Backward compatibility** for mobile apps
-- **docs/developer/api/** documentation updates
+- - Three-context testing (no user, user, admin)
+- - Backward compatibility for mobile apps
+- - `docs/developer/api/** documentation updates
 
 ---
 
@@ -403,29 +427,29 @@ frontendProtected.POST("/settings", func(c echo.Context) error {
     // Update user info
     _, err = cfg.Queries.UpdateUser(c.Request().Context(), database.UpdateUserParams{
     ID:       uuidToPGType(userUUID),
-    Email:    pgtype.Text{String: req.Email, Valid: true},
-    Username: req.Username,
-    Theme:    pgtype.Text{String: req.Theme, Valid: true},
-    FirstName: pgtype.Text{String: req.FirstName, Valid: true},
-    LastName:  pgtype.Text{String: req.LastName, Valid: true},
-})
+        Email:    pgtype.Text{String: req.Email, Valid: true},
+        Username: req.Username,
+        Theme:    pgtype.Text{String: req.Theme, Valid: true},
+        FirstName: pgtype.Text{String: req.FirstName, Valid: true},
+        LastName:  pgtype.Text{String: req.LastName, Valid: true},
+    })
 
-if err != nil {
-    return c.JSON(http.StatusInternalServerError, map[string]string{"error": "Failed to update settings"})
-}
+    if err != nil {
+        return c.JSON(http.StatusInternalServerError, map[string]string{"error": "Failed to update settings"})
+    }
 
     // Save dashboard preferences
     _, err = cfg.DashboardService.UpsertDashboardPreferences(c.Request().Context(), database.UpsertDashboardPreferencesParams{
-    UserID:           uuidToPGType(userUUID),
-    LibraryID:        uuidToPGType(libUUID),
-    HiddenSections:   req.HiddenSections,
-    SectionOrder:     req.SectionOrder,
-    ItemsPerSection:  pgtype.Int4{Int32: int32(req.ItemsPerSection), Valid: true},
-})
+        UserID:           uuidToPGType(userUUID),
+        LibraryID:        uuidToPGType(libUUID),
+        HiddenSections:   req.HiddenSections,
+        SectionOrder:     req.SectionOrder,
+        ItemsPerSection:  pgtype.Int4{Int32: int32(req.ItemsPerSection), Valid: true},
+    })
 
-if err != nil {
-    return c.JSON(http.StatusInternalServerError, map[string]string{"error": "Failed to save preferences"})
-}
+    if err != nil {
+        return c.JSON(http.StatusInternalServerError, map[string]string{"error": "Failed to save preferences"})
+    }
 
     // Return updated user data
     updatedUser, _ := getTemplateUserWithTheme(c, cfg)
@@ -549,7 +573,7 @@ type BookCardData struct {
 
 ### **Phase 5: Settings Template** (2 hours)
 
-**COMPLIANCE**: Use template types, TailwindCSS, SSR
+**COMPLIANCE**: Use template types, TailwindSSR, SSR
 
 **File: `templates/settings.templ`** (new file)
 
@@ -568,7 +592,7 @@ templ Settings(user User, userDB database.Users, dashPrefs database.UserDashboar
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Settings - Bookhoard</title>
         <script src="/static/htmx.min.js"></script>
-        <script src="/static/toast.js"></script>
+        <script src="/static/core/toast.js"></script>
         <link href="/static/style.css" rel="stylesheet">
     </head>
     <body class="theme-{ user.Theme }">
@@ -577,7 +601,7 @@ templ Settings(user User, userDB database.Users, dashPrefs database.UserDashboar
         <div class="max-w-3xl mx-auto px-4 py-8">
             <h1 class="text-3xl font-bold mb-8" style="color: var(--text-primary)">Settings</h1>
 
-            <form id="settings-form" onsubmit="saveSettings(event)">
+            <form id="settings-form" data-action="save-settings">
                 <!-- Profile Section -->
                 <div class="card p-6 rounded-lg mb-6" style="background-color: var(--bg-secondary); border-color: var(--border);">
                     <h2 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Profile</h2>
@@ -638,7 +662,8 @@ templ Settings(user User, userDB database.Users, dashPrefs database.UserDashboar
                         <input type="range" name="items_per_section" min="10" max="50" step="5"
                                value={ fmt.Sprintf("%d", dashPrefs.ItemsPerSection) }
                                class="w-full"
-                               oninput="document.getElementById('items-display').textContent = this.value">
+                               data-action="update-items-display"
+                               target="items-display">
                         <div class="text-sm text-right mt-1" style="color: var(--text-secondary)">
                             <span id="items-display">{ fmt.Sprintf("%d", dashPrefs.ItemsPerSection) }</span> items
                         </div>
@@ -651,7 +676,7 @@ templ Settings(user User, userDB database.Users, dashPrefs database.UserDashboar
 
                 <!-- Submit -->
                 <div class="flex justify-end gap-3">
-                    <button type="button" onclick="history.back()"
+                    <button type="button" data-action="cancel"
                             class="px-6 py-2 rounded-lg border hover:opacity-80 transition-opacity"
                             style="border-color: var(--border); color: var(--text-primary);">
                         Cancel
@@ -665,49 +690,8 @@ templ Settings(user User, userDB database.Users, dashPrefs database.UserDashboar
             </form>
         </div>
 
-        <script>
-            function saveSettings(e) {
-                e.preventDefault();
-                const form = e.target;
-                const formData = new FormData(form);
-
-                const data = {
-                    email: formData.get('email'),
-                    username: formData.get('username'),
-                    first_name: formData.get('first_name'),
-                    last_name: formData.get('last_name'),
-                    theme: formData.get('theme'),
-                    // Dashboard preferences would be saved from dashboard modal
-                    library_id: getCurrentLibraryId(),
-                };
-
-                fetch('/settings', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(data)
-                })
-                .then(response => response.json())
-                .then(data => {
-                    showToast('Settings saved successfully', 'success');
-                    // Update theme immediately
-                    if (data.theme) {
-                        document.body.className = 'theme-' + data.theme;
-                    }
-                })
-                .catch(error => {
-                    console.error('Failed to save settings:', error);
-                    showToast('Failed to save settings', 'error');
-                });
-            }
-
-            function getCurrentLibraryId() {
-                const select = document.getElementById('library-select');
-                return select?.value || '';
-            }
-        </script>
-
+        <script src="/static/shared/events.js"></script>
+        <script src="/static/features/settings.js"></script>
         <script src="/static/theme.js"></script>
     </body>
     </html>
@@ -723,6 +707,8 @@ templ Settings(user User, userDB database.Users, dashPrefs database.UserDashboar
 - ✅ Use template types (SectionData, BookCardData, User, LibraryData)
 - ✅ SSR for initial data
 - ✅ HTMX for updates
+- ✅ **Event delegation pattern** (no inline onclick)
+- ✅ **Data attributes** for TypeScript integration
 
 #### 6.1 Main Dashboard Template
 **File: `templates/dashboard.templ`** (REPLACE existing)
@@ -738,6 +724,11 @@ templ Dashboard(user User, sections []SectionData, libraries []LibraryData, curr
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Dashboard - Bookhoard</title>
         <script src="/static/htmx.min.js"></script>
+        <script src="/static/core/toast.js"></script>
+        <script src="/static/core/api.js"></script>
+        <script src="/static/shared/events.js"></script>
+        <script src="/static/features/dashboard/carousel.js"></script>
+        <script src="/static/features/dashboard/settings.js"></script>
         <link href="/static/style.css" rel="stylesheet">
     </head>
     <body class="theme-{ user.Theme }">
@@ -766,13 +757,13 @@ templ Dashboard(user User, sections []SectionData, libraries []LibraryData, curr
                 </div>
 
                 <div class="flex items-center gap-2">
-                    <button onclick="openDashboardSettings()"
+                    <button data-action="open-dashboard-settings"
                             class="p-2 rounded-lg hover:bg-gray-700 transition-colors"
                             style="background-color: var(--bg-secondary);"
                             title="Customize Dashboard">
                         ⚙️
                     </button>
-                    <button onclick="location.reload()"
+                    <button data-action="reload-page"
                             class="p-2 rounded-lg hover:bg-gray-700 transition-colors"
                             style="background-color: var(--bg-secondary);"
                             title="Refresh">
@@ -797,8 +788,6 @@ templ Dashboard(user User, sections []SectionData, libraries []LibraryData, curr
 
         <!-- Dashboard Settings Modal -->
         @DashboardSettingsModal(sections)
-
-        <script src="/static/theme.js"></script>
     </body>
     </html>
 }
@@ -840,7 +829,9 @@ templ SectionCarousel(section SectionData) {
                            w-12 h-full bg-gradient-to-r from-gray-900 to-transparent
                            flex items-center justify-start opacity-0 group-hover:opacity-100
                            transition-opacity duration-200"
-                    onclick="scrollCarousel('{ section.ID }', -1)"
+                    data-action="scroll-carousel"
+                    data-section-id={ section.ID }
+                    data-direction="-1"
                     aria-label="Scroll left">
                 <span class="text-3xl pl-2" style="color: var(--text-primary);">‹</span>
             </button>
@@ -848,9 +839,9 @@ templ SectionCarousel(section SectionData) {
             <!-- Track -->
             <div id="carousel-track-{ section.ID }"
                  class="carousel-track flex gap-4 overflow-x-auto
-                            scroll-smooth snap-x snap-mandatory
-                            px-12 pb-4"
-                 style="scrollbar-width: none; -ms-overflow-style: none;">
+                             scroll-smooth snap-x snap-mandatory
+                             px-12 pb-4"
+                  style="scrollbar-width: none; -ms-overflow-style: none;">
                 for _, item := range section.Items {
                     @BookCard(item)
                 }
@@ -867,7 +858,9 @@ templ SectionCarousel(section SectionData) {
                            w-12 h-full bg-gradient-to-l from-gray-900 to-transparent
                            flex items-center justify-end opacity-0 group-hover:opacity-100
                            transition-opacity duration-200"
-                    onclick="scrollCarousel('{ section.ID }', 1)"
+                    data-action="scroll-carousel"
+                    data-section-id={ section.ID }
+                    data-direction="1"
                     aria-label="Scroll right">
                 <span class="text-3xl pr-2" style="color: var(--text-primary);">›</span>
             </button>
@@ -878,11 +871,11 @@ templ SectionCarousel(section SectionData) {
 templ BookCard(item BookCardData) {
     <div class="book-card flex-shrink-0 w-32 snap-start cursor-pointer
                     transition-transform duration-200 hover:scale-105"
-         onclick="window.location.href='/book/{ item.ID }'"
+         data-action="view-book"
+         data-book-id={ item.ID }
          tabindex="0"
          role="button"
-         aria-label={ "View " + item.Title }
-         onkeydown="if(event.key === 'Enter') window.location.href='/book/{ item.ID }'">
+         aria-label={ "View " + item.Title }>
         <!-- Cover -->
         <div class="aspect-[2/3] rounded-lg overflow-hidden shadow-lg mb-2
                         bg-gradient-to-br from-gray-700 to-gray-900">
@@ -920,7 +913,7 @@ templ DashboardSettingsModal(sections []SectionData) {
              style="background-color: var(--bg-secondary);">
             <div class="flex justify-between items-center mb-6">
                 <h2 class="text-xl font-bold" style="color: var(--text-primary)">Customize Dashboard</h2>
-                <button onclick="closeDashboardSettings()"
+                <button data-action="close-dashboard-settings"
                         class="p-2 hover:bg-gray-700 rounded transition-colors">
                     ✕
                 </button>
@@ -935,9 +928,9 @@ templ DashboardSettingsModal(sections []SectionData) {
                 for _, section := range sections {
                     <div class="section-item flex items-center justify-between p-3 rounded border
                                    cursor-move select-none"
-                         data-section-id={ section.ID }
-                         draggable="true"
-                         style="background-color: var(--bg-primary); border-color: var(--border);">
+                          data-section-id={ section.ID }
+                          draggable="true"
+                          style="background-color: var(--bg-primary); border-color: var(--border);">
                         <div class="flex items-center gap-3">
                             <span class="text-xl" style="color: var(--text-secondary);">☰</span>
                             <span class="text-xl">{ section.Icon }</span>
@@ -948,12 +941,13 @@ templ DashboardSettingsModal(sections []SectionData) {
                             <input type="checkbox"
                                    class="sr-only peer"
                                    checked
-                                   onchange="toggleSectionVisibility('{ section.ID }')">
+                                   data-action="toggle-section-visibility"
+                                   data-section-id={ section.ID }>
                             <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer
-                                          peer-checked:after:translate-x-full peer-checked:after:border-white
-                                          after:content-[''] after:absolute after:top-[2px] after:left-[2px]
-                                          after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all
-                                          peer-checked:bg-blue-600"></div>
+                                           peer-checked:after:translate-x-full peer-checked:after:border-white
+                                           after:content-[''] after:absolute after:top-[2px] after:left-[2px]
+                                           after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all
+                                           peer-checked:bg-blue-600"></div>
                         </label>
                     </div>
                 }
@@ -966,16 +960,17 @@ templ DashboardSettingsModal(sections []SectionData) {
                 </label>
                 <input type="range" min="10" max="50" step="5" value="20"
                        class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
-                       oninput="document.getElementById('items-count-display').textContent = this.value;">
+                       data-action="update-items-count"
+                       target="items-count-display">
             </div>
 
             <div class="flex justify-end gap-3">
-                <button onclick="closeDashboardSettings()"
+                <button data-action="close-dashboard-settings"
                         class="px-4 py-2 rounded-lg border hover:bg-gray-700 transition-colors"
                         style="border-color: var(--border); color: var(--text-primary);">
                     Cancel
                 </button>
-                <button onclick="saveDashboardSettings()"
+                <button data-action="save-dashboard-settings"
                         class="px-4 py-2 rounded-lg text-white font-medium hover:opacity-90 transition-opacity"
                         style="background-color: var(--accent);">
                     Save Changes
@@ -1001,24 +996,31 @@ templ DashboardSectionsPartial(sections []SectionData) {
 
 ---
 
-### **Phase 7: TypeScript** (2-3 hours)
+### **Phase 7: TypeScript** (REVISED - 2-3 hours)
 
-**COMPLIANCE**:
-- ✅ TypeScript files in `web/src/` (no JavaScript)
+**COMPLIANCE** (Post-TypeScript Conversion):
+- ✅ TypeScript files in `web/ts/features/dashboard/` (not `web/src/`)
+- ✅ Uses shared infrastructure from TypeScript Conversion Plan
+- ✅ Event delegation pattern (no inline onclick handlers)
 - ✅ Procedural/imperative style (no OOP)
-- ✅ Progressive enhancement (works without JS)
-- ✅ Matches existing pattern (toast.ts, theme.ts)
-- ✅ Compiled via existing `tsc` setup (tsconfig.json)
+- ✅ Type definitions matching Go handlers templates/types.go
+- ✅ Uses `apiClient` from `web/ts/core/api.ts`
+- ✅ Uses `showToast` from `web/ts/core/toast.ts`
+- ✅ Uses `on` from `web/ts/shared/events.ts`
 
-#### 7.1 Carousel TypeScript
-**File: `web/src/carousel.ts`** (new file)
+#### 7.1 Dashboard Carousel TypeScript
+**File: `web/ts/features/dashboard/carousel.ts`** (new file, updated location)
 
 ```typescript
 // Carousel scroll functionality
-// Matches pattern from toast.ts - IIFE with window export
+// Procedural/imperative style (no OOP)
+// Uses shared event delegation system
+
+import { on } from '../../shared/events.js';
 
 const SCROLL_AMOUNT = 300;
 
+// Pure function for scrolling carousel
 const scrollCarousel = (sectionId: string, direction: number): void => {
     const track = document.getElementById(`carousel-track-${sectionId}`) as HTMLElement;
     if (!track) return;
@@ -1027,6 +1029,7 @@ const scrollCarousel = (sectionId: string, direction: number): void => {
     track.scrollBy({ left: scrollAmount, behavior: 'smooth' });
 };
 
+// Initialize drag-to-scroll on all carousel tracks
 const initializeCarousels = (): void => {
     const tracks = document.querySelectorAll('.carousel-track') as NodeListOf<HTMLElement>;
 
@@ -1041,13 +1044,8 @@ const initializeCarousels = (): void => {
             scrollLeftPos = track.scrollLeft;
         });
 
-        track.addEventListener('mouseleave', () => {
-            isDown = false;
-        });
-
-        track.addEventListener('mouseup', () => {
-            isDown = false;
-        });
+        track.addEventListener('mouseleave', () => isDown = false);
+        track.addEventListener('mouseup', () => isDown = false);
 
         track.addEventListener('mousemove', (e: MouseEvent) => {
             if (!isDown) return;
@@ -1071,6 +1069,15 @@ const initializeCarousels = (): void => {
     });
 };
 
+// Event delegation for carousel scroll buttons
+on('click', '[data-action="scroll-carousel"]', (target: HTMLElement) => {
+    const sectionId = target.dataset.sectionId;
+    const direction = parseInt(target.dataset.direction || '0', 10);
+    if (sectionId && !isNaN(direction)) {
+        scrollCarousel(sectionId, direction);
+    }
+});
+
 // Auto-initialize when DOM is ready
 if (typeof document !== 'undefined') {
     if (document.readyState === 'loading') {
@@ -1079,18 +1086,28 @@ if (typeof document !== 'undefined') {
         initializeCarousels();
     }
 }
-
-// Export to window for onclick handlers
-(window as any).scrollCarousel = scrollCarousel;
 ```
 
 #### 7.2 Dashboard Settings TypeScript
-**File: `web/src/dashboard-settings.ts`** (new file)
+**File: `web/ts/features/dashboard/settings.ts`** (new file, updated location)
 
 ```typescript
 // Dashboard settings modal functionality
-// Matches pattern from toast.ts - IIFE with window export
+// Procedural/imperative style (no OOP)
+// Uses shared infrastructure from TypeScript Conversion Plan
 
+import { apiClient } from '../../core/api.js';
+import { showToast } from '../../core/toast.js';
+import { on } from '../../shared/events.js';
+
+// Type definitions matching Go templates/types.go
+interface SectionData {
+    ID: string;
+    Title: string;
+    Icon: string;
+}
+
+// Open dashboard settings modal
 const openDashboardSettings = (): void => {
     const modal = document.getElementById('dashboard-settings-modal');
     if (modal) {
@@ -1099,6 +1116,7 @@ const openDashboardSettings = (): void => {
     }
 };
 
+// Close dashboard settings modal
 const closeDashboardSettings = (): void => {
     const modal = document.getElementById('dashboard-settings-modal');
     if (modal) {
@@ -1106,6 +1124,7 @@ const closeDashboardSettings = (): void => {
     }
 };
 
+// Initialize drag-and-drop for section reordering
 const initializeDragAndDrop = (): void => {
     const list = document.getElementById('section-list');
     if (!list) return;
@@ -1120,6 +1139,7 @@ const initializeDragAndDrop = (): void => {
     });
 };
 
+// Drag event handlers
 const handleDragStart = (e: DragEvent): void => {
     const target = e.target as HTMLElement;
     target.style.opacity = '0.5';
@@ -1137,7 +1157,7 @@ const handleDragOver = (e: DragEvent): void => {
 
 const handleDrop = (e: DragEvent): void => {
     e.preventDefault();
-    // Reorder logic - swap with target element
+    // TODO: Implement reorder logic - swap with target element
 };
 
 const handleDragEnd = (e: DragEvent): void => {
@@ -1145,11 +1165,14 @@ const handleDragEnd = (e: DragEvent): void => {
     target.style.opacity = '1';
 };
 
+// Toggle section visibility (checkbox handler)
 const toggleSectionVisibility = (sectionId: string): void => {
     // Update local state, save on submit
+    // The checkbox state is managed by HTML
 };
 
-const saveDashboardSettings = (): void => {
+// Save dashboard settings to server
+const saveDashboardSettings = async (): Promise<void> => {
     const sectionList = document.getElementById('section-list');
     const items = sectionList?.querySelectorAll('.section-item') as NodeListOf<HTMLElement>;
 
@@ -1175,60 +1198,127 @@ const saveDashboardSettings = (): void => {
         items_per_section: parseInt(document.getElementById('items-count-display')?.textContent || '20')
     };
 
-    fetch('/settings', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data)
-    })
-    .then(response => response.json())
-    .then(() => {
+    try {
+        await apiClient.post('/settings', data);
+        showToast.success('Dashboard settings saved');
         closeDashboardSettings();
         location.reload();
-    })
-    .catch(error => {
-        console.error('Failed to save settings:', error);
-        if (typeof showToast === 'function') {
-            showToast('Failed to save settings', 'error');
-        }
-    });
+    } catch (error) {
+        showToast.error('Failed to save dashboard settings');
+    }
 };
 
+// Helper to get current library ID from selector
 const getCurrentLibraryId = (): string => {
     const select = document.getElementById('library-select') as HTMLSelectElement;
     return select?.value || '';
 };
 
-// Export to window for onclick handlers
-(window as any).openDashboardSettings = openDashboardSettings;
-(window as any).closeDashboardSettings = closeDashboardSettings;
-(window as any).toggleSectionVisibility = toggleSectionVisibility;
-(window as any).saveDashboardSettings = saveDashboardSettings;
+// Event delegation for dashboard settings
+on('click', '[data-action="open-dashboard-settings"]', () => {
+    openDashboardSettings();
+});
+
+on('click', '[data-action="close-dashboard-settings"]', () => {
+    closeDashboardSettings();
+});
+
+on('click', '[data-action="save-dashboard-settings"]', () => {
+    saveDashboardSettings();
+});
+
+on('input', '[data-action="update-items-display"]', (target: HTMLElement) => {
+    const displayElement = document.getElementById(target.dataset.target || 'items-display');
+    if (displayElement) {
+        displayElement.textContent = (target as HTMLInputElement).value;
+    }
+});
 ```
 
-#### 7.3 Template Updates
-**Update `templates/dashboard.templ`** head section to load compiled JS:
+#### 7.3 Settings Page TypeScript
+**File: `web/ts/features/settings/settings.ts`** (new file)
 
+```typescript
+// Settings page form handling
+// Procedural/imperative style (no OOP)
+// Uses shared infrastructure from TypeScript Conversion Plan
+
+import { apiClient } from '../../core/api.js';
+import { showToast } from '../../core/toast.js';
+import { on } from '../../shared/events.js';
+
+// Save user settings (email, username, theme, etc.)
+const saveSettings = async (event: Event): Promise<void> => {
+    event.preventDefault();
+
+    const form = event.target as HTMLFormElement;
+    const formData = new FormData(form);
+
+    const data = {
+        email: formData.get('email') as string,
+        username: formData.get('username') as string,
+        first_name: formData.get('first_name') as string,
+        last_name: formData.get('last_name') as string,
+        theme: formData.get('theme') as string,
+        // Dashboard preferences are saved separately via dashboard modal
+        library_id: getCurrentLibraryId(),
+    };
+
+    try {
+        const response = await apiClient.post('/settings', data);
+
+        // Response should contain updated user data including theme
+        showToast.success('Settings saved successfully');
+
+        // Update theme immediately
+        const theme = formData.get('theme') as string;
+        if (theme) {
+            document.body.className = `theme-${theme}`;
+        }
+    } catch (error) {
+        showToast.error('Failed to save settings');
+    }
+};
+
+// Helper to get current library ID
+const getCurrentLibraryId = (): string => {
+    const select = document.getElementById('library-select') as HTMLSelectElement;
+    return select?.value || '';
+};
+
+// Event delegation for settings form
+on('submit', '[data-action="save-settings"]', saveSettings);
+
+on('click', '[data-action="cancel"]', () => {
+    history.back();
+});
+```
+
+#### 7.4 Template Updates
+**Update `templates/dashboard.templ` head section** (already shown above in Phase 6.1)
+
+**Add `templates/settings.templ` head section**:
 ```templ
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dashboard - Bookhoard</title>
+    <title>Settings - Bookhoard</title>
     <script src="/static/htmx.min.js"></script>
-    <script src="/static/toast.js"></script>
-    <script src="/static/theme.js"></script>
-    <script src="/static/carousel.js"></script>
-    <script src="/static/dashboard-settings.js"></script>
+    <script src="/static/core/toast.js"></script>
+    <script src="/static/core/api.js"></script>
+    <script src="/static/shared/events.js"></script>
+    <script src="/static/features/settings/settings.js"></script>
     <link href="/static/style.css" rel="stylesheet">
 </head>
 ```
 
 **Key Points**:
-- ✅ TypeScript files compiled via existing `npm run build:ts`
-- ✅ No separate build step needed
-- ✅ Matches existing pattern (toast.ts, theme.ts)
-- ✅ Functions exported to window for onclick handlers
+- ✅ TypeScript files in `web/ts/features/dashboard/` structure (follows TypeScript Conversion Plan)
+- ✅ Uses shared utilities (`apiClient`, `showToast`, `on` event delegation)
+- ✅ Event delegation pattern (no onclick handlers, data-action attributes)
+- ✅ Type-safe API calls and error handling
+- ✅ Compiled via existing `npm run build:ts`
+- ✅ Matches procedural/imperative style (no OOP)
 
 ---
 
@@ -1254,7 +1344,7 @@ templ BookDetail(user User, book database.MediaItems, progress database.ReadingP
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>{ book.Title } - Bookhoard</title>
         <script src="/static/htmx.min.js"></script>
-        <script src="/static/toast.js"></script>
+        <script src="/static/core/toast.js"></script>
         <link href="/static/style.css" rel="stylesheet">
     </head>
     <body class="theme-{ user.Theme }">
@@ -1262,7 +1352,7 @@ templ BookDetail(user User, book database.MediaItems, progress database.ReadingP
 
         <div class="max-w-7xl mx-auto px-4 py-8">
             <!-- Back Button -->
-            <button onclick="history.back()"
+            <button data-action="go-back"
                     class="mb-6 text-sm hover:underline transition-colors"
                     style="color: var(--text-secondary);">
                 ← Back to Dashboard
@@ -1312,57 +1402,46 @@ templ BookDetail(user User, book database.MediaItems, progress database.ReadingP
                         </div>
                     }
 
-                    <!-- Action Buttons -->
-                    <div class="flex flex-wrap gap-3 mb-6">
-                        <button class="px-6 py-3 rounded-lg font-medium text-white hover:opacity-90 transition-opacity"
+                    <!-- Actions -->
+                    <div class="flex gap-2 mb-6">
+                        <button data-action="add-to-collection"
+                                class="px-4 py-2 rounded-lg border text-white font-medium hover:opacity-90 transition-opacity"
                                 style="background-color: var(--accent);">
-                            📖 Read Now
+                            Add to Collection
                         </button>
-                        <button class="px-6 py-3 rounded-lg font-medium border hover:bg-gray-700 transition-colors"
+                        <button data-action="mark-as-read"
+                                class="px-4 py-2 rounded-lg border hover:opacity-80 transition-opacity"
                                 style="border-color: var(--border); color: var(--text-primary);">
-                            ➕ Add to Collection
+                            Mark as Read
                         </button>
                     </div>
 
-                    <!-- Metadata Table -->
-                    <div class="mb-6">
-                        <h3 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Details</h3>
-                        <table class="w-full text-sm">
-                            if book.Series.Valid {
-                                <tr>
-                                    <td class="py-2 font-medium" style="color: var(--text-secondary); width: 150px;">Series</td>
-                                    <td class="py-2" style="color: var(--text-primary);">{ book.Series.String }</td>
-                                </tr>
-                            }
-                            if book.Genre.Valid {
-                                <tr>
-                                    <td class="py-2 font-medium" style="color: var(--text-secondary);">Genre</td>
-                                    <td class="py-2" style="color: var(--text-primary);">{ book.Genre.String }</td>
-                                </tr>
-                            }
-                            if book.PageCount.Valid {
-                                <tr>
-                                    <td class="py-2 font-medium" style="color: var(--text-secondary);">Pages</td>
-                                    <td class="py-2" style="color: var(--text-primary);">{ fmt.Sprintf("%d", book.PageCount.Int32) }</td>
-                                </tr>
-                            }
-                        </table>
-                    </div>
+                    <!-- Description/Synopsis -->
+                    { book.Synopsis.Valid }
+                        <div class="p-4 mb-6 rounded-lg" style="background-color: var(--bg-secondary); color: var(--text-primary);">
+                            { book.Synopsis.String }
+                        </div>
+                    { end }
 
-                    <!-- Description -->
-                    if book.Description.Valid {
+                    <!-- Collections -->
+                    if len(collections) > 0 {
                         <div class="mb-6">
-                            <h3 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Synopsis</h3>
-                            <p class="text-sm leading-relaxed" style="color: var(--text-secondary);">
-                                { book.Description.String }
-                            </p>
+                            <h3 class="text-lg font-semibold mb-3" style="color: var(--text-primary)">Collections</h3>
+                            <div class="flex flex-wrap gap-2">
+                                for _, collection := range collections {
+                                    <span class="px-3 py-1 rounded-full text-sm" style="background-color: { collection.Color }; color: var(--text-primary);">
+                                        { collection.Icon } { collection.Name }
+                                    </span>
+                                }
+                            </div>
                         </div>
                     }
                 </div>
             </div>
         </div>
 
-        <script src="/static/theme.js"></script>
+        <script src="/static/shared/events.js"></script>
+        <script src="/static/features/book/detail.js"></script>
     </body>
     </html>
 }
@@ -1370,520 +1449,108 @@ templ BookDetail(user User, book database.MediaItems, progress database.ReadingP
 
 ---
 
-### **Phase 9: Documentation** (1-2 hours)
+## Summary: Key Changes from Original Carousel Dashboard Plan
 
-**COMPLIANCE**: Update documentation per guidelines
+### ✅ **What's Unchanged** (Phases 1-5):
 
-#### 9.1 User Documentation
-**File: `docs/user/dashboard.md`** (new file)
+- ✅ Database schema changes
+- ✅ Service layer implementation
+- ✅ Database queries
+- ✅ Routes (frontend.go modifications)
+- ✅ Template types (templates/types.go)
+- ✅ Settings template structure
+- ✅ SSR approach
+- ✅ HTMX for library switching
 
-```markdown
-# Dashboard
+### 🔧 **What's Changed** (Phase 6-7):
 
-The Bookhoard dashboard provides a Carousel-style horizontal carousel interface for browsing your book library.
+**1. Template HTML:**
+- **Before:** `<button onclick="scrollCarousel('{ section.ID }', -1)">`
+- **After:** `<button data-action="scroll-carousel" data-section-id="{ section.ID }" data-direction="-1">`
 
-## Sections
+**2. TypeScript Files:**
+- **Before:** `web/src/carousel.ts`, `web/src/dashboard-settings.ts`
+- **After:** `web/ts/features/dashboard/carousel.ts`, `web/ts/features/dashboard/settings.ts`
 
-### Smart Sections
+**3. TypeScript Implementation:**
 
-**Continue Reading**: Books you're currently reading, sorted by last read time.
-
-**In Progress**: Books you've started but haven't finished.
-
-**Recently Added**: Newest items added to your library (global across all users).
-
-**Recently Read**: Books you've completed (100% progress).
-
-**Not Started**: Books with no reading progress.
-
-### User Collections
-
-Any collection marked with "Show on Dashboard" will appear as a section.
-
-### Customizing Your Dashboard
-
-1. Click the ⚙️ (gear icon) in the top-right
-2. Drag sections to reorder
-3. Toggle visibility with switches
-4. Adjust items per section (10-50)
-5. Click "Save Changes"
-
-### Library Switching
-
-Use the dropdown in the sticky header to switch between libraries. Settings are per-library.
+**Before (inline handlers exported to window):**
+```typescript
+// ❌ Old pattern
+(window as any).scrollCarousel = scrollCarousel;
+(window as any).openDashboardSettings = openDashboardSettings;
 ```
 
-#### 9.2 Settings API Documentation
-**File: `docs/developer/api/settings.md`** (new file or add to existing)
+**After (event delegation):**
+```typescript
+// ✅ New pattern (uses shared on() utility)
+on('click', '[data-action="scroll-carousel"]', (target) => {
+    scrollCarousel(target.dataset.sectionId, parseInt(target.dataset.direction));
+});
 
-```markdown
-# Update User Settings
-
-Updates user profile and dashboard preferences.
-
-## Endpoint
-
-`POST /settings`
-
-## Request Body
-
-| Field | Type | Required | Description |
-|-------|------|----------|-------------|
-| email | string | Yes | User email address |
-| username | string | Yes | Username |
-| first_name | string | Yes | First name |
-| last_name | string | Yes | Last name |
-| theme | string | Yes | Theme preference (tokyo-night, light, dark) |
-| library_id | string | No | Library UUID for dashboard preferences |
-| hidden_sections | []string | No | List of hidden section IDs |
-| section_order | []string | No | Ordered list of section IDs |
-| items_per_section | number | No | Items to show per section (10-50) |
-
-## Response
-
-Returns updated user object.
-
-## Examples
-
-See `bruno/` for existing user profile tests.
+on('click', '[data-action="open-dashboard-settings"]', () => {
+    openDashboardSettings();
+});
 ```
 
+**4. API Calls:**
+- **Before:** Raw `fetch('/settings', { method: 'POST', ... })`
+- **After:** `await apiClient.post('/settings', data)`
+
+**5. Type Definitions:**
+- **Before:** Inline types defined in each file
+- **After:** Import shared types or define in `web/ts/features/dashboard/types.ts` matching Go handlers
+
+**6. Error Handling:**
+- **Before:** `if (typeof showToast === 'function') { showToast(...) }`
+- **After:** `import { showToast } from '../../core/toast.js'` and use `showToast.success()`, `showToast.error()`
+
 ---
 
-### **Phase 10: Testing & Verification** (2-3 hours)
+## Execution Timeline
 
-**COMPLIANCE**: Follow testing guidelines from test_helpers.go
+### **Recommended Order: TypeScript First**
 
-#### 10.1 Integration Tests
-**File: `cmd/server/tests/dashboard_test.go`** (new file)
-
-**Pattern**: Call `setupTestServer(t)` ONCE, use `t.Run()` for subtests
-
-```go
-package main
-
-import (
-    "bytes"
-    "encoding/json"
-    "net/http"
-    "testing"
-
-    "github.com/stretchr/testify/assert"
-    "github.com/stretchr/testify/require"
-)
-
-// TestDashboardPage tests the dashboard SSR page
-func TestDashboardPage(t *testing.T) {
-    setup := setupTestServer(t)
-    adminToken := loginTestUser(t, setup.Server, setup.DB)
-    client := &http.Client{}
-
-    // Create test library with media items
-    deviceSetup := setupDeviceTest(t)
-    libraryID := deviceSetup.CreateLibrary(t, "Test Ebooks Library", "ebooks")
-
-    t.Run("GetDashboard_AsAdmin", func(t *testing.T) {
-        req, _ := http.NewRequest("GET", setup.Server.URL+"/dashboard?library_id="+libraryID, nil)
-        req.Header.Set("Authorization", "Bearer "+adminToken)
-
-        resp, err := client.Do(req)
-        require.NoError(t, err)
-        defer resp.Body.Close()
-
-        assert.Equal(t, http.StatusOK, resp.StatusCode)
-        assert.Contains(t, resp.Header.Get("Content-Type"), "text/html")
-    })
-
-    t.Run("GetDashboard_WithoutAuth", func(t *testing.T) {
-        req, _ := http.NewRequest("GET", setup.Server.URL+"/dashboard?library_id="+libraryID, nil)
-        // No authorization header
-
-        resp, err := client.Do(req)
-        require.NoError(t, err)
-        defer resp.Body.Close()
-
-        assert.Equal(t, http.StatusUnauthorized, resp.StatusCode)
-    })
-
-    t.Run("GetDashboard_WithRegularUser", func(t *testing.T) {
-        // Get regular user token
-        regularToken := loginRegularUser(t, setup.Server, setup.DB)
-
-        req, _ := http.NewRequest("GET", setup.Server.URL+"/dashboard?library_id="+libraryID, nil)
-        req.Header.Set("Authorization", "Bearer "+regularToken)
-
-        resp, err := client.Do(req)
-        require.NoError(t, err)
-        defer resp.Body.Close()
-
-        assert.Equal(t, http.StatusOK, resp.StatusCode)
-        assert.Contains(t, resp.Header.Get("Content-Type"), "text/html")
-    })
-}
-
-// TestDashboardSettings tests the settings endpoint
-func TestDashboardSettings(t *testing.T) {
-    setup := setupTestServer(t)
-    token := loginTestUser(t, setup.Server, setup.DB)
-    client := &http.Client{}
-
-    // Create test library
-    deviceSetup := setupDeviceTest(t)
-    libraryID := deviceSetup.CreateLibrary(t, "Test Library", "ebooks")
-
-    t.Run("UpdateSettings_Valid", func(t *testing.T) {
-        reqBody := map[string]interface{}{
-            "email":             "testuser@example.com",
-            "username":          "testuser",
-            "first_name":        "Test",
-            "last_name":         "User",
-            "theme":              "tokyo-night",
-            "library_id":         libraryID,
-            "hidden_sections":    []string{"recently-added"},
-            "section_order":      []string{"continue-reading", "in-progress"},
-            "items_per_section":  25,
-        }
-        body, _ := json.Marshal(reqBody)
-
-        req, _ := http.NewRequest("POST", setup.Server.URL+"/settings", bytes.NewBuffer(body))
-        req.Header.Set("Content-Type", "application/json")
-        req.Header.Set("Authorization", "Bearer "+token)
-
-        resp, err := client.Do(req)
-        require.NoError(t, err)
-        defer resp.Body.Close()
-
-        assert.Equal(t, http.StatusOK, resp.StatusCode)
-    })
-
-    t.Run("UpdateSettings_WithoutAuth", func(t *testing.T) {
-        reqBody := map[string]interface{}{
-            "email": "testuser@example.com",
-        }
-        body, _ := json.Marshal(reqBody)
-
-        req, _ := http.NewRequest("POST", setup.Server.URL+"/settings", bytes.NewBuffer(body))
-        req.Header.Set("Content-Type", "application/json")
-        // No authorization header
-
-        resp, err := client.Do(req)
-        require.NoError(t, err)
-        defer resp.Body.Close()
-
-        assert.Equal(t, http.StatusUnauthorized, resp.StatusCode)
-    })
-}
-
-// TestDashboardCollectionVisibility tests collection show_on_dashboard functionality
-func TestDashboardCollectionVisibility(t *testing.T) {
-    setup := setupTestServer(t)
-    token := loginTestUser(t, setup.Server, setup.DB)
-
-    t.Run("CreateCollection_WithDashboardVisibility", func(t *testing.T) {
-        deviceSetup := setupDeviceTest(t)
-
-        reqBody := map[string]interface{}{
-            "name":        "Test Dashboard Collection",
-            "description": "A collection for testing dashboard",
-            "color":       "#FF5733",
-            "icon":        "📚",
-        }
-        body, _ := json.Marshal(reqBody)
-
-        req, _ := http.NewRequest("POST", setup.Server.URL+"/api/collections", bytes.NewBuffer(body))
-        req.Header.Set("Content-Type", "application/json")
-        req.Header.Set("Authorization", "Bearer "+token)
-
-        resp, err := http.DefaultClient.Do(req)
-        require.NoError(t, err)
-        defer resp.Body.Close()
-
-        assert.Equal(t, http.StatusCreated, resp.StatusCode)
-
-        var result map[string]interface{}
-        json.NewDecoder(resp.Body).Decode(&result)
-
-        collectionID := result["id"].(string)
-
-        // Update to show on dashboard
-        updateReq := map[string]interface{}{
-            "show_on_dashboard": true,
-        }
-        updateBody, _ := json.Marshal(updateReq)
-
-        updateHTTP, _ := http.NewRequest("PUT", setup.Server.URL+"/api/collections/"+collectionID, bytes.NewBuffer(updateBody))
-        updateHTTP.Header.Set("Content-Type", "application/json")
-        updateHTTP.Header.Set("Authorization", "Bearer "+token)
-
-        updateResp, err := http.DefaultClient.Do(updateHTTP)
-        require.NoError(t, err)
-        defer updateResp.Body.Close()
-
-        assert.Equal(t, http.StatusOK, updateResp.StatusCode)
-
-        // Verify it appears in dashboard sections
-        sectionsReq, _ := http.NewRequest("GET", setup.Server.URL+"/api/dashboard/sections", nil)
-        sectionsReq.Header.Set("Authorization", "Bearer "+token)
-
-        sectionsResp, err := http.DefaultClient.Do(sectionsReq)
-        require.NoError(t, err)
-        defer sectionsResp.Body.Close()
-
-        var sectionsResult map[string]interface{}
-        json.NewDecoder(sectionsResp.Body).Decode(&sectionsResult)
-
-        sections := sectionsResult["sections"].([]interface{})
-        // Should include our collection
-        assert.Greater(t, len(sections), 5, "Should have smart sections + collection")
-    })
-}
-```
-
-#### 10.2 Test Helper Guidelines
-
-**From PROJECT_GUIDELINES.md**:
-
-✅ **ALWAYS use `setupTestServer()` helper**:
-- Call it ONCE per test function (not in subtests)
-- Uses `max_conns=1` to prevent connection exhaustion
-- Automatic cleanup via `t.Cleanup()` (no defer needed)
-- Returns `*TestServerSetup` with DB, Server, Config
-
-❌ **NEVER create separate database pools per test**:
-- 78 tests × 4 connections (default) = 312 connections > PostgreSQL's 100 limit
-- That's why we use `max_conns=1` in test configuration
-
-✅ **Share one test setup across all subtests**:
-```go
-func TestDashboard(t *testing.T) {
-    setup := setupTestServer(t)  // ✅ ONCE
-    token := loginTestUser(t, setup.Server, setup.DB)
-    
-    t.Run("Subtest1", func(t *testing.T) { /* use setup */ })
-    t.Run("Subtest2", func(t *testing.T) { /* use setup */ })
-}
-```
-
-❌ **NEVER call setupTestServer() in loops**:
-```go
-// ❌ WRONG - creates multiple DB pools
-for _, tc := range cases {
-    setup := setupTestServer(t)  // DON'T DO THIS
-}
-```
-
-✅ **DO**:
-```go
-func TestFeature(t *testing.T) {
-    setup := setupTestServer(t)  // ✅ ONCE per function
-    token := loginTestUser(t, setup.Server, setup.DB)
-    
-    t.Run("Subtest1", func(t *testing.T) {
-        // Use setup, token
-    })
-    
-    t.Run("Subtest2", func(t *testing.T) {
-        // Use same setup, token
-    })
-}
-```
-
-❌ **DON'T**:
-```go
-func TestFeature(t *testing.T) {
-    t.Run("Subtest1", func(t *testing.T) {
-        setup := setupTestServer(t)  // ❌ Creates extra DB connections
-    })
-    
-    t.Run("Subtest2", func(t *testing.T) {
-        setup := setupTestServer(t)  // ❌ Exhausts connection pool
-    })
-}
-```
-
-**Three-Context Testing**:
-```go
-t.Run("WithoutAuth", func(t *testing.T) {
-    // No Authorization header → expect 401
-})
-
-t.Run("WithRegularUser", func(t *testing.T) {
-    token := loginRegularUser(t, setup.Server, setup.DB)
-    // Regular user context → expect 200/403 depending on endpoint
-})
-
-t.Run("WithAdmin", func(t *testing.T) {
-    token := loginTestUser(t, setup.Server, setup.DB)
-    // Admin context → expect 200
-})
-```
-
-#### 10.2 Verification Checklist
-
-Before committing:
-```bash
-# 1. Run verification script
-bash scripts/verify-guidelines.sh
-
-# 2. Build affected packages
-go build ./internal/handlers
-go build ./internal/services
-go build ./templates
-
-# 3. Run tests
-go test ./cmd/server/tests/... -v -run TestDashboard
-
-# 4. Check for TypeScript
-# No .js files allowed, only .ts
-
-# 5. Check for custom CSS
-# Should only use TailwindCSS classes
-
-# 6. Verify docs render
-# Visit /docs endpoint and search for "dashboard"
-```
+| Phase | Duration | Dependencies | Deliverables |
+|-------|----------|--------------|--------------|
+| **TypeScript Conversion** | 16-21 days | None | All inline JS → TypeScript modules |
+| **Dashboard Phase 1-5** | 8-10 hours | None | Backend (DB, service, routes, templates) |
+| **Dashboard Phase 6-8** | 2-3 hours | TypeScript Conversion + Dashboard 1-5 | TypeScript + Templates |
+| **Total** | **19-25 days** | | Complete TypeScript + Carousel Dashboard |
 
 ---
 
-## 🗂️ File Structure Summary
+## Success Criteria
 
-```
-Modified Files (COMPLIANT with guidelines):
-├── database/schema/schema.sql                  (Add tables, NO migration files)
-├── internal/database/queries/queries.sql       (Add dashboard queries)
-├── internal/router/router.go                   (Add DashboardService to Config)
-├── internal/router/frontend.go                  (Modify /dashboard, add /settings routes)
-├── templates/dashboard.templ                   (Replace with SSR version)
-├── templates/types.go                          (Add SectionData, BookCardData)
-└── tsconfig.json                               (Already compiles web/src/*.ts)
+### Backend (Phases 1-3):
+- [ ] Database schema updated and recreated
+- [ ] Service layer implemented
+- ] Database queries working
+- [ ] Routes rendering SSR with data
+- [ ] Templates types defined
+- [ ] Bruno tests passing
 
-New Files:
-├── internal/services/dashboard_service.go         (Reusable business logic)
-├── templates/components.templ                    (Carousel, modal components)
-├── templates/dashboard_sections_partial.templ   (HTMX partial)
-├── templates/settings.templ                      (Settings page - moved from admin)
-├── web/src/carousel.ts                          (Carousel TypeScript)
-├── web/src/dashboard-settings.ts                (Settings modal TypeScript)
-├── cmd/server/tests/dashboard_test.go           (Integration tests using test_helpers)
-├── docs/user/dashboard.md                        (User documentation)
-└── docs/developer/api/settings.md               (Settings API documentation)
+### Frontend (Phases 4-6):
+- [ ] Templates use `data-action` attributes (no inline onclick)
+- [ ] TypeScript files in `web/ts/features/dashboard/` structure
+- [ ] Event delegation properly configured
+- [ ] Shared utilities imported and used
+- [ ] API client used for all fetch calls
+- [ ] Toast notifications integrated
+- [ ] Progressive enhancement maintained
 
-Note: Bruno tests already created in bruno/dashboard/
-```
+### Integration (Phase 7-8):
+- [ ] Carousel scroll works (mouse and touch)
+- [ ] Dashboard settings modal opens/closes
+- [ ] Settings form saves correctly
+- [ ] Theme switching works
+- [ ] Drag-and-drop for section reordering
+- [ ] Library switching via HTMX
+- [ ] Book detail page displays correctly
 
 ---
 
-## ⏱️ Time Estimate Summary
-
-| Phase | Description | Time |
-|-------|-------------|------|
-| 1 | Database schema changes (schema.sql, no migrations) | 2-3 hrs |
-| 2 | Service layer (reusable for SSR/API/mobile) | 3-4 hrs |
-| 3 | Database queries | 1-2 hrs |
-| 4 | Routes (inline handlers in frontend.go) | 1-2 hrs |
-| 5 | Template types (templates/types.go) | 30 min |
-| 6 | Settings template | 2 hrs |
-| 7 | Dashboard templates (TailwindCSS, SSR) | 4-5 hrs |
-| 8 | TypeScript (carousel, dashboard-settings) | 2-3 hrs |
-| 9 | Documentation (docs/user, docs/developer/api) | 1-2 hrs |
-| 10 | Testing & verification | 2-3 hrs |
-| | **Total** | **19-26 hrs** |
-
----
-
-## 🎯 Implementation Order (Sprint Structure)
-
-**Sprint 1** (Foundation - Backend First):
-1. Phase 1: Database schema changes
-2. Phase 3: Database queries
-3. Phase 2: Service layer (testable independently)
-
-**Sprint 2** (Routes & Settings Page):
-4. Phase 4: Routes (inline handlers in frontend.go)
-5. Phase 5: Settings template
-
-**Sprint 3** (Frontend):
-6. Phase 6: Dashboard templates (carousel, components)
-7. Phase 7: TypeScript (carousel, dashboard-settings)
-
-**Sprint 4** (Testing & Docs):
-8. Phase 9: Documentation
-9. Phase 10: Testing & verification
-
----
-
-## 🎨 Smart Sections Definitions
-
-| Section Key | Title | Icon | Data Source | Global? | View All URL |
-|-------------|-------|------|-------------|---------|-------------|
-| `continue-reading` | Continue Reading | 📖 | `GET /api/progress` | ❌ | `/section/continue-reading` |
-| `in-progress` | In Progress | 📚 | `GET /api/progress` | ❌ | `/section/in-progress` |
-| `recently-added` | Recently Added | 🆕 | `GET /api/media-items` | ✅ | `/section/recently-added` |
-| `recently-read` | Recently Read | ✅ | `GET /api/progress` | ❌ | `/history` |
-| `unread` | Not Started | 📕 | Media items LEFT JOIN progress WHERE null | ❌ | `/section/unread` |
-
----
-
-## ✅ Pre-Commit Checklist
-
-Before committing, verify:
-
-**Backend**:
-- [ ] Schema changes merged into `database/schema/schema.sql` (NO migration files)
-- [ ] Regenerated database code with `sqlc generate`
-- [ ] All business logic in `services/` (not handlers)
-- [ ] Bruno tests exist in `bruno/dashboard/` for all new endpoints
-- [ ] Tests in `cmd/server/tests/dashboard_test.go` using setupTestServer() helper
-- [ ] Tests cover 3 contexts (no user, regular user, admin)
-- [ ] `setupTestServer(t)` called ONCE per test function (not in subtests)
-- [ ] `go build ./...` succeeds
-- [ ] `go test ./cmd/server/tests/... -v -run TestDashboard` passes
-
-**Frontend**:
-- [ ] Only TailwindCSS classes used (no custom CSS)
-- [ ] Inline JavaScript in templates (matching existing pattern)
-- [ ] Template types defined in `templates/types.go`
-- [ ] SSR for initial data (no AJAX on load)
-- [ ] HTMX for CRUD operations
-- [ ] Progressive enhancement works without JS
-
-**Documentation**:
-- [ ] User docs updated in `docs/user/dashboard.md`
-- [ ] Settings API docs updated in `docs/developer/api/settings.md`
-- [ ] Docs render at `/docs` endpoint
-- [ ] Search finds new content
-
-**Verification**:
-- [ ] `bash scripts/verify-guidelines.sh` passes (0 errors)
-- [ ] Git diff shows only intended changes
-- [ ] No secrets committed
-
----
-
-## 🔗 Related Guidelines Compliance
-
-This plan addresses PROJECT_GUIDELINES.md requirements:
-
-✅ **Full-stack task with user approval** - backend modifications allowed
-✅ **No migration files** - merge into existing schema.sql
-✅ **Service layer architecture** - all logic in services, reusable
-✅ **TypeScript** - no JavaScript files, compiled via existing tsc setup
-✅ **TailwindCSS only** - no custom CSS
-✅ **Procedural style** - no OOP, classes, or this-capture
-✅ **SSR for initial data** - no AJAX on page load
-✅ **Inline routes in frontend.go** - matches existing pattern
-✅ **Template types in templates/types.go** - SectionData, BookCardData
-✅ **Bruno tests already created** - in bruno/dashboard/
-✅ **Documentation** - docs/user and docs/developer/api updated
-✅ **Backward compatibility** - mobile apps supported
-✅ **KISS principle** - minimal routes, no over-engineering
-
----
-
-**Created:** 2025-02-17
-**Updated:** 2025-02-17
-**Status:** Planning
-**Priority:** High
-**Estimated effort:** 19-26 hours
-**Architecture:** SSR-First with Settings page for customization
-**Compliance:** PROJECT_GUIDELINES.md ✅
+*Updated: 2025-02-17*
+*Prerequisites: TypeScript Conversion Plan must be completed first*
+*Follows: PROJECT_GUIDELINES.md + TYPESCRIPT_CONVERSION_PLAN.md*
+*Architecture: Hybrid SSR + TypeScript CRUD with Event Delegation*