refactor: streamline data fetching in various hooks and components

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

@@ -121,8 +121,6 @@ export default function DashboardPage() {
 function StatsSection() {
   const { stats, loading, error, refetch } = useStats();
 
-  if (error) return <ErrorState message={error} onRetry={refetch} />;
-
   if (loading || !stats) {
     return (
       <div className="space-y-5 animate-fade-in-up">

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

@@ -16,10 +16,6 @@ export default function MediaPage() {
   const { mediaState, refresh, queue, skip, stop, setVolume } = useMediaState();
   const [queueUrl, setQueueUrl] = useState("");
 
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
-
   // WS subscription for real-time media state
   useEffect(() => {
     const unsub = ws.on("media_state", () => refresh());

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

@@ -13,11 +13,7 @@ import { useWebSocket } from "@/lib/ws/context";
 
 export default function RecordingsPage() {
   const ws = useWebSocket();
-  const { recordings, loading, refresh, remove, prepend } = useRecordings();
-
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
+  const { recordings, loading, remove, prepend } = useRecordings();
 
   // WS subscription for real-time updates
   useEffect(() => {

services/frontend/src/hooks/use-dashboard.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { dashboardApi } from "@/lib/api";
 import type {
@@ -36,6 +36,10 @@ export function useStats(): UseStatsReturn {
     }
   }, []);
 
+  useEffect(() => {
+    fetch();
+  }, [fetch]);
+
   return { stats, loading, error, refetch: fetch };
 }
 

services/frontend/src/hooks/use-media.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { voiceApi } from "@/lib/api";
 import type { MediaState } from "@/lib/types";
@@ -69,6 +69,10 @@ export function useMediaState(): UseMediaStateReturn {
     }
   }, []);
 
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
   return { mediaState, refresh, queue, skip, stop, setVolume };
 }
 

services/frontend/src/hooks/use-messages.ts

@@ -77,6 +77,11 @@ export function useMessages(
     }
   }, [cursor, loadingMore, guildId, channelId]);
 
+  // Auto-fetch when guildId/channelId changes
+  useEffect(() => {
+    fetch();
+  }, [fetch]);
+
   const prepend = useCallback((msg: MessageRecord) => {
     setMessages((prev) => [msg, ...prev]);
   }, []);

services/frontend/src/hooks/use-recordings.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { recordingsApi } from "@/lib/api";
 import type { VoiceRecording } from "@/lib/types";
@@ -35,6 +35,10 @@ export function useRecordings(): UseRecordingsReturn {
     }
   }, []);
 
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
   const remove = useCallback(async (id: string) => {
     try {
       await recordingsApi.delete(id);

services/frontend/src/hooks/use-voice.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { voiceApi } from "@/lib/api";
 import type { ActiveSpeaker, VoiceStatus } from "@/lib/types";
@@ -28,6 +28,10 @@ export function useVoiceStatus(): UseVoiceStatusReturn {
     }
   }, []);
 
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
   return { voiceStatus, refresh };
 }