feat(app): render dashboard with react

src/App.tsx

@@ -1,5 +1,11 @@
 import { useEffect, useState } from "react";
 import type { DashboardRuntimeState } from "$lib/server/dashboard";
+import {
+  DashboardFrame,
+  SystemState,
+  dashboardDocumentToUiDashboard,
+  type UiSeverity,
+} from "$lib/ui";
 
 const loadingDashboardState: DashboardRuntimeState = {
   state: "loading",
@@ -14,14 +20,31 @@ export function AppStateView({
   dashboard: DashboardRuntimeState;
 }) {
   if (dashboard.state === "ready") {
-    return <main>{dashboard.document.metadata.title}</main>;
+    return (
+      <DashboardFrame
+        dashboard={dashboardDocumentToUiDashboard(dashboard.document)}
+      />
+    );
   }
 
+  const detail = `${dashboard.subtitle}: ${dashboard.message}`;
+  const errors = dashboard.state === "invalid" ? dashboard.errors : [];
+
   return (
     <main className="state-shell" data-dashboard-state={dashboard.state}>
-      <h1>{dashboard.title}</h1>
-      <p>{dashboard.subtitle}</p>
-      <p>{dashboard.message}</p>
+      <SystemState
+        title={dashboard.title}
+        detail={detail}
+        severity={stateSeverity(dashboard.state)}
+        icon={stateIcon(dashboard.state)}
+      />
+      {errors.length ? (
+        <ul aria-label="Validation errors">
+          {errors.map((error) => (
+            <li key={error}>{error}</li>
+          ))}
+        </ul>
+      ) : null}
     </main>
   );
 }
@@ -69,3 +92,15 @@ export default function App() {
 
   return <AppStateView dashboard={dashboard} />;
 }
+
+function stateSeverity(state: DashboardRuntimeState["state"]): UiSeverity {
+  if (state === "invalid") return "danger";
+  if (state === "loading") return "loading";
+  return "stale";
+}
+
+function stateIcon(state: DashboardRuntimeState["state"]): string {
+  if (state === "invalid") return "mdi:file-alert-outline";
+  if (state === "loading") return "mdi:progress-clock";
+  return "mdi:tray";
+}