john-okeefe
28e40e302c
- Header: sticky app-wide, active nav highlighting, data-driven theme picker with active swatch, unified SVG icons, deduped login fragment (was duplicated verbatim for desktop + mobile), removed stray console.log - LibrarySwitcher: cleaner sticky bar, SVG action icons, theme-aware - BookCard: the atomic unit now has a real surface (was floating text when wood-paneling was off due to an undefined --wood-border), with cohesive shadow + hover lift; reused across dashboard/bookshelf/series - Dashboard: calmer section headers, snap carousels with SVG chevrons - Bookshelf: recompose the filter wall into a search toolbar + collapsible Filters panel (all 9 filters + save/load/clear preserved), redesigned empty state and pagination - Book detail, series, collections, browse: cohesive cards, SVG action icons, uppercase muted labels, theme-aware badges/links
334 lines
14 KiB
Templ
334 lines
14 KiB
Templ
package templates
|
|
|
|
templ Header(user User, currentPath string) {
|
|
<nav
|
|
x-data="header"
|
|
x-init="initializeSearch(); initializeTheme(); loadWoodPaneling(); updateWoodPanelingIndicators(); restoreLibrarySelection(); initializeScanListener()"
|
|
class="header-nav border-b border-line bg-surface-raised/95 backdrop-blur shadow-bar"
|
|
>
|
|
<div class="w-full px-4 sm:px-6 lg:px-8">
|
|
<div class="flex h-16 items-center gap-4">
|
|
<!-- Brand -->
|
|
<a href="/dashboard" class="flex items-center gap-2 text-lg font-bold tracking-tight text-content transition-colors hover:text-brand">
|
|
@Icon("book-open", "h-6 w-6 text-brand")
|
|
<span>Bookhoard</span>
|
|
<!-- Scan progress indicator -->
|
|
<svg
|
|
x-show="scanning"
|
|
x-cloak
|
|
class="h-4 w-4 animate-spin text-brand"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
|
</svg>
|
|
<span x-show="scanning && scanProgress > 0" x-cloak x-text="scanProgress + '%'" class="text-xs font-normal text-content-muted"></span>
|
|
</a>
|
|
|
|
<!-- Primary nav -->
|
|
<div class="hidden nav:flex items-center gap-1">
|
|
<a href="/dashboard" class={ navItemClass(currentPath, "/dashboard") }>Library</a>
|
|
<a href="/bookshelf" class={ navItemClass(currentPath, "/bookshelf") }>All Books</a>
|
|
<a href="/series" class={ navItemClass(currentPath, "/series") }>Series</a>
|
|
<a href="/collections" class={ navItemClass(currentPath, "/collections") }>Collections</a>
|
|
<a href="/progress" class={ navItemClass(currentPath, "/progress") }>Progress</a>
|
|
<a href="/devices" class={ navItemClass(currentPath, "/devices") }>Devices</a>
|
|
</div>
|
|
|
|
<!-- Search (center, grows) -->
|
|
<div class="hidden nav:flex flex-1 max-w-xl mx-auto">
|
|
<div class="relative w-full">
|
|
<div class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-content-muted">
|
|
@Icon("search", "h-4 w-4")
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="header-search"
|
|
placeholder="Search your library…"
|
|
class="input pl-9"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right cluster -->
|
|
<div class="hidden nav:flex items-center gap-1">
|
|
<!-- Theme picker -->
|
|
<div class="relative" x-data="{ themeDropdownOpen: false }">
|
|
<button @click="themeDropdownOpen = !themeDropdownOpen" type="button" class="icon-btn" aria-label="Change theme">
|
|
@Icon("palette", "h-5 w-5")
|
|
</button>
|
|
<div
|
|
x-show="themeDropdownOpen"
|
|
x-cloak
|
|
@click.outside="themeDropdownOpen = false"
|
|
x-transition:enter="transition ease-out duration-150"
|
|
x-transition:enter-start="opacity-0 -translate-y-1"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-100"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
class="absolute right-0 mt-2 w-72 rounded-xl border border-line bg-surface-raised p-3 shadow-pop"
|
|
style="display: none;"
|
|
>
|
|
<p class="px-1 pb-2 text-xs font-semibold uppercase tracking-wide text-content-muted">Theme</p>
|
|
<div class="grid grid-cols-1 gap-1">
|
|
for _, t := range ThemeOptions {
|
|
<button
|
|
@click={ "changeTheme('" + t.Name + "'); themeDropdownOpen = false" }
|
|
type="button"
|
|
class="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-sm text-content transition-colors hover:bg-surface-hover"
|
|
if t.Name == user.Theme {
|
|
class="flex w-full items-center gap-3 rounded-lg bg-surface-hover px-2 py-2 text-sm font-medium text-content"
|
|
}
|
|
>
|
|
<span class="h-4 w-4 shrink-0 rounded-full border border-line" style={ "background-color: " + t.Color }></span>
|
|
<span class="flex-1 text-left">{ t.Label }</span>
|
|
if t.Name == user.Theme {
|
|
@Icon("check", "h-4 w-4 text-brand")
|
|
}
|
|
</button>
|
|
}
|
|
</div>
|
|
<div class="mt-3 border-t border-line pt-3">
|
|
<p class="px-1 pb-2 text-xs font-semibold uppercase tracking-wide text-content-muted">Bookshelf background</p>
|
|
<div class="grid grid-cols-1 gap-1">
|
|
for _, w := range WoodOptions {
|
|
<button
|
|
@click={ "changeWoodPaneling('" + w.Name + "'); themeDropdownOpen = false" }
|
|
type="button"
|
|
data-wood={ w.Name }
|
|
class="wood-paneling-btn flex w-full items-center gap-3 rounded-lg px-2 py-2 text-sm text-content transition-colors hover:bg-surface-hover"
|
|
>
|
|
if w.Name == "none" {
|
|
<span class="h-4 w-4 shrink-0 rounded-full border border-line bg-surface"></span>
|
|
} else {
|
|
<span
|
|
class="h-4 w-4 shrink-0 rounded-full border border-line"
|
|
style={ "background-image: url('/static/textures/" + w.Name + ".png'); background-size: cover;" }
|
|
></span>
|
|
}
|
|
<span class="flex-1 text-left">{ w.Label }</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User menu / login -->
|
|
<div class="relative" x-data="{ userMenuOpen: false }">
|
|
if user.ID != "" {
|
|
<button @click="userMenuOpen = !userMenuOpen" type="button" class="flex items-center gap-2 rounded-lg p-1.5 pr-2 text-content transition-colors hover:bg-surface-hover" aria-label="Account menu">
|
|
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-brand/15 text-brand">
|
|
@Icon("user", "h-5 w-5")
|
|
</span>
|
|
<span class="hidden sm:block text-sm font-medium">{ user.Username }</span>
|
|
</button>
|
|
<div
|
|
x-show="userMenuOpen"
|
|
x-cloak
|
|
@click.outside="userMenuOpen = false"
|
|
x-transition:enter="transition ease-out duration-150"
|
|
x-transition:enter-start="opacity-0 -translate-y-1"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-100"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
class="absolute right-0 mt-2 w-52 rounded-xl border border-line bg-surface-raised p-1.5 shadow-pop"
|
|
style="display: none;"
|
|
>
|
|
<div class="px-3 py-2">
|
|
<p class="text-sm font-semibold text-content">{ user.Username }</p>
|
|
if user.Email != "" {
|
|
<p class="truncate text-xs text-content-muted">{ user.Email }</p>
|
|
}
|
|
</div>
|
|
<div class="my-1 border-t border-line"></div>
|
|
<a href="/profile" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover">
|
|
@Icon("user", "h-4 w-4 text-content-muted")
|
|
Profile
|
|
</a>
|
|
if user.Role == "admin" {
|
|
<a href="/admin" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover">
|
|
@Icon("shield", "h-4 w-4 text-content-muted")
|
|
Admin Panel
|
|
</a>
|
|
}
|
|
<div class="my-1 border-t border-line"></div>
|
|
<button @click="logout()" type="button" class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-danger transition-colors hover:bg-danger/10">
|
|
@Icon("logout", "h-4 w-4")
|
|
Logout
|
|
</button>
|
|
</div>
|
|
} else {
|
|
<button @click="userMenuOpen = !userMenuOpen" type="button" class="flex items-center gap-2 rounded-lg p-1.5 pr-2 text-content transition-colors hover:bg-surface-hover" aria-label="Login">
|
|
<span class="flex h-8 w-8 items-center justify-center rounded-full bg-brand/15 text-brand">
|
|
@Icon("user", "h-5 w-5")
|
|
</span>
|
|
<span class="hidden sm:block text-sm font-medium">Login</span>
|
|
</button>
|
|
<div
|
|
x-show="userMenuOpen"
|
|
x-cloak
|
|
@click.outside="userMenuOpen = false"
|
|
x-transition:enter="transition ease-out duration-150"
|
|
x-transition:enter-start="opacity-0 -translate-y-1"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-100"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
class="absolute right-0 mt-2 w-72 rounded-xl border border-line bg-surface-raised p-4 shadow-pop"
|
|
style="display: none;"
|
|
>
|
|
@HeaderLoginForm("", currentPath)
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu toggle -->
|
|
<button
|
|
@click="mobileMenuOpen = !mobileMenuOpen"
|
|
type="button"
|
|
class="icon-btn nav:hidden"
|
|
aria-label="Toggle menu"
|
|
>
|
|
@Icon("menu", "h-5 w-5")
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile drawer -->
|
|
<div
|
|
x-show="mobileMenuOpen"
|
|
x-cloak
|
|
@click.outside="mobileMenuOpen = false"
|
|
x-data="{ mobileThemeOpen: false }"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 -translate-y-2"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 -translate-y-2"
|
|
class="nav:hidden border-t border-line bg-surface-raised"
|
|
style="display: none;"
|
|
>
|
|
<div class="space-y-1 px-4 py-4">
|
|
<!-- Mobile search -->
|
|
<div class="relative mb-3">
|
|
<div class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-content-muted">
|
|
@Icon("search", "h-4 w-4")
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="header-search-mobile"
|
|
placeholder="Search your library…"
|
|
class="input pl-9"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<a href="/dashboard" class={ navItemClass(currentPath, "/dashboard") }>@Icon("library", "h-4 w-4") Library</a>
|
|
<a href="/bookshelf" class={ navItemClass(currentPath, "/bookshelf") }>@Icon("book", "h-4 w-4") All Books</a>
|
|
<a href="/series" class={ navItemClass(currentPath, "/series") }>@Icon("layers", "h-4 w-4") Series</a>
|
|
<a href="/collections" class={ navItemClass(currentPath, "/collections") }>@Icon("folder", "h-4 w-4") Collections</a>
|
|
<a href="/progress" class={ navItemClass(currentPath, "/progress") }>@Icon("clock", "h-4 w-4") Progress</a>
|
|
<a href="/devices" class={ navItemClass(currentPath, "/devices") }>@Icon("device", "h-4 w-4") Devices</a>
|
|
|
|
<div class="my-2 border-t border-line"></div>
|
|
|
|
<!-- Theme accordion -->
|
|
<button @click="mobileThemeOpen = !mobileThemeOpen" type="button" class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover">
|
|
@Icon("palette", "h-4 w-4 text-content-muted")
|
|
<span>Theme</span>
|
|
<svg class={ "ml-auto h-4 w-4 transition-transform " } :class="{ 'rotate-180': mobileThemeOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<div x-show="mobileThemeOpen" x-cloak x-transition class="space-y-1 pl-3">
|
|
for _, t := range ThemeOptions {
|
|
<button
|
|
@click={ "changeTheme('" + t.Name + "'); mobileThemeOpen = false" }
|
|
type="button"
|
|
class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover"
|
|
>
|
|
<span class="h-4 w-4 rounded-full border border-line" style={ "background-color: " + t.Color }></span>
|
|
{ t.Label }
|
|
</button>
|
|
}
|
|
<div class="my-1 border-t border-line"></div>
|
|
for _, w := range WoodOptions {
|
|
<button
|
|
@click={ "changeWoodPaneling('" + w.Name + "'); mobileThemeOpen = false" }
|
|
type="button"
|
|
data-wood={ w.Name }
|
|
class="wood-paneling-btn flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover"
|
|
>
|
|
if w.Name == "none" {
|
|
<span class="h-4 w-4 rounded-full border border-line bg-surface"></span>
|
|
} else {
|
|
<span class="h-4 w-4 rounded-full border border-line" style={ "background-image: url('/static/textures/" + w.Name + ".png'); background-size: cover;" }></span>
|
|
}
|
|
{ w.Label }
|
|
</button>
|
|
}
|
|
</div>
|
|
|
|
<div class="my-2 border-t border-line"></div>
|
|
|
|
if user.ID != "" {
|
|
<a href="/profile" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover">
|
|
@Icon("user", "h-4 w-4 text-content-muted")
|
|
Profile
|
|
</a>
|
|
if user.Role == "admin" {
|
|
<a href="/admin" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-content transition-colors hover:bg-surface-hover">
|
|
@Icon("shield", "h-4 w-4 text-content-muted")
|
|
Admin Panel
|
|
</a>
|
|
}
|
|
<button @click="logout()" type="button" class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-danger transition-colors hover:bg-danger/10">
|
|
@Icon("logout", "h-4 w-4")
|
|
Logout
|
|
</button>
|
|
} else {
|
|
<div class="rounded-xl border border-line bg-surface p-4">
|
|
@HeaderLoginForm("-mobile", currentPath)
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<script type="module" src="/static/main.js"></script>
|
|
}
|
|
|
|
// HeaderLoginForm renders the compact inline login form used in the header
|
|
// dropdown (desktop) and mobile drawer. suffix is appended to element ids so
|
|
// the two instances do not collide.
|
|
templ HeaderLoginForm(suffix string, currentPath string) {
|
|
<form
|
|
hx-post="/api/auth/login"
|
|
hx-target={ "#login-result" + suffix }
|
|
hx-swap="innerHTML"
|
|
class="space-y-3"
|
|
>
|
|
<input type="hidden" name="redirect" value={ currentPath }/>
|
|
<div>
|
|
<label class="mb-1 block text-xs font-medium text-content-muted">Email or Username</label>
|
|
<input type="text" name="login" class="input" required/>
|
|
</div>
|
|
<div>
|
|
<label class="mb-1 block text-xs font-medium text-content-muted">Password</label>
|
|
<input type="password" name="password" class="input" required/>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-full">Sign In</button>
|
|
</form>
|
|
<div id={ "login-result" + suffix }></div>
|
|
<div class="my-3 border-t border-line"></div>
|
|
<a href="/register" class="block text-center text-sm text-content-muted transition-colors hover:text-content">
|
|
Don't have an account? Sign Up
|
|
</a>
|
|
}
|