chore: remove old components replaced by redesign

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com

services/frontend/src/app/(dashboard)/voice/page.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-
-import { ActiveSpeakersPanel } from "@/components/voice/active-speakers-panel";
-import { MicrophoneCard } from "@/components/voice/microphone-card";
-import { VoiceConnectionCard } from "@/components/voice/voice-connection-card";
+import { VoiceConnectionCard } from "@/components/voice/connection-card";
+import { SpeakerWaveform } from "@/components/voice/speaker-waveform";
+import { MicControl } from "@/components/voice/mic-control";
+import { VoiceActivityTimeline } from "@/components/voice/activity-timeline";
+import { SubNav } from "@/components/layout/sub-nav";
+import { useWebSocket } from "@/lib/ws/context";
 import {
   useGuilds,
   useMicTransmit,
@@ -14,7 +16,8 @@ import {
   useVoiceDisconnect,
   useVoiceStatus,
 } from "@/hooks";
-import { useWebSocket } from "@/lib/ws/context";
+
+type VoiceTab = "connection" | "activity";
 
 export default function VoicePage() {
   const ws = useWebSocket();
@@ -28,21 +31,14 @@ export default function VoicePage() {
   const micMut = useMicTransmit();
   const [selectedChannel, setSelectedChannel] = useState("");
   const [micActive, setMicActive] = useState(false);
+  const [volume, setVolume] = useState(75);
+  const [tab, setTab] = useState<VoiceTab>("connection");
 
   useEffect(() => {
     const unsub = subscribe(ws);
     return () => unsub();
   }, [ws, subscribe]);
 
-  const handleGuildChange = useCallback((guildId: string | null) => {
-    if (!guildId) {
-      setSelectedGuild("");
-      setSelectedChannel("");
-      return;
-    }
-    setSelectedGuild(guildId);
-  }, []);
-
   const handleMicToggle = useCallback(
     async (checked: boolean) => {
       setMicActive(checked);
@@ -55,29 +51,57 @@ export default function VoicePage() {
     [micMut],
   );
 
+  const handleGuildChange = useCallback((guildId: string | null) => {
+    if (!guildId) {
+      setSelectedGuild("");
+      setSelectedChannel("");
+      return;
+    }
+    setSelectedGuild(guildId);
+  }, []);
+
   const activeSpeakers = speakers.filter((s) => s.speaking);
   const connected = voiceStatus?.connected ?? false;
 
   return (
-    <div className="space-y-5 animate-fade-in-up">
+    <div className="space-y-4 animate-fade-in-up">
+      <SubNav
+        tabs={[
+          { id: "connection", label: "Connection", icon: undefined },
+          { id: "activity", label: "Activity", icon: undefined },
+        ]}
+        activeTab={tab}
+        onTabChange={(t) => setTab(t as VoiceTab)}
+      />
+
       <VoiceConnectionCard
-        selectedGuild={selectedGuild}
-        onGuildChange={handleGuildChange}
-        selectedChannel={selectedChannel}
-        onChannelChange={(v) => setSelectedChannel(v)}
-        guilds={guilds}
-        voiceChannels={voiceChannels}
         connected={connected}
         activeChannelName={voiceStatus?.activeChannelName}
-        connectMut={connectMut}
-        disconnectMut={disconnectMut}
-      />
-      <ActiveSpeakersPanel activeSpeakers={activeSpeakers} />
-      <MicrophoneCard
-        connected={connected}
-        micActive={micActive}
-        onMicToggle={handleMicToggle}
+        guilds={guilds}
+        voiceChannels={voiceChannels}
+        selectedGuild={selectedGuild}
+        selectedChannel={selectedChannel}
+        onGuildChange={handleGuildChange}
+        onChannelChange={(v) => setSelectedChannel(v ?? "")}
+        onConnect={() => connectMut.mutate({ guildId: selectedGuild, channelId: selectedChannel })}
+        onDisconnect={() => disconnectMut.mutate(undefined)}
+        connecting={connectMut.isPending}
       />
+
+      {tab === "connection" && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <SpeakerWaveform speakers={activeSpeakers} />
+          <MicControl
+            connected={connected}
+            active={micActive}
+            onToggle={handleMicToggle}
+            volume={volume}
+            onVolumeChange={setVolume}
+          />
+        </div>
+      )}
+
+      {tab === "activity" && <VoiceActivityTimeline />}
     </div>
   );
 }