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
@@ -1,6 +1,7 @@
 import { useEffect, useMemo } from 'react';
 import { useServerStore } from '../stores/server.ts';
 import { useChannelStore } from '../stores/channel.ts';
+import { VoiceChannel } from './VoiceChannel.tsx';

 export function ChannelList() {
  const activeServerId = useServerStore((state) => state.activeServerId);
@@ -44,22 +45,26 @@ export function ChannelList() {
          <div key={category} className="mb-3">
            <div className="text-gb-fg-t text-xs uppercase mb-1">{category}</div>
            <div className="text-gb-fg-f text-xs mb-1">---</div>
-            {list.map((channel) => (
-              <button
-                key={channel.id}
-                onClick={() => setActiveChannel(channel.id)}
-                className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
-                  channel.id === activeChannelId ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
-                }`}
-              >
-                {channel.type === 'voice' ? (
-                  <span className="text-gb-fg-f">&#9835;</span>
-                ) : (
+            {list.map((channel) =>
+              channel.type === 'voice' ? (
+                <VoiceChannel
+                  key={channel.id}
+                  channelId={channel.id}
+                  channelName={channel.name}
+                />
+              ) : (
+                <button
+                  key={channel.id}
+                  onClick={() => setActiveChannel(channel.id)}
+                  className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
+                    channel.id === activeChannelId ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
+                  }`}
+                >
                  <span className="text-gb-fg-f">#</span>
-                )}
-                <span className="truncate">{channel.name}</span>
-              </button>
-            ))}
+                  <span className="truncate">{channel.name}</span>
+                </button>
+              )
+            )}
          </div>
        ))}
      </div>
@@ -4,6 +4,7 @@ import { useAuthStore } from '../stores/auth.ts';
 import { ServerBar } from './ServerBar.tsx';
 import { ChannelList } from './ChannelList.tsx';
 import { MemberList } from './MemberList.tsx';
+import { VoicePanel } from './VoicePanel.tsx';

 export function Layout() {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
@@ -54,7 +55,12 @@ export function Layout() {
          <ServerBar />
          <ChannelList />
          <div className="flex-1 min-w-0 flex flex-col">
-            <Outlet />
+            <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+              <VoicePanel />
+              <div className="flex-1 min-h-0">
+                <Outlet />
+              </div>
+            </div>
          </div>
          <MemberList />
        </div>
@@ -0,0 +1,62 @@
+import { useVoiceStore } from '../stores/voice.ts';
+
+interface VoiceChannelProps {
+  channelId: string;
+  channelName: string;
+}
+
+export function VoiceChannel({ channelId, channelName }: VoiceChannelProps) {
+  const currentRoom = useVoiceStore((state) => state.currentRoom);
+  const isConnected = useVoiceStore((state) => state.isConnected);
+  const joinVoice = useVoiceStore((state) => state.joinVoice);
+  const participants = useVoiceStore((state) => state.participants);
+
+  const isActive = currentRoom === channelId;
+
+  const handleClick = () => {
+    if (!isActive) {
+      joinVoice(channelId, channelName);
+    }
+  };
+
+  return (
+    <div className="mb-0.5">
+      <button
+        onClick={handleClick}
+        className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
+          isActive ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
+        }`}
+      >
+        <span className={isActive ? 'text-gb-orange' : 'text-gb-fg-f'}>
+          {isActive && isConnected ? '●' : isActive ? '◐' : '○'}
+        </span>
+        <span className={isActive ? 'text-gb-orange' : 'text-gb-fg-f'}>
+          🔊
+        </span>
+        <span className="truncate">{channelName}</span>
+        {isActive && participants.length > 0 && (
+          <span className="ml-auto text-xxs text-gb-fg-f">
+            [{participants.length}]
+          </span>
+        )}
+      </button>
+      {isActive && (
+        <div className="pl-7 py-0.5">
+          {participants.map((p) => (
+            <div
+              key={p.identity}
+              className="text-xxs text-gb-fg-f flex items-center gap-1"
+            >
+              <span className={p.isSpeaking ? 'text-gb-green' : 'text-gb-fg-f'}>
+                {p.isMuted ? '○' : '●'}
+              </span>
+              <span className={p.isSpeaking ? 'text-gb-green' : ''}>
+                {p.username}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,91 @@
+import { useVoiceStore } from '../stores/voice.ts';
+import { VoiceControls } from './VoiceControls.tsx';
+
+export function VoicePanel() {
+  const isConnected = useVoiceStore((state) => state.isConnected);
+  const currentRoom = useVoiceStore((state) => state.currentRoom);
+  const currentRoomName = useVoiceStore((state) => state.currentRoomName);
+  const participants = useVoiceStore((state) => state.participants);
+  const error = useVoiceStore((state) => state.error);
+
+  if (!currentRoom) return null;
+
+  return (
+    <div className="bg-gb-bg-s border border-gb-bg-t rounded-sm font-mono text-sm mb-2">
+      {/* Box-drawn header */}
+      <div className="px-3 py-1.5 border-b border-gb-bg-t flex items-center gap-2">
+        <span className="text-gb-fg-f">
+          ┌─┤
+          <span className="text-gb-orange font-bold">VOICE</span>
+          ├─{'─'.repeat(Math.max(0, 20 - (currentRoomName?.length ?? 0)))}┐
+        </span>
+        <span className="text-gb-fg-s truncate flex-1">
+          {currentRoomName || currentRoom}
+        </span>
+        <span
+          className={`text-xxs ${
+            isConnected ? 'text-gb-green' : 'text-gb-fg-f'
+          }`}
+        >
+          {isConnected ? '● LIVE' : '◐ connecting...'}
+        </span>
+      </div>
+
+      {/* Error display */}
+      {error && (
+        <div className="px-3 py-1 text-gb-red text-xxs border-b border-gb-bg-t">
+          ! {error}
+        </div>
+      )}
+
+      {/* Participants */}
+      <div className="px-3 py-1.5 border-b border-gb-bg-t">
+        <div className="text-xxs text-gb-fg-f mb-1">
+          ── participants ──
+        </div>
+        {participants.length === 0 && (
+          <div className="text-xxs text-gb-fg-f">[empty channel]</div>
+        )}
+        {participants.map((p) => (
+          <div
+            key={p.identity}
+            className="flex items-center gap-2 py-0.5 text-xs"
+          >
+            <span
+              className={
+                p.isSpeaking
+                  ? 'text-gb-green'
+                  : p.isMuted
+                    ? 'text-gb-red'
+                    : 'text-gb-fg-s'
+              }
+            >
+              {p.isMuted ? '○' : '●'}
+            </span>
+            <span
+              className={p.isSpeaking ? 'text-gb-green' : 'text-gb-fg-s'}
+            >
+              {p.username}
+            </span>
+            {p.isMuted && (
+              <span className="text-xxs text-gb-red">[muted]</span>
+            )}
+            {p.isSpeaking && (
+              <span className="text-xxs text-gb-green">[speaking]</span>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Controls */}
+      <div className="px-3 py-1.5">
+        <VoiceControls />
+      </div>
+
+      {/* Box-drawn footer */}
+      <div className="px-3 pb-1 text-xxs text-gb-fg-f">
+        └{'─'.repeat(40)}┘
+      </div>
+    </div>
+  );
+}