Fix collections page Alpine errors and modal container issues

Fixed multiple issues preventing the collections page and modals from working correctly:

1. Alpine Expression Error on page load:
   - Added missing semicolon between function calls in x-init directive
   - Added missing parentheses to initializeCollectionWebSocket() call
   - Collections page now loads without JavaScript errors

2. Modal container removal bug:
   - Fixed closeCollectionModal() removing #modal-container parent element
   - Changed from modal.parentElement.remove() to modal.remove()
   - Modal can now be opened and closed multiple times without errors
   - Fixes htmx:targetError when trying to open modal after first close

3. Emoji grid display:
   - Modal now properly preserves container across open/close cycles
   - setupHTMXModalInit() can successfully repopulate icon grid
   - Emoji picker displays correctly on all modal opens

Technical details:
- templates/collections.templ: Fixed x-init syntax errors
- web/src/collections.ts: Fixed modal close logic to preserve container
- Modal container persists across HTMX swaps, allowing repeated use
This commit is contained in:
2026-03-28 21:20:58 -04:00
parent 9dccdfbde0
commit 75df623982
3 changed files with 6 additions and 6 deletions
+2 -2
View File
@@ -302,8 +302,8 @@ function selectColor(color: string): void {
// Close modal (removes from DOM)
function closeCollectionModal(): void {
const modal = document.querySelector(".fixed.inset-0");
if (modal && modal.parentElement) {
modal.parentElement.remove();
if (modal) {
modal.remove();
}
}