feat: (ui) settings drawers

web/src/pages/Dashboard.tsx

@@ -1,21 +1,25 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { useSocket } from "../hooks/use-socket";
 import { Badge } from "../components/ui/badge";
 import { StatCard } from "../components/stat-card";
 import { RecentActivity } from "../components/recent-activity";
+import { ActivityChart } from "../components/activity-chart";
 import { LootdropCard } from "../components/lootdrop-card";
 import { LeaderboardCard } from "../components/leaderboard-card";
+import { CommandsDrawer } from "../components/commands-drawer";
 import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
 import { cn } from "../lib/utils";
+import { SettingsDrawer } from "../components/settings-drawer";
 
 export function Dashboard() {
     const { isConnected, stats } = useSocket();
+    const [commandsDrawerOpen, setCommandsDrawerOpen] = useState(false);
 
     return (
         <div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
             {/* Navigation */}
-            <nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
+            <nav className="sticky top-0 z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
                 <div className="flex items-center gap-3">
                     {/* Bot Avatar */}
                     {stats?.bot?.avatarUrl ? (
@@ -54,11 +58,13 @@ export function Dashboard() {
                     <Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
                         Design System
                     </Link>
+                    <div className="h-4 w-px bg-border/50" />
+                    <SettingsDrawer />
                 </div>
             </nav>
 
             {/* Dashboard Content */}
-            <main className="pt-32 px-8 max-w-7xl mx-auto space-y-8">
+            <main className="pt-8 px-8 pb-8 max-w-7xl mx-auto space-y-8">
 
                 {/* Stats Grid */}
                 <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 animate-in fade-in slide-up">
@@ -89,6 +95,7 @@ export function Dashboard() {
                         value={stats?.commands.total.toLocaleString()}
                         subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
                         className="delay-200"
+                        onClick={() => setCommandsDrawerOpen(true)}
                     />
 
                     <StatCard
@@ -106,7 +113,12 @@ export function Dashboard() {
                     />
                 </div>
 
-                <div className="grid gap-8 lg:grid-cols-3 animate-in fade-in slide-up delay-300">
+                {/* Activity Chart */}
+                <div className="animate-in fade-in slide-up delay-400">
+                    <ActivityChart />
+                </div>
+
+                <div className="grid gap-8 lg:grid-cols-3 animate-in fade-in slide-up delay-500">
                     {/* Economy Stats */}
                     <div className="lg:col-span-2 space-y-4">
                         <h2 className="text-xl font-semibold tracking-tight">Economy Overview</h2>
@@ -162,7 +174,6 @@ export function Dashboard() {
                         />
                     </div>
 
-                    {/* Recent Activity */}
                     {/* Recent Activity & Lootdrops */}
                     <div className="space-y-4">
                         <LootdropCard
@@ -179,6 +190,12 @@ export function Dashboard() {
                     </div>
                 </div>
             </main >
+
+            {/* Commands Drawer */}
+            <CommandsDrawer
+                open={commandsDrawerOpen}
+                onOpenChange={setCommandsDrawerOpen}
+            />
         </div >
     );
 }