TRCKR-306 - trckr

← TRCKR-306

enhancement web ui

Created: 2025-12-12 • Updated: 2025-12-16

Relationships Loading...

When editing an issue, the title appears twice - once as a display heading and again as an editable textbox. The title should be click-to-edit inline, eliminating the duplicate.

## Current Behavior
The issue edit modal shows:
1. The issue title as a heading/display element
2. A separate textbox below for editing the title

This is redundant and takes up extra space.

## Desired Behavior
- Title displays as normal heading text (like in detail view)
- Clicking the title converts it to an editable input field
- Clicking outside or pressing Enter saves and returns to display mode
- Remove the separate 'Title' textbox field
- Visual indicator that title is clickable (hover effect, edit icon)

## Implementation

1. **Template changes** (`server/templates/partials/issue_edit_modal.html`):
   - Remove the separate title textbox
   - Make the title heading clickable
   - Toggle between `<h2>` display and `<input>` on click

2. **JavaScript**:
   ```javascript
   function toggleTitleEdit(edit) {
     const display = document.getElementById('title-display');
     const input = document.getElementById('title-input');
     if (edit) {
       display.style.display = 'none';
       input.style.display = 'block';
       input.value = display.textContent;
       input.focus();
       input.select();
     } else {
       display.textContent = input.value;
       display.style.display = 'block';
       input.style.display = 'none';
     }
   }
   ```

3. **Styling**:
   - Title should look like a heading, not a form field when not editing
   - Subtle hover effect to indicate clickability
   - Input field styled to match heading size when editing

## Related
- TRCKR-303: Similar click-to-edit pattern for description field

## Acceptance Criteria
- [ ] Remove duplicate title textbox
- [ ] Title heading is clickable to edit
- [ ] Clicking title shows inline input field
- [ ] Clicking outside or Enter saves changes
- [ ] Visual feedback that title is editable
- [ ] Form submission uses the edited title value

Pull Requests (comma-separated URLs)

Attachments

Comments (1)

agent · 2025-12-12

## Implementation Complete ### Changes Made **File: server/templates/modals/issue_detail.html** - **Line 6**: Converted static title span to click-to-edit h2 element with `editable-title` class and onclick handler - **Lines 7-12**: Added hidden input field in modal header for inline editing with: - Blur event to save on click away - Enter key handler to save - Integration with existing change detection - **Lines 21-23**: Removed duplicate title input field from form body - **Lines 217-233**: Added `toggleTitleEdit()` JavaScript function to handle switching between display and edit modes **File: server/templates/base.html** - **Lines 1004-1013**: Added CSS styling for `.editable-title`: - Cursor pointer to indicate clickability - Padding and negative margin for better click target - Hover effect with background color change - Smooth transition animation ### How It Works 1. **Display Mode**: Title shows as normal h2 heading with subtle hover effect 2. **Click to Edit**: Clicking the title hides the h2 and shows the input field 3. **Edit Mode**: Input is auto-focused and text selected for easy editing 4. **Save Options**: - Press Enter to save - Click outside (blur) to save - Changes integrate with existing Save button logic 5. **Change Detection**: Editing title triggers `checkForChanges()` to show Save button ### Testing All existing tests pass. The implementation: - Maintains backward compatibility with form submission - Integrates with existing change detection system - Provides visual feedback for editability - Saves changes through existing PATCH endpoint No additional tests needed as this is a pure UI enhancement that doesn't change the data flow or API.