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

feat(panel): migrate to React Router, role-based layout and routing

Browse Source 
Replace useState-based page switching with react-router-dom Routes.
Layout now renders admin or player nav items based on user.role.
Add stub pages for PlayerDashboard, GameLobby, and GameRoom.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
syntaxbullet
2026-04-02 13:29:14 +02:00
parent f290eeeb8a
commit 3bdb720e4a
5 changed files with 234 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
panel/src/App.tsx
View File

@@ -1,91 +1,114 @@
import { useState } from "react"; import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { useAuth } from "./lib/useAuth"; import { useAuth } from "./lib/useAuth";
import { Loader2 } from "lucide-react"; import { Loader2 } from "lucide-react";
import Layout, { type Page } from "./components/Layout"; import Layout from "./components/Layout";
import Dashboard from "./pages/Dashboard"; import Dashboard from "./pages/Dashboard";
import Settings from "./pages/Settings"; import Settings from "./pages/Settings";
import Users from "./pages/Users"; import Users from "./pages/Users";
import Items from "./pages/Items"; import Items from "./pages/Items";
import PlaceholderPage from "./pages/PlaceholderPage"; import PlaceholderPage from "./pages/PlaceholderPage";
import NotEnrolled from "./pages/NotEnrolled";
import PlayerDashboard from "./pages/PlayerDashboard";
import { GameLobby } from "./games/GameLobby";
import { GameRoom } from "./games/GameRoom";
const placeholders: Record<string, { title: string; description: string }> = { const placeholders: Record<string, { title: string; description: string }> = {
users: { classes: {
title: "Users", title: "Classes",
description: "Search, view, and manage user accounts, balances, XP, levels, and inventories.", description: "Manage academy classes, assign Discord roles, and track class balances.",
}, },
items: { quests: {
title: "Items", title: "Quests",
description: "Create, edit, and manage game items with icons, rarities, and pricing.", description: "Configure quests with trigger events, targets, and XP/balance rewards.",
}, },
classes: { lootdrops: {
title: "Classes", title: "Lootdrops",
description: "Manage academy classes, assign Discord roles, and track class balances.", description: "View active lootdrops, spawn new drops, and manage lootdrop history.",
}, },
quests: { moderation: {
title: "Quests", title: "Moderation",
description: "Configure quests with trigger events, targets, and XP/balance rewards.", description: "Review moderation cases — warnings, timeouts, kicks, bans — and manage appeals.",
}, },
lootdrops: { transactions: {
title: "Lootdrops", title: "Transactions",
description: "View active lootdrops, spawn new drops, and manage lootdrop history.", description: "Browse the economy transaction log with filtering by user, type, and date.",
}, },
moderation: { leaderboards: {
title: "Moderation", title: "Leaderboards",
description: "Review moderation cases — warnings, timeouts, kicks, bans — and manage appeals.", description: "View top players by level, wealth, and net worth.",
}, },
transactions: {
title: "Transactions",
description: "Browse the economy transaction log with filtering by user, type, and date.",
},
settings: {
title: "Settings",
description: "Configure bot settings for economy, leveling, commands, and guild preferences.",
},
}; };
export default function App() { function AppRoutes() {
const { loading, user, logout } = useAuth(); const { loading, user, enrolled, logout } = useAuth();
const [page, setPage] = useState<Page>("dashboard");
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center">
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
</div>
);
}
if (!user && !enrolled) {
return <NotEnrolled />;
}
if (!user) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="text-center max-w-xs">
<div className="font-display font-bold text-3xl tracking-tight mb-1">Aurora</div>
<p className="text-sm text-muted-foreground mb-8">Welcome to Aurora</p>
<a
href={`/auth/discord?return_to=${encodeURIComponent(window.location.pathname)}`}
className="inline-flex items-center justify-center w-full rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 transition-colors"
>
Sign in with Discord
</a>
</div>
</div>
);
}
if (loading) {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <Layout user={user} logout={logout}>
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" /> <Routes>
</div> <Route path="/" element={<Navigate to={user.role === "admin" ? "/admin" : "/dashboard"} replace />} />
);
}
if (!user) { {/* Player routes */}
return ( <Route path="/dashboard" element={<PlayerDashboard userId={user.discordId} />} />
<div className="min-h-screen flex items-center justify-center"> <Route path="/leaderboards" element={<PlaceholderPage {...placeholders.leaderboards} />} />
<div className="text-center max-w-xs">
<div className="font-display font-bold text-3xl tracking-tight mb-1">Aurora</div>
<p className="text-sm text-muted-foreground mb-8">Admin Panel</p>
<a
href={`/auth/discord?return_to=${encodeURIComponent(window.location.origin + '/')}`}
className="inline-flex items-center justify-center w-full rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 transition-colors"
>
Sign in with Discord
</a>
<p className="text-xs text-muted-foreground/40 mt-6">Authorized administrators only</p>
</div>
</div>
);
}
return ( {/* Game routes (both roles) */}
<Layout user={user} logout={logout} currentPage={page} onNavigate={setPage}> <Route path="/games" element={<GameLobby />} />
{page === "dashboard" ? ( <Route path="/:gameSlug/:roomId" element={<GameRoom userId={user.discordId} />} />
<Dashboard />
) : page === "users" ? ( {/* Admin routes */}
<Users /> {user.role === "admin" && (
) : page === "items" ? ( <>
<Items /> <Route path="/admin" element={<Dashboard />} />
) : page === "settings" ? ( <Route path="/admin/users" element={<Users />} />
<Settings /> <Route path="/admin/items" element={<Items />} />
) : ( <Route path="/admin/classes" element={<PlaceholderPage {...placeholders.classes} />} />
<PlaceholderPage {...placeholders[page]!} /> <Route path="/admin/quests" element={<PlaceholderPage {...placeholders.quests} />} />
)} <Route path="/admin/lootdrops" element={<PlaceholderPage {...placeholders.lootdrops} />} />
</Layout> <Route path="/admin/moderation" element={<PlaceholderPage {...placeholders.moderation} />} />
); <Route path="/admin/transactions" element={<PlaceholderPage {...placeholders.transactions} />} />
<Route path="/admin/settings" element={<Settings />} />
</>
)}
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</Layout>
);
}
export default function App() {
return (
<BrowserRouter>
<AppRoutes />
</BrowserRouter>
);
} }

