Phase 2 frontend: voice store, VoiceChannel, VoicePanel, VoiceControls

Frontend: - stores/voice.ts: Zustand store for voice state (join, leave, mute, deafen, video, screen share) - VoiceChannel.tsx: sidebar item showing 🔊 channel name with participant count - VoicePanel.tsx: box-drawn frame with participant list and controls - VoiceControls.tsx: [m] mute, [d] deafen, [cam] video, [share] screen, [x] disconnect - ChannelList.tsx: integrated VoiceChannel for voice-type channels - Layout.tsx: added VoicePanel above chat area Deps: - Added livekit-client, @livekit/components-react - NODE_ENV fix for dev deps installation
2026-06-28 16:26:19 -04:00
parent 8ee0ce657f
commit f694301ca7
9 changed files with 538 additions and 41 deletions
@@ -0,0 +1,70 @@
+import { useVoiceStore } from '../stores/voice.ts';
+
+export function VoiceControls() {
+  const isMuted = useVoiceStore((state) => state.isMuted);
+  const isDeafened = useVoiceStore((state) => state.isDeafened);
+  const isVideoOn = useVoiceStore((state) => state.isVideoOn);
+  const isScreenSharing = useVoiceStore((state) => state.isScreenSharing);
+  const toggleMute = useVoiceStore((state) => state.toggleMute);
+  const toggleDeafen = useVoiceStore((state) => state.toggleDeafen);
+  const toggleVideo = useVoiceStore((state) => state.toggleVideo);
+  const toggleScreenShare = useVoiceStore((state) => state.toggleScreenShare);
+  const leaveVoice = useVoiceStore((state) => state.leaveVoice);
+
+  return (
+    <div className="flex items-center gap-2 font-mono text-sm">
+      <button
+        onClick={toggleMute}
+        className={`px-1.5 py-0.5 rounded-sm transition-colors ${
+          isMuted
+            ? 'text-gb-red bg-gb-bg-s border border-gb-red'
+            : 'text-gb-fg-s hover:text-gb-orange hover:bg-gb-bg-t border border-transparent'
+        }`}
+        title={isMuted ? 'Unmute microphone' : 'Mute microphone'}
+      >
+        [{isMuted ? 'm✗' : 'm'}]
+      </button>
+      <button
+        onClick={toggleDeafen}
+        className={`px-1.5 py-0.5 rounded-sm transition-colors ${
+          isDeafened
+            ? 'text-gb-red bg-gb-bg-s border border-gb-red'
+            : 'text-gb-fg-s hover:text-gb-orange hover:bg-gb-bg-t border border-transparent'
+        }`}
+        title={isDeafened ? 'Undeafen' : 'Deafen'}
+      >
+        [{isDeafened ? 'd✗' : 'd'}]
+      </button>
+      <button
+        onClick={toggleVideo}
+        className={`px-1.5 py-0.5 rounded-sm transition-colors ${
+          isVideoOn
+            ? 'text-gb-orange bg-gb-bg-s border border-gb-orange'
+            : 'text-gb-fg-s hover:text-gb-orange hover:bg-gb-bg-t border border-transparent'
+        }`}
+        title={isVideoOn ? 'Turn off camera' : 'Turn on camera'}
+      >
+        [cam]
+      </button>
+      <button
+        onClick={toggleScreenShare}
+        className={`px-1.5 py-0.5 rounded-sm transition-colors ${
+          isScreenSharing
+            ? 'text-gb-aqua bg-gb-bg-s border border-gb-aqua'
+            : 'text-gb-fg-s hover:text-gb-aqua hover:bg-gb-bg-t border border-transparent'
+        }`}
+        title={isScreenSharing ? 'Stop sharing' : 'Share screen'}
+      >
+        [share]
+      </button>
+      <div className="flex-1" />
+      <button
+        onClick={leaveVoice}
+        className="px-1.5 py-0.5 rounded-sm text-gb-red hover:bg-gb-red hover:text-gb-bg transition-colors border border-transparent hover:border-gb-red"
+        title="Disconnect"
+      >
+        [x]
+      </button>
+    </div>
+  );
+}