Initial implementation of Bluetooth toy control app

Next.js app with a browser-side buttplug/buttplug-wasm control layer (server never touches real-time device commands), SQLite storage via Drizzle, single-secret auth, recordings/replay with device remapping, a usage stats dashboard, Docker deployment, and Gitea CI. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb
2026-08-25 07:51:38 +02:00
commit 1119c8eea0
112 changed files with 15522 additions and 0 deletions
@@ -0,0 +1,103 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { listRecordings } from "@/lib/db/queries/recordings";
+import { listPlaySessions } from "@/lib/db/queries/play-sessions";
+import { getSessionsSummary } from "@/lib/db/queries/stats";
+
+// Always reflects live DB state for an authenticated, single-tenant app -
+// never worth prerendering (and the DB file doesn't exist at build time).
+export const dynamic = "force-dynamic";
+
+export default async function DashboardPage() {
+  const [recordings, sessions, summary] = await Promise.all([
+    listRecordings(),
+    listPlaySessions(),
+    getSessionsSummary(),
+  ]);
+
+  const recentRecordings = recordings.slice(0, 5);
+  const recentSessions = [...sessions].reverse().slice(0, 5);
+
+  return (
+    <div className="flex flex-col gap-8">
+      <Card className="bp-glass overflow-hidden">
+        <CardContent className="flex flex-col items-start gap-4 py-8">
+          <h1 className="font-display bp-gradient-text text-3xl font-semibold">Welcome back</h1>
+          <p className="max-w-xl text-sm text-muted-foreground">
+            Scan for nearby devices, take control, and record sessions to replay later - all running
+            directly from your browser over Web Bluetooth.
+          </p>
+          <Button asChild size="lg">
+            <Link href="/control">Start a session</Link>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground">Completed sessions</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-3xl">{summary.count}</CardContent>
+        </Card>
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground">Total play time</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-3xl">
+            {(summary.totalDurationMs / 3_600_000).toFixed(1)}h
+          </CardContent>
+        </Card>
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground">Saved recordings</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-3xl">{recordings.length}</CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle>Recent recordings</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2">
+            {recentRecordings.length === 0 && (
+              <p className="text-sm text-muted-foreground">Nothing saved yet.</p>
+            )}
+            {recentRecordings.map((r) => (
+              <Link
+                key={r.id}
+                href={`/recordings/${r.id}`}
+                className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
+              >
+                <span>{r.name}</span>
+                <span className="text-muted-foreground">{r.playCount} plays</span>
+              </Link>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle>Recent sessions</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-2">
+            {recentSessions.length === 0 && <p className="text-sm text-muted-foreground">No sessions yet.</p>}
+            {recentSessions.map((s) => (
+              <Link
+                key={s.id}
+                href={`/sessions/${s.id}`}
+                className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
+              >
+                <span>{s.name ?? `Session #${s.id}`}</span>
+                <span className="text-muted-foreground">{new Date(s.startedAt).toLocaleDateString()}</span>
+              </Link>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}