Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat(ui): migrate remaining pages to the new shell

Browse Source 
Apply the sidebar shell and bold primitives across the rest of the app so
the whole experience shares one visual language:

- Browse/organize: series (keeps stacked-covers/series-card CSS),
  collections (keeps wood-paneling + carousel classes), browse_detail.
- Account/stats: profile + form + modal, progress, analytics (stat-card
  tiles), devices, conflicts (status semantics), queue (status/priority
  badges).
- Admin: admin sidebar restyled with icons, dashboard/users/library/
  processing-issues/settings migrated to .card/.btn/.input primitives.
- Docs/setup/misc: docs (keeps prose/highlight.js), api_explorer, setup
  wizard, unlinked_books, custom_section builder.
- Modals/fragments: collection_modal, collection_rules,
  restore_system_collection_modal, filter_item, book_detail_modals — all
  overlays use --surface-overlay + --shadow-pop.

Every Alpine handler, HTMX attribute, id, name, and data-* is preserved;
only presentation changes.
This commit is contained in:
john-okeefe
2026-08-05 16:45:02 -04:00
parent 07578e0206
commit 8ea70ea7f8
62 changed files with 5887 additions and 3267 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/profile_modal.templ
+16 -14
View File
@@ -1,26 +1,28 @@
package templates
templ ProfileModal(user User) {
<div id="profile-modal" class="fixed inset-0 flex items-center justify-center z-50" x-data="profileModal" x-init="setupProfileModal()" style="background-color: rgba(0,0,0,0.5);">
<div class="rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto" style="background-color: var(--bg-secondary);">
<!-- Modal Header -->
<div class="flex justify-between items-center p-6 border-b" style="border-color: var(--border);">
<div>
<h2 class="text-2xl font-bold" style="color: var(--text-primary)">Edit User Profile</h2>
<p class="text-sm mt-1" style="color: var(--text-secondary);">
{ user.Username } ({ user.Email })
</p>
<div id="profile-modal" class="fixed inset-0 flex items-center justify-center z-50 p-4" x-data="profileModal" x-init="setupProfileModal()" style="background-color: var(--surface-overlay);">
<div class="card w-full max-w-4xl max-h-[90vh] overflow-y-auto" style="box-shadow: var(--shadow-pop);">
<div class="flex justify-between items-start gap-4 p-6 border-b" style="border-color: var(--border);">
<div class="flex items-center gap-3">
<span class="grid place-items-center h-10 w-10 rounded-xl shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
@Icon("edit", "h-5 w-5")
</span>
<div>
<h2 class="text-xl font-bold" style="color: var(--text-primary)">Edit User Profile</h2>
<p class="text-sm mt-0.5" style="color: var(--text-secondary);">
{ user.Username } ({ user.Email })
</p>
</div>
</div>
<button
@click="closeProfileModal()"
class="text-2xl"
style="color: var(--text-secondary);"
class="icon-btn shrink-0"
aria-label="Close"
>
&times;
@Icon("close", "h-5 w-5")
</button>
</div>
<!-- Modal Body - uses reusable form -->
<div class="p-6">
@ProfileForm(user, "/api/auth/profile/" + user.ID, false, true, true)
</div>