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.
2026-07-26 16:14:32 +07:00
parent 726ea8fca5
commit d5a547eb25
35 changed files with 2385 additions and 1733 deletions
@@ -0,0 +1,106 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+
+import { navItems } from "@/lib/navigation";
+import { cn } from "@/lib/utils";
+import { useWebSocket } from "@/lib/ws/context";
+
+export function AppSidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { status } = useWebSocket();
+
+  const isActive = (prefix: string) => {
+    if (prefix === "/dashboard") return pathname === "/dashboard";
+    return pathname.startsWith(prefix);
+  };
+
+  const connectionDot = {
+    connected: "bg-green-500",
+    connecting: "bg-yellow-500 animate-pulse",
+    disconnected: "bg-destructive",
+    error: "bg-destructive",
+  }[status];
+
+  const connectionLabel = {
+    connected: "Connected",
+    connecting: "Connecting",
+    disconnected: "Disconnected",
+    error: "Error",
+  }[status];
+
+  return (
+    <aside className="hidden md:flex md:w-60 flex-col border-r border-border/50 bg-sidebar shrink-0">
+      {/* Brand */}
+      <div className="flex h-14 items-center gap-2.5 border-b border-sidebar-border/50 px-4 shrink-0">
+        <div className="flex size-8 items-center justify-center rounded-lg bg-gradient-to-br from-sky-500 to-cyan-400 text-white text-xs font-bold">
+          D
+        </div>
+        <div>
+          <div className="text-sm font-bold tracking-tight">
+            <span className="text-gradient">DC Automod</span>
+          </div>
+          <div className="text-[10px] text-muted-foreground tracking-widest uppercase leading-none">
+            Dashboard
+          </div>
+        </div>
+      </div>
+
+      {/* Nav */}
+      <nav className="flex-1 overflow-y-auto p-2 space-y-0.5">
+        {navItems.map(({ href, label, icon: Icon, matchPrefix }) => {
+          const active = isActive(matchPrefix);
+          return (
+            <button
+              key={href}
+              type="button"
+              onClick={() => router.push(href)}
+              className={cn(
+                "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all duration-150 text-left",
+                active
+                  ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
+                  : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
+              )}
+            >
+              <Icon
+                className={cn(
+                  "size-4 shrink-0 transition-all",
+                  active && "text-sky-400",
+                )}
+              />
+              <span className="truncate">{label}</span>
+              {active && (
+                <div className="ml-auto w-0.5 h-4 rounded-full bg-gradient-to-b from-sky-400 to-cyan-400" />
+              )}
+            </button>
+          );
+        })}
+      </nav>
+
+      {/* Connection status */}
+      <div className="border-t border-sidebar-border/50 p-3 shrink-0">
+        <div className="flex items-center gap-2">
+          <span className="relative flex size-2 shrink-0">
+            <span
+              className={cn(
+                "absolute inline-flex size-full rounded-full opacity-75",
+                connectionDot,
+                status === "connected" && "animate-ping",
+              )}
+            />
+            <span
+              className={cn(
+                "relative inline-flex size-2 rounded-full",
+                connectionDot,
+              )}
+            />
+          </span>
+          <span className="text-xs text-muted-foreground truncate">
+            {connectionLabel}
+          </span>
+        </div>
+      </div>
+    </aside>
+  );
+}