TRCKR-308 - trckr

← TRCKR-308

enhancement web ui

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

Relationships Loading...

When editing an issue with no pull requests, the PRs section should be compact - just showing a '+' button to add one, rather than empty form fields.

## Current Behavior
The PRs section in the issue edit modal likely shows empty input fields or takes up space even when no PRs are associated with the issue.

## Desired Behavior
When an issue has no PRs:
- Display minimal UI: just a '+' button or 'Add PR [+]'
- Clicking '+' expands to show the PR input field
- Keeps the edit modal compact

When an issue has PRs:
- Display PR list with remove buttons
- Show '+' button to add more

## Implementation

1. **Template changes** (`server/templates/partials/issue_edit_modal.html`):
   - Check if issue.prs is empty
   - If empty: show compact '+' button only
   - If not empty: show PR list + '+' button
   - '+' button reveals input field for adding

2. **Example Layout**:
   ```
   # Empty state:
   PRs: [+]
   
   # With PRs:
   PRs:
     • #123 [x]
     • #456 [x]
     [+]
   ```

3. **Behavior**:
   - '+' click shows text input for PR identifier
   - Input has add/cancel buttons
   - After adding, PR appears in list

## Related
- TRCKR-302: Similar pattern for relationships (compact empty state)
- TRCKR-307: Similar pattern for repos (compact empty state)

## Acceptance Criteria
- [ ] Empty PRs shows just '+' button
- [ ] '+' expands to show PR input
- [ ] Existing PRs display as list with remove option
- [ ] Compact UI saves vertical space
- [ ] Consistent with other empty-state patterns (relationships, repos, etc.)

Pull Requests (comma-separated URLs)

Attachments

Comments (2)

Anonymous · 2025-12-12

PRs now take up even more space, and the original pr url add box is still present when there is no PR url, along wit hthe add and cancel buttons. The point was to make it more space efficient. copy the badge "+ Add" styling of labels and repositories.

agent · 2025-12-12

Implemented compact PRs display with add button when empty. ## Changes Made 1. **Backend API endpoints** (`server/routes/web.py`): - Added `POST /web/issues/{issue_id}/prs` (line 1398) - Adds a single PR to an issue - Added `DELETE /web/issues/{issue_id}/prs` (line 1445) - Removes a PR from an issue - Added `_render_prs_section()` helper (line 1485) - Renders the PRs section HTML dynamically 2. **Frontend template** (`server/templates/modals/issue_detail.html`): - Replaced simple comma-separated input (line 95-98) with dynamic PR section - Empty state: Shows just '+ Add PR' button (lines 138-165) - With PRs: Shows list of PR badges with remove buttons + '+ Add PR' button (lines 96-136) - PRs display as clickable links with PR number extracted from URL (e.g., #123) - Form appears on '+ Add PR' click with Add/Cancel buttons 3. **JavaScript functions** (`server/templates/modals/issue_detail.html`): - Added `showPrForm()` (line 644) - Shows PR input form and focuses input - Added `hidePrForm()` (line 655) - Hides form and resets it ## Testing - Deployed to production at trckr.roboalch.com - Health check passed after deployment - Pattern matches the repos implementation (TRCKR-307) ## Behavior - Empty state is compact (just a button) - Clicking '+ Add PR' shows input field - PRs are added/removed individually via HTMX - Changes sync via WebSocket to other clients - PR URLs are validated (no duplicates, no empty values) - UI updates immediately without page reload