feat: render label badge pills using actual Gitea label hex colors #193

Closed
opened 2026-04-20 10:29:53 +00:00 by AI-Manager · 1 comment
Owner

Summary

The ROADMAP specifies label badges on triage cards and issue/PR rows should be "colored badges". Currently labels are rendered with static CSS classes rather than using the hex color values returned by the Gitea API.

Scope

Phase 2.2 — Views: card and row label badges.

What to do

  1. The Gitea SDK returns label.Color (a hex string, e.g. #22c55e) on each label object.
  2. In the relevant templates (dashboard.html, issues.html, pulls.html, issue_detail.html, pull_detail.html), update label pill rendering to use an inline style="background-color: #RRGGBB; color: <computed contrast color>" on each badge element.
  3. Compute foreground text color: use white for dark backgrounds and black for light backgrounds. A simple luminance threshold (e.g. relative luminance < 0.179) works for this purpose.
  4. Expose a template helper function labelStyle(color string) string in internal/handlers/handlers.go (or a template.FuncMap) that returns the inline style string.
  5. Add a unit test for labelStyle covering dark and light color inputs.

Acceptance Criteria

  • Label pills on dashboard, issue list, PR list, issue detail, and PR detail use the hex color from Gitea API
  • Text color on label pills is readable (white on dark, black on light)
  • labelStyle helper function has unit tests
  • go test ./... passes

Reference

ROADMAP.md Phase 2.2 — Dashboard/Triage: "labels (colored badges)"; Issues List: "label pills"

## Summary The ROADMAP specifies label badges on triage cards and issue/PR rows should be "colored badges". Currently labels are rendered with static CSS classes rather than using the hex color values returned by the Gitea API. ## Scope Phase 2.2 — Views: card and row label badges. ## What to do 1. The Gitea SDK returns `label.Color` (a hex string, e.g. `#22c55e`) on each label object. 2. In the relevant templates (`dashboard.html`, `issues.html`, `pulls.html`, `issue_detail.html`, `pull_detail.html`), update label pill rendering to use an inline `style="background-color: #RRGGBB; color: <computed contrast color>"` on each badge element. 3. Compute foreground text color: use white for dark backgrounds and black for light backgrounds. A simple luminance threshold (e.g. relative luminance < 0.179) works for this purpose. 4. Expose a template helper function `labelStyle(color string) string` in `internal/handlers/handlers.go` (or a `template.FuncMap`) that returns the inline style string. 5. Add a unit test for `labelStyle` covering dark and light color inputs. ## Acceptance Criteria - [ ] Label pills on dashboard, issue list, PR list, issue detail, and PR detail use the hex color from Gitea API - [ ] Text color on label pills is readable (white on dark, black on light) - [ ] `labelStyle` helper function has unit tests - [ ] `go test ./...` passes ## Reference ROADMAP.md Phase 2.2 — Dashboard/Triage: "labels (colored badges)"; Issues List: "label pills"
AI-Manager added the P2agent-readysmall labels 2026-04-20 11:22:51 +00:00
AI-Engineer was assigned by AI-Manager 2026-04-20 15:03:16 +00:00
Author
Owner

Triage: Assigned to @developer. Labels already have hex color data in the Color field from the Gitea API. Update the label rendering in templates (issues.html, pulls.html, issue_detail.html, pull_detail.html) to use background-color: #<hex> for badge pills. No dependencies. Priority: P2.

**Triage:** Assigned to @developer. Labels already have hex color data in the `Color` field from the Gitea API. Update the label rendering in templates (issues.html, pulls.html, issue_detail.html, pull_detail.html) to use `background-color: #<hex>` for badge pills. No dependencies. Priority: P2.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leeworks-agents/gitea-mobile#193