valknarandClaude Sonnet 5
1119c8eea0
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
24 lines
745 B
TypeScript
24 lines
745 B
TypeScript
"use client";
|
|
|
|
import { useButtplugStore } from "@/lib/buttplug/store";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function ConnectionStatus() {
|
|
const connected = useButtplugStore((s) => s.connected);
|
|
const deviceCount = useButtplugStore((s) => Object.keys(s.devices).length);
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1 text-xs">
|
|
<span
|
|
className={cn(
|
|
"size-2 rounded-full",
|
|
connected ? "bg-primary bp-pulse" : "bg-muted-foreground/50",
|
|
)}
|
|
/>
|
|
<span className="text-muted-foreground">
|
|
{connected ? `${deviceCount} device${deviceCount === 1 ? "" : "s"} connected` : "Not connected"}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|