feat(web/bugs): use styled spans for label

Amolith and Crush created 2 weeks ago

events

Display labels in bug timeline label change
events with the bug-label CSS class and
--label-color custom property instead of plain
code tags, ensuring consistent visual styling
across all label displays.

Implements: bug-f4f7a02
Co-authored-by: Crush <[e-mail]>

Change summary

pkg/web/templates/bug.html |  4 ++--
pkg/web/webui_bugs.go      | 12 ++++++------
2 files changed, 8 insertions(+), 8 deletions(-)

Detailed changes

pkg/web/templates/bug.html

@@ -72,12 +72,12 @@
       {{if .AuthorAvatar}}<img src="{{.AuthorAvatar}}" alt="" class="avatar avatar-timeline" loading="lazy" referrerpolicy="no-referrer">{{end}}<strong>{{.Author}}</strong>
       {{if .AddedLabels}}
       added label{{if gt (len .AddedLabels) 1}}s{{end}}
-      {{range $i, $label := .AddedLabels}}{{if $i}}, {{end}}<code>{{$label}}</code>{{end}}
+      {{range $i, $label := .AddedLabels}}{{if $i}}, {{end}}<span class="bug-label" style="--label-color: {{$label.Color}}">{{$label.Name}}</span>{{end}}
       {{end}}
       {{if and .AddedLabels .RemovedLabels}} and {{end}}
       {{if .RemovedLabels}}
       removed label{{if gt (len .RemovedLabels) 1}}s{{end}}
-      {{range $i, $label := .RemovedLabels}}{{if $i}}, {{end}}<code>{{$label}}</code>{{end}}
+      {{range $i, $label := .RemovedLabels}}{{if $i}}, {{end}}<span class="bug-label" style="--label-color: {{$label.Color}}">{{$label.Name}}</span>{{end}}
       {{end}}
       <time datetime="{{.Timestamp | rfc3339}}" data-tooltip="{{.Timestamp | formatDate}}">{{.Timestamp | relativeTime}}</time>
     </p>

pkg/web/webui_bugs.go

@@ -69,8 +69,8 @@ type TimelineItem struct {
 	Message       template.HTML
 	Title         string
 	Status        string
-	AddedLabels   []string
-	RemovedLabels []string
+	AddedLabels   []Label
+	RemovedLabels []Label
 }
 
 type Label struct {
@@ -256,14 +256,14 @@ func buildTimelineItems(snap *bug.Snapshot) []TimelineItem {
 			})
 
 		case *bug.LabelChangeTimelineItem:
-			added := make([]string, len(op.Added))
+			added := make([]Label, len(op.Added))
 			for i, label := range op.Added {
-				added[i] = label.String()
+				added[i] = labelToWebLabel(label)
 			}
 
-			removed := make([]string, len(op.Removed))
+			removed := make([]Label, len(op.Removed))
 			for i, label := range op.Removed {
-				removed[i] = label.String()
+				removed[i] = labelToWebLabel(label)
 			}
 
 			items = append(items, TimelineItem{