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

83
panel/src/App.tsx
View File

@@ -1,22 +1,18 @@
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: {
title: "Users",
description: "Search, view, and manage user accounts, balances, XP, levels, and inventories.",
},
items: {
title: "Items",
description: "Create, edit, and manage game items with icons, rarities, and pricing.",
},
classes: { classes: {
title: "Classes", title: "Classes",
description: "Manage academy classes, assign Discord roles, and track class balances.", description: "Manage academy classes, assign Discord roles, and track class balances.",
@@ -37,15 +33,14 @@ const placeholders: Record<string, { title: string; description: string }> = {
title: "Transactions", title: "Transactions",
description: "Browse the economy transaction log with filtering by user, type, and date.", description: "Browse the economy transaction log with filtering by user, type, and date.",
}, },
settings: { leaderboards: {
title: "Settings", title: "Leaderboards",
description: "Configure bot settings for economy, leveling, commands, and guild preferences.", description: "View top players by level, wealth, and net worth.",
}, },
}; };
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) { if (loading) {
return ( return (
@@ -55,37 +50,65 @@ export default function App() {
); );
} }
if (!user && !enrolled) {
return <NotEnrolled />;
}
if (!user) { if (!user) {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <div className="min-h-screen flex items-center justify-center">
<div className="text-center max-w-xs"> <div className="text-center max-w-xs">
<div className="font-display font-bold text-3xl tracking-tight mb-1">Aurora</div> <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> <p className="text-sm text-muted-foreground mb-8">Welcome to Aurora</p>
<a <a
href={`/auth/discord?return_to=${encodeURIComponent(window.location.origin + '/')}`} 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" 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 Sign in with Discord
</a> </a>
<p className="text-xs text-muted-foreground/40 mt-6">Authorized administrators only</p>
</div> </div>
</div> </div>
); );
} }
return ( return (
<Layout user={user} logout={logout} currentPage={page} onNavigate={setPage}> <Layout user={user} logout={logout}>
{page === "dashboard" ? ( <Routes>
<Dashboard /> <Route path="/" element={<Navigate to={user.role === "admin" ? "/admin" : "/dashboard"} replace />} />
) : page === "users" ? (
<Users /> {/* Player routes */}
) : page === "items" ? ( <Route path="/dashboard" element={<PlayerDashboard userId={user.discordId} />} />
<Items /> <Route path="/leaderboards" element={<PlaceholderPage {...placeholders.leaderboards} />} />
) : page === "settings" ? (
<Settings /> {/* Game routes (both roles) */}
) : ( <Route path="/games" element={<GameLobby />} />
<PlaceholderPage {...placeholders[page]!} /> <Route path="/:gameSlug/:roomId" element={<GameRoom userId={user.discordId} />} />
{/* Admin routes */}
{user.role === "admin" && (
<>
<Route path="/admin" element={<Dashboard />} />
<Route path="/admin/users" element={<Users />} />
<Route path="/admin/items" element={<Items />} />
<Route path="/admin/classes" element={<PlaceholderPage {...placeholders.classes} />} />
<Route path="/admin/quests" element={<PlaceholderPage {...placeholders.quests} />} />
<Route path="/admin/lootdrops" element={<PlaceholderPage {...placeholders.lootdrops} />} />
<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> </Layout>
); );
} }
export default function App() {
return (
<BrowserRouter>
<AppRoutes />
</BrowserRouter>
);
}

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

@@ -11,89 +11,97 @@ import {
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,
onNavigate,
children, children,
}: { }: {
user: AuthUser; user: AuthUser;
logout: () => Promise<void>; logout: () => Promise<void>;
currentPage: Page;
onNavigate: (page: Page) => void;
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const location = useLocation();
const navigate = useNavigate();
const navItems = user.role === "admin" ? adminNavItems : playerNavItems;
const avatarUrl = user.avatar const avatarUrl = user.avatar
? `https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64` ? `https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`
: null; : null;
function isActive(path: string): boolean {
if (path === "/admin" && location.pathname === "/admin") return true;
if (path === "/dashboard" && location.pathname === "/dashboard") return true;
if (path !== "/admin" && path !== "/dashboard" && location.pathname.startsWith(path)) return true;
return false;
}
return ( return (
<div className="min-h-screen flex"> <div className="min-h-screen flex">
{/* Sidebar */}
<aside <aside
className={cn( className={cn(
"fixed inset-y-0 left-0 z-50 flex flex-col bg-background border-r border-border transition-all duration-200", "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" collapsed ? "w-16" : "w-60"
)} )}
> >
{/* Logo */}
<div className="flex items-center h-16 px-4 border-b border-border"> <div className="flex items-center h-16 px-4 border-b border-border">
<div className="font-display text-xl font-bold tracking-tight"> <div className="font-display text-xl font-bold tracking-tight">
{collapsed ? "A" : "Aurora"} {collapsed ? "A" : "Aurora"}
</div> </div>
</div> </div>
{/* Nav items */}
<nav className="flex-1 py-3 px-2 space-y-1 overflow-y-auto"> <nav className="flex-1 py-3 px-2 space-y-1 overflow-y-auto">
{navItems.map(({ page, label, icon: Icon }) => ( {navItems.map(({ path, label, icon: Icon }) => (
<button <button
key={page} key={path}
onClick={() => onNavigate(page)} onClick={() => navigate(path)}
className={cn( className={cn(
"w-full flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors", "w-full flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
currentPage === page isActive(path)
? "bg-primary/15 text-primary border-l-4 border-primary" ? "bg-primary/15 text-primary border-l-4 border-primary"
: "text-text-tertiary hover:bg-primary/8 hover:text-foreground" : "text-text-tertiary hover:bg-primary/8 hover:text-foreground"
)} )}
> >
<Icon className={cn("w-5 h-5 shrink-0", currentPage === page && "text-primary")} /> <Icon className={cn("w-5 h-5 shrink-0", isActive(path) && "text-primary")} />
{!collapsed && <span>{label}</span>} {!collapsed && <span>{label}</span>}
</button> </button>
))} ))}
</nav> </nav>
{/* User & collapse */}
<div className="border-t border-border p-3 space-y-2"> <div className="border-t border-border p-3 space-y-2">
{!collapsed && ( {!collapsed && (
<div className="flex items-center gap-3 px-2 py-1.5"> <div className="flex items-center gap-3 px-2 py-1.5">
@@ -129,7 +137,6 @@ export default function Layout({
</div> </div>
</aside> </aside>
{/* Main content */}
<main className={cn("flex-1 transition-all duration-200", collapsed ? "ml-16" : "ml-60")}> <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"> <div className="max-w-[1600px] mx-auto px-6 py-8">
{children} {children}

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