Refactor voice page and hooks to use React Query for data fetching

- Updated VoicePage component to utilize useVoiceConnect, useVoiceDisconnect, and useMicTransmit mutations.
- Replaced local state management with React Query's useQuery for voice status, guilds, and channels.
- Removed custom useAsync hook and replaced it with useQuery in useConfig, useStats, useUsers, useChannels, and useMessages hooks.
- Simplified useRecordings and useSpeakers hooks to leverage React Query for data fetching and mutations.
- Removed deprecated use-async hook and related code.
- Enhanced error handling and loading states across various hooks.

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

@@ -1,38 +1,15 @@
-import { useCallback, useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 import { voiceApi } from "@/lib/api";
 import type { Guild } from "@/lib/types";
 
-interface UseGuildsReturn {
-  guilds: Guild[];
-  loading: boolean;
-  error: string | null;
-  refetch: () => void;
-}
-
 /**
  * Fetch the list of available Discord guilds.
  */
-export function useGuilds(): UseGuildsReturn {
-  const [guilds, setGuilds] = useState<Guild[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetchGuilds = useCallback(() => {
-    setLoading(true);
-    setError(null);
-    voiceApi
-      .getGuilds()
-      .then(setGuilds)
-      .catch((err: unknown) =>
-        setError(err instanceof Error ? err.message : "Failed to load guilds"),
-      )
-      .finally(() => setLoading(false));
-  }, []);
-
-  useEffect(() => {
-    fetchGuilds();
-  }, [fetchGuilds]);
-
-  return { guilds, loading, error, refetch: fetchGuilds };
+export function useGuilds() {
+  return useQuery<Guild[]>({
+    queryKey: ["guilds"],
+    queryFn: () => voiceApi.getGuilds(),
+    staleTime: 60_000,
+  });
 }