0.35.4

src/admin/web/css/20-shell.css

@@ -175,6 +175,37 @@ nav {
   align-items: center;
 }
 
+.app-health-button {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  padding: 6px 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.app-health-button i {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.app-health-button.is-checking,
+.app-health-summary.is-checking { color: var(--muted); }
+.app-health-button.is-ok,
+.app-health-summary.is-ok,
+.app-health-check.is-ok { color: var(--green); }
+.app-health-button.is-warning,
+.app-health-summary.is-warning,
+.app-health-check.is-warning { color: var(--notice-text); }
+.app-health-button.is-error,
+.app-health-summary.is-error,
+.app-health-check.is-error { color: var(--red); }
+
+.app-health-button:hover { opacity: .82; }
+
 .nav {
   display: flex;
   align-items: center;
@@ -216,11 +247,71 @@ nav {
   padding-top: 32px;
 }
 
-.sidebar-bottom p {
-  font-size: 11px;
-  line-height: 1.9;
-  color: var(--text-subtle);
-  margin: 13px 0 26px;
+.app-health-dialog {
+  width: min(620px, calc(100vw - 24px));
+}
+
+.app-health-card {
+  display: grid;
+  gap: 14px;
+}
+
+.app-health-summary {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.app-health-summary>i {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  margin-top: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.app-health-summary strong {
+  color: currentColor;
+  font-size: 15px;
+}
+
+.app-health-summary .fine {
+  margin: 3px 0 0;
+}
+
+.app-health-checks {
+  display: grid;
+  gap: 7px;
+}
+
+.app-health-check {
+  display: grid;
+  grid-template-columns: 9px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 9px 10px;
+  border: 1px solid var(--line);
+  background: var(--neutral-soft);
+}
+
+.app-health-check>i {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.app-health-check strong {
+  color: var(--text);
+  font-size: 12px;
+}
+
+.app-health-check .fine {
+  margin: 2px 0 0;
+  color: var(--muted);
 }
 
 main {