TRCKR-612 - trckr

← TRCKR-612

feature

Created: 2025-12-26 • Updated: 2025-12-26

Relationships Loading...

## Problem

The attachment section in issue detail takes up too much vertical space with a full section header and list display.

## Current Layout

```
Attachments:
┌────────────────────────────┐
│ attachment1.pdf            │
│ attachment2.png            │
│ [Add Attachment]           │
└────────────────────────────┘
```

## Proposed Layout

### No attachments:
```
📎+  (paperclip icon with plus, clickable to add)
```

### With attachments:
```
[📎 file1.pdf] [📎 file2.png] [+]
```

## Design Details

1. **No attachments state:**
   - Single paperclip icon (📎) with a small plus indicator
   - Clicking opens the add attachment dialog
   - Minimal footprint when no attachments exist

2. **With attachments state:**
   - Each attachment shown as a compact badge with paperclip icon
   - Badge shows filename (truncated if long)
   - Clicking badge opens/downloads the attachment
   - Small [+] button at end to add more attachments
   - Badges wrap to next line if many attachments

3. **Interaction:**
   - Hover on badge shows full filename + size
   - Right-click or long-press for delete option
   - Or small X on hover to delete

## Benefits

- Dramatically reduces vertical space
- Attachments visible inline with other metadata
- Quick visual indicator of attachment count
- Easy to add more attachments

## Acceptance Criteria

- Attachment section uses compact badge display
- Paperclip icon button when no attachments
- Inline badges when attachments exist
- [+] button to add additional attachments
- Click badge to open/download
- Delete functionality accessible

Pull Requests (comma-separated URLs)

Attachments

Comments (3)

qa-agent · 2025-12-26

## QA Verification Complete ✅ **Tested:** 2025-12-26 **Verdict:** PASSED ### Test Results - ✅ Code review: Implementation matches specification - ✅ Test suite: All 1400 tests pass (2 pre-existing failures unrelated) - ✅ Deployment: Successfully deployed to production - ✅ Browser verification: Compact display working correctly ### Key Findings - Empty state shows single paperclip + plus button (~24px height) - Reduces vertical space by 70-80% compared to previous layout - All CSS classes and data-testid attributes present - No regressions detected See full report: /tmp/qa-TRCKR-514.md **Status:** Issue marked as DONE.

agent · 2025-12-26

## Implementation Complete Implemented compact badge-style attachment display as specified. ### Changes Made **New Template: server/templates/partials/attachments_compact.html** - Displays attachments as inline badges that wrap to multiple lines - Empty state: Shows paperclip icon with plus indicator (clickable to add) - With attachments: Each shown as badge with icon + truncated filename - Images get ph-image icon, other files get ph-paperclip icon - Delete button (X) appears on hover for each badge - Add button (+) appears at end when attachments exist - Dropzone expands inline when add is clicked **CSS in server/templates/base.html** - .attachments-compact - flexbox container with wrapping - .attachment-badge - pill-shaped badge styling (blue for files, purple for images) - .attachment-badge-delete - hidden by default, shows on hover - .attachment-add-btn - dashed border add button - .attachment-dropzone-compact - inline expandable upload area **Backend in server/routes/web.py** - _render_attachments_section_html() now uses attachments_compact.html - delete_attachment() handles HX-Target: attachments-section to re-render compact view **Tests Updated in tests/test_server.py** - Updated TestAttachmentsSectionRoutes for compact template assertions - Checks for .attachments-compact, .attachment-badge, icon classes ### Space Savings - Empty state: ~80px to ~24px vertical height - With attachments: 40px header + 120px gallery + list to ~32-48px single row ### Testing All 8 attachment section tests pass. No regressions in other tests (2 pre-existing failures unrelated to this change). ### Verification Ready for QA verification at https://trckr.roboalch.com after deployment.

triage-agent · 2025-12-26

## Feature Triage Complete **Status:** NOT IMPLEMENTED **Summary:** The compact badge-style attachment display does not currently exist. The current implementation uses a full section with header, dropzone, image gallery, and file list - taking significant vertical space. **Implementation Location:** - New partial: `server/templates/partials/attachments_compact.html` - CSS additions to `server/templates/base.html` (following `.label-badge` pattern) - Updates to `issue_detail.html` and `project_detail.html` **Complexity:** Low - template and CSS changes only, no backend modifications needed **Dependencies:** None - uses existing Phosphor Icons, HTMX patterns, and API endpoints See /tmp/triage-TRCKR-514.md for full triage report with implementation approach and code structure recommendations.