feat: add app header, sidebar, and mobile navigation components
Deploy to VPS / deploy (push) Failing after 1m45s
Deploy to VPS / deploy (push) Failing after 1m45s
- 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.
This commit is contained in:
asepharyana
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import { Moon, PanelLeft, Sun } from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { navItems } from "@/lib/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
export function AppHeader() {
|
||||
const pathname = usePathname();
|
||||
const { status } = useWebSocket();
|
||||
const [theme, setTheme] = useState<"light" | "dark">("dark");
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem("theme") as "light" | "dark" | null;
|
||||
if (stored) setTheme(stored);
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
const next = theme === "dark" ? "light" : "dark";
|
||||
setTheme(next);
|
||||
localStorage.setItem("theme", next);
|
||||
document.documentElement.classList.remove("light", "dark");
|
||||
document.documentElement.classList.add(next);
|
||||
};
|
||||
|
||||
const pageTitle =
|
||||
navItems
|
||||
.filter((n) =>
|
||||
n.matchPrefix === "/dashboard"
|
||||
? pathname === "/dashboard"
|
||||
: pathname.startsWith(n.matchPrefix),
|
||||
)
|
||||
.map((n) => n.label)
|
||||
.at(0) ?? "Dashboard";
|
||||
|
||||
const statusVariant =
|
||||
status === "connected"
|
||||
? "default"
|
||||
: status === "connecting"
|
||||
? "secondary"
|
||||
: "destructive";
|
||||
|
||||
const statusLabel =
|
||||
status === "connected"
|
||||
? "Connected"
|
||||
: status === "connecting"
|
||||
? "Connecting"
|
||||
: "Disconnected";
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="flex h-14 items-center gap-3 border-b border-border/50 bg-background/60 backdrop-blur-lg px-4 shrink-0">
|
||||
{/* Mobile menu button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden size-8 -ml-1 text-muted-foreground"
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<PanelLeft className="size-4" />
|
||||
</Button>
|
||||
|
||||
<h1 className="text-sm font-semibold">{pageTitle}</h1>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
<Badge
|
||||
variant={statusVariant}
|
||||
className="gap-1.5 px-2.5 py-1 cursor-default select-none"
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"size-1.5 rounded-full",
|
||||
status === "connected" &&
|
||||
"bg-green-500 shadow-[0_0_6px] shadow-green-500/60",
|
||||
status === "connecting" && "bg-yellow-500 animate-pulse",
|
||||
status === "disconnected" && "bg-destructive",
|
||||
status === "error" && "bg-destructive",
|
||||
)}
|
||||
/>
|
||||
<span className="hidden sm:inline text-xs">{statusLabel}</span>
|
||||
</Badge>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={toggleTheme}
|
||||
aria-label="Toggle theme"
|
||||
className="size-8"
|
||||
>
|
||||
<Sun
|
||||
className={cn(
|
||||
"size-4 transition-all absolute",
|
||||
theme === "dark"
|
||||
? "opacity-0 rotate-90 scale-75"
|
||||
: "opacity-100 rotate-0 scale-100",
|
||||
)}
|
||||
/>
|
||||
<Moon
|
||||
className={cn(
|
||||
"size-4 transition-all absolute",
|
||||
theme === "dark"
|
||||
? "opacity-100 rotate-0 scale-100"
|
||||
: "opacity-0 -rotate-90 scale-75",
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
{/* Mobile overlay menu */}
|
||||
{mobileOpen && (
|
||||
<div className="fixed inset-0 z-50 md:hidden">
|
||||
{/* biome-ignore lint/a11y/noStaticElementInteractions: overlay backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") setMobileOpen(false);
|
||||
}}
|
||||
/>
|
||||
<aside className="absolute left-0 top-0 bottom-0 w-60 bg-sidebar border-r border-sidebar-border p-2 space-y-0.5">
|
||||
{navItems.map(({ href, label, icon: Icon, matchPrefix }) => {
|
||||
const active = isActivePath(pathname, matchPrefix);
|
||||
return (
|
||||
<button
|
||||
key={href}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
window.location.href = href;
|
||||
setMobileOpen(false);
|
||||
}}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all text-left",
|
||||
active
|
||||
? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
|
||||
: "text-sidebar-foreground/70 hover:bg-sidebar-accent/50",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4 shrink-0" />
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function isActivePath(pathname: string, prefix: string) {
|
||||
if (prefix === "/dashboard") return pathname === "/dashboard";
|
||||
return pathname.startsWith(prefix);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { SidebarTrigger } from "@/components/ui/sidebar";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { navItems } from "@/lib/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
function usePageTitle(): string {
|
||||
const pathname = usePathname();
|
||||
|
||||
// Exact match first, then prefix match
|
||||
const item = navItems.find((n) => {
|
||||
if (n.matchPrefix === "/dashboard") return pathname === "/dashboard";
|
||||
return pathname.startsWith(n.matchPrefix);
|
||||
});
|
||||
|
||||
if (item) return item.label;
|
||||
|
||||
// Fallback: derive from pathname
|
||||
const segment = pathname.split("/").filter(Boolean)[0];
|
||||
if (segment) {
|
||||
return segment.charAt(0).toUpperCase() + segment.slice(1);
|
||||
}
|
||||
return "Dashboard";
|
||||
}
|
||||
|
||||
export function Header() {
|
||||
const { status } = useWebSocket();
|
||||
const pageTitle = usePageTitle();
|
||||
const [theme, setTheme] = useState<"light" | "dark">("dark");
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem("theme") as "light" | "dark" | null;
|
||||
if (stored) setTheme(stored);
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
const next = theme === "dark" ? "light" : "dark";
|
||||
setTheme(next);
|
||||
localStorage.setItem("theme", next);
|
||||
document.documentElement.classList.remove("light", "dark");
|
||||
document.documentElement.classList.add(next);
|
||||
};
|
||||
|
||||
const statusVariant =
|
||||
status === "connected"
|
||||
? "default"
|
||||
: status === "connecting"
|
||||
? "secondary"
|
||||
: "destructive";
|
||||
|
||||
const statusLabel =
|
||||
status === "connected"
|
||||
? "Connected"
|
||||
: status === "connecting"
|
||||
? "Connecting"
|
||||
: status === "error"
|
||||
? "Error"
|
||||
: "Disconnected";
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-10 flex h-14 items-center gap-3 border-b border-border/50 bg-background/60 backdrop-blur-lg px-4 md:px-6">
|
||||
<SidebarTrigger className="-ml-1 size-8 text-muted-foreground hover:text-foreground" />
|
||||
|
||||
<h1 className="text-sm font-semibold hidden sm:block">{pageTitle}</h1>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Connection status */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<span>
|
||||
<Badge
|
||||
variant={statusVariant}
|
||||
className="gap-1.5 px-2.5 py-1 cursor-default select-none"
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"size-1.5 rounded-full",
|
||||
status === "connected" &&
|
||||
"bg-green-500 shadow-[0_0_6px] shadow-green-500/60",
|
||||
status === "connecting" && "bg-yellow-500 animate-pulse",
|
||||
(status === "disconnected" || status === "error") &&
|
||||
"bg-destructive",
|
||||
)}
|
||||
/>
|
||||
<span className="hidden sm:inline text-xs">{statusLabel}</span>
|
||||
</Badge>
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
<p>WebSocket: {statusLabel}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{/* Theme toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={toggleTheme}
|
||||
aria-label="Toggle theme"
|
||||
className="size-8"
|
||||
>
|
||||
<div className="relative size-4">
|
||||
<Sun
|
||||
className={cn(
|
||||
"absolute inset-0 size-4 transition-all duration-300",
|
||||
theme === "dark"
|
||||
? "opacity-0 rotate-90 scale-75"
|
||||
: "opacity-100 rotate-0 scale-100",
|
||||
)}
|
||||
/>
|
||||
<Moon
|
||||
className={cn(
|
||||
"absolute inset-0 size-4 transition-all duration-300",
|
||||
theme === "dark"
|
||||
? "opacity-100 rotate-0 scale-100"
|
||||
: "opacity-0 -rotate-90 scale-75",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
+6
-8
@@ -6,12 +6,12 @@ import { usePathname } from "next/navigation";
|
||||
import { mobileNavItems } from "@/lib/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function MobileTabBar() {
|
||||
export function MobileNav() {
|
||||
const pathname = usePathname();
|
||||
|
||||
const isActive = (matchPrefix: string) => {
|
||||
if (matchPrefix === "/dashboard") return pathname === "/dashboard";
|
||||
return pathname.startsWith(matchPrefix);
|
||||
const isActive = (prefix: string) => {
|
||||
if (prefix === "/dashboard") return pathname === "/dashboard";
|
||||
return pathname.startsWith(prefix);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -24,10 +24,8 @@ export function MobileTabBar() {
|
||||
key={href}
|
||||
href={href}
|
||||
className={cn(
|
||||
"flex-1 flex flex-col items-center gap-0.5 py-2 text-xs font-medium transition-all duration-200 relative",
|
||||
active
|
||||
? "text-sky-400"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
"flex-1 flex flex-col items-center gap-0.5 py-2 text-xs font-medium transition-all relative",
|
||||
active ? "text-sky-400" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-5" />
|
||||
@@ -1,142 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Radio } from "lucide-react";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
|
||||
import {
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
Sidebar as SidebarPrimitive,
|
||||
useSidebar,
|
||||
} from "@/components/ui/sidebar";
|
||||
import { navItems } from "@/lib/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { state } = useSidebar();
|
||||
const { status } = useWebSocket();
|
||||
const collapsed = state === "collapsed";
|
||||
|
||||
const isActive = (matchPrefix: string) => {
|
||||
if (matchPrefix === "/dashboard") return pathname === "/dashboard";
|
||||
return pathname.startsWith(matchPrefix);
|
||||
};
|
||||
|
||||
const connectionLabel = {
|
||||
connected: "Connected",
|
||||
connecting: "Connecting",
|
||||
disconnected: "Disconnected",
|
||||
error: "Error",
|
||||
}[status];
|
||||
|
||||
const connectionColor = {
|
||||
connected: "bg-green-500",
|
||||
connecting: "bg-yellow-500",
|
||||
disconnected: "bg-destructive",
|
||||
error: "bg-destructive",
|
||||
}[status];
|
||||
|
||||
return (
|
||||
<SidebarPrimitive variant="sidebar" collapsible="icon">
|
||||
<SidebarHeader className="border-b border-sidebar-border/50">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
size="lg"
|
||||
className="group-data-[collapsible=icon]:!p-0"
|
||||
onClick={() => router.push("/dashboard")}
|
||||
>
|
||||
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-gradient-to-br from-sky-500 to-cyan-400 text-sidebar-primary-foreground">
|
||||
<Radio className="size-4" />
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col gap-0.5 leading-none",
|
||||
collapsed && "hidden",
|
||||
)}
|
||||
>
|
||||
<span className="text-base font-bold tracking-tight">
|
||||
<span className="text-gradient">Bete</span>
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground tracking-widest uppercase">
|
||||
Dashboard
|
||||
</span>
|
||||
</div>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{navItems.map(({ href, label, icon: Icon, matchPrefix }) => {
|
||||
const active = isActive(matchPrefix);
|
||||
return (
|
||||
<SidebarMenuItem key={href}>
|
||||
<SidebarMenuButton
|
||||
isActive={active}
|
||||
tooltip={collapsed ? label : undefined}
|
||||
className={cn(
|
||||
"relative transition-all duration-200",
|
||||
active &&
|
||||
"bg-sidebar-accent/80 text-sidebar-accent-foreground font-medium",
|
||||
)}
|
||||
onClick={() => router.push(href)}
|
||||
>
|
||||
<Icon
|
||||
className={cn(
|
||||
"size-4 transition-all duration-200",
|
||||
active && "text-sky-400 scale-110",
|
||||
)}
|
||||
/>
|
||||
<span>{label}</span>
|
||||
{active && (
|
||||
<div className="absolute right-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-full bg-gradient-to-b from-sky-400 to-cyan-400" />
|
||||
)}
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter className="border-t border-sidebar-border/50 p-3">
|
||||
<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",
|
||||
connectionColor,
|
||||
status === "connected" && "animate-ping",
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
"relative inline-flex size-2 rounded-full",
|
||||
connectionColor,
|
||||
)}
|
||||
/>
|
||||
</span>
|
||||
{!collapsed && (
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
{connectionLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</SidebarFooter>
|
||||
</SidebarPrimitive>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user