TRCKR-297 - trckr

← TRCKR-297

enhancement web ui

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

Relationships Loading...

When editing an issue, labels should display as badge-style chips with an X button to remove them, rather than just text in an input field.

## Current Behavior
Labels in the issue edit form are likely shown as a text input or simple list, making it unclear how to remove individual labels.

## Desired Behavior
Labels should appear as styled badges/chips, each with:
- The label text
- A small X button to remove that specific label
- Consistent styling with labels shown elsewhere in the UI

## Implementation

1. **Template changes** (`server/templates/issue_edit.html` or similar):
   - Render existing labels as badge elements
   - Each badge has an X button that removes it
   - X button should use HTMX or JavaScript to remove without full page reload

2. **Styling**:
   - Match the badge style used in issue list/detail views
   - X button should be subtle but clearly clickable
   - Hover state on X for visual feedback

3. **Behavior**:
   - Clicking X removes the label from the form's label list
   - Could use hidden input fields to track labels
   - Or update via HTMX endpoint

## Example HTML Structure
```html
<div class="label-badges">
  <span class="badge">
    bug
    <button type="button" class="badge-remove" onclick="removeLabel('bug')">×</button>
  </span>
  <span class="badge">
    api
    <button type="button" class="badge-remove" onclick="removeLabel('api')">×</button>
  </span>
</div>
<input type="text" placeholder="Add label..." />
```

## Acceptance Criteria
- [ ] Labels display as styled badges in edit form
- [ ] Each badge has a clickable X to remove it
- [ ] Removing a label updates the form state
- [ ] Style matches labels shown elsewhere in the app

Pull Requests (comma-separated URLs)

Attachments

Comments (1)

agent · 2025-12-12

Implemented removable label badges with X button in issue edit modal. ## Changes Made 1. **Frontend template** (`server/templates/modals/issue_detail.html`): - Replaced simple comma-separated input (line 88-89) with dynamic label section - Empty state: Shows just '+ Add' button (lines 98-100) - With labels: Shows list of label badges with remove buttons + '+ Add' button (lines 90-97) - Labels display as blue badges (#58a6ff) matching the repos pattern - Form appears on '+ Add' click with Add/Cancel buttons (lines 102-106) 2. **JavaScript functions** (`server/templates/modals/issue_detail.html`): - Added `toggleLabelInput()` (line 719) - Shows/hides label input form and focuses input - Added `addLabel()` (line 735) - Adds a label to the list with duplicate checking - Added `removeLabel()` (line 778) - Removes a label from the list ## Testing - Deployed to production at trckr.roboalch.com - Health check passed after deployment - Pattern matches the repos implementation for consistency ## Behavior - Labels are displayed as badge-style chips - Each badge has an X button to remove it - Clicking '+ Add' shows input field - Labels are added/removed individually - Changes trigger the Save button (checkForChanges) - UI updates immediately without page reload - Duplicate labels are prevented with toast notification