Build the System Health settings page

config/dot/quickshell/modules/settings/SettingsSidebar.qml

@@ -36,7 +36,7 @@ Rectangle {
         { page: "power", label: "Power & Lock", icon: "\u{F0425}" },
         { page: "datetime", label: "Date & Time", icon: "\u{F0954}" },
         { page: "applications", label: "Applications", icon: "\u{F003B}" },
-        { page: "services", label: "Startup & Services", icon: "\u{F0493}" },
+        { page: "services", label: "System Health", icon: "\u{F0493}" },
         { page: "about", label: "About Panama", icon: "\u{F02FD}" }
     ]
 
@@ -297,8 +297,34 @@ Rectangle {
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         height: 54
-        color: Theme.alpha(Theme.bg, 0.35)
-        border.width: 0
+        activeFocusOnTab: true
+        color: footerTap.hovered || activeFocus
+            ? Theme.alpha(Theme.fg, 0.07)
+            : Theme.alpha(Theme.bg, 0.35)
+        border.width: activeFocus ? 2 : 0
+        border.color: Theme.accent
+
+        function footerText(): string {
+            if (Health.checks.length === 0)
+                return Health.diagnosticUnavailable ? "Health check unavailable" : "Checking Panama desktop";
+            if (Health.status === "error")
+                return "Panama requires attention";
+            if (Health.status === "warning") {
+                const count = Health.summary.warnings + Health.summary.errors;
+                return count + (count === 1 ? " health observation" : " health observations");
+            }
+            return "Panama desktop is healthy";
+        }
+
+        function footerColor(): color {
+            if (Health.checks.length === 0)
+                return Health.diagnosticUnavailable ? Theme.danger : Theme.fgMuted;
+            if (Health.status === "error")
+                return Theme.danger;
+            if (Health.status === "warning")
+                return Theme.warn;
+            return Theme.ok;
+        }
 
         Rectangle {
             width: 7
@@ -307,17 +333,28 @@ Rectangle {
             anchors.left: parent.left
             anchors.leftMargin: 19
             anchors.verticalCenter: parent.verticalCenter
-            color: Theme.ok
+            color: healthFooter.footerColor()
         }
 
         Text {
             anchors.left: parent.left
             anchors.leftMargin: 36
+            anchors.right: parent.right
+            anchors.rightMargin: 12
             anchors.verticalCenter: parent.verticalCenter
-            text: "Panama desktop is healthy"
+            text: healthFooter.footerText()
             color: Theme.fgDim
             font.family: Theme.fontFamily
             font.pixelSize: Theme.fontSizeSmall
+            elide: Text.ElideRight
         }
+
+        TapHandler {
+            id: footerTap
+            onTapped: root.pageRequested("services")
+        }
+
+        Keys.onReturnPressed: root.pageRequested("services")
+        Keys.onSpacePressed: root.pageRequested("services")
     }
 }