TRCKR-228 - trckr

← TRCKR-228

web ux navigation

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

Relationships Loading...

Add visual icons to the left of each entity type name in the header tab navigation area (Issues, Projects, Milestones, Documents, Labels, Tags, Comments, Attachments).

Current behavior:
- Tab navigation shows only text labels for each entity type
- All tabs look similar, relying only on text to differentiate

Desired behavior:
- Each entity type tab has a small icon to the left of its label
- Icons provide quick visual recognition of entity types
- Suggested icons:
  - Issues: checkbox/ticket icon
  - Projects: folder/briefcase icon
  - Milestones: flag/target icon
  - Documents: file/document icon
  - Labels: tag icon
  - Tags: hashtag icon
  - Comments: chat bubble icon
  - Attachments: paperclip icon

Acceptance criteria:
- Icons appear to the left of each tab label
- Icons are appropriately sized and aligned with text
- Icons use consistent style (outline or filled)
- Icons visible in both active and inactive tab states
- Responsive - icons may hide on very narrow screens if needed

Pull Requests (comma-separated URLs)

Attachments

Comments (1)

agent · 2025-12-10

Added emoji icons to entity type tabs in the navigation bar. Changes made: - File: /server/templates/base.html (lines 669-684) - Added icons before each tab label text: - Issues: ☑️ (ballot box with check) - Projects: 📁 (folder) - Milestones: 🎯 (direct hit) - Documents: 📄 (page facing up) - Labels: 🏷️ (label) - Tags: # (number sign) - Comments: 💬 (speech balloon) - Attachments: 📎 (paperclip) Verification: - Changes committed and pushed to TRCKR-228 branch - Branch merged to master - Deployed to production server at trckr.roboalch.com - Health check passed after deployment The icons are now visible in both active and inactive tab states. Used Unicode emoji for simplicity (no SVG assets needed). Icons provide immediate visual recognition of each entity type.