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 {
390 background: var(--label-color, #888);390 background: var(--label-color, #888);
391 border: 1px solid rgba(0, 0, 0, 0.25);391 border: 1px solid rgba(0, 0, 0, 0.25);
392}392}
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}
393.label-list {411.label-list {
394 margin-bottom: 1.5rem;412 margin-bottom: 1.5rem;
395}413}
challenge.txt +2 −0
@@ -0,0 +1,2 @@
1fabrica GPG key ownership verification
2fingerprint: cc43cfe5431cac1023ac650ce68958b151034ffb
challenge.txt.asc +7 −0
@@ -0,0 +1,7 @@
1-----BEGIN PGP SIGNATURE-----
2
3iHUEABYKAB0WIQTMQ8/lQxysECOsZQzmiVixUQNP+wUCamYJRgAKCRDmiVixUQNP
4+8puAP9+JYm+KC1Pri9qymTAyZYADdB1MMWNIThtvsJRcjjkCAD9EK3FvIXHDR6A
5yMtqpqagw+IMa6WWzJgY8pwbWG5AzQ4=
6=cdfD
7-----END PGP SIGNATURE-----
crates/web/src/repo.rs +14 −4
@@ -1586,11 +1586,21 @@ pub(crate) fn collaborators_card(
1586 }1586 }
1587}1587}
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.
1590pub(crate) fn label_chip(label: &model::Label) -> Markup {1592pub(crate) fn label_chip(label: &model::Label) -> Markup {
1591 html! {1593 let color = format!("--label-color: {}", css_color(&label.color));
1592 span class="label-chip" style=(format!("--label-color: {}", css_color(&label.color))) {1594 if let Some((scope, value)) = label.name.split_once(": ") {
1593 (label.name)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) }
1594 }1604 }
1595 }1605 }
1596}1606}