john-okeefe
05370d236a
The UI had no surface showing how many media items have been imported. Surface the total in the library switcher shown on the Dashboard, Series, and Collections pages (via the LibrarySwitcher component) and in the Bookshelf's inline library filter. - Add a MediaCount field to LibraryData and a TotalMediaCount helper to sum counts for the "All Libraries" / "All Books" option. - resolveLibrary() now fetches per-library counts (one query) and maps them onto each LibraryData entry, so the switcher reflects the active scope without changing the component's signature. - Each library option renders "(N)" and the "All" option renders the grand total across the user's visible libraries. The "All" total is the sum of the user's visible libraries, correctly respecting per-user library visibility rather than a raw global count. Regenerated templ files for library_switcher and bookshelf.
60 lines
1.8 KiB
Templ
60 lines
1.8 KiB
Templ
package templates
|
|
|
|
templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, actions ...templ.Component) {
|
|
<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);"
|
|
>
|
|
<option value="">All Libraries ({ TotalMediaCount(libData) })</option>
|
|
for _, lib := range libData {
|
|
if lib.ID == currentLibraryID {
|
|
<option value={ lib.ID } selected>{ lib.Name } ({ lib.MediaCount })</option>
|
|
} else {
|
|
<option value={ lib.ID }>{ lib.Name } ({ lib.MediaCount })</option>
|
|
}
|
|
}
|
|
</select>
|
|
</div>
|
|
if len(actions) > 0 {
|
|
<div class="flex items-center gap-2">
|
|
for _, action := range actions {
|
|
@action
|
|
}
|
|
</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>
|
|
}
|
|
|
|
templ DashboardActions() {
|
|
<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"
|
|
class="p-2 rounded-lg hover:bg-gray-700 transition-colors"
|
|
style="background-color: var(--bg-secondary);"
|
|
title="Refresh"
|
|
>
|
|
🔄
|
|
</button>
|
|
}
|