chore: remove old components replaced by redesign

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

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

@@ -1,14 +1,63 @@
 "use client";
 
-import { RecordingList } from "@/components/recordings/recording-list";
-import { useWebSocket } from "@/lib/ws/context";
+import { useState } from "react";
+import { RecordingCard } from "@/components/recordings/recording-card";
+import { RecordingPlayer } from "@/components/recordings/recording-player";
+import { SubNav } from "@/components/layout/sub-nav";
+import { ErrorState, LoadingSkeleton } from "@/components/shared";
+import { useRecordings } from "@/hooks";
+import type { VoiceRecording } from "@/lib/types";
+
+type RecordingsTab = "library" | "stats";
 
 export default function RecordingsPage() {
-  const ws = useWebSocket();
+  const { data: recordings, isLoading, error, refetch } = useRecordings();
+  const [playingId, setPlayingId] = useState<string | null>(null);
+  const [tab, setTab] = useState<RecordingsTab>("library");
+
+  const currentTrack = playingId && recordings
+    ? recordings.find((r: VoiceRecording) => r.id === playingId)
+    : null;
 
   return (
-    <div className="space-y-5 animate-fade-in-up">
-      <RecordingList ws={ws} />
+    <div className="space-y-4 animate-fade-in-up">
+      <SubNav
+        tabs={[
+          { id: "library", label: "Library", icon: undefined },
+          { id: "stats", label: "Stats", icon: undefined },
+        ]}
+        activeTab={tab}
+        onTabChange={(t) => setTab(t as RecordingsTab)}
+      />
+
+      {tab === "library" && (
+        <>
+          {error ? (
+            <ErrorState message={error.message} onRetry={refetch} />
+          ) : isLoading ? (
+            <LoadingSkeleton count={4} height="h-28" />
+          ) : (
+            <div className="space-y-2">
+              {(recordings ?? []).map((rec: VoiceRecording) => (
+                <RecordingCard
+                  key={rec.id}
+                  recording={rec}
+                  onPlay={(id) => setPlayingId(id === playingId ? null : id)}
+                />
+              ))}
+              {(recordings ?? []).length === 0 && (
+                <div className="py-12 text-center text-sm text-text-secondary/40">No recordings yet</div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+
+      {tab === "stats" && (
+        <div className="py-12 text-center text-sm text-text-secondary/40">Recording stats coming soon</div>
+      )}
+
+      <RecordingPlayer url={currentTrack?.download_url ?? undefined} onClose={() => setPlayingId(null)} />
     </div>
   );
 }

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>
   );
 }

services/frontend/src/app/globals.css

@@ -43,6 +43,9 @@
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
 
+  /* Ring / focus outline for shadcn outline-ring utility */
+  --color-ring: var(--color-primary);
+
   /* Radius */
   --radius-card: 16px;
   --radius-panel: 12px;