Tidy beta landing page and qBittorrent status

2026-06-21 12:06:38 +12:00
parent e6b4f99ea7
commit e163920e21
5 changed files with 217 additions and 82 deletions
@@ -367,6 +367,29 @@ export default function HomePage() {
  const serviceAttentionCount = serviceItems.filter((service) =>
    ['down', 'degraded', 'not_configured'].includes(service.status)
  ).length
+  const serviceOverall = servicesStatus?.overall ?? 'unknown'
+  const serviceStatusLabel = servicesLoading
+    ? 'Checking services...'
+    : servicesError
+      ? 'Status not available yet'
+      : serviceOverall === 'up'
+        ? 'Services are up and running'
+        : serviceOverall === 'down'
+          ? 'Something is down'
+          : 'Some services need attention'
+  const serviceSummary = servicesError
+    ? 'Unable to load service status'
+    : serviceItems.length === 0
+      ? 'No services reported yet'
+      : serviceAttentionCount > 0
+        ? `${serviceAttentionCount} of ${serviceItems.length} need attention`
+        : `${serviceUpCount} of ${serviceItems.length} online`
+  const orderedServices = ['Seerr', 'Sonarr', 'Radarr', 'Prowlarr', 'qBittorrent', 'Jellyfin'].map(
+    (name) => {
+      const item = serviceItems.find((entry) => entry.name === name)
+      return { name, status: item?.status ?? 'unknown', message: item?.message }
+    }
+  )
  const activeRecentCount = recent.filter((item) => {
    const label = String(item.statusLabel ?? '').toLowerCase()
    return !label.includes('ready') && !label.includes('available') && !label.includes('declined')
@@ -400,74 +423,58 @@ export default function HomePage() {
      </section>
      <div className="layout-grid">
        <section className="recent centerpiece">
-            <div className="system-status">
-              <div className="system-header">
-                <h2>System status</h2>
-                <span
-                  className={`system-pill system-pill-${servicesStatus?.overall ?? 'unknown'}`}
-                >
-                  {servicesLoading
-                    ? 'Checking services...'
-                    : servicesError
-                      ? 'Status not available yet'
-                      : servicesStatus?.overall === 'up'
-                        ? 'Services are up and running'
-                        : servicesStatus?.overall === 'down'
-                          ? 'Something is down'
-                          : 'Some services need attention'}
+            <details className="system-status system-status-dropdown">
+              <summary className="system-summary">
+                <span className="system-summary-copy">
+                  <span className="section-kicker">System status</span>
+                  <strong>{serviceSummary}</strong>
+                  <span>{serviceStatusLabel}</span>
                </span>
-              </div>
+                <span className="system-summary-actions">
+                  <span className={`system-pill system-pill-${serviceOverall}`}>
+                    {servicesLoading ? 'Checking' : serviceOverall.replaceAll('_', ' ')}
+                  </span>
+                  <span className="system-dropdown-cue" aria-hidden="true">Open</span>
+                </span>
+              </summary>
              <div className="system-list">
-                {(() => {
-                  const order = [
-                    'Seerr',
-                    'Sonarr',
-                    'Radarr',
-                    'Prowlarr',
-                    'qBittorrent',
-                    'Jellyfin',
-                  ]
-                  const items = servicesStatus?.services ?? []
-                  return order.map((name) => {
-                    const item = items.find((entry) => entry.name === name)
-                    const status = item?.status ?? 'unknown'
-                    const testing = serviceTesting[name] ?? false
-                    return (
-                      <div key={name} className={`system-item system-${status}`}>
-                        <span className="system-dot" />
-                        <div className="system-meta">
-                          <span className="system-name">{name}</span>
-                          {serviceTestResults[name] && (
-                            <span className="system-test-message">{serviceTestResults[name]}</span>
-                          )}
-                        </div>
-                        <div className="system-actions">
-                          <span className="system-state">
-                            {status === 'up'
-                              ? 'Up'
-                              : status === 'down'
-                                ? 'Down'
-                                : status === 'degraded'
-                                  ? 'Needs attention'
-                                  : status === 'not_configured'
-                                    ? 'Not configured'
-                                    : 'Unknown'}
-                          </span>
-                          <button
-                            type="button"
-                            className="system-test"
-                            onClick={() => void testService(name)}
-                            disabled={testing}
-                          >
-                            {testing ? 'Testing...' : 'Test'}
-                          </button>
-                        </div>
+                {orderedServices.map(({ name, status, message }) => {
+                  const testing = serviceTesting[name] ?? false
+                  return (
+                    <div key={name} className={`system-item system-${status}`}>
+                      <span className="system-dot" />
+                      <div className="system-meta">
+                        <span className="system-name">{name}</span>
+                        <span className="system-test-message">
+                          {serviceTestResults[name] ?? message ?? 'No recent detail'}
+                        </span>
                      </div>
-                    )
-                  })
-                })()}
+                      <div className="system-actions">
+                        <span className="system-state">
+                          {status === 'up'
+                            ? 'Up'
+                            : status === 'down'
+                              ? 'Down'
+                              : status === 'degraded'
+                                ? 'Needs attention'
+                                : status === 'not_configured'
+                                  ? 'Not configured'
+                                  : 'Unknown'}
+                        </span>
+                        <button
+                          type="button"
+                          className="system-test"
+                          onClick={() => void testService(name)}
+                          disabled={testing}
+                        >
+                          {testing ? 'Testing...' : 'Test'}
+                        </button>
+                      </div>
+                    </div>
+                  )
+                })}
              </div>
-            </div>
+            </details>
            <div className="recent-header">
              <h2>{role === 'admin' ? 'All requests' : 'My recent requests'}</h2>
              {authReady && (