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,89 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Play, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+export interface RecordingRow {
+  id: number;
+  name: string;
+  durationMs: number;
+  playCount: number;
+  lastPlayedAt: number | null;
+  createdAt: number;
+}
+
+function formatDuration(ms: number): string {
+  const totalSeconds = Math.round(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+export function RecordingsTable({ recordings }: { recordings: RecordingRow[] }) {
+  const router = useRouter();
+
+  async function handleDelete(id: number) {
+    const res = await fetch(`/api/recordings/${id}`, { method: "DELETE" });
+    if (res.ok) {
+      toast.success("Recording deleted");
+      router.refresh();
+    } else {
+      toast.error("Could not delete recording");
+    }
+  }
+
+  if (recordings.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No recordings yet - start a session on the Control page and save it when you&apos;re done.
+      </p>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Duration</TableHead>
+          <TableHead>Plays</TableHead>
+          <TableHead>Last played</TableHead>
+          <TableHead className="text-right">Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {recordings.map((r) => (
+          <TableRow key={r.id}>
+            <TableCell className="font-medium">
+              <Link href={`/recordings/${r.id}`} className="hover:underline">
+                {r.name}
+              </Link>
+            </TableCell>
+            <TableCell>{formatDuration(r.durationMs)}</TableCell>
+            <TableCell>
+              <Badge variant="secondary">{r.playCount}</Badge>
+            </TableCell>
+            <TableCell className="text-muted-foreground">
+              {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
+            </TableCell>
+            <TableCell className="flex justify-end gap-1">
+              <Button asChild variant="ghost" size="icon-sm">
+                <Link href={`/recordings/${r.id}/replay`} aria-label="Replay">
+                  <Play className="size-3.5" />
+                </Link>
+              </Button>
+              <Button variant="ghost" size="icon-sm" onClick={() => void handleDelete(r.id)} aria-label="Delete">
+                <Trash2 className="size-3.5" />
+              </Button>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}