refactor(templates): migrate collections page to HTMX modals

Refactor collections.templ to use HTMX-powered modals instead of
client-side JavaScript modals. This aligns with project guidelines
for server-side rendering and progressive enhancement.

Key changes:

1. Remove inline modal HTML and JavaScript:
   - Delete hardcoded create-modal div with inline form
   - Remove all inline JavaScript (showCreateModal, hideCreateModal,
     selectColor, handleCreate, viewCollection, editCollection,
     deleteCollection, logout)

2. Add HTMX modal infrastructure:
   - Add modal container div: <div id="modal-container"></div>
   - Load modals dynamically via hx-get attributes
   - Remove JavaScript modal toggling functions

3. Refactor collection cards for event delegation:
   - Change from <a> wrapper to <div> with onclick="navigateToCollection()"
   - Add data-href attribute for navigation target
   - Wrap edit/delete buttons in separate container to prevent
     unwanted card navigation when clicking buttons

4. Update buttons to use HTMX:
   - Create button: hx-get="/collections/create-modal"
   - Edit button: hx-get="/collections/{id}/edit-modal"
   - Delete button: hx-delete="/api/collections/{id}" with hx-confirm
   - Restore System button: hx-get="/collections/restore-modal"

5. Remove redundant forms:
   - Delete empty-state "Create Your First Collection" button's
     inline onclick (now uses HTMX like the main create button)

6. Add external JavaScript:
   - Load /static/collections.js for helper functions
     (navigateToCollection, setupHTMXAuth, etc.)

Benefits:
- Smaller initial page load (modal HTML loaded on-demand)
- Server-side rendering follows project guidelines
- Progressive enhancement (page works without JavaScript)
- Consistent with auth page modal pattern
- Easier to maintain (modal logic separated into dedicated templates)

This commit is contained in:

john-okeefe

2026-03-01 21:00:20 -05:00

parent d70a770504

commit bdc3dcff96

2 changed files with 173 additions and 236 deletions

templates/collections_templ.go

+115 -63

View File

File diff suppressed because one or more lines are too long