Add show-failing-only property to the monitor widget

internal/assets/static/main.css

@@ -1509,4 +1509,5 @@ kbd:active {
 .margin-bottom-10   { margin-bottom: 1rem; }
 .margin-bottom-15   { margin-bottom: 1.5rem; }
 .margin-bottom-auto { margin-bottom: auto; }
+.padding-block-5    { padding-block: 0.5rem; }
 .scale-half         { transform: scale(0.5); }

internal/assets/templates/monitor.html

@@ -10,13 +10,24 @@
     {{ end }}
 </ul>
 {{ else }}
+
+{{ if not (and .ShowFailingOnly (not .HasFailing)) }}
 <ul class="dynamic-columns">
     {{ range .Sites }}
+    {{ if and $.ShowFailingOnly (eq .StatusStyle "ok" ) }} {{ continue }} {{ end }}
     <div class="flex items-center gap-15">
         {{ template "site" . }}
     </div>
     {{ end }}
 </ul>
+{{ else }}
+<div class="flex items-center justify-center gap-10 padding-block-5">
+    <p>All sites are online</p>
+    <svg class="shrink-0" style="width: 1.7rem;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+    </svg>
+</div>
+{{ end }}
 {{ end }}
 {{ end }}