PTT panel: talkgroup chips, floor indicator, hold-to-talk

web/src/components/PttPanel.jsx

@@ -0,0 +1,51 @@
+export default function PttPanel({
+  groups, floors, selected, setSelected,
+  onTalkStart, onTalkStop, talking, muted, setMuted,
+}) {
+  const floor = selected != null ? floors[selected] : null;
+  const busy = floor && floor.memberId !== 0;
+
+  return (
+    <section className="panel ptt-panel">
+      <h2>Push to talk</h2>
+      <div className="chips">
+        {groups.map((g) => (
+          <button
+            key={g.id}
+            className={`chip ${selected === g.id ? 'active' : ''}`}
+            style={{ '--c': g.color }}
+            onClick={() => setSelected(g.id)}
+          >
+            {g.name}{floors[g.id] ? ' ●' : ''}
+          </button>
+        ))}
+      </div>
+      <div className="floor">
+        {floor ? (
+          <span className="talking">🎙 {floor.name} is talking</span>
+        ) : (
+          <span className="muted">Floor open</span>
+        )}
+      </div>
+      <button
+        className="ptt"
+        disabled={!selected || busy}
+        onMouseDown={onTalkStart}
+        onMouseUp={onTalkStop}
+        onMouseLeave={() => talking && onTalkStop()}
+        onTouchStart={(e) => { e.preventDefault(); onTalkStart(); }}
+        onTouchEnd={(e) => { e.preventDefault(); onTalkStop(); }}
+      >
+        {talking ? '● TALKING' : 'HOLD TO TALK'}
+      </button>
+      <p className="muted small">
+        Select a talkgroup, then hold the button. One speaker per group —
+        the floor indicator shows who has it.
+      </p>
+      <label className="muted small">
+        <input type="checkbox" style={{ width: 'auto' }} checked={muted} onChange={(e) => setMuted(e.target.checked)} />{' '}
+        Mute incoming audio
+      </label>
+    </section>
+  );
+}