86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
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>
|
||
);
|
||
}
|