Skip to main content

max / makenotwork

Bring the last four class names onto the kebab-case rule
Author: Max Johnson <me@maxj.phd> · 2026-08-02 21:37 UTC
Signed with PGP, not checked
Commit: 69ff54fc26e7bc73f53d449244cec27831ce3625
Parent: 1e8a270
4 files changed, +31 insertions, -12 deletions
M server/static/style.css +7 -7
@@ -51,7 +51,7 @@
51 51 .modal + .modal-overlay
52 52 .empty-state + --compact / --chart / --lg
53 53 .progress-bar-container + .progress-bar (--slim, --rounded, --highlight)
54 - .upload-status + __row + __msg.is-success / .is-error
54 + .upload-status + -row + -msg.is-success / .is-error
55 55 .field-status / .save-status + .success / .error / .saving
56 56 .toast + .toast--success / --error / --warning
57 57 .breadcrumb / .pagination
@@ -7064,7 +7064,7 @@
7064 7064 .git-diff-file-stats { margin-left: auto; font-size: var(--text-fine); }
7065 7065 .git-diff-file-stats .additions { color: var(--diff-add); }
7066 7066 .git-diff-file-stats .deletions { color: var(--diff-del); margin-left: var(--gap-bound); }
7067 - .diff-status-A, .diff-status-D, .diff-status-M, .diff-status-R {
7067 + .diff-status-added, .diff-status-deleted, .diff-status-modified, .diff-status-renamed {
7068 7068 display: inline-block;
7069 7069 width: 1.2rem;
7070 7070 text-align: center;
@@ -7074,10 +7074,10 @@
7074 7074 border-radius: 2px;
7075 7075 line-height: 1.4;
7076 7076 }
7077 - .diff-status-A { background: #d4edda; color: #155724; }
7078 - .diff-status-D { background: #f8d7da; color: #721c24; }
7079 - .diff-status-M { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); color: var(--warning); }
7080 - .diff-status-R { background: #d1ecf1; color: #0c5460; }
7077 + .diff-status-added { background: #d4edda; color: #155724; }
7078 + .diff-status-deleted { background: #f8d7da; color: #721c24; }
7079 + .diff-status-modified { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); color: var(--warning); }
7080 + .diff-status-renamed { background: #d1ecf1; color: #0c5460; }
7081 7081 .git-diff-table {
7082 7082 width: 100%;
7083 7083 border-collapse: collapse;
@@ -11193,7 +11193,7 @@
11193 11193 }
11194 11194 .synckit-billing-status--draft { background: var(--surface-sunken); }
11195 11195 .synckit-billing-status--active { background: color-mix(in oklch, var(--success) 12%, var(--surface-page)); color: var(--success); }
11196 - .synckit-billing-status--suspended_unpaid { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); color: var(--warning); }
11196 + .synckit-billing-status--past-due { background: color-mix(in oklch, var(--warning) 14%, var(--surface-page)); color: var(--warning); }
11197 11197 .synckit-billing-status--canceled { background: color-mix(in oklch, var(--danger) 10%, var(--surface-page)); color: var(--danger); }
11198 11198 .synckit-billing-price { font-weight: 600; }
11199 11199 .synckit-billing-body {
M server/src/git/mod.rs +4 -4
@@ -126,10 +126,10 @@
126 126
127 127 pub fn css_class(&self) -> &'static str {
128 128 match self {
129 - Self::Added => "diff-status-A",
130 - Self::Deleted => "diff-status-D",
131 - Self::Modified => "diff-status-M",
132 - Self::Renamed => "diff-status-R",
129 + Self::Added => "diff-status-added",
130 + Self::Deleted => "diff-status-deleted",
131 + Self::Modified => "diff-status-modified",
132 + Self::Renamed => "diff-status-renamed",
133 133 }
134 134 }
135 135 }
M server/src/types/dashboard.rs +19
@@ -169,6 +169,25 @@
169 169 pub more_keys: bool,
170 170 }
171 171
172 + impl SyncAppBillingView {
173 + /// The `--modifier` suffix for the status pill.
174 + ///
175 + /// Kept apart from [`Self::status`] because that is a database enum and
176 + /// `suspended_unpaid` carries an underscore, which the design system's
177 + /// kebab-case rule forbids in a class name. Interpolating the raw value
178 + /// meant the stylesheet had to mirror the schema's spelling, so a column
179 + /// rename would have silently unstyled the pill.
180 + pub fn status_class(&self) -> &'static str {
181 + match self.status.as_str() {
182 + "draft" => "draft",
183 + "active" => "active",
184 + "suspended_unpaid" => "past-due",
185 + "canceled" => "canceled",
186 + _ => "unknown",
187 + }
188 + }
189 + }
190 +
172 191 /// One row in the per-key usage list rendered in the SyncKit billing panel.
173 192 #[derive(Clone)]
174 193 #[allow(dead_code)] // Fields used by Askama template
M server/templates/partials/synckit_billing_panel.html +1 -1
@@ -22,7 +22,7 @@
22 22 data-storage-rate="{{ b.storage_rate_cents }}"
23 23 data-base-floor-cents="{{ b.base_floor_cents }}">
24 24 <summary class="synckit-billing-summary">
25 - <span class="synckit-billing-status synckit-billing-status--{{ b.status }}">
25 + <span class="synckit-billing-status synckit-billing-status--{{ b.status_class() }}">
26 26 {% if b.is_internal %}Internal{% else if b.status == "draft" %}Draft{% else if b.status == "active" %}Active{% else if b.status == "suspended_unpaid" %}Past due{% else if b.status == "canceled" %}Canceled{% else %}{{ b.status }}{% endif %}
27 27 </span>
28 28 {% if !b.price_display.is_empty() %}