247
panel/src/components/Layout.tsx
View File

@@ -1,140 +1,147 @@
import { import {
LayoutDashboard, LayoutDashboard,
Users, Users,
Package, Package,
Shield, Shield,
Scroll, Scroll,
Gift, Gift,
ArrowLeftRight, ArrowLeftRight,
GraduationCap, GraduationCap,
Settings, Settings,
LogOut, LogOut,
ChevronLeft, ChevronLeft,
ChevronRight, ChevronRight,
Gamepad2,
Trophy,
} from "lucide-react"; } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { cn } from "../lib/utils"; import { cn } from "../lib/utils";
import type { AuthUser } from "../lib/useAuth"; import type { AuthUser } from "../lib/useAuth";
export type Page = interface NavItem {
| "dashboard" path: string;
| "users" label: string;
| "items" icon: React.ComponentType<{ className?: string }>;
| "classes" }
| "quests"
| "lootdrops"
| "moderation"
| "transactions"
| "settings";
const navItems: { page: Page; label: string; icon: React.ComponentType<{ className?: string }> }[] = [ const adminNavItems: NavItem[] = [
{ page: "dashboard", label: "Dashboard", icon: LayoutDashboard }, { path: "/admin", label: "Dashboard", icon: LayoutDashboard },
{ page: "users", label: "Users", icon: Users }, { path: "/admin/users", label: "Users", icon: Users },
{ page: "items", label: "Items", icon: Package }, { path: "/admin/items", label: "Items", icon: Package },
{ page: "classes", label: "Classes", icon: GraduationCap }, { path: "/admin/classes", label: "Classes", icon: GraduationCap },
{ page: "quests", label: "Quests", icon: Scroll }, { path: "/admin/quests", label: "Quests", icon: Scroll },
{ page: "lootdrops", label: "Lootdrops", icon: Gift }, { path: "/admin/lootdrops", label: "Lootdrops", icon: Gift },
{ page: "moderation", label: "Moderation", icon: Shield }, { path: "/admin/moderation", label: "Moderation", icon: Shield },
{ page: "transactions", label: "Transactions", icon: ArrowLeftRight }, { path: "/admin/transactions", label: "Transactions", icon: ArrowLeftRight },
{ page: "settings", label: "Settings", icon: Settings }, { path: "/admin/settings", label: "Settings", icon: Settings },
{ path: "/games", label: "Games", icon: Gamepad2 },
];
const playerNavItems: NavItem[] = [
{ path: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
{ path: "/games", label: "Games", icon: Gamepad2 },
{ path: "/leaderboards", label: "Leaderboards", icon: Trophy },
]; ];
export default function Layout({ export default function Layout({
user, user,
logout, logout,
currentPage, children,
onNavigate,
children,
}: { }: {
user: AuthUser; user: AuthUser;
logout: () => Promise<void>; logout: () => Promise<void>;
currentPage: Page; children: React.ReactNode;
onNavigate: (page: Page) => void;
children: React.ReactNode;
}) { }) {
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const location = useLocation();
const navigate = useNavigate();
const avatarUrl = user.avatar const navItems = user.role === "admin" ? adminNavItems : playerNavItems;
? `https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`
: null;
return ( const avatarUrl = user.avatar
<div className="min-h-screen flex"> ? `https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`
{/* Sidebar */} : null;
<aside
className={cn(
"fixed inset-y-0 left-0 z-50 flex flex-col bg-background border-r border-border transition-all duration-200",
collapsed ? "w-16" : "w-60"
)}
>
{/* Logo */}
<div className="flex items-center h-16 px-4 border-b border-border">
<div className="font-display text-xl font-bold tracking-tight">
{collapsed ? "A" : "Aurora"}
</div>
</div>
{/* Nav items */} function isActive(path: string): boolean {
<nav className="flex-1 py-3 px-2 space-y-1 overflow-y-auto"> if (path === "/admin" && location.pathname === "/admin") return true;
{navItems.map(({ page, label, icon: Icon }) => ( if (path === "/dashboard" && location.pathname === "/dashboard") return true;
<button if (path !== "/admin" && path !== "/dashboard" && location.pathname.startsWith(path)) return true;
key={page} return false;
onClick={() => onNavigate(page)} }
className={cn(
"w-full flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors", return (
currentPage === page <div className="min-h-screen flex">
? "bg-primary/15 text-primary border-l-4 border-primary" <aside
: "text-text-tertiary hover:bg-primary/8 hover:text-foreground" className={cn(
)} "fixed inset-y-0 left-0 z-50 flex flex-col bg-background border-r border-border transition-all duration-200",
collapsed ? "w-16" : "w-60"
)}
> >
<Icon className={cn("w-5 h-5 shrink-0", currentPage === page && "text-primary")} /> <div className="flex items-center h-16 px-4 border-b border-border">
{!collapsed && <span>{label}</span>} <div className="font-display text-xl font-bold tracking-tight">
</button> {collapsed ? "A" : "Aurora"}
))} </div>
</nav>
{/* User & collapse */}
<div className="border-t border-border p-3 space-y-2">
{!collapsed && (
<div className="flex items-center gap-3 px-2 py-1.5">
{avatarUrl ? (
<img src={avatarUrl} alt={user.username} className="w-8 h-8 rounded-full" />
) : (
<div className="w-8 h-8 rounded-full bg-surface flex items-center justify-center text-xs font-medium">
{user.username[0]?.toUpperCase()}
</div> </div>
)}
<div className="flex-1 min-w-0">
<div className="text-sm font-medium truncate">{user.username}</div>
</div>
</div>
)}
<div className={cn("flex", collapsed ? "flex-col items-center gap-2" : "items-center justify-between px-2")}>
<button
onClick={logout}
className="inline-flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text-tertiary hover:text-destructive hover:bg-destructive/10 transition-colors"
title="Sign out"
>
<LogOut className="w-4 h-4" />
{!collapsed && <span>Sign out</span>}
</button>
<button
onClick={() => setCollapsed((c) => !c)}
className="p-1.5 rounded-md text-text-tertiary hover:text-foreground hover:bg-primary/10 transition-colors"
title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
>
{collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
</button>
</div>
</div>
</aside>
{/* Main content */} <nav className="flex-1 py-3 px-2 space-y-1 overflow-y-auto">
<main className={cn("flex-1 transition-all duration-200", collapsed ? "ml-16" : "ml-60")}> {navItems.map(({ path, label, icon: Icon }) => (
<div className="max-w-[1600px] mx-auto px-6 py-8"> <button
{children} key={path}
onClick={() => navigate(path)}
className={cn(
"w-full flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
isActive(path)
? "bg-primary/15 text-primary border-l-4 border-primary"
: "text-text-tertiary hover:bg-primary/8 hover:text-foreground"
)}
>
<Icon className={cn("w-5 h-5 shrink-0", isActive(path) && "text-primary")} />
{!collapsed && <span>{label}</span>}
</button>
))}
</nav>
<div className="border-t border-border p-3 space-y-2">
{!collapsed && (
<div className="flex items-center gap-3 px-2 py-1.5">
{avatarUrl ? (
<img src={avatarUrl} alt={user.username} className="w-8 h-8 rounded-full" />
) : (
<div className="w-8 h-8 rounded-full bg-surface flex items-center justify-center text-xs font-medium">
{user.username[0]?.toUpperCase()}
</div>
)}
<div className="flex-1 min-w-0">
<div className="text-sm font-medium truncate">{user.username}</div>
</div>
</div>
)}
<div className={cn("flex", collapsed ? "flex-col items-center gap-2" : "items-center justify-between px-2")}>
<button
onClick={logout}
className="inline-flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text-tertiary hover:text-destructive hover:bg-destructive/10 transition-colors"
title="Sign out"
>
<LogOut className="w-4 h-4" />
{!collapsed && <span>Sign out</span>}
</button>
<button
onClick={() => setCollapsed((c) => !c)}
className="p-1.5 rounded-md text-text-tertiary hover:text-foreground hover:bg-primary/10 transition-colors"
title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
>
{collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
</button>
</div>
</div>
</aside>
<main className={cn("flex-1 transition-all duration-200", collapsed ? "ml-16" : "ml-60")}>
<div className="max-w-[1600px] mx-auto px-6 py-8">
{children}
</div>
</main>
</div> </div>
</main> );
</div>
);
} }

3
panel/src/games/GameLobby.tsx Normal file
View File

@@ -0,0 +1,3 @@
export function GameLobby() {
return <div className="text-text-tertiary">Game Lobby — loading...</div>;
}

3
panel/src/games/GameRoom.tsx Normal file
View File

@@ -0,0 +1,3 @@
export function GameRoom({ userId }: { userId: string }) {
return <div className="text-text-tertiary">Game Room — loading...</div>;
}

3
panel/src/pages/PlayerDashboard.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function PlayerDashboard({ userId }: { userId: string }) {
return <div className="text-text-tertiary">Player Dashboard — loading...</div>;
}