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/components/messages/search-overlay.tsx

@@ -2,8 +2,7 @@
 
 import { Search, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { messagesApi } from "@/lib/api";
+import { useMessageSearch } from "@/hooks";
 import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
 import type { MessageRecord } from "@/lib/types";
 
@@ -17,14 +16,7 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
   const [query, setQuery] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const { data: results } = useQuery<MessageRecord[]>({
-    queryKey: ["messages-search", query],
-    queryFn: async () => {
-      const res = await messagesApi.search(query, 20);
-      return res.results;
-    },
-    enabled: query.length >= 2,
-  });
+  const { data: results } = useMessageSearch(query, true);
 
   useEffect(() => {
     if (open) {
@@ -50,7 +42,12 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
 
   return (
     <div className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]">
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <button
+        type="button"
+        aria-label="Close search"
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
+        onClick={onClose}
+      />
       <div className="relative w-full max-w-lg glass-intense rounded-[var(--radius-card)] overflow-hidden shadow-2xl">
         {/* Input */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-glass-border">
@@ -63,7 +60,11 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
             placeholder="Search messages..."
             className="flex-1 bg-transparent text-sm text-text-primary placeholder-text-secondary/40 outline-none"
           />
-          <button type="button" onClick={onClose} className="size-6 flex items-center justify-center rounded hover:bg-glass-bg">
+          <button
+            type="button"
+            onClick={onClose}
+            className="size-6 flex items-center justify-center rounded hover:bg-glass-bg"
+          >
             <X className="size-3.5 text-text-secondary/60" />
           </button>
         </div>
@@ -72,21 +73,32 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
         <div className="max-h-80 overflow-y-auto p-2 space-y-1">
           {!results || results.length === 0 ? (
             <div className="py-8 text-center text-xs text-text-secondary/40">
-              {query.length < 2 ? "Type at least 2 characters" : "No results found"}
+              {query.length < 2
+                ? "Type at least 2 characters"
+                : "No results found"}
             </div>
           ) : (
             results.map((msg) => (
               <button
                 key={msg.id}
                 type="button"
-                onClick={() => { onSelect(msg.id); onClose(); }}
+                onClick={() => {
+                  onSelect(msg.id);
+                  onClose();
+                }}
                 className="w-full text-left px-3 py-2 rounded-lg hover:bg-glass-bg transition-colors"
               >
                 <div className="flex items-center gap-2 text-xs">
-                  <span className="font-medium text-text-primary">{msg.username}</span>
-                  <span className="text-text-secondary/40">{getMessageChannelLabel(msg)}</span>
+                  <span className="font-medium text-text-primary">
+                    {msg.username}
+                  </span>
+                  <span className="text-text-secondary/40">
+                    {getMessageChannelLabel(msg)}
+                  </span>
                 </div>
-                <p className="text-xs text-text-secondary/80 line-clamp-1 mt-0.5">{renderMessageContent(msg.content, msg.metadata)}</p>
+                <p className="text-xs text-text-secondary/80 line-clamp-1 mt-0.5">
+                  {renderMessageContent(msg.content, msg.metadata)}
+                </p>
               </button>
             ))
           )}