syntaxbullet/aurorabot
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: (ui) settings drawers

Browse Source
This commit is contained in:
syntaxbullet
2026-01-09 19:28:14 +01:00
parent d870ef69d5
commit 0d923491b5
17 changed files with 1977 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/pages/Dashboard.tsx
View File

@@ -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 >
);
}

32
web/src/pages/DesignSystem.tsx
View File

@@ -11,10 +11,13 @@ import { TestimonialCard } from "../components/testimonial-card";
import { StatCard } from "../components/stat-card";
import { LootdropCard } from "../components/lootdrop-card";
import { Activity, Coins, Flame, Trophy } from "lucide-react";
import { SettingsDrawer } from "../components/settings-drawer";
import { RecentActivity } from "../components/recent-activity";
import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
import { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
import { ActivityChart } from "../components/activity-chart";
import { type ActivityData } from "@shared/modules/dashboard/dashboard.types";
const mockEvents: RecentEvent[] = [
{ type: 'success', message: 'User leveled up to 5', timestamp: new Date(Date.now() - 1000 * 60 * 5), icon: '⬆️' },
@@ -22,6 +25,17 @@ const mockEvents: RecentEvent[] = [
{ type: 'warn', message: 'Failed login attempt', timestamp: new Date(Date.now() - 1000 * 60 * 60), icon: '⚠️' }
];
const mockActivityData: ActivityData[] = Array.from({ length: 24 }).map((_, i) => {
const d = new Date();
d.setHours(d.getHours() - (23 - i));
d.setMinutes(0, 0, 0);
return {
hour: d.toISOString(),
commands: Math.floor(Math.random() * 100) + 20,
transactions: Math.floor(Math.random() * 60) + 10
};
});
const mockManyEvents: RecentEvent[] = Array.from({ length: 15 }).map((_, i) => ({
type: i % 3 === 0 ? 'success' : i % 3 === 1 ? 'info' : 'error', // Use string literals matching the type definition
message: `Event #${i + 1} generated for testing scroll behavior`,
@@ -237,7 +251,10 @@ export function DesignSystem() {
<div className="flex items-center gap-2 mb-2">
<Badge variant="glass" className="bg-primary/10 text-primary border-primary/20">Beta</Badge>
</div>
<CardTitle>System Settings</CardTitle>
<div className="flex justify-between items-center">
<CardTitle>System Settings</CardTitle>
<SettingsDrawer />
</div>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center justify-between">
@@ -334,6 +351,19 @@ export function DesignSystem() {
/>
</div>
{/* Data Visualization Demo */}
<div className="space-y-4">
<h3 className="text-xl font-semibold text-muted-foreground">Data Visualization</h3>
<div className="grid grid-cols-1 gap-6">
<ActivityChart
data={mockActivityData}
/>
<ActivityChart
// Empty charts (loading state)
/>
</div>
</div>
{/* Game Event Cards Demo */}
<div className="space-y-4">
<h3 className="text-xl font-semibold text-muted-foreground">Game Event Cards</h3>