refactor(fe): replace TanStack Query with SWR + UI/data cleanup

Rombak data layer frontend:
- Hapus @tanstack/react-query (package.json, lockfile, provider di
  dashboard layout) — ganti SWR 2.4.2 + SWRConfig (revalidateOnFocus
  false, deduping 10s, no retry on 404)
- Semua hooks data ditulis ulang ke useSWR; useAction() helper baru
  pengganti useMutation dengan surface kompatibel (mutate/mutateAsync/
  isPending/error)
- useMessages + useMessagesHasMore share satu SWR key — probe cursor
  yang tadinya dobel fetch API sekarang deduped
- WS sync (messages/media/recordings) pindah dari queryClient ke
  SWR mutate dengan filter key + revalidate:false
- useMessageSearch() dipakai search-panel & search-overlay; search
  overlay backdrop div -> button (fix a11y lint)

Rapikan UI + isi data:
- Tab stats recordings: placeholder 'coming soon' diganti stat asli
  (total, ukuran, speaker unik, top speakers)
- Empty states konsisten via EmptyState (images/review/recordings),
  EmptyState terima className
- biome check --write: 0 error, 8 warning pre-existing
- Verifikasi: tsc --noEmit PASS, next build PASS (11 halaman static),
  API live dicek — semua endpoint dashboard/messages/guilds/config/
  voice/media/recordings/review balikin data

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

@@ -1,58 +1,51 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect } from "react";
-
+import useSWR, { useSWRConfig } from "swr";
+import { useAction } from "@/hooks/use-action";
 import { mediaApi } from "@/lib/api";
 import type { MediaState } from "@/lib/types";
 import type { WsHook } from "@/lib/ws-hook";
 
+const MEDIA_KEY = ["media-state"] as const;
+
 export function useMediaState() {
-  return useQuery<MediaState>({
-    queryKey: ["media-state"],
-    queryFn: () => mediaApi.getStatus(),
-    retry: false,
-    refetchInterval: 10_000,
+  return useSWR<MediaState>(MEDIA_KEY, () => mediaApi.getStatus(), {
+    refreshInterval: 10_000,
+    shouldRetryOnError: false,
+  });
+}
+
+function useMediaAction<TArgs>(fn: (args: TArgs) => Promise<MediaState>) {
+  const { mutate } = useSWRConfig();
+  return useAction(fn, {
+    onSuccess: (data) => {
+      void mutate(MEDIA_KEY, data, { revalidate: false });
+    },
   });
 }
 
 export function useMediaQueue() {
-  const qc = useQueryClient();
-  return useMutation({
-    mutationFn: (url: string) => mediaApi.queue(url, "music"),
-    onSuccess: (data) => qc.setQueryData(["media-state"], data),
-  });
+  return useMediaAction((url: string) => mediaApi.queue(url, "music"));
 }
 
 export function useMediaSkip() {
-  const qc = useQueryClient();
-  return useMutation({
-    mutationFn: () => mediaApi.skip(),
-    onSuccess: (data) => qc.setQueryData(["media-state"], data),
-  });
+  return useMediaAction(() => mediaApi.skip());
 }
 
 export function useMediaStop() {
-  const qc = useQueryClient();
-  return useMutation({
-    mutationFn: () => mediaApi.stop(),
-    onSuccess: (data) => qc.setQueryData(["media-state"], data),
-  });
+  return useMediaAction(() => mediaApi.stop());
 }
 
 export function useMediaVolume() {
-  const qc = useQueryClient();
-  return useMutation({
-    mutationFn: (volume: number) => mediaApi.volume(volume),
-    onSuccess: (data) => qc.setQueryData(["media-state"], data),
-  });
+  return useMediaAction((volume: number) => mediaApi.volume(volume));
 }
 
 /** Subscribe to WS media_state events to keep cache fresh */
 export function useMediaWsSync(ws: WsHook) {
-  const qc = useQueryClient();
+  const { mutate } = useSWRConfig();
   useEffect(() => {
     const unsub = ws.on("media_state", (data) => {
-      qc.setQueryData(["media-state"], data as MediaState);
+      void mutate(MEDIA_KEY, data as MediaState, { revalidate: false });
     });
     return unsub;
-  }, [ws, qc]);
+  }, [ws, mutate]);
 }