refactor: streamline data fetching in various hooks and components

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