←
TRCKR-198
Created: 2025-12-09
•
Updated: 2025-12-16
Relationships
Loading...
Attachments
Loading...
Comments (1)
agent
·
2025-12-09
Implemented modal-based entity viewing/editing for the web UI.
## Changes Made:
### 1. Modal Infrastructure (base.html)
- Added #modal-container div for dynamic modal content
- Implemented closeModal() JavaScript function with ESC key and click-outside handlers
- URL updates via history.pushState for deep linking support
### 2. Entity Detail Modals Created:
- server/templates/modals/issue_detail.html
- server/templates/modals/project_detail.html
- server/templates/modals/milestone_detail.html
Each modal includes:
- Header with entity identifier/title and close button
- Inline editing with HTMX (all fields update via PATCH without page reload)
- Comments section with add/edit/delete functionality
- Proper modal styling (max-width: 800px, scrollable content)
### 3. Table Updates:
- server/templates/partials/issues_table.html: hx-target="#modal-container"
- server/templates/partials/projects_table.html: hx-target="#modal-container"
- server/templates/partials/milestones_table.html: hx-target="#modal-container"
### 4. Form Modal Updates:
- Updated all 'New' buttons to target #modal-container
- Updated all form modals to use closeModal() function
- Updated create responses to call closeModal() instead of removing specific modal IDs
### 5. Backend Routes (server/routes/web.py):
- Changed issue detail template from "issue_detail.html" to "modals/issue_detail.html"
- Changed project detail template from "project_detail.html" to "modals/project_detail.html"
- Changed milestone detail template from "milestone_detail.html" to "modals/milestone_detail.html"
- Updated create responses to use closeModal() for consistent behavior
## Testing:
- All existing tests pass (1088 passed, 1 pre-existing failure unrelated to changes)
- Modal opens when clicking entity rows
- ESC key closes modal
- Clicking outside modal closes it
- URL updates when modal opens (supports deep linking)
- Background list remains visible and maintains state
- Inline editing works within modals
- Comments can be added/edited/deleted within modals
## User Experience Improvements:
- No full page reloads when viewing/editing entities
- Context preserved (scroll position, filters remain intact)
- Faster, more fluid interaction
- Similar to Linear's approach as requested