Add src/App.tsx

src/App.tsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { useStatus } from "./hooks/useStatus";
+import { StatusBar } from "./components/StatusBar";
+import { HostCard } from "./components/HostCard";
+import { AddHostModal } from "./components/AddHostModal";
+
+export default function App() {
+  const { status, hosts, error, loading, refresh } = useStatus(3000);
+  const [showAddModal, setShowAddModal] = useState(false);
+
+  return (
+    <div className="flex flex-col h-screen bg-surface select-none">
+      {/* Title bar / drag region for Tauri */}
+      <div
+        data-tauri-drag-region
+        className="flex items-center justify-between px-4 py-3 bg-surface-raised"
+        style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-accent font-bold text-lg">🌙 Moonlight Relay</span>
+        </div>
+        <button
+          onClick={refresh}
+          style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
+          className="text-gray-400 hover:text-white text-xs transition-colors"
+          title="Refresh hosts"
+        >
+          ↻ Refresh
+        </button>
+      </div>
+
+      {/* VPN + moonlight status */}
+      <StatusBar status={status} error={error} loading={loading} />
+
+      {/* Main content */}
+      <main className="flex-1 overflow-y-auto p-4">
+        {/* Host grid */}
+        {hosts.length === 0 && !loading ? (
+          <div className="flex flex-col items-center justify-center h-full gap-3 text-gray-500">
+            <span className="text-5xl">🔍</span>
+            <p className="text-sm">No hosts found yet.</p>
+            <p className="text-xs text-center max-w-xs">
+              Make sure Apollo/Artemis is running on your gaming PC and it's
+              reachable over Tailscale (or your local network).
+            </p>
+            <button
+              onClick={() => setShowAddModal(true)}
+              className="mt-2 px-4 py-2 rounded-lg bg-accent text-sm font-medium"
+            >
+              + Add host manually
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+              {hosts.map((h) => (
+                <HostCard key={h.name + h.ip} host={h} onRefresh={refresh} />
+              ))}
+              {/* Add host card */}
+              <button
+                onClick={() => setShowAddModal(true)}
+                className="
+                  flex flex-col items-center justify-center gap-2
+                  p-5 rounded-xl border border-dashed border-surface-elevated
+                  text-gray-500 hover:text-gray-300 hover:border-gray-500
+                  transition-colors duration-150
+                "
+              >
+                <span className="text-2xl">＋</span>
+                <span className="text-xs">Add host</span>
+              </button>
+            </div>
+          </>
+        )}
+      </main>
+
+      {/* Add host modal */}
+      {showAddModal && (
+        <AddHostModal
+          onClose={() => setShowAddModal(false)}
+          onAdded={refresh}
+        />
+      )}
+    </div>
+  );
+}