feat(dashboard): move This Week stats into the library bar as a popover
Release / build-and-push (push) Successful in 3m11s
Release / build-and-push (push) Successful in 3m11s
The "This Week" reading-stats strip leaves its full-width row below the subbar and now lives inside the library bar itself, between the switcher and the customize/refresh actions. Expanding it opens an absolutely positioned popover that FLOATS over the collections — opening the stats no longer shifts the page down. - LibrarySwitcher gains an optional `center` component slot rendered between the left group and the actions group (nil = unused). Series and collections call sites pass nil and render byte-identical output. - DashboardWeekWidget redesigned for the slot: compact inline summary (icon, "This Week", minutes; pages/sessions/books/streak reveal at md/lg/xl) and a card popover panel with the labeled grid, sync note, and the Full stats link moved in from the old summary row. - Panel anchoring is responsive: below `sm` it anchors to the sticky bar itself (details goes static; bar-anchored left-4/right-4, i.e. screen-centered); at `sm`+ the details is relative again and the panel centers on the widget (w-[30rem], translate-x centering). - On phones the summary collapses to the chart icon + chevron (bar row width is scarce); "This Week"/minutes reveal at `sm`, and the "Your Library" title hides below `sm` to keep the row from overlapping. Icon-only toggle carries an aria-label. - web/src/dashboard.ts: click-outside and Escape close the popover, re-querying #week-widget per event because htmx replaces it on library switches. Rendering untouched (behavior-only island). - id="week-widget" and all htmx wiring unchanged: week-refresh refetch + the /dashboard/week-widget fragment still drive library-scoped refreshes behind the switch fade; stats-off suppression now yields an empty slot via weekWidgetComponent instead of a hidden strip. - web/static/style.css rebuilt for the new utilities. Known behavior (unchanged or deliberate): the bar is sticky, so stats stay visible while scrolling; a library switch re-renders the details closed; scopes with no current-week reading show zeros (e.g. Manga).
This commit is contained in:
1 parent
f6a73ab5aa
commit
8c97f59453
10 files changed
+299
-234
No files matched your search
@@ -1,6 +1,13 @@
|
||||
package templates
|
||||
|
||||
templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, title string, actions ...templ.Component) {
|
||||
// LibrarySwitcher renders the sticky subbar: title + library select on
|
||||
// the left (title hidden below `sm` — phones need the row width for the
|
||||
// select + actions + the dashboard's stats widget), optional action
|
||||
// buttons on the right. `center` is an
|
||||
// optional slot between them (nil = unused) — the dashboard passes its
|
||||
// "This Week" stats widget here so it participates in the bar's
|
||||
// justify-between layout as the middle group.
|
||||
templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, title string, center templ.Component, actions ...templ.Component) {
|
||||
<div
|
||||
class="app-subbar backdrop-blur border-b"
|
||||
style="background-color: color-mix(in srgb, var(--bg-primary) 88%, transparent); border-color: color-mix(in srgb, var(--text-primary) 6%, transparent);"
|
||||
@@ -8,7 +15,7 @@ templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, title stri
|
||||
<div class="w-full px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
if title != "" {
|
||||
<span class="text-base font-bold tracking-tight shrink-0" style="color: var(--text-primary)">{ title }</span>
|
||||
<span class="text-base font-bold tracking-tight shrink-0 hidden sm:inline" style="color: var(--text-primary)">{ title }</span>
|
||||
} else {
|
||||
<label class="text-sm font-medium" style="color: var(--text-secondary)">Library</label>
|
||||
}
|
||||
@@ -33,6 +40,9 @@ templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, title stri
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
if center != nil {
|
||||
@center
|
||||
}
|
||||
if len(actions) > 0 {
|
||||
<div class="flex items-center gap-2">
|
||||
for _, action := range actions {
|
||||
|
||||
Reference in new issue
Block a user