sexy/components/layout/ConnectionStatus.tsx

"use client";

import { useButtplugStore } from "@/lib/buttplug/store";

type IndicatorState = "scanning" | "connected" | "recording";

export function ConnectionStatus() {
  const scanning = useButtplugStore((s) => s.scanning);
  const recording = useButtplugStore((s) => s.recording);
  const deviceCount = useButtplugStore((s) => Object.keys(s.devices).length);

  // Priority: an active recording is the most important thing to surface,
  // then whether toys are actually connected, then a bare scan-in-progress -
  // this is deliberately independent of the Buttplug client's own `connected`
  // flag, which goes true as soon as the embedded server initializes (i.e. as
  // soon as scanning starts), not when a device is actually paired.
  const state: IndicatorState | null = recording
    ? "recording"
    : deviceCount > 0
      ? "connected"
      : scanning
        ? "scanning"
        : null;

  if (!state) return null;

  return <span className="bp-led bp-pulse" data-state={state} aria-hidden />;
}