john-okeefe
bdc3dcff96
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)
2026-03-01 21:00:20 -05:00
..
2026-03-01 00:29:39 -05:00
2026-02-24 13:03:01 -05:00
2026-03-01 00:29:39 -05:00
2026-02-24 13:41:19 -05:00
2026-02-26 10:12:02 -05:00
2026-03-01 00:29:39 -05:00
2026-02-24 13:03:01 -05:00
2026-02-26 10:11:52 -05:00
2026-02-24 13:41:19 -05:00
2026-02-24 13:03:01 -05:00
2026-03-01 00:29:39 -05:00
2026-02-02 09:35:37 -05:00
2026-03-01 00:29:39 -05:00
2026-02-24 13:03:01 -05:00
2026-03-01 21:00:14 -05:00
2026-03-01 21:00:07 -05:00
2026-03-01 00:29:39 -05:00
2026-02-21 00:59:42 -05:00
2026-03-01 21:00:20 -05:00
2026-03-01 21:00:20 -05:00
2026-03-01 00:29:39 -05:00
2026-02-24 13:03:01 -05:00
2026-03-01 00:29:39 -05:00
2026-02-20 13:25:49 -05:00
2026-03-01 12:22:36 -05:00
2026-03-01 12:22:36 -05:00
2026-03-01 00:29:39 -05:00
2026-02-24 13:03:01 -05:00
2026-03-01 00:29:39 -05:00
2026-02-21 00:59:42 -05:00
2026-03-01 00:29:39 -05:00
2026-02-20 13:25:35 -05:00
2026-03-01 00:29:39 -05:00
2026-02-24 13:01:45 -05:00
2026-02-24 10:26:31 -05:00
2026-02-24 10:25:06 -05:00
2026-02-24 10:26:31 -05:00
2026-02-24 10:25:06 -05:00
2026-03-01 00:29:39 -05:00
2026-02-24 12:58:57 -05:00
2026-03-01 00:29:39 -05:00
2026-02-22 01:58:02 -05:00
2026-02-22 01:58:02 -05:00
2026-02-22 01:58:02 -05:00
2026-03-01 00:29:39 -05:00
2026-02-24 13:03:01 -05:00
2026-03-01 00:29:39 -05:00
2026-02-24 13:03:01 -05:00
2026-02-24 10:26:31 -05:00
2026-02-24 10:25:06 -05:00
2026-03-01 21:00:14 -05:00
2026-03-01 21:00:07 -05:00
2026-02-20 13:25:35 -05:00
2026-02-20 13:25:35 -05:00
2026-02-22 01:58:02 -05:00
2026-03-01 00:29:39 -05:00
2026-02-24 13:03:01 -05:00
2026-03-01 00:29:39 -05:00