Safety backup before Path A fixes - fixing function mismatches and missing functions

templates/admin.templ

@@ -97,7 +97,7 @@ templ Admin(user User) {
 								</div>
 								<div class="mt-4 flex gap-2">
 									<button
-										@click="window.location.reload()"
+										@click="$store.window.location.reload()"
 										class="btn-primary px-4 py-2 rounded-lg"
 									>
 										Refresh to View Books
@@ -117,4 +117,3 @@ templ Admin(user User) {
 		</body>
 	</html>
 }
-

templates/admin_library_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/admin_sidebar_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/admin_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -45,7 +45,7 @@ func Admin(user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"flex-1 p-8\"><div class=\"max-w-4xl\"><div class=\"mb-8\"><h1 class=\"text-3xl font-bold mb-2\" style=\"color: var(--text-primary)\">Dashboard</h1><p style=\"color: var(--text-secondary)\">Overview of your Bookhoard library and settings</p></div><div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\"><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><div class=\"flex items-center space-x-3\"><div class=\"text-3xl\">📖</div><div><h3 class=\"font-semibold\" style=\"color: var(--text-primary)\">Library</h3><p style=\"color: var(--text-secondary)\" class=\"text-sm\">Manage your ebook collection</p></div></div><a href=\"/\" class=\"mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded\">View Library</a></div><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><div class=\"flex items-center space-x-3\"><div class=\"text-3xl\">👁️</div><div><h3 class=\"font-semibold\" style=\"color: var(--text-primary)\">Scan Watch Status</h3><p style=\"color: var(--text-secondary)\" class=\"text-sm\">Auto-detecting new files</p></div></div><div id=\"watch-status\" class=\"mt-4 text-sm\" style=\"color: var(--text-secondary)\"><span class=\"inline-block w-2 h-2 rounded-full bg-green-500 mr-2\"></span> Watching <span id=\"watch-count\">0</span> libraries</div></div></div><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h3 class=\"text-xl font-semibold mb-4\" style=\"color: var(--text-primary)\">Quick Actions</h3><div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\"><button @click=\"scanAllLibraries()\" class=\"btn-primary p-4 rounded-lg text-left\"><div class=\"font-medium\">Rescan Library</div><div style=\"color: var(--text-secondary)\" class=\"text-sm\">Re-scan existing files and fix metadata</div></button> <a href=\"/admin/library\" class=\"btn-secondary p-4 rounded-lg text-left block\"><div class=\"font-medium\">Manage Folders</div><div style=\"color: var(--text-secondary)\" class=\"text-sm\">Add or remove scan directories</div></a></div></div><!-- Scan Progress Section --><div id=\"scan-progress-container\" class=\"hidden mt-6 p-6 rounded-lg border opacity-0 -translate-y-2.5 transition-all duration-300 ease-out\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-4\"><h3 class=\"text-lg font-semibold\" style=\"color: var(--text-primary)\">📚 Scanning Libraries</h3><button @click=\"hideScanProgress()\" class=\"p-2 hover:bg-gray-700 rounded\">✕</button></div><!-- Overall Progress --><div class=\"mb-4\"><div class=\"flex justify-between text-sm mb-2\"><span style=\"color: var(--text-secondary)\">Overall Progress</span> <span id=\"scan-progress-text\" style=\"color: var(--text-primary)\">0%</span></div><div class=\"w-full bg-gray-700 rounded-full h-3\"><div id=\"scan-progress-bar\" class=\"h-3 rounded-full transition-all duration-500\" style=\"width: 0%; background-color: var(--accent);\"></div></div><div id=\"scan-status\" class=\"text-sm mt-2\" style=\"color: var(--text-secondary)\">Starting scan...</div></div><!-- Per-Library Progress --><div id=\"library-progress-list\" class=\"space-y-3\"><!-- Dynamically populated --></div><!-- Results Summary --><div id=\"scan-results\" class=\"hidden mt-6 p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><h4 class=\"font-semibold mb-2\" style=\"color: var(--text-primary)\">✅ Scan Complete!</h4><div id=\"scan-results-content\" style=\"color: var(--text-secondary)\"><!-- Results populated by JS --></div><div class=\"mt-4 flex gap-2\"><button @click=\"window.location.reload()\" class=\"btn-primary px-4 py-2 rounded-lg\">Refresh to View Books</button> <button @click=\"hideScanProgress()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Dismiss</button></div></div></div></div></main></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"flex-1 p-8\"><div class=\"max-w-4xl\"><div class=\"mb-8\"><h1 class=\"text-3xl font-bold mb-2\" style=\"color: var(--text-primary)\">Dashboard</h1><p style=\"color: var(--text-secondary)\">Overview of your Bookhoard library and settings</p></div><div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\"><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><div class=\"flex items-center space-x-3\"><div class=\"text-3xl\">📖</div><div><h3 class=\"font-semibold\" style=\"color: var(--text-primary)\">Library</h3><p style=\"color: var(--text-secondary)\" class=\"text-sm\">Manage your ebook collection</p></div></div><a href=\"/\" class=\"mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded\">View Library</a></div><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><div class=\"flex items-center space-x-3\"><div class=\"text-3xl\">👁️</div><div><h3 class=\"font-semibold\" style=\"color: var(--text-primary)\">Scan Watch Status</h3><p style=\"color: var(--text-secondary)\" class=\"text-sm\">Auto-detecting new files</p></div></div><div id=\"watch-status\" class=\"mt-4 text-sm\" style=\"color: var(--text-secondary)\"><span class=\"inline-block w-2 h-2 rounded-full bg-green-500 mr-2\"></span> Watching <span id=\"watch-count\">0</span> libraries</div></div></div><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h3 class=\"text-xl font-semibold mb-4\" style=\"color: var(--text-primary)\">Quick Actions</h3><div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\"><button @click=\"scanAllLibraries()\" class=\"btn-primary p-4 rounded-lg text-left\"><div class=\"font-medium\">Rescan Library</div><div style=\"color: var(--text-secondary)\" class=\"text-sm\">Re-scan existing files and fix metadata</div></button> <a href=\"/admin/library\" class=\"btn-secondary p-4 rounded-lg text-left block\"><div class=\"font-medium\">Manage Folders</div><div style=\"color: var(--text-secondary)\" class=\"text-sm\">Add or remove scan directories</div></a></div></div><!-- Scan Progress Section --><div id=\"scan-progress-container\" class=\"hidden mt-6 p-6 rounded-lg border opacity-0 -translate-y-2.5 transition-all duration-300 ease-out\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-4\"><h3 class=\"text-lg font-semibold\" style=\"color: var(--text-primary)\">📚 Scanning Libraries</h3><button @click=\"hideScanProgress()\" class=\"p-2 hover:bg-gray-700 rounded\">✕</button></div><!-- Overall Progress --><div class=\"mb-4\"><div class=\"flex justify-between text-sm mb-2\"><span style=\"color: var(--text-secondary)\">Overall Progress</span> <span id=\"scan-progress-text\" style=\"color: var(--text-primary)\">0%</span></div><div class=\"w-full bg-gray-700 rounded-full h-3\"><div id=\"scan-progress-bar\" class=\"h-3 rounded-full transition-all duration-500\" style=\"width: 0%; background-color: var(--accent);\"></div></div><div id=\"scan-status\" class=\"text-sm mt-2\" style=\"color: var(--text-secondary)\">Starting scan...</div></div><!-- Per-Library Progress --><div id=\"library-progress-list\" class=\"space-y-3\"><!-- Dynamically populated --></div><!-- Results Summary --><div id=\"scan-results\" class=\"hidden mt-6 p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><h4 class=\"font-semibold mb-2\" style=\"color: var(--text-primary)\">✅ Scan Complete!</h4><div id=\"scan-results-content\" style=\"color: var(--text-secondary)\"><!-- Results populated by JS --></div><div class=\"mt-4 flex gap-2\"><button @click=\"$store.window.location.reload()\" class=\"btn-primary px-4 py-2 rounded-lg\">Refresh to View Books</button> <button @click=\"hideScanProgress()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Dismiss</button></div></div></div></div></main></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

templates/admin_users_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/analytics_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/api_explorer.templ

@@ -25,16 +25,16 @@ templ APIExplorer(explorer APIExplorerData) {
 				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code class="text-text-primary text-sm">{ explorer.Endpoint.Response }</code></pre>
 			</div>
 			<div class="flex gap-2 mt-4">
-				<button @click="copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
-				<button @click="copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
+				<button @click="$store.devices.copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
+				<button @click="$store.devices.copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
 			</div>
 		</div>
 	} else {
 		// Show interactive explorer with real execution
 		<div class="border border-border rounded-lg p-6 mt-8 bg-background-secondary" x-data="apiExplorerDoc" x-init="initAPIExplorerDoc('{ explorer.Endpoint.Path }', '{ explorer.Endpoint.RequestBody }', '{ explorer.Endpoint.Response }')">
 			<div class="flex gap-2 mb-4">
-				<button class="mode-btn px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer hover:bg-background-secondary text-sm" id="mock-btn" @click="showDocMode('mock')">Mock Data</button>
-				<button class="mode-btn px-4 py-2 bg-accent text-white rounded cursor-pointer text-sm" id="real-btn" @click="showDocMode('real')">Try It Out</button>
+				<button class="mode-btn px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer hover:bg-background-secondary text-sm" id="mock-btn" @click="$store.apiExplorerDoc.showDocMode('mock')">Mock Data</button>
+				<button class="mode-btn px-4 py-2 bg-accent text-white rounded cursor-pointer text-sm" id="real-btn" @click="$store.apiExplorerDoc.showDocMode('real')">Try It Out</button>
 			</div>
 			<div class="mb-4">
 				<div class="mb-4">
@@ -67,7 +67,7 @@ templ APIExplorer(explorer APIExplorerData) {
 
 // APIExplorerData holds data for the API explorer component
 type APIExplorerData struct {
-	Endpoint EndpointInfo
+	Endpoint   EndpointInfo
 	IsLoggedIn bool
 }
 

templates/api_explorer_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/bookshelf.templ

@@ -19,7 +19,7 @@ templ BookShelf(user User, libraries []LibraryData) {
 					<div class="flex flex-col sm:flex-row gap-4 items-center justify-between">
 						<div class="flex-1 w-full">
 							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Select Library</label>
-							<select id="library-select" @change="selectLibrary()" class="w-full px-4 py-3 border rounded-lg text-lg" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border);">
+							<select id="library-select" @change="$store.bookshelf.selectLibrary" class="w-full px-4 py-3 border rounded-lg text-lg" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border);">
 								if len(libraries) == 0 {
 									<option value="">No libraries available</option>
 								} else {
@@ -30,7 +30,7 @@ templ BookShelf(user User, libraries []LibraryData) {
 							</select>
 						</div>
 						<div class="flex gap-2">
-							<button @click="loadBookshelf()" class="btn-primary px-6 py-3 rounded-lg font-medium">
+							<button @click="$store.bookshelf.loadBookshelf" class="btn-primary px-6 py-3 rounded-lg font-medium">
 								Refresh
 							</button>
 						</div>

templates/bookshelf_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/collection_modal_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/collection_rules_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/collections.templ

@@ -60,7 +60,7 @@ templ Collection(user User, collections []CollectionData, errorMessage string) {
 						</div>
 					}
 					for _, col := range collections {
-						<div @click="navigateToCollection($el)" data-href={ "/collections/" + col.ID } class="block">
+						<div @click="$store.collections.navigateToCollection($el)" data-href={ "/collections/" + col.ID } class="block">
 							<div
 								class="card p-6 rounded-lg border-l-4 cursor-pointer hover:shadow-lg transition-shadow"
 								style="background-color: var(--bg-secondary);"
@@ -116,7 +116,7 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
 			@Header(user, "/collections")
 			<div class="w-full px-4 sm:px-6 lg:px-8 py-8">
 				<div class="mb-6">
-					<button @click="backToCollections()" class="btn-secondary px-4 py-2 rounded-lg mb-4">
+					<button @click="$store.collections.backToCollections" class="btn-secondary px-4 py-2 rounded-lg mb-4">
 						← Back to Collections
 					</button>
 					<div class="flex items-center gap-4">
@@ -147,13 +147,13 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
 						</div>
 						<button
 							id="bulk-remove-btn"
-							@click="removebooksToAdd()"
+							@click="$store.collections.removebooksToAdd"
 							disabled
 							class="btn-danger px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
 						>
 							🗑️ Remove Selected
 						</button>
-						<button @click="showAddBooksModal()" class="btn-primary px-4 py-2 rounded-lg">
+						<button @click="$store.collections.showAddBooksModal" class="btn-primary px-4 py-2 rounded-lg">
 							➕ Add Books
 						</button>
 					</div>
@@ -213,7 +213,7 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
 							<!-- Remove Button -->
 							<div class="mt-3 pt-3 border-t" style="border-color: var(--border);">
 								<button
-									@click="removeBook('{ book.MediaItemID }')"
+									@click="$store.collections.removeBook('{ book.MediaItemID }')"
 									class="px-3 py-1 text-sm border rounded hover:opacity-80"
 									style="border-color: var(--border); color: var(--text-secondary);"
 								>
@@ -228,7 +228,7 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
 				<div class="card rounded-lg p-6 w-full max-w-2xl mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
 					<div class="flex justify-between items-center mb-6">
 						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Add Books to Collection</h2>
-						<button @click="hideAddBooksModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
+						<button @click="$store.collections.hideAddBooksModal" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
 					</div>
 					<p class="mb-4" style="color: var(--text-secondary)">Search and select books to add to this collection.</p>
 					<!-- Library filter toggle - hidden by default, shown by JS when library_id present -->
@@ -249,10 +249,10 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
 					</div>
 					<div id="book-results" class="max-h-64 overflow-y-auto mb-4"></div>
 					<div class="flex justify-end space-x-3">
-						<button type="button" @click="hideAddBooksModal()" class="btn-secondary px-4 py-2 rounded-lg">
+						<button type="button" @click="$store.collections.hideAddBooksModal" class="btn-secondary px-4 py-2 rounded-lg">
 							Cancel
 						</button>
-						<button type="button" @click="addSelectedBooks()" class="btn-primary px-4 py-2 rounded-lg">
+						<button type="button" @click="$store.collections.addSelectedBooks" class="btn-primary px-4 py-2 rounded-lg">
 							Add Selected Books
 						</button>
 					</div>

templates/collections_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/conflicts_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/custom_section_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/dashboard_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -260,7 +260,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div><!-- Carousel --><div class=\"carousel-container relative group\"><button class=\"carousel-nav-left absolute left-0 top-1/2 -translate-y-1/2 z-10\n\t\t\t\t\t\t   w-12 h-full bg-gradient-to-r from-gray-900 to-transparent\n\t\t\t\t\t\t   flex items-center justify-start opacity-0 group-hover:opacity-100\n\t\t\t\t\t\t   transition-opacity duration-200\" data-action=\"scroll-carousel\" data-collection-id=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div><!-- Carousel --><div class=\"carousel-container relative group\"><button class=\"carousel-nav-left absolute left-0 top-1/2 -translate-y-1/2 z-10 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\" data-action=\"scroll-carousel\" data-collection-id=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -286,7 +286,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "\" class=\"carousel-track flex gap-4 overflow-x-auto\n\t\t\t\t\t\t\t scroll-smooth snap-x snap-mandatory\n\t\t\t\t\t\t\t px-12 pb-4\" style=\"scrollbar-width: none; -ms-overflow-style: none;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "\" 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;\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -302,7 +302,7 @@ func CollectionCarousel(section handlers.SectionData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div><button class=\"carousel-nav-right absolute right-0 top-1/2 -translate-y-1/2 z-10\n\t\t\t\t\t\t   w-12 h-full bg-gradient-to-l from-gray-900 to-transparent\n\t\t\t\t\t\t   flex items-center justify-end opacity-0 group-hover:opacity-100\n\t\t\t\t\t\t   transition-opacity duration-200\" data-action=\"scroll-carousel\" data-collection-id=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div><button class=\"carousel-nav-right absolute right-0 top-1/2 -translate-y-1/2 z-10 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\" data-action=\"scroll-carousel\" data-collection-id=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -344,7 +344,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 			templ_7745c5c3_Var16 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div class=\"book-card flex-shrink-0 w-36 rounded-lg overflow-hidden snap-start cursor-pointer\n\t\t\t\t\ttransition-transform duration-200 hover:scale-105\" data-action=\"view-book\" data-book-id=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div class=\"book-card flex-shrink-0 w-36 rounded-lg overflow-hidden snap-start cursor-pointer transition-transform duration-200 hover:scale-105\" data-action=\"view-book\" data-book-id=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -370,7 +370,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\"><div class=\"aspect-[2/3] overflow-hidden shadow-lg\n\t\t\t\t\t\tbg-gradient-to-br from-gray-700 to-gray-900\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\"><div class=\"aspect-[2/3] overflow-hidden shadow-lg bg-gradient-to-br from-gray-700 to-gray-900\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -494,7 +494,7 @@ func DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections [
 			return templ_7745c5c3_Err
 		}
 		for _, section := range sections {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "<div class=\"collection-item flex items-center justify-between p-3 rounded border\n\t\t\t\t\t\t\t\t   cursor-move select-none\" data-collection-id=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "<div class=\"collection-item flex items-center justify-between p-3 rounded border cursor-move select-none\" data-collection-id=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -589,7 +589,7 @@ func DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections [
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "><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\n\t\t\t\t\t\t\t\t\t\t   peer-checked:after:translate-x-full peer-checked:after:border-white\n\t\t\t\t\t\t\t\t\t\t   after:content-[''] after:absolute after:top-[2px] after:left-[2px]\n\t\t\t\t\t\t\t\t\t\t   after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all\n\t\t\t\t\t\t\t\t\t\t   peer-checked:bg-blue-600\"></div></label></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "><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></label></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}

templates/devices_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/docs_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/error_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/header.templ

@@ -70,7 +70,7 @@ templ Header(user User, currentPath string) {
 								<h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary)">Select Theme</h3>
 								<div class="space-y-2">
 									<button
-										@click="header.changeThemeTo('tokyo-night'); themeDropdownOpen = false"
+										@click="$store.theme.changeTheme('tokyo-night'); themeDropdownOpen = false"
 										class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 										style="color: var(--text-primary); background-color: var(--bg-primary);"
 									>
@@ -78,7 +78,7 @@ templ Header(user User, currentPath string) {
 										Tokyo Night
 									</button>
 									<button
-										@click="header.changeThemeTo('dracula'); themeDropdownOpen = false"
+										@click="$store.theme.changeTheme('dracula'); themeDropdownOpen = false"
 										class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 										style="color: var(--text-primary); background-color: var(--bg-primary);"
 									>
@@ -86,7 +86,7 @@ templ Header(user User, currentPath string) {
 										Dracula
 									</button>
 									<button
-										@click="header.changeThemeTo('nord'); themeDropdownOpen = false"
+										@click="$store.theme.changeTheme('nord'); themeDropdownOpen = false"
 										class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 										style="color: var(--text-primary); background-color: var(--bg-primary);"
 									>
@@ -94,7 +94,7 @@ templ Header(user User, currentPath string) {
 										Nord
 									</button>
 									<button
-										@click="header.changeThemeTo('solarized-dark'); themeDropdownOpen = false"
+										@click="$store.theme.changeTheme('solarized-dark'); themeDropdownOpen = false"
 										class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 										style="color: var(--text-primary); background-color: var(--bg-primary);"
 									>
@@ -102,7 +102,7 @@ templ Header(user User, currentPath string) {
 										Solarized Dark
 									</button>
 									<button
-										@click="header.changeThemeTo('monokai'); themeDropdownOpen = false"
+										@click="$store.theme.changeTheme('monokai'); themeDropdownOpen = false"
 										class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 										style="color: var(--text-primary); background-color: var(--bg-primary);"
 									>
@@ -110,7 +110,7 @@ templ Header(user User, currentPath string) {
 										Monokai
 									</button>
 									<button
-										@click="header.changeThemeTo('one-dark-pro'); themeDropdownOpen = false"
+										@click="$store.theme.changeTheme('one-dark-pro'); themeDropdownOpen = false"
 										class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 										style="color: var(--text-primary); background-color: var(--bg-primary);"
 									>
@@ -118,7 +118,7 @@ templ Header(user User, currentPath string) {
 										One Dark Pro
 									</button>
 									<button
-										@click="header.changeThemeTo('material-dark'); themeDropdownOpen = false"
+										@click="$store.theme.changeTheme('material-dark'); themeDropdownOpen = false"
 										class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 										style="color: var(--text-primary); background-color: var(--bg-primary);"
 									>
@@ -128,7 +128,7 @@ templ Header(user User, currentPath string) {
 									<div class="border-t pt-2 mt-2" style="border-color: var(--border);">
 										<p class="text-xs mb-2" style="color: var(--text-secondary)">Bookshelf Background</p>
 										<button
-											@click="woodPaneling.change('none'); themeDropdownOpen = false"
+											@click="$store.theme.changeWoodPaneling('none'); themeDropdownOpen = false"
 											class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 											style="color: var(--text-primary);"
 											data-wood="none"
@@ -136,7 +136,7 @@ templ Header(user User, currentPath string) {
 											None
 										</button>
 										<button
-											@click="woodPaneling.change('wood-light'); themeDropdownOpen = false"
+											@click="$store.theme.changeWoodPaneling('wood-light'); themeDropdownOpen = false"
 											class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 											style="color: var(--text-primary);"
 											data-wood="wood-light"
@@ -148,7 +148,7 @@ templ Header(user User, currentPath string) {
 											Wood Light
 										</button>
 										<button
-											@click="woodPaneling.change('wood-dark'); themeDropdownOpen = false"
+											@click="$store.theme.changeWoodPaneling('wood-dark'); themeDropdownOpen = false"
 											class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 											style="color: var(--text-primary);"
 											data-wood="wood-dark"
@@ -160,7 +160,7 @@ templ Header(user User, currentPath string) {
 											Wood Dark
 										</button>
 										<button
-											@click="woodPaneling.change('wood-mahogany'); themeDropdownOpen = false"
+											@click="$store.theme.changeWoodPaneling('wood-mahogany'); themeDropdownOpen = false"
 											class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
 											style="color: var(--text-primary);"
 											data-wood="wood-mahogany"
@@ -208,7 +208,7 @@ templ Header(user User, currentPath string) {
 									}
 									<div class="border-t my-1" style="border-color: var(--border);"></div>
 									<button
-										@click="header.logout(); userMenuOpen = false"
+										@click="$store.header.logout(); userMenuOpen = false"
 										class="block w-full text-left px-4 py-2 text-sm hover:opacity-80"
 										style="color: var(--text-primary); background-color: var(--bg-secondary);"
 									>

templates/index.templ

@@ -18,7 +18,7 @@ templ Index(loggedIn bool) {
 				<div class="relative max-w-7xl mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
 					<div class="flex justify-between items-start mb-8">
 						<div></div>
-						<select id="theme-select" @change="changeTheme()" class="px-3 py-2 border rounded text-sm" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)">
+						<select id="theme-select" @change="$store.theme.changeTheme" class="px-3 py-2 border rounded text-sm" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)">
 							<option value="tokyo-night">Tokyo Night</option>
 							<option value="dracula">Dracula</option>
 							<option value="nord">Nord</option>
@@ -120,4 +120,3 @@ templ Index(loggedIn bool) {
 		</body>
 	</html>
 }
-

templates/index_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/login.templ

@@ -15,7 +15,7 @@ templ Login(sessionExpired bool, deleted bool) {
 			<div class="container mx-auto px-4 py-8 max-w-md">
 				<div class="flex justify-between items-center mb-8">
 					<h1 class="text-3xl font-bold">Login to Bookhoard</h1>
-					<select id="theme-select" @change="changeTheme()" class="px-3 py-2 border rounded" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)">
+					<select id="theme-select" @change="$store.login.changeTheme()" class="px-3 py-2 border rounded" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)">
 						<option value="tokyo-night">Tokyo Night</option>
 						<option value="dracula">Dracula</option>
 						<option value="nord">Nord</option>
@@ -64,4 +64,3 @@ templ Login(sessionExpired bool, deleted bool) {
 		</body>
 	</html>
 }
-

templates/login_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/profile_form_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/profile_modal_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/profile_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/progress_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/queue_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/register_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/restore_system_collection_modal_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/toast_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.

templates/unlinked_books_templ.go

@@ -1,6 +1,6 @@
 // Code generated by templ - DO NOT EDIT.
 
-// templ: version: v0.3.977
+// templ: version: v0.3.1001
 package templates
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.