Add dashboard redesign, custom section builder, and enhanced search functionality
Features: - Complete dashboard redesign with improved UI components and layout - Implement custom section builder for personalized book organization - Add new events tracking system for user interactions - Enhance search functionality with better static search.js - Update TypeScript type definitions for API responses Backend: - Update Go dependencies in go.mod - Add new frontend routes in router Templates: - Update admin and dashboard templates with new components Frontend: - Refactor analytics, collections, conflicts, and queue modules - Add new documentation features in docs.ts - Implement linking between books and collections - Add toast notifications for user feedback - Include placeholder book SVG asset This commit consolidates multiple feature additions and improvements across the entire stack including backend, templates, and frontend.
This commit is contained in:
@@ -29,7 +29,7 @@ func Admin(user User) templ.Component {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Admin Dashboard - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Admin Dashboard - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><script src=\"/static/admin.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -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)\">Settings</h3><p style=\"color: var(--text-secondary)\" class=\"text-sm\">Configure your preferences</p></div></div><a href=\"/profile\" class=\"mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded\">Manage Settings</a></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 onclick=\"quickScan()\" class=\"btn-primary p-4 rounded-lg text-left\"><div class=\"font-medium\">Scan Library</div><div style=\"color: var(--text-secondary)\" class=\"text-sm\">Find new ebooks in your folders</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></div></main></div><script>\n function quickScan() {\n fetch('/api/scanner/scan', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': 'Bearer ' + localStorage.getItem('token')\n },\n body: JSON.stringify({\n folder_paths: []\n })\n }).then(res => res.json()).then(data => {\n alert(data.message || 'Scan completed successfully!');\n }).catch(err => {\n console.error('Scan error:', err);\n alert('Scan failed. Please check your folder configuration.');\n });\n }\n\n function logout() {\n localStorage.removeItem('token');\n localStorage.removeItem('user');\n window.location.href = '/';\n }\n\n document.addEventListener('DOMContentLoaded', function() {\n loadTheme();\n });\n </script></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)\">Settings</h3><p style=\"color: var(--text-secondary)\" class=\"text-sm\">Configure your preferences</p></div></div><a href=\"/profile\" class=\"mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded\">Manage Settings</a></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 onclick=\"scanAllLibraries()\" class=\"btn-primary p-4 rounded-lg text-left\"><div class=\"font-medium\">Scan Library</div><div style=\"color: var(--text-secondary)\" class=\"text-sm\">Find new ebooks in your folders</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 onclick=\"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 onclick=\"window.location.reload()\" class=\"btn-primary px-4 py-2 rounded-lg\">Refresh to View Books</button> <button onclick=\"hideScanProgress()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Dismiss</button></div></div></div></div></main></div><script>\n function logout() {\n localStorage.removeItem('token');\n localStorage.removeItem('user');\n window.location.href = '/';\n }\n\n document.addEventListener('DOMContentLoaded', function() {\n loadTheme();\n });\n </script></body></html>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
+174
-140
@@ -8,81 +8,87 @@ import (
|
||||
templ Dashboard(user User, sections []handlers.SectionData, libData []LibraryData, currentLibraryID string, errorMessage string) {
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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/toast.js"></script>
|
||||
<script src="/static/api.js"></script>
|
||||
<script src="/static/events.js"></script>
|
||||
<script src="/static/dashboard.js"></script>
|
||||
<link href="/static/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="theme-{ user.Theme }">
|
||||
@Header(user, "/dashboard")
|
||||
|
||||
<!-- Sticky Library Selector -->
|
||||
<div class="sticky top-0 z-40 bg-opacity-95 backdrop-blur border-b" style="background-color: var(--bg-primary);">
|
||||
<div class="w-full px-4 py-3 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="text-sm font-medium" style="color: var(--text-secondary)">Library:</label>
|
||||
<select id="library-select" name="library_id"
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<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/toast.js"></script>
|
||||
<script src="/static/api.js"></script>
|
||||
<script src="/static/events.js"></script>
|
||||
<script src="/static/dashboard.js"></script>
|
||||
<link href="/static/style.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="theme-{ user.Theme }">
|
||||
@Header(user, "/dashboard")
|
||||
<!-- Sticky Library Selector -->
|
||||
<div class="sticky top-0 z-40 bg-opacity-95 backdrop-blur border-b" style="background-color: var(--bg-primary);">
|
||||
<div class="w-full px-4 py-3 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="text-sm font-medium" style="color: var(--text-secondary)">Library:</label>
|
||||
<select
|
||||
id="library-select"
|
||||
name="library_id"
|
||||
class="px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-secondary); color: var(--text-primary);"
|
||||
data-action="switch-library">
|
||||
for _, lib := range libData {
|
||||
if lib.ID == currentLibraryID {
|
||||
<option value={ lib.ID } selected>{ lib.Name }</option>
|
||||
} else {
|
||||
<option value={ lib.ID }>{ lib.Name }</option>
|
||||
data-action="switch-library"
|
||||
>
|
||||
for _, lib := range libData {
|
||||
if lib.ID == currentLibraryID {
|
||||
<option value={ lib.ID } selected>{ lib.Name }</option>
|
||||
} else {
|
||||
<option value={ lib.ID }>{ lib.Name }</option>
|
||||
}
|
||||
}
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<button data-action="open-dashboard-settings"
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<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 data-action="reload-page"
|
||||
title="Customize Dashboard"
|
||||
>
|
||||
⚙️
|
||||
</button>
|
||||
<button
|
||||
data-action="reload-page"
|
||||
class="p-2 rounded-lg hover:bg-gray-700 transition-colors"
|
||||
style="background-color: var(--bg-secondary);"
|
||||
title="Refresh">
|
||||
🔄
|
||||
</button>
|
||||
title="Refresh"
|
||||
>
|
||||
🔄
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="loading-spinner"
|
||||
class="hidden fixed inset-0 bg-opacity-50 flex items-center justify-center z-50"
|
||||
style="background-color: var(--bg-primary);"
|
||||
>
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2" style="border-color: var(--accent);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="loading-spinner" class="hidden fixed inset-0 bg-opacity-50 flex items-center justify-center z-50"
|
||||
style="background-color: var(--bg-primary);">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2" style="border-color: var(--accent);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collections Container -->
|
||||
<main id="collections-container" class="w-full px-4 py-8">
|
||||
for _, section := range sections {
|
||||
@CollectionCarousel(section)
|
||||
}
|
||||
</main>
|
||||
|
||||
<!-- Dashboard Settings Modal -->
|
||||
@DashboardSettingsModal(sections)
|
||||
|
||||
@ErrorToast(errorMessage)
|
||||
<script src="/static/woodPanelingInit.js"></script>
|
||||
</body>
|
||||
<!-- Collections Container -->
|
||||
<main id="collections-container" class="w-full px-4 py-8">
|
||||
for _, section := range sections {
|
||||
@CollectionCarousel(section)
|
||||
}
|
||||
</main>
|
||||
<!-- Dashboard Settings Modal -->
|
||||
@DashboardSettingsModal(sections)
|
||||
@ErrorToast(errorMessage)
|
||||
<script src="/static/woodPanelingInit.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
||||
templ CollectionCarousel(section handlers.SectionData) {
|
||||
<div class="dashboard-collection mb-8"
|
||||
data-collection-id={ section.ID }
|
||||
data-is-system={ section.IsSystem }>
|
||||
<div
|
||||
class="dashboard-collection mb-8"
|
||||
data-collection-id={ section.ID }
|
||||
data-is-system={ section.IsSystem }
|
||||
>
|
||||
<!-- Collection Header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -94,53 +100,56 @@ templ CollectionCarousel(section handlers.SectionData) {
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
if section.ViewAllURL != "" {
|
||||
<a href={ section.ViewAllURL }
|
||||
class="text-sm font-medium hover:underline transition-colors"
|
||||
style="color: var(--accent);">
|
||||
<a
|
||||
href={ section.ViewAllURL }
|
||||
class="text-sm font-medium hover:underline transition-colors"
|
||||
style="color: var(--accent);"
|
||||
>
|
||||
View All →
|
||||
</a>
|
||||
}
|
||||
</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
|
||||
<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={ section.ID }
|
||||
data-direction="-1"
|
||||
aria-label="Scroll left">
|
||||
data-action="scroll-carousel"
|
||||
data-collection-id={ section.ID }
|
||||
data-direction="-1"
|
||||
aria-label="Scroll left"
|
||||
>
|
||||
<span class="text-3xl pl-2" style="color: var(--text-primary);">‹</span>
|
||||
</button>
|
||||
|
||||
<div id="carousel-track-{ section.ID }"
|
||||
class="carousel-track flex gap-4 overflow-x-auto
|
||||
<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;">
|
||||
style="scrollbar-width: none; -ms-overflow-style: none;"
|
||||
>
|
||||
for _, item := range section.Items {
|
||||
@BookCard(item)
|
||||
}
|
||||
|
||||
if len(section.Items) == 0 {
|
||||
<div class="text-center py-8 w-full" style="color: var(--text-secondary);">
|
||||
<p>No items in this collection</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button class="carousel-nav-right absolute right-0 top-1/2 -translate-y-1/2 z-10
|
||||
<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={ section.ID }
|
||||
data-direction="1"
|
||||
aria-label="Scroll right">
|
||||
data-action="scroll-carousel"
|
||||
data-collection-id={ section.ID }
|
||||
data-direction="1"
|
||||
aria-label="Scroll right"
|
||||
>
|
||||
<span class="text-3xl pr-2" style="color: var(--text-primary);">›</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -148,32 +157,38 @@ templ CollectionCarousel(section handlers.SectionData) {
|
||||
}
|
||||
|
||||
templ BookCard(item handlers.BookInfo) {
|
||||
<div class="book-card flex-shrink-0 w-32 snap-start cursor-pointer
|
||||
<div
|
||||
class="book-card flex-shrink-0 w-32 snap-start cursor-pointer
|
||||
transition-transform duration-200 hover:scale-105"
|
||||
data-action="view-book"
|
||||
data-book-id={ item.MediaItemID }
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label={ "View " + item.Title }>
|
||||
<div class="aspect-[2/3] rounded-lg overflow-hidden shadow-lg mb-2
|
||||
bg-gradient-to-br from-gray-700 to-gray-900">
|
||||
data-action="view-book"
|
||||
data-book-id={ item.MediaItemID }
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label={ "View " + item.Title }
|
||||
>
|
||||
<div
|
||||
class="aspect-[2/3] rounded-lg overflow-hidden shadow-lg mb-2
|
||||
bg-gradient-to-br from-gray-700 to-gray-900"
|
||||
>
|
||||
if item.CoverImagePath != "" {
|
||||
<img src={ item.CoverImagePath }
|
||||
alt={ item.Title }
|
||||
class="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
onerror="this.src='/static/placeholder-book.svg'">
|
||||
<img
|
||||
src={ item.CoverImagePath }
|
||||
alt={ item.Title }
|
||||
class="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
onerror="this.src='/static/placeholder-book.svg'"
|
||||
/>
|
||||
} else {
|
||||
<img src="/static/placeholder-book.svg"
|
||||
alt={ item.Title }
|
||||
class="w-full h-full object-cover">
|
||||
<img
|
||||
src="/static/placeholder-book.svg"
|
||||
alt={ item.Title }
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
<h3 class="font-semibold text-sm line-clamp-2" style="color: var(--text-primary)">
|
||||
{ item.Title }
|
||||
</h3>
|
||||
|
||||
if item.Author != "" {
|
||||
<p class="text-xs line-clamp-1" style="color: var(--text-secondary)">
|
||||
{ item.Author }
|
||||
@@ -183,31 +198,38 @@ templ BookCard(item handlers.BookInfo) {
|
||||
}
|
||||
|
||||
templ DashboardSettingsModal(sections []handlers.SectionData) {
|
||||
<div id="dashboard-settings-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center"
|
||||
style="background-color: rgba(0, 0, 0, 0.7);">
|
||||
<div class="rounded-lg p-6 w-full max-w-2xl mx-4 shadow-2xl"
|
||||
style="background-color: var(--bg-secondary);">
|
||||
<div
|
||||
id="dashboard-settings-modal"
|
||||
class="hidden fixed inset-0 z-50 flex items-center justify-center"
|
||||
style="background-color: rgba(0, 0, 0, 0.7);"
|
||||
>
|
||||
<div
|
||||
class="rounded-lg p-6 w-full max-w-2xl mx-4 shadow-2xl"
|
||||
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 data-action="close-dashboard-settings"
|
||||
class="p-2 hover:bg-gray-700 rounded transition-colors">
|
||||
<button
|
||||
data-action="close-dashboard-settings"
|
||||
class="p-2 hover:bg-gray-700 rounded transition-colors"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-sm mb-4" style="color: var(--text-secondary);">
|
||||
Drag to reorder collections, toggle visibility with the switch.
|
||||
</p>
|
||||
|
||||
<!-- Draggable Collection List -->
|
||||
<div id="collection-list" class="space-y-2 mb-6">
|
||||
for _, section := range sections {
|
||||
<div class="collection-item flex items-center justify-between p-3 rounded border
|
||||
<div
|
||||
class="collection-item flex items-center justify-between p-3 rounded border
|
||||
cursor-move select-none"
|
||||
data-collection-id={ section.ID }
|
||||
data-is-system={ fmt.Sprintf("%v", section.IsSystem) }
|
||||
draggable="true"
|
||||
style="background-color: var(--bg-primary); border-color: var(--border);">
|
||||
data-collection-id={ section.ID }
|
||||
data-is-system={ fmt.Sprintf("%v", section.IsSystem) }
|
||||
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>
|
||||
@@ -218,55 +240,67 @@ templ DashboardSettingsModal(sections []handlers.SectionData) {
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
if section.IsSystem {
|
||||
<button data-action="restore-system-collection"
|
||||
data-collection-name={ section.ID }
|
||||
class="text-xs px-3 py-1 rounded border hover:opacity-80 transition-opacity"
|
||||
style="border-color: var(--border); color: var(--text-secondary);"
|
||||
title="Restore { section.Title } to defaults">
|
||||
<button
|
||||
data-action="restore-system-collection"
|
||||
data-collection-name={ section.ID }
|
||||
class="text-xs px-3 py-1 rounded border hover:opacity-80 transition-opacity"
|
||||
style="border-color: var(--border); color: var(--text-secondary);"
|
||||
title="Restore { section.Title } to defaults"
|
||||
>
|
||||
Restore
|
||||
</button>
|
||||
}
|
||||
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox"
|
||||
class="sr-only peer"
|
||||
checked
|
||||
data-action="toggle-collection-visibility"
|
||||
data-collection-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
|
||||
<input
|
||||
type="checkbox"
|
||||
class="sr-only peer"
|
||||
checked
|
||||
data-action="toggle-collection-visibility"
|
||||
data-collection-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:bg-blue-600"
|
||||
></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Items Per Section Slider -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">
|
||||
Items per Collection: <span id="items-count-display" class="font-bold">20</span>
|
||||
</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"
|
||||
data-action="update-items-count"
|
||||
target="items-count-display">
|
||||
<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"
|
||||
data-action="update-items-count"
|
||||
target="items-count-display"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<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);">
|
||||
<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 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);">
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user