From 46d23bf565e5e8a836294753f93e5656fd7eb91c Mon Sep 17 00:00:00 2001
From: agent-company <agent@leeworks.dev>
Date: Mon, 20 Apr 2026 15:11:39 +0000
Subject: [PATCH] feat: render label badge pills using actual Gitea label hex
 colors

Update all label spans in issue/PR list and detail templates to use
background-color with the actual hex color from Gitea, replacing the
previous text-color-only styling. Add label-pill CSS class with text
shadow for readability against colored backgrounds.

Closes leeworks-agents/gitea-mobile#193

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 internal/templates/issue_detail.html | 2 +-
 internal/templates/issues.html       | 2 +-
 internal/templates/pull_detail.html  | 2 +-
 internal/templates/pulls.html        | 2 +-
 static/style.css                     | 5 +++++
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/internal/templates/issue_detail.html b/internal/templates/issue_detail.html
index a4e66d0..8915b49 100644
--- a/internal/templates/issue_detail.html
+++ b/internal/templates/issue_detail.html
@@ -14,7 +14,7 @@
     </span>
     <span>{{.Issue.RepoOwner}}/{{.Issue.RepoName}} #{{.Issue.Number}}</span>
     {{range .Issue.Labels}}
-    <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
+    <span class="label label-pill" style="background-color:#{{.Color}};color:#fff;border:1px solid #{{.Color}}">{{.Name}}</span>
     {{end}}
   </div>
   {{if .RenderedBody}}
diff --git a/internal/templates/issues.html b/internal/templates/issues.html
index 684ad5d..435b879 100644
--- a/internal/templates/issues.html
+++ b/internal/templates/issues.html
@@ -5,7 +5,7 @@
     <div class="card-meta">
       <span>{{.RepoOwner}}/{{.RepoName}} #{{.Number}}</span>
       {{range .Labels}}
-      <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
+      <span class="label label-pill" style="background-color:#{{.Color}};color:#fff;border:1px solid #{{.Color}}">{{.Name}}</span>
       {{end}}
       {{if .Assignee}}
       <img src="{{.Assignee.AvatarURL}}" alt="{{.Assignee.Login}}" class="avatar" title="Assigned to {{.Assignee.Login}}">
diff --git a/internal/templates/pull_detail.html b/internal/templates/pull_detail.html
index 0d3aff8..f5a5c26 100644
--- a/internal/templates/pull_detail.html
+++ b/internal/templates/pull_detail.html
@@ -7,7 +7,7 @@
     {{if eq .Pull.State "closed"}}<span class="state-closed">{{.Pull.State}}</span>{{else}}<span class="state-open">{{.Pull.State}}</span>{{end}}
     <span>{{.Pull.RepoOwner}}/{{.Pull.RepoName}} #{{.Pull.Number}}</span>
     {{range .Pull.Labels}}
-    <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
+    <span class="label label-pill" style="background-color:#{{.Color}};color:#fff;border:1px solid #{{.Color}}">{{.Name}}</span>
     {{end}}
   </div>
   <div class="card-meta" style="margin-top:0.5rem;">
diff --git a/internal/templates/pulls.html b/internal/templates/pulls.html
index 51dee24..20816bd 100644
--- a/internal/templates/pulls.html
+++ b/internal/templates/pulls.html
@@ -8,7 +8,7 @@
     <div class="card-meta">
       <span>{{.RepoOwner}}/{{.RepoName}} #{{.Number}}</span>
       {{range .Labels}}
-      <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
+      <span class="label label-pill" style="background-color:#{{.Color}};color:#fff;border:1px solid #{{.Color}}">{{.Name}}</span>
       {{end}}
       <span class="diff-add">+{{.Additions}}</span>
       <span class="diff-del">-{{.Deletions}}</span>
diff --git a/static/style.css b/static/style.css
index 7159040..c4f59ea 100644
--- a/static/style.css
+++ b/static/style.css
@@ -176,6 +176,11 @@ a:active {
   white-space: nowrap;
 }
 
+.label-pill {
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  font-weight: 600;
+}
+
 .type-badge {
   font-size: 0.65rem;
   text-transform: uppercase;