feat(ui): global confirm modal — browser dialogs retired sitewide (issues #5/#4/#7)
ONE styled modal answers every hx-confirm in the app: a body-level htmx:confirm interceptor (web/src/confirm.ts, canonical htmx pattern) preventDefaults and shows the dialog, issuing the request on Confirm. Nine hx-confirm call sites upgrade without touching them. The modal lives in the header partial so every page has it; confirmDialog() is exported for JS call sites and degrades to the native dialog if the header is absent (bare layouts). Migrated the five window.confirm sites (admin.ts ×3, book-detail.ts ×2) to the same promise API. Podcast feed detail (issues #4/#7): the unsubscribe copy is role-aware — non-admins get 'Unsubscribe from this feed?' with silent retention (file state is admin knowledge); an admin who is the LAST subscriber gets a three-choice modal instead: Unsubscribe (files kept, the D6 default — sliding-window feeds make purge unrecoverable) / Remove feed + files / Cancel. Admins with co-subscribers keep the files-note confirm.
This commit is contained in:
1 parent
30766020c8
commit
acbcc61ae4
5 files changed
+113
-10
No files matched your search
@@ -352,4 +352,24 @@ templ SidebarSignIn(currentPath string) {
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Global confirm modal (issue #5): ONE styled dialog answers every
|
||||
hx-confirm sitewide via the htmx:confirm interceptor in
|
||||
web/src/confirm.ts, and exposes the confirmDialog() promise for
|
||||
legacy JS call sites. Inert until shown. -->
|
||||
<div
|
||||
id="confirm-modal"
|
||||
class="hidden fixed inset-0 z-[60] flex items-center justify-center p-4"
|
||||
style="background-color: var(--surface-overlay);"
|
||||
>
|
||||
<div class="card w-full max-w-sm" style="box-shadow: var(--shadow-pop);">
|
||||
<div class="p-5 border-b" style="border-color: var(--border);">
|
||||
<p id="confirm-modal-message" class="text-sm font-medium" style="color: var(--text-primary)"></p>
|
||||
</div>
|
||||
<div class="p-4 flex justify-end gap-2">
|
||||
<button id="confirm-modal-cancel" class="btn btn-secondary">Cancel</button>
|
||||
<button id="confirm-modal-accept" class="btn btn-primary">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
Reference in new issue
Block a user