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/components/shared/loading-skeleton.tsx

@@ -0,0 +1,38 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+interface LoadingSkeletonProps {
+  /** Number of skeleton rows */
+  count?: number;
+  /** Height per skeleton row */
+  height?: string;
+  /** Grid layout: columns */
+  columns?: number;
+  /** Additional classes */
+  className?: string;
+}
+
+/**
+ * Consistent loading skeleton for data-fetching pages.
+ * Renders a grid of skeleton placeholders.
+ */
+export function LoadingSkeleton({
+  count = 4,
+  height = "h-28",
+  columns = 1,
+  className,
+}: LoadingSkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "grid gap-3",
+        columns > 1 ? `grid-cols-1 md:grid-cols-${columns}` : "grid-cols-1",
+        className,
+      )}
+    >
+      {Array.from({ length: count }, (_, i) => (
+        <Skeleton key={i} className={cn(height, "rounded-xl")} />
+      ))}
+    </div>
+  );
+}