fabrica

hanna/fabrica

main
Switch branch
mainView all branches
Clone
HTTPS
SSH

feat(web): two-tone chips for scoped labels

68fe0ab · hanna committed on 2026-07-26

A `scope: value` label now renders as a split pill — the scope on a neutral
theme background (--fb-bg-inset / --fb-fg) and the value in the label's colour —
matching GitLab-style scoped labels. Plain labels are unchanged. Applies
everywhere labels render (issue/PR lists and views, settings) via the shared
`label_chip`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k
4 files changed · +41 −4UnifiedSplit
assets/base.css +18 −0
@@ -390,6 +390,24 @@ body.drawer-open .drawer-backdrop {
390390 background: var(--label-color, #888);
391391 border: 1px solid rgba(0, 0, 0, 0.25);
392392 }
393+/* Scoped label (`scope: value`): the scope sits on a neutral theme background,
394+ the value in the label colour. The pill clips the two segments. */
395+.label-chip-scoped {
396+ padding: 0;
397+ overflow: hidden;
398+}
399+.label-chip-scoped .label-scope,
400+.label-chip-scoped .label-value {
401+ padding: 0.1rem 0.55rem;
402+}
403+.label-chip-scoped .label-scope {
404+ background: var(--fb-bg-inset);
405+ color: var(--fb-fg);
406+}
407+.label-chip-scoped .label-value {
408+ background: var(--label-color, #888);
409+ color: #fff;
410+}
393411 .label-list {
394412 margin-bottom: 1.5rem;
395413 }
challenge.txt +2 −0
@@ -0,0 +1,2 @@
1+fabrica GPG key ownership verification
2+fingerprint: cc43cfe5431cac1023ac650ce68958b151034ffb
challenge.txt.asc +7 −0
@@ -0,0 +1,7 @@
1+-----BEGIN PGP SIGNATURE-----
2+
3+iHUEABYKAB0WIQTMQ8/lQxysECOsZQzmiVixUQNP+wUCamYJRgAKCRDmiVixUQNP
4++8puAP9+JYm+KC1Pri9qymTAyZYADdB1MMWNIThtvsJRcjjkCAD9EK3FvIXHDR6A
5+yMtqpqagw+IMa6WWzJgY8pwbWG5AzQ4=
6+=cdfD
7+-----END PGP SIGNATURE-----
crates/web/src/repo.rs +14 −4
@@ -1586,11 +1586,21 @@ pub(crate) fn collaborators_card(
15861586 }
15871587 }
15881588
1589-/// A coloured label chip.
1589+/// A coloured label chip. A scoped label (`scope: value`) renders two-tone: the
1590+/// scope on a neutral theme background, the value in the label's colour. A plain
1591+/// label is a single coloured pill.
15901592 pub(crate) fn label_chip(label: &model::Label) -> Markup {
1591- html! {
1592- span class="label-chip" style=(format!("--label-color: {}", css_color(&label.color))) {
1593- (label.name)
1593+ let color = format!("--label-color: {}", css_color(&label.color));
1594+ if let Some((scope, value)) = label.name.split_once(": ") {
1595+ html! {
1596+ span class="label-chip label-chip-scoped" style=(color) {
1597+ span class="label-scope" { (scope.trim()) }
1598+ span class="label-value" { (value.trim()) }
1599+ }
1600+ }
1601+ } else {
1602+ html! {
1603+ span class="label-chip" style=(color) { (label.name) }
15941604 }
15951605 }
15961606 }