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,61 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+
+export interface RecordingLibrarySummary {
+  count: number;
+  avgDurationMs: number;
+  totalPlayCount: number;
+  list: { id: number; name: string; durationMs: number; playCount: number; lastPlayedAt: number | null }[];
+}
+
+export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummary }) {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground">Recordings</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-3xl">{stats.count}</CardContent>
+        </Card>
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground">Avg length</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-3xl">
+            {Math.round(stats.avgDurationMs / 1000)}s
+          </CardContent>
+        </Card>
+        <Card className="bp-glass">
+          <CardHeader>
+            <CardTitle className="text-sm text-muted-foreground">Total plays</CardTitle>
+          </CardHeader>
+          <CardContent className="font-display text-3xl">{stats.totalPlayCount}</CardContent>
+        </Card>
+      </div>
+
+      {stats.list.length > 0 && (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Recording</TableHead>
+              <TableHead>Plays</TableHead>
+              <TableHead>Last played</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {stats.list.map((r) => (
+              <TableRow key={r.id}>
+                <TableCell className="font-medium">{r.name}</TableCell>
+                <TableCell>{r.playCount}</TableCell>
+                <TableCell className="text-muted-foreground">
+                  {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  );
+}