feat: add app header, sidebar, and mobile navigation components

- Implemented AppHeader component with theme toggle and connection status.
- Created AppSidebar component for navigation with connection status indicator.
- Added MobileNav component for mobile navigation with responsive design.
- Introduced shared components: DetailStat, EmptyState, ErrorState, LoadingSkeleton, and StatCard for consistent UI.
- Developed hooks for async data fetching: useAsync, useConfig, useDashboard, useGuilds, useMedia, useMessages, useRecordings, and useVoice.
- Added chatbot API functions for sending messages and managing chat history.

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

@@ -0,0 +1,80 @@
+import { useCallback, useState } from "react";
+
+import { voiceApi } from "@/lib/api";
+import type { MediaState } from "@/lib/types";
+import type { WsEventType } from "@/lib/ws/types";
+
+type WsHook = {
+  on: <E extends WsEventType>(
+    eventType: E,
+    handler: (data: unknown) => void,
+  ) => () => void;
+};
+
+interface UseMediaStateReturn {
+  mediaState: MediaState | null;
+  refresh: () => void;
+  queue: (url: string) => void;
+  skip: () => void;
+  stop: () => void;
+  setVolume: (value: number | readonly number[]) => void;
+}
+
+export function useMediaState(): UseMediaStateReturn {
+  const [mediaState, setMediaState] = useState<MediaState | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      const state = await voiceApi.getMediaStatus();
+      setMediaState(state);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const queue = useCallback(async (url: string) => {
+    try {
+      const state = await voiceApi.mediaQueue(url, "music");
+      setMediaState(state);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const skip = useCallback(async () => {
+    try {
+      const state = await voiceApi.mediaSkip();
+      setMediaState(state);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const stop = useCallback(async () => {
+    try {
+      const state = await voiceApi.mediaStop();
+      setMediaState(state);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const setVolume = useCallback(async (value: number | readonly number[]) => {
+    const vol = Array.isArray(value) ? value[0] : value;
+    try {
+      const state = await voiceApi.mediaVolume(vol);
+      setMediaState(state);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  return { mediaState, refresh, queue, skip, stop, setVolume };
+}
+
+export function useMediaWsSubscription(
+  ws: WsHook,
+  onState: (state: MediaState) => void,
+) {
+  return ws.on("media_state", (data) => onState(data as MediaState));
+}