Add src/components/StatusBar.tsx

src/components/StatusBar.tsx

@@ -0,0 +1,50 @@
+import { AppStatus } from "../api";
+
+interface Props {
+  status: AppStatus | null;
+  error: string | null;
+  loading: boolean;
+}
+
+export function StatusBar({ status, error, loading }: Props) {
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-2 bg-surface-raised border-b border-surface-elevated text-sm text-gray-400">
+        <span className="w-2 h-2 rounded-full bg-gray-500 animate-pulse" />
+        Connecting to backend…
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-2 bg-surface-raised border-b border-red-900 text-sm text-red-400">
+        <span className="w-2 h-2 rounded-full bg-red-500" />
+        Backend offline — {error}
+      </div>
+    );
+  }
+
+  const vpnColor = status?.vpn_connected ? "bg-green-400" : "bg-yellow-400";
+  const vpnLabel = status?.vpn_connected
+    ? `VPN · ${status.vpn_address}`
+    : "VPN · not connected";
+
+  return (
+    <div className="flex items-center gap-4 px-4 py-2 bg-surface-raised border-b border-surface-elevated text-sm">
+      <span className="flex items-center gap-1.5">
+        <span className={`w-2 h-2 rounded-full ${vpnColor}`} />
+        <span className="text-gray-300">{vpnLabel}</span>
+      </span>
+      {status?.moonlight_path ? (
+        <span className="text-gray-500 truncate text-xs">
+          🎮 {status.moonlight_path}
+        </span>
+      ) : (
+        <span className="text-yellow-500 text-xs">
+          ⚠ Moonlight not found — install it and restart
+        </span>
+      )}
+    </div>
+  );
+}