Clearer disabled-monitor UX (badge, dashed card, detail banner)

Author: brvier

CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to Gjallar are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.8.1] - 2026-07-06
+
+### Changed
+
+- Clearer disabled-monitor UX: a distinct dashed DISABLED badge, a dashed card
+  outline on the status page, and an explicit banner on the monitor detail page.
+
 ## [0.8.0] - 2026-07-06
 
 ### Added

internal/web/static/style.css

@@ -82,9 +82,17 @@ h2 { border-left: 4px solid var(--red); padding-left: 10px; }
 .pill.up { background: #1f2a1f; color: var(--ok); border: 1px solid #3a4a3a; }
 .pill.down { background: var(--red-dark); color: #fff; border: 1px solid var(--red); }
 .pill.pending { background: #26262c; color: var(--muted); border: 1px solid var(--border); }
-.pill.disabled { background: #26262c; color: var(--muted); border: 1px dashed #4a4a52; }
-.card.disabled { opacity: .55; }
+.pill.disabled { background: #3a3a42; color: #cfcfd6; border: 1px dashed #6a6a72; }
+.card.disabled { opacity: .75; border-style: dashed; }
 .card.disabled .ticks { display: none; }
+.banner-disabled {
+  background: #26262c;
+  border: 1px dashed #6a6a72;
+  color: var(--muted);
+  border-radius: 8px;
+  padding: 10px 14px;
+  margin: 12px 0;
+}
 
 /* uptime bars (oldest → newest) */
 .ticks { display: flex; gap: 2px; margin-top: 10px; }

internal/web/templates/_detail.tmpl

@@ -4,6 +4,10 @@
   <span class="pill {{.Status}}">{{.Status}}</span>
 </div>
 
+{{if eq .Status "disabled"}}
+<div class="banner-disabled">⏸ This monitor is disabled — no checks are running and no alerts are sent.</div>
+{{end}}
+
 <div class="stats">
   <div class="stat"><strong>{{.Uptime24h}}</strong><small>uptime 24h</small></div>
   <div class="stat"><strong>{{.Uptime30d}}</strong><small>uptime 30d</small></div>