forked from syntaxbullet/aurorabot
feat: Implement new settings pages and refactor application layout and navigation with new components and hooks.
This commit is contained in:
syntaxbullet
@@ -23,6 +23,7 @@ export function getClientStats(): ClientStats {
|
|||||||
bot: {
|
bot: {
|
||||||
name: AuroraClient.user?.username || "Aurora",
|
name: AuroraClient.user?.username || "Aurora",
|
||||||
avatarUrl: AuroraClient.user?.displayAvatarURL() || null,
|
avatarUrl: AuroraClient.user?.displayAvatarURL() || null,
|
||||||
|
status: AuroraClient.user?.presence.activities[0]?.state || AuroraClient.user?.presence.activities[0]?.name || null,
|
||||||
},
|
},
|
||||||
guilds: AuroraClient.guilds.cache.size,
|
guilds: AuroraClient.guilds.cache.size,
|
||||||
ping: AuroraClient.ws.ping,
|
ping: AuroraClient.ws.ping,
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ export const DashboardStatsSchema = z.object({
|
|||||||
bot: z.object({
|
bot: z.object({
|
||||||
name: z.string(),
|
name: z.string(),
|
||||||
avatarUrl: z.string().nullable(),
|
avatarUrl: z.string().nullable(),
|
||||||
|
status: z.string().nullable(),
|
||||||
}),
|
}),
|
||||||
guilds: z.object({
|
guilds: z.object({
|
||||||
count: z.number(),
|
count: z.number(),
|
||||||
@@ -84,6 +85,7 @@ export const ClientStatsSchema = z.object({
|
|||||||
bot: z.object({
|
bot: z.object({
|
||||||
name: z.string(),
|
name: z.string(),
|
||||||
avatarUrl: z.string().nullable(),
|
avatarUrl: z.string().nullable(),
|
||||||
|
status: z.string().nullable(),
|
||||||
}),
|
}),
|
||||||
guilds: z.number(),
|
guilds: z.number(),
|
||||||
ping: z.number(),
|
ping: z.number(),
|
||||||
|
|||||||
83
web/build.ts
83
web/build.ts
@@ -135,6 +135,7 @@ const build = async () => {
|
|||||||
minify: true,
|
minify: true,
|
||||||
target: "browser",
|
target: "browser",
|
||||||
sourcemap: "linked",
|
sourcemap: "linked",
|
||||||
|
publicPath: "/", // Use absolute paths for SPA routing compatibility
|
||||||
define: {
|
define: {
|
||||||
"process.env.NODE_ENV": JSON.stringify((cliConfig as any).watch ? "development" : "production"),
|
"process.env.NODE_ENV": JSON.stringify((cliConfig as any).watch ? "development" : "production"),
|
||||||
},
|
},
|
||||||
@@ -159,14 +160,86 @@ console.log(`\n✅ Build completed in ${buildTime}ms\n`);
|
|||||||
|
|
||||||
if ((cliConfig as any).watch) {
|
if ((cliConfig as any).watch) {
|
||||||
console.log("👀 Watching for changes...\n");
|
console.log("👀 Watching for changes...\n");
|
||||||
// Keep the process alive for watch mode
|
|
||||||
// Bun.build with watch:true handles the watching,
|
|
||||||
// we just need to make sure the script doesn't exit.
|
|
||||||
process.stdin.resume();
|
|
||||||
|
|
||||||
// Also, handle manual exit
|
// Polling-based file watcher for Docker compatibility
|
||||||
|
// Docker volumes don't propagate filesystem events (inotify) reliably
|
||||||
|
const srcDir = path.join(process.cwd(), "src");
|
||||||
|
const POLL_INTERVAL_MS = 1000;
|
||||||
|
let lastMtimes = new Map<string, number>();
|
||||||
|
let isRebuilding = false;
|
||||||
|
|
||||||
|
// Collect all file mtimes in src directory
|
||||||
|
const collectMtimes = async (): Promise<Map<string, number>> => {
|
||||||
|
const mtimes = new Map<string, number>();
|
||||||
|
const glob = new Bun.Glob("**/*.{ts,tsx,js,jsx,css,html}");
|
||||||
|
|
||||||
|
for await (const file of glob.scan({ cwd: srcDir, absolute: true })) {
|
||||||
|
try {
|
||||||
|
const stat = await Bun.file(file).stat();
|
||||||
|
if (stat) {
|
||||||
|
mtimes.set(file, stat.mtime.getTime());
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// File may have been deleted, skip
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return mtimes;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initial collection
|
||||||
|
lastMtimes = await collectMtimes();
|
||||||
|
|
||||||
|
// Polling loop
|
||||||
|
const poll = async () => {
|
||||||
|
if (isRebuilding) return;
|
||||||
|
|
||||||
|
const currentMtimes = await collectMtimes();
|
||||||
|
const changedFiles: string[] = [];
|
||||||
|
|
||||||
|
// Check for new or modified files
|
||||||
|
for (const [file, mtime] of currentMtimes) {
|
||||||
|
const lastMtime = lastMtimes.get(file);
|
||||||
|
if (lastMtime === undefined || lastMtime < mtime) {
|
||||||
|
changedFiles.push(path.relative(srcDir, file));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for deleted files
|
||||||
|
for (const file of lastMtimes.keys()) {
|
||||||
|
if (!currentMtimes.has(file)) {
|
||||||
|
changedFiles.push(path.relative(srcDir, file) + " (deleted)");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (changedFiles.length > 0) {
|
||||||
|
isRebuilding = true;
|
||||||
|
console.log(`\n🔄 Changes detected:`);
|
||||||
|
changedFiles.forEach(f => console.log(` • ${f}`));
|
||||||
|
console.log("");
|
||||||
|
|
||||||
|
try {
|
||||||
|
const rebuildStart = performance.now();
|
||||||
|
await build();
|
||||||
|
const rebuildEnd = performance.now();
|
||||||
|
console.log(`\n✅ Rebuild completed in ${(rebuildEnd - rebuildStart).toFixed(2)}ms\n`);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("❌ Rebuild failed:", err);
|
||||||
|
}
|
||||||
|
|
||||||
|
lastMtimes = currentMtimes;
|
||||||
|
isRebuilding = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const interval = setInterval(poll, POLL_INTERVAL_MS);
|
||||||
|
|
||||||
|
// Handle manual exit
|
||||||
process.on("SIGINT", () => {
|
process.on("SIGINT", () => {
|
||||||
|
clearInterval(interval);
|
||||||
console.log("\n👋 Stopping build watcher...");
|
console.log("\n👋 Stopping build watcher...");
|
||||||
process.exit(0);
|
process.exit(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Keep process alive
|
||||||
|
process.stdin.resume();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,7 +7,9 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hookform/resolvers": "^5.2.2",
|
"@hookform/resolvers": "^5.2.2",
|
||||||
"@radix-ui/react-accordion": "^1.2.12",
|
"@radix-ui/react-accordion": "^1.2.12",
|
||||||
|
"@radix-ui/react-collapsible": "^1.1.12",
|
||||||
"@radix-ui/react-dialog": "^1.1.15",
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||||
"@radix-ui/react-select": "^2.2.6",
|
"@radix-ui/react-select": "^2.2.6",
|
||||||
@@ -93,6 +95,8 @@
|
|||||||
|
|
||||||
"@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
|
"@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
|
||||||
|
|
||||||
|
"@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
|
||||||
|
|
||||||
"@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
|
"@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
|
||||||
|
|
||||||
"@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
|
"@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
|
||||||
@@ -101,6 +105,8 @@
|
|||||||
|
|
||||||
"@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
|
"@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
|
||||||
|
|
||||||
|
"@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
|
||||||
|
|
||||||
"@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
|
"@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
|
||||||
|
|
||||||
"@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
|
"@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
|
||||||
@@ -295,6 +301,8 @@
|
|||||||
|
|
||||||
"@radix-ui/react-label/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
|
"@radix-ui/react-label/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
|
||||||
|
|
||||||
|
"@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
|
||||||
|
|
||||||
"@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
|
"@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
|
||||||
|
|
||||||
"@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
|
"@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
|
||||||
|
|||||||
@@ -11,7 +11,9 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hookform/resolvers": "^5.2.2",
|
"@hookform/resolvers": "^5.2.2",
|
||||||
"@radix-ui/react-accordion": "^1.2.12",
|
"@radix-ui/react-accordion": "^1.2.12",
|
||||||
|
"@radix-ui/react-collapsible": "^1.1.12",
|
||||||
"@radix-ui/react-dialog": "^1.1.15",
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||||
"@radix-ui/react-select": "^2.2.6",
|
"@radix-ui/react-select": "^2.2.6",
|
||||||
|
|||||||
@@ -1,23 +1,50 @@
|
|||||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import { Dashboard } from "./pages/Dashboard";
|
|
||||||
import { DesignSystem } from "./pages/DesignSystem";
|
import { DesignSystem } from "./pages/DesignSystem";
|
||||||
import { AdminQuests } from "./pages/AdminQuests";
|
import { AdminQuests } from "./pages/AdminQuests";
|
||||||
|
import { AdminOverview } from "./pages/admin/Overview";
|
||||||
|
|
||||||
import { Home } from "./pages/Home";
|
import { Home } from "./pages/Home";
|
||||||
import { Toaster } from "sonner";
|
import { Toaster } from "sonner";
|
||||||
|
import { NavigationProvider } from "./contexts/navigation-context";
|
||||||
|
import { MainLayout } from "./components/layout/main-layout";
|
||||||
|
|
||||||
|
import { SettingsLayout } from "./pages/settings/SettingsLayout";
|
||||||
|
import { GeneralSettings } from "./pages/settings/General";
|
||||||
|
import { EconomySettings } from "./pages/settings/Economy";
|
||||||
|
import { SystemsSettings } from "./pages/settings/Systems";
|
||||||
|
import { RolesSettings } from "./pages/settings/Roles";
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
return (
|
return (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
|
<NavigationProvider>
|
||||||
<Toaster richColors position="top-right" theme="dark" />
|
<Toaster richColors position="top-right" theme="dark" />
|
||||||
|
<MainLayout>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/dashboard" element={<Dashboard />} />
|
|
||||||
<Route path="/design-system" element={<DesignSystem />} />
|
<Route path="/design-system" element={<DesignSystem />} />
|
||||||
|
<Route path="/admin" element={<Navigate to="/admin/overview" replace />} />
|
||||||
|
<Route path="/admin/overview" element={<AdminOverview />} />
|
||||||
<Route path="/admin/quests" element={<AdminQuests />} />
|
<Route path="/admin/quests" element={<AdminQuests />} />
|
||||||
|
|
||||||
|
|
||||||
|
<Route path="/settings" element={<SettingsLayout />}>
|
||||||
|
<Route index element={<Navigate to="/settings/general" replace />} />
|
||||||
|
<Route path="general" element={<GeneralSettings />} />
|
||||||
|
<Route path="economy" element={<EconomySettings />} />
|
||||||
|
<Route path="systems" element={<SystemsSettings />} />
|
||||||
|
<Route path="roles" element={<RolesSettings />} />
|
||||||
|
</Route>
|
||||||
|
|
||||||
<Route path="/" element={<Home />} />
|
<Route path="/" element={<Home />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
</MainLayout>
|
||||||
|
</NavigationProvider>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
||||||
|
|||||||
216
web/src/components/layout/app-sidebar.tsx
Normal file
216
web/src/components/layout/app-sidebar.tsx
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
import { Link } from "react-router-dom"
|
||||||
|
import { ChevronRight } from "lucide-react"
|
||||||
|
import {
|
||||||
|
Sidebar,
|
||||||
|
SidebarContent,
|
||||||
|
|
||||||
|
SidebarHeader,
|
||||||
|
SidebarMenu,
|
||||||
|
SidebarMenuButton,
|
||||||
|
SidebarMenuItem,
|
||||||
|
SidebarMenuSub,
|
||||||
|
SidebarMenuSubItem,
|
||||||
|
SidebarMenuSubButton,
|
||||||
|
SidebarGroup,
|
||||||
|
SidebarGroupLabel,
|
||||||
|
SidebarGroupContent,
|
||||||
|
SidebarRail,
|
||||||
|
useSidebar,
|
||||||
|
} from "@/components/ui/sidebar"
|
||||||
|
import { useNavigation, type NavItem } from "@/contexts/navigation-context"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import {
|
||||||
|
Collapsible,
|
||||||
|
CollapsibleContent,
|
||||||
|
CollapsibleTrigger,
|
||||||
|
} from "@/components/ui/collapsible"
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu"
|
||||||
|
import { useSocket } from "@/hooks/use-socket"
|
||||||
|
|
||||||
|
function NavItemWithSubMenu({ item }: { item: NavItem }) {
|
||||||
|
const { state } = useSidebar()
|
||||||
|
const isCollapsed = state === "collapsed"
|
||||||
|
|
||||||
|
// When collapsed, show a dropdown menu on hover/click
|
||||||
|
if (isCollapsed) {
|
||||||
|
return (
|
||||||
|
<SidebarMenuItem>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<SidebarMenuButton
|
||||||
|
tooltip={item.title}
|
||||||
|
className={cn(
|
||||||
|
"transition-all duration-200 ease-in-out font-medium",
|
||||||
|
item.isActive
|
||||||
|
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
|
||||||
|
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent
|
||||||
|
side="right"
|
||||||
|
align="start"
|
||||||
|
sideOffset={8}
|
||||||
|
className="min-w-[180px] bg-background/95 backdrop-blur-xl border-border/50"
|
||||||
|
>
|
||||||
|
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||||
|
{item.title}
|
||||||
|
</div>
|
||||||
|
{item.subItems?.map((subItem) => (
|
||||||
|
<DropdownMenuItem key={subItem.title} asChild>
|
||||||
|
<Link
|
||||||
|
to={subItem.url}
|
||||||
|
className={cn(
|
||||||
|
"cursor-pointer",
|
||||||
|
subItem.isActive && "text-primary bg-primary/10"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{subItem.title}
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// When expanded, show collapsible sub-menu
|
||||||
|
return (
|
||||||
|
<Collapsible defaultOpen={item.isActive} className="group/collapsible">
|
||||||
|
<SidebarMenuItem className="flex flex-col">
|
||||||
|
<CollapsibleTrigger asChild>
|
||||||
|
<SidebarMenuButton
|
||||||
|
tooltip={item.title}
|
||||||
|
className={cn(
|
||||||
|
"transition-all duration-200 ease-in-out font-medium",
|
||||||
|
item.isActive
|
||||||
|
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
|
||||||
|
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
|
||||||
|
<span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>
|
||||||
|
{item.title}
|
||||||
|
</span>
|
||||||
|
<ChevronRight className="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" />
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</CollapsibleTrigger>
|
||||||
|
<CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
|
||||||
|
<SidebarMenuSub>
|
||||||
|
{item.subItems?.map((subItem) => (
|
||||||
|
<SidebarMenuSubItem key={subItem.title}>
|
||||||
|
<SidebarMenuSubButton
|
||||||
|
asChild
|
||||||
|
isActive={subItem.isActive}
|
||||||
|
className={cn(
|
||||||
|
"transition-all duration-200",
|
||||||
|
subItem.isActive
|
||||||
|
? "text-primary bg-primary/10"
|
||||||
|
: "text-muted-foreground hover:text-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Link to={subItem.url}>
|
||||||
|
<span>{subItem.title}</span>
|
||||||
|
</Link>
|
||||||
|
</SidebarMenuSubButton>
|
||||||
|
</SidebarMenuSubItem>
|
||||||
|
))}
|
||||||
|
</SidebarMenuSub>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
</Collapsible>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavItemLink({ item }: { item: NavItem }) {
|
||||||
|
return (
|
||||||
|
<SidebarMenuItem>
|
||||||
|
<SidebarMenuButton
|
||||||
|
asChild
|
||||||
|
isActive={item.isActive}
|
||||||
|
tooltip={item.title}
|
||||||
|
className={cn(
|
||||||
|
"transition-all duration-200 ease-in-out font-medium",
|
||||||
|
item.isActive
|
||||||
|
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
|
||||||
|
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Link to={item.url} className="flex items-center gap-3 py-4 min-h-10 group-data-[collapsible=icon]:justify-center">
|
||||||
|
<item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
|
||||||
|
<span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>{item.title}</span>
|
||||||
|
</Link>
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AppSidebar() {
|
||||||
|
const { navItems } = useNavigation()
|
||||||
|
const { stats } = useSocket()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sidebar collapsible="icon" className="border-r border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60">
|
||||||
|
<SidebarHeader className="pb-4 pt-4">
|
||||||
|
<SidebarMenu>
|
||||||
|
<SidebarMenuItem>
|
||||||
|
<SidebarMenuButton size="lg" asChild className="hover:bg-primary/10 transition-colors">
|
||||||
|
<Link to="/">
|
||||||
|
{stats?.bot?.avatarUrl ? (
|
||||||
|
<img
|
||||||
|
src={stats.bot.avatarUrl}
|
||||||
|
alt={stats.bot.name}
|
||||||
|
className="size-10 rounded-full group-data-[collapsible=icon]:size-8 object-cover shadow-lg"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex aspect-square size-10 items-center justify-center rounded-full bg-aurora sun-flare shadow-lg group-data-[collapsible=icon]:size-8">
|
||||||
|
<span className="sr-only">Aurora</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="grid flex-1 text-left text-sm leading-tight ml-2 group-data-[collapsible=icon]:hidden">
|
||||||
|
<span className="truncate font-bold text-primary text-base">Aurora</span>
|
||||||
|
<span className="truncate text-xs text-muted-foreground font-medium">
|
||||||
|
{stats?.bot?.status || "Online"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</SidebarMenuButton>
|
||||||
|
</SidebarMenuItem>
|
||||||
|
</SidebarMenu>
|
||||||
|
</SidebarHeader>
|
||||||
|
|
||||||
|
<SidebarContent className="px-2 group-data-[collapsible=icon]:px-0">
|
||||||
|
<SidebarGroup>
|
||||||
|
<SidebarGroupLabel className="text-muted-foreground/70 uppercase tracking-wider text-xs font-bold mb-2 px-2 group-data-[collapsible=icon]:hidden">
|
||||||
|
Menu
|
||||||
|
</SidebarGroupLabel>
|
||||||
|
<SidebarGroupContent>
|
||||||
|
<SidebarMenu className="gap-2 group-data-[collapsible=icon]:items-center">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
item.subItems ? (
|
||||||
|
<NavItemWithSubMenu key={item.title} item={item} />
|
||||||
|
) : (
|
||||||
|
<NavItemLink key={item.title} item={item} />
|
||||||
|
)
|
||||||
|
))}
|
||||||
|
</SidebarMenu>
|
||||||
|
</SidebarGroupContent>
|
||||||
|
</SidebarGroup>
|
||||||
|
</SidebarContent>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<SidebarRail />
|
||||||
|
</Sidebar>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
56
web/src/components/layout/main-layout.tsx
Normal file
56
web/src/components/layout/main-layout.tsx
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
|
||||||
|
import { AppSidebar } from "./app-sidebar"
|
||||||
|
import { MobileNav } from "@/components/navigation/mobile-nav"
|
||||||
|
import { useIsMobile } from "@/hooks/use-mobile"
|
||||||
|
import { Separator } from "@/components/ui/separator"
|
||||||
|
import { useNavigation } from "@/contexts/navigation-context"
|
||||||
|
|
||||||
|
interface MainLayoutProps {
|
||||||
|
children: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MainLayout({ children }: MainLayoutProps) {
|
||||||
|
const isMobile = useIsMobile()
|
||||||
|
const { breadcrumbs, currentTitle } = useNavigation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarProvider>
|
||||||
|
<AppSidebar />
|
||||||
|
<SidebarInset>
|
||||||
|
{/* Header with breadcrumbs */}
|
||||||
|
<header className="flex h-16 shrink-0 items-center gap-2 border-b border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 transition-all duration-300 ease-in-out">
|
||||||
|
<div className="flex items-center gap-2 px-4 w-full">
|
||||||
|
<SidebarTrigger className="-ml-1 text-muted-foreground hover:text-primary transition-colors" />
|
||||||
|
<Separator orientation="vertical" className="mr-2 h-4 bg-border/50" />
|
||||||
|
<nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm bg-muted/30 px-3 py-1.5 rounded-full border border-border/30">
|
||||||
|
{breadcrumbs.length === 0 ? (
|
||||||
|
<span className="text-sm font-medium text-primary px-1">{currentTitle}</span>
|
||||||
|
) : (
|
||||||
|
breadcrumbs.map((crumb, index) => (
|
||||||
|
<span key={crumb.url} className="flex items-center gap-1">
|
||||||
|
{index > 0 && (
|
||||||
|
<span className="text-muted-foreground/50">/</span>
|
||||||
|
)}
|
||||||
|
{index === breadcrumbs.length - 1 ? (
|
||||||
|
<span className="text-sm font-medium text-primary px-1">{crumb.title}</span>
|
||||||
|
) : (
|
||||||
|
<span className="text-sm text-muted-foreground hover:text-foreground transition-colors px-1">{crumb.title}</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile bottom navigation */}
|
||||||
|
{isMobile && <MobileNav />}
|
||||||
|
</SidebarInset>
|
||||||
|
</SidebarProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
41
web/src/components/navigation/mobile-nav.tsx
Normal file
41
web/src/components/navigation/mobile-nav.tsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { Link } from "react-router-dom"
|
||||||
|
import { useNavigation } from "@/contexts/navigation-context"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
export function MobileNav() {
|
||||||
|
const { navItems } = useNavigation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="fixed bottom-4 left-4 right-4 z-50 rounded-2xl border border-border/40 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 md:hidden shadow-lg shadow-black/5">
|
||||||
|
<div className="flex h-16 items-center justify-around px-2">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.title}
|
||||||
|
to={item.url}
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col items-center justify-center gap-1 rounded-xl px-4 py-2 text-xs font-medium transition-all duration-200",
|
||||||
|
"min-w-[48px] min-h-[48px]",
|
||||||
|
item.isActive
|
||||||
|
? "text-primary bg-primary/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]"
|
||||||
|
: "text-muted-foreground/80 hover:text-foreground hover:bg-white/5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<item.icon className={cn(
|
||||||
|
"size-5 transition-transform duration-200",
|
||||||
|
item.isActive && "scale-110 fill-primary/20"
|
||||||
|
)} />
|
||||||
|
<span className={cn(
|
||||||
|
"truncate max-w-[60px] text-[10px]",
|
||||||
|
item.isActive && "font-bold"
|
||||||
|
)}>
|
||||||
|
{item.title}
|
||||||
|
</span>
|
||||||
|
{item.isActive && (
|
||||||
|
<span className="absolute bottom-1 h-0.5 w-4 rounded-full bg-primary/50 blur-[1px]" />
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -46,12 +46,14 @@ export function StatCard({
|
|||||||
Manage <ChevronRight className="w-3 h-3" />
|
Manage <ChevronRight className="w-3 h-3" />
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
<div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center ring-1 ring-primary/20">
|
||||||
<Icon className={cn(
|
<Icon className={cn(
|
||||||
"h-4 w-4 transition-all duration-300",
|
"h-4 w-4 transition-all duration-300 text-primary",
|
||||||
onClick && "group-hover:text-primary group-hover:scale-110",
|
onClick && "group-hover:scale-110",
|
||||||
iconClassName || "text-muted-foreground"
|
iconClassName
|
||||||
)} />
|
)} />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
|
|||||||
@@ -8,14 +8,14 @@ const badgeVariants = cva(
|
|||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default:
|
default:
|
||||||
"border-transparent bg-primary text-primary-foreground hover:opacity-90",
|
"border-transparent bg-primary text-primary-foreground hover:opacity-90 hover-scale shadow-sm",
|
||||||
secondary:
|
secondary:
|
||||||
"border-transparent bg-secondary text-secondary-foreground hover:opacity-80",
|
"border-transparent bg-secondary text-secondary-foreground hover:opacity-80 hover-scale",
|
||||||
destructive:
|
destructive:
|
||||||
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 hover-scale",
|
||||||
outline: "text-foreground border-border hover:bg-accent hover:text-accent-foreground",
|
outline: "text-foreground border-border hover:bg-accent hover:text-accent-foreground transition-colors",
|
||||||
aurora: "border-transparent bg-aurora text-primary-foreground shadow-sm",
|
aurora: "border-transparent bg-aurora text-primary-foreground shadow-sm hover-scale",
|
||||||
glass: "glass-card border-border/50 text-foreground",
|
glass: "glass-card border-border/50 text-foreground hover:bg-accent/50 backdrop-blur-md",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
|
|||||||
@@ -9,18 +9,18 @@ const buttonVariants = cva(
|
|||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
default: "bg-primary text-primary-foreground hover:bg-primary/90 hover-glow active-press shadow-md",
|
||||||
destructive:
|
destructive:
|
||||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active-press shadow-sm",
|
||||||
outline:
|
outline:
|
||||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active-press",
|
||||||
secondary:
|
secondary:
|
||||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80 active-press shadow-sm",
|
||||||
ghost:
|
ghost:
|
||||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active-press",
|
||||||
link: "text-primary underline-offset-4 hover:underline",
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
aurora: "bg-aurora text-primary-foreground shadow-sm hover:opacity-90",
|
aurora: "bg-aurora text-primary-foreground shadow-sm hover:opacity-90 hover-glow active-press",
|
||||||
glass: "glass-card border-border/50 text-foreground hover:bg-accent/50",
|
glass: "glass-card border-border/50 text-foreground hover:bg-accent/50 hover-lift active-press",
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
|||||||
<div
|
<div
|
||||||
data-slot="card"
|
data-slot="card"
|
||||||
className={cn(
|
className={cn(
|
||||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-lg border py-6 shadow-sm",
|
"glass-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-all",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
34
web/src/components/ui/collapsible.tsx
Normal file
34
web/src/components/ui/collapsible.tsx
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
||||||
|
|
||||||
|
function Collapsible({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
||||||
|
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function CollapsibleTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
||||||
|
return (
|
||||||
|
<CollapsiblePrimitive.CollapsibleTrigger
|
||||||
|
data-slot="collapsible-trigger"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CollapsibleContent({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
||||||
|
return (
|
||||||
|
<CollapsiblePrimitive.CollapsibleContent
|
||||||
|
data-slot="collapsible-content"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||||
255
web/src/components/ui/dropdown-menu.tsx
Normal file
255
web/src/components/ui/dropdown-menu.tsx
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||||
|
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function DropdownMenu({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||||
|
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Trigger
|
||||||
|
data-slot="dropdown-menu-trigger"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuContent({
|
||||||
|
className,
|
||||||
|
sideOffset = 4,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
data-slot="dropdown-menu-content"
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuItem({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
variant = "default",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean
|
||||||
|
variant?: "default" | "destructive"
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
data-slot="dropdown-menu-item"
|
||||||
|
data-inset={inset}
|
||||||
|
data-variant={variant}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuCheckboxItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
checked,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
|
data-slot="dropdown-menu-checkbox-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<CheckIcon className="size-4" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuRadioGroup({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.RadioGroup
|
||||||
|
data-slot="dropdown-menu-radio-group"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuRadioItem({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.RadioItem
|
||||||
|
data-slot="dropdown-menu-radio-item"
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<CircleIcon className="size-2 fill-current" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuLabel({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Label
|
||||||
|
data-slot="dropdown-menu-label"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSeparator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.Separator
|
||||||
|
data-slot="dropdown-menu-separator"
|
||||||
|
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuShortcut({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="dropdown-menu-shortcut"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSub({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||||
|
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSubTrigger({
|
||||||
|
className,
|
||||||
|
inset,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
|
data-slot="dropdown-menu-sub-trigger"
|
||||||
|
data-inset={inset}
|
||||||
|
className={cn(
|
||||||
|
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRightIcon className="ml-auto size-4" />
|
||||||
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DropdownMenuSubContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||||
|
return (
|
||||||
|
<DropdownMenuPrimitive.SubContent
|
||||||
|
data-slot="dropdown-menu-sub-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
}
|
||||||
@@ -8,8 +8,8 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
|||||||
type={type}
|
type={type}
|
||||||
data-slot="input"
|
data-slot="input"
|
||||||
className={cn(
|
className={cn(
|
||||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/20 border-input/50 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base text-foreground shadow-xs transition-all outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm backdrop-blur-sm",
|
||||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
"focus-visible:border-primary/50 focus-visible:bg-input/40 focus-visible:ring-2 focus-visible:ring-primary/20",
|
||||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
|||||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||||
const SIDEBAR_WIDTH = "16rem"
|
const SIDEBAR_WIDTH = "16rem"
|
||||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||||
const SIDEBAR_WIDTH_ICON = "3rem"
|
const SIDEBAR_WIDTH_ICON = "64px"
|
||||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||||
|
|
||||||
type SidebarContextProps = {
|
type SidebarContextProps = {
|
||||||
@@ -309,7 +309,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
|||||||
<main
|
<main
|
||||||
data-slot="sidebar-inset"
|
data-slot="sidebar-inset"
|
||||||
className={cn(
|
className={cn(
|
||||||
"bg-background relative flex w-full flex-1 flex-col",
|
"bg-aurora-page text-foreground font-outfit overflow-x-hidden relative flex w-full flex-1 flex-col",
|
||||||
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
@@ -387,7 +387,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|||||||
<div
|
<div
|
||||||
data-slot="sidebar-group"
|
data-slot="sidebar-group"
|
||||||
data-sidebar="group"
|
data-sidebar="group"
|
||||||
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
className={cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
@@ -467,14 +467,14 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
|
|||||||
<li
|
<li
|
||||||
data-slot="sidebar-menu-item"
|
data-slot="sidebar-menu-item"
|
||||||
data-sidebar="menu-item"
|
data-sidebar="menu-item"
|
||||||
className={cn("group/menu-item relative", className)}
|
className={cn("group/menu-item relative flex group-data-[collapsible=icon]:justify-center", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const sidebarMenuButtonVariants = cva(
|
const sidebarMenuButtonVariants = cva(
|
||||||
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
|
|||||||
146
web/src/contexts/navigation-context.tsx
Normal file
146
web/src/contexts/navigation-context.tsx
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { useLocation, type Location } from "react-router-dom"
|
||||||
|
import { Home, Palette, ShieldCheck, Users, Settings, BarChart3, Scroll, type LucideIcon } from "lucide-react"
|
||||||
|
|
||||||
|
export interface NavSubItem {
|
||||||
|
title: string
|
||||||
|
url: string
|
||||||
|
isActive?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NavItem {
|
||||||
|
title: string
|
||||||
|
url: string
|
||||||
|
icon: LucideIcon
|
||||||
|
isActive?: boolean
|
||||||
|
subItems?: NavSubItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Breadcrumb {
|
||||||
|
title: string
|
||||||
|
url: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NavigationContextProps {
|
||||||
|
navItems: NavItem[]
|
||||||
|
breadcrumbs: Breadcrumb[]
|
||||||
|
currentPath: string
|
||||||
|
currentTitle: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const NavigationContext = React.createContext<NavigationContextProps | null>(null)
|
||||||
|
|
||||||
|
interface NavConfigItem extends Omit<NavItem, "isActive" | "subItems"> {
|
||||||
|
subItems?: Omit<NavSubItem, "isActive">[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const NAV_CONFIG: NavConfigItem[] = [
|
||||||
|
{ title: "Home", url: "/", icon: Home },
|
||||||
|
|
||||||
|
{ title: "Design System", url: "/design-system", icon: Palette },
|
||||||
|
{
|
||||||
|
title: "Admin",
|
||||||
|
url: "/admin",
|
||||||
|
icon: ShieldCheck,
|
||||||
|
subItems: [
|
||||||
|
{ title: "Overview", url: "/admin/overview" },
|
||||||
|
{ title: "Quests", url: "/admin/quests" },
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Settings",
|
||||||
|
url: "/settings",
|
||||||
|
icon: Settings,
|
||||||
|
subItems: [
|
||||||
|
{ title: "General", url: "/settings/general" },
|
||||||
|
{ title: "Economy", url: "/settings/economy" },
|
||||||
|
{ title: "Systems", url: "/settings/systems" },
|
||||||
|
{ title: "Roles", url: "/settings/roles" },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
function generateBreadcrumbs(location: Location): Breadcrumb[] {
|
||||||
|
const pathParts = location.pathname.split("/").filter(Boolean)
|
||||||
|
const breadcrumbs: Breadcrumb[] = []
|
||||||
|
|
||||||
|
let currentPath = ""
|
||||||
|
for (const part of pathParts) {
|
||||||
|
currentPath += `/${part}`
|
||||||
|
// Capitalize and clean up the part for display
|
||||||
|
const title = part
|
||||||
|
.split("-")
|
||||||
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||||
|
.join(" ")
|
||||||
|
breadcrumbs.push({ title, url: currentPath })
|
||||||
|
}
|
||||||
|
|
||||||
|
return breadcrumbs
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPageTitle(pathname: string): string {
|
||||||
|
// Check top-level items first
|
||||||
|
for (const item of NAV_CONFIG) {
|
||||||
|
if (item.url === pathname) return item.title
|
||||||
|
// Check sub-items
|
||||||
|
if (item.subItems) {
|
||||||
|
const subItem = item.subItems.find((sub) => sub.url === pathname)
|
||||||
|
if (subItem) return subItem.title
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle nested routes
|
||||||
|
const parts = pathname.split("/").filter(Boolean)
|
||||||
|
const lastPart = parts[parts.length - 1]
|
||||||
|
if (lastPart) {
|
||||||
|
return lastPart
|
||||||
|
.split("-")
|
||||||
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||||
|
.join(" ")
|
||||||
|
}
|
||||||
|
|
||||||
|
return "Aurora"
|
||||||
|
}
|
||||||
|
|
||||||
|
export function NavigationProvider({ children }: { children: React.ReactNode }) {
|
||||||
|
const location = useLocation()
|
||||||
|
|
||||||
|
const value = React.useMemo<NavigationContextProps>(() => {
|
||||||
|
const navItems = NAV_CONFIG.map((item) => {
|
||||||
|
const isParentActive = item.subItems
|
||||||
|
? location.pathname.startsWith(item.url)
|
||||||
|
: location.pathname === item.url
|
||||||
|
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
isActive: isParentActive,
|
||||||
|
subItems: item.subItems?.map((subItem) => ({
|
||||||
|
...subItem,
|
||||||
|
isActive: location.pathname === subItem.url,
|
||||||
|
})),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
navItems,
|
||||||
|
breadcrumbs: generateBreadcrumbs(location),
|
||||||
|
currentPath: location.pathname,
|
||||||
|
currentTitle: getPageTitle(location.pathname),
|
||||||
|
}
|
||||||
|
}, [location.pathname])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NavigationContext.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
</NavigationContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useNavigation() {
|
||||||
|
const context = React.useContext(NavigationContext)
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useNavigation must be used within a NavigationProvider")
|
||||||
|
}
|
||||||
|
return context
|
||||||
|
}
|
||||||
19
web/src/hooks/use-mobile.ts
Normal file
19
web/src/hooks/use-mobile.ts
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
const MOBILE_BREAKPOINT = 768
|
||||||
|
|
||||||
|
export function useIsMobile() {
|
||||||
|
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||||
|
const onChange = () => {
|
||||||
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||||
|
}
|
||||||
|
mql.addEventListener("change", onChange)
|
||||||
|
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||||
|
return () => mql.removeEventListener("change", onChange)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return !!isMobile
|
||||||
|
}
|
||||||
183
web/src/hooks/use-settings.ts
Normal file
183
web/src/hooks/use-settings.ts
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
import { useEffect, useState, useCallback } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
// Sentinel value for "none" selection
|
||||||
|
export const NONE_VALUE = "__none__";
|
||||||
|
|
||||||
|
// Schema definition matching backend config
|
||||||
|
const bigIntStringSchema = z.coerce.string()
|
||||||
|
.refine((val) => /^\d+$/.test(val), { message: "Must be a valid integer" });
|
||||||
|
|
||||||
|
export const formSchema = z.object({
|
||||||
|
leveling: z.object({
|
||||||
|
base: z.number(),
|
||||||
|
exponent: z.number(),
|
||||||
|
chat: z.object({
|
||||||
|
cooldownMs: z.number(),
|
||||||
|
minXp: z.number(),
|
||||||
|
maxXp: z.number(),
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
economy: z.object({
|
||||||
|
daily: z.object({
|
||||||
|
amount: bigIntStringSchema,
|
||||||
|
streakBonus: bigIntStringSchema,
|
||||||
|
weeklyBonus: bigIntStringSchema,
|
||||||
|
cooldownMs: z.number(),
|
||||||
|
}),
|
||||||
|
transfers: z.object({
|
||||||
|
allowSelfTransfer: z.boolean(),
|
||||||
|
minAmount: bigIntStringSchema,
|
||||||
|
}),
|
||||||
|
exam: z.object({
|
||||||
|
multMin: z.number(),
|
||||||
|
multMax: z.number(),
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
inventory: z.object({
|
||||||
|
maxStackSize: bigIntStringSchema,
|
||||||
|
maxSlots: z.number(),
|
||||||
|
}),
|
||||||
|
commands: z.record(z.string(), z.boolean()).optional(),
|
||||||
|
lootdrop: z.object({
|
||||||
|
activityWindowMs: z.number(),
|
||||||
|
minMessages: z.number(),
|
||||||
|
spawnChance: z.number(),
|
||||||
|
cooldownMs: z.number(),
|
||||||
|
reward: z.object({
|
||||||
|
min: z.number(),
|
||||||
|
max: z.number(),
|
||||||
|
currency: z.string(),
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
studentRole: z.string().optional(),
|
||||||
|
visitorRole: z.string().optional(),
|
||||||
|
colorRoles: z.array(z.string()).default([]),
|
||||||
|
welcomeChannelId: z.string().optional(),
|
||||||
|
welcomeMessage: z.string().optional(),
|
||||||
|
feedbackChannelId: z.string().optional(),
|
||||||
|
terminal: z.object({
|
||||||
|
channelId: z.string(),
|
||||||
|
messageId: z.string()
|
||||||
|
}).optional(),
|
||||||
|
moderation: z.object({
|
||||||
|
prune: z.object({
|
||||||
|
maxAmount: z.number(),
|
||||||
|
confirmThreshold: z.number(),
|
||||||
|
batchSize: z.number(),
|
||||||
|
batchDelayMs: z.number(),
|
||||||
|
}),
|
||||||
|
cases: z.object({
|
||||||
|
dmOnWarn: z.boolean(),
|
||||||
|
logChannelId: z.string().optional(),
|
||||||
|
autoTimeoutThreshold: z.number().optional()
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
trivia: z.object({
|
||||||
|
entryFee: bigIntStringSchema,
|
||||||
|
rewardMultiplier: z.number(),
|
||||||
|
timeoutSeconds: z.number(),
|
||||||
|
cooldownMs: z.number(),
|
||||||
|
categories: z.array(z.number()).default([]),
|
||||||
|
difficulty: z.enum(['easy', 'medium', 'hard', 'random']),
|
||||||
|
}).optional(),
|
||||||
|
system: z.record(z.string(), z.any()).optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type FormValues = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
export interface ConfigMeta {
|
||||||
|
roles: { id: string, name: string, color: string }[];
|
||||||
|
channels: { id: string, name: string, type: number }[];
|
||||||
|
commands: { name: string, category: string }[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const toSelectValue = (v: string | undefined | null) => v || NONE_VALUE;
|
||||||
|
export const fromSelectValue = (v: string) => v === NONE_VALUE ? "" : v;
|
||||||
|
|
||||||
|
export function useSettings() {
|
||||||
|
const [meta, setMeta] = useState<ConfigMeta | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
|
||||||
|
const form = useForm<FormValues>({
|
||||||
|
resolver: zodResolver(formSchema) as any,
|
||||||
|
defaultValues: {
|
||||||
|
economy: {
|
||||||
|
daily: { amount: "0", streakBonus: "0", weeklyBonus: "0", cooldownMs: 0 },
|
||||||
|
transfers: { minAmount: "0", allowSelfTransfer: false },
|
||||||
|
exam: { multMin: 1, multMax: 1 }
|
||||||
|
},
|
||||||
|
leveling: { base: 100, exponent: 1.5, chat: { minXp: 10, maxXp: 20, cooldownMs: 60000 } },
|
||||||
|
inventory: { maxStackSize: "1", maxSlots: 10 },
|
||||||
|
moderation: {
|
||||||
|
prune: { maxAmount: 100, confirmThreshold: 50, batchSize: 100, batchDelayMs: 1000 },
|
||||||
|
cases: { dmOnWarn: true }
|
||||||
|
},
|
||||||
|
lootdrop: {
|
||||||
|
spawnChance: 0.05,
|
||||||
|
minMessages: 10,
|
||||||
|
cooldownMs: 300000,
|
||||||
|
activityWindowMs: 600000,
|
||||||
|
reward: { min: 100, max: 500, currency: "AU" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadSettings = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const [config, metaData] = await Promise.all([
|
||||||
|
fetch("/api/settings").then(res => res.json()),
|
||||||
|
fetch("/api/settings/meta").then(res => res.json())
|
||||||
|
]);
|
||||||
|
form.reset(config as any);
|
||||||
|
setMeta(metaData);
|
||||||
|
} catch (err) {
|
||||||
|
toast.error("Failed to load settings");
|
||||||
|
console.error(err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [form]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadSettings();
|
||||||
|
}, [loadSettings]);
|
||||||
|
|
||||||
|
const saveSettings = async (data: FormValues) => {
|
||||||
|
setIsSaving(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/settings", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) throw new Error("Failed to save");
|
||||||
|
|
||||||
|
toast.success("Settings saved successfully", {
|
||||||
|
description: "Bot configuration has been updated and reloaded."
|
||||||
|
});
|
||||||
|
// Reload settings to ensure we have the latest state
|
||||||
|
await loadSettings();
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Failed to save settings");
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
form,
|
||||||
|
meta,
|
||||||
|
loading,
|
||||||
|
isSaving,
|
||||||
|
saveSettings,
|
||||||
|
loadSettings
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -1,58 +1,20 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { QuestForm } from "../components/quest-form";
|
import { QuestForm } from "../components/quest-form";
|
||||||
import { Badge } from "../components/ui/badge";
|
|
||||||
import { SectionHeader } from "../components/section-header";
|
import { SectionHeader } from "../components/section-header";
|
||||||
import { SettingsDrawer } from "../components/settings-drawer";
|
|
||||||
import { ChevronLeft } from "lucide-react";
|
|
||||||
|
|
||||||
export function AdminQuests() {
|
export function AdminQuests() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
|
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-12">
|
||||||
{/* Navigation */}
|
|
||||||
<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">
|
|
||||||
<div className="w-8 h-8 rounded-full bg-aurora sun-flare shadow-sm" />
|
|
||||||
<span className="text-xl font-bold tracking-tight text-primary">Aurora Admin</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-6">
|
|
||||||
<Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Home
|
|
||||||
</Link>
|
|
||||||
<Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Dashboard
|
|
||||||
</Link>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<main className="pt-12 px-8 pb-12 max-w-7xl mx-auto space-y-12">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Link
|
|
||||||
to="/dashboard"
|
|
||||||
className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors w-fit"
|
|
||||||
>
|
|
||||||
<ChevronLeft className="w-4 h-4" />
|
|
||||||
<span className="text-sm font-medium">Back to Dashboard</span>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<SectionHeader
|
<SectionHeader
|
||||||
badge="Quest Management"
|
badge="Quest Management"
|
||||||
title="Administrative Tools"
|
title="Quests"
|
||||||
description="Create and manage quests for the Aurora RPG students."
|
description="Create and manage quests for the Aurora RPG students."
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="animate-in fade-in slide-up duration-700">
|
<div className="animate-in fade-in slide-up duration-700">
|
||||||
<QuestForm />
|
<QuestForm />
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,204 +0,0 @@
|
|||||||
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="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 ? (
|
|
||||||
<img
|
|
||||||
src={stats.bot.avatarUrl}
|
|
||||||
alt="Aurora Avatar"
|
|
||||||
className="w-8 h-8 rounded-full border border-primary/20 shadow-sm object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="w-8 h-8 rounded-full bg-aurora sun-flare shadow-sm" />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
|
|
||||||
|
|
||||||
{/* Live Status Badge */}
|
|
||||||
<div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full border transition-colors duration-500 ${isConnected
|
|
||||||
? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500"
|
|
||||||
: "bg-red-500/10 border-red-500/20 text-red-500"
|
|
||||||
}`}>
|
|
||||||
<div className="relative flex h-2 w-2">
|
|
||||||
{isConnected && (
|
|
||||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75"></span>
|
|
||||||
)}
|
|
||||||
<span className={`relative inline-flex rounded-full h-2 w-2 ${isConnected ? "bg-emerald-500" : "bg-red-500"}`}></span>
|
|
||||||
</div>
|
|
||||||
<span className="text-[10px] font-bold tracking-wider uppercase">
|
|
||||||
{isConnected ? "Live" : "Offline"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-6">
|
|
||||||
<Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Home
|
|
||||||
</Link>
|
|
||||||
<Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Design System
|
|
||||||
</Link>
|
|
||||||
<Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Admin
|
|
||||||
</Link>
|
|
||||||
<div className="h-4 w-px bg-border/50" />
|
|
||||||
<SettingsDrawer />
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* Dashboard Content */}
|
|
||||||
<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">
|
|
||||||
<StatCard
|
|
||||||
title="Total Servers"
|
|
||||||
icon={Server}
|
|
||||||
isLoading={!stats}
|
|
||||||
value={stats?.guilds.count.toLocaleString()}
|
|
||||||
subtitle={stats?.guilds.changeFromLastMonth
|
|
||||||
? `${stats.guilds.changeFromLastMonth > 0 ? '+' : ''}${stats.guilds.changeFromLastMonth} from last month`
|
|
||||||
: "Active Guilds"
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<StatCard
|
|
||||||
title="Total Users"
|
|
||||||
icon={Users}
|
|
||||||
isLoading={!stats}
|
|
||||||
value={stats?.users.total.toLocaleString()}
|
|
||||||
subtitle={stats ? `${stats.users.active.toLocaleString()} active now` : undefined}
|
|
||||||
className="delay-100"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<StatCard
|
|
||||||
title="Commands"
|
|
||||||
icon={Terminal}
|
|
||||||
isLoading={!stats}
|
|
||||||
value={stats?.commands.total.toLocaleString()}
|
|
||||||
subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
|
|
||||||
className="delay-200"
|
|
||||||
onClick={() => setCommandsDrawerOpen(true)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<StatCard
|
|
||||||
title="System Ping"
|
|
||||||
icon={Activity}
|
|
||||||
isLoading={!stats}
|
|
||||||
value={stats ? `${Math.round(stats.ping.avg)}ms` : undefined}
|
|
||||||
subtitle="Average latency"
|
|
||||||
className="delay-300"
|
|
||||||
valueClassName={stats ? cn(
|
|
||||||
"transition-colors duration-300",
|
|
||||||
stats.ping.avg < 100 ? "text-emerald-500" :
|
|
||||||
stats.ping.avg < 200 ? "text-yellow-500" : "text-red-500"
|
|
||||||
) : undefined}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
<div className="grid gap-4 md:grid-cols-2">
|
|
||||||
<StatCard
|
|
||||||
title="Total Wealth"
|
|
||||||
icon={Coins}
|
|
||||||
isLoading={!stats}
|
|
||||||
value={stats ? `${Number(stats.economy.totalWealth).toLocaleString()} AU` : undefined}
|
|
||||||
subtitle="Astral Units in circulation"
|
|
||||||
valueClassName="text-primary"
|
|
||||||
iconClassName="text-primary"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<StatCard
|
|
||||||
title="Items Circulating"
|
|
||||||
icon={Package}
|
|
||||||
isLoading={!stats}
|
|
||||||
value={stats?.economy.totalItems?.toLocaleString()}
|
|
||||||
subtitle="Total items owned by users"
|
|
||||||
className="delay-75"
|
|
||||||
valueClassName="text-blue-500"
|
|
||||||
iconClassName="text-blue-500"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<StatCard
|
|
||||||
title="Average Level"
|
|
||||||
icon={TrendingUp}
|
|
||||||
isLoading={!stats}
|
|
||||||
value={stats ? `Lvl ${stats.economy.avgLevel}` : undefined}
|
|
||||||
subtitle="Global player average"
|
|
||||||
className="delay-100"
|
|
||||||
valueClassName="text-secondary"
|
|
||||||
iconClassName="text-secondary"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<StatCard
|
|
||||||
title="Top /daily Streak"
|
|
||||||
icon={Flame}
|
|
||||||
isLoading={!stats}
|
|
||||||
value={stats?.economy.topStreak}
|
|
||||||
subtitle="Days daily streak"
|
|
||||||
className="delay-200"
|
|
||||||
valueClassName="text-destructive"
|
|
||||||
iconClassName="text-destructive"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<LeaderboardCard
|
|
||||||
data={stats?.leaderboards}
|
|
||||||
isLoading={!stats}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Recent Activity & Lootdrops */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<LootdropCard
|
|
||||||
drop={stats?.activeLootdrops?.[0]}
|
|
||||||
state={stats?.lootdropState}
|
|
||||||
isLoading={!stats}
|
|
||||||
/>
|
|
||||||
<h2 className="text-xl font-semibold tracking-tight">Live Feed</h2>
|
|
||||||
<RecentActivity
|
|
||||||
events={stats?.recentEvents || []}
|
|
||||||
isLoading={!stats}
|
|
||||||
className="h-[calc(100%-2rem)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main >
|
|
||||||
|
|
||||||
{/* Commands Drawer */}
|
|
||||||
<CommandsDrawer
|
|
||||||
open={commandsDrawerOpen}
|
|
||||||
onOpenChange={setCommandsDrawerOpen}
|
|
||||||
/>
|
|
||||||
</div >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,25 +1,28 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { Badge } from "../components/ui/badge";
|
import { Badge } from "../components/ui/badge";
|
||||||
import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
|
import { Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter } from "../components/ui/card";
|
||||||
import { Button } from "../components/ui/button";
|
import { Button } from "../components/ui/button";
|
||||||
import { Switch } from "../components/ui/switch";
|
import { Switch } from "../components/ui/switch";
|
||||||
|
import { Input } from "../components/ui/input";
|
||||||
|
import { Label } from "../components/ui/label";
|
||||||
|
import { Textarea } from "../components/ui/textarea";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
|
||||||
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip";
|
||||||
import { FeatureCard } from "../components/feature-card";
|
import { FeatureCard } from "../components/feature-card";
|
||||||
import { InfoCard } from "../components/info-card";
|
import { InfoCard } from "../components/info-card";
|
||||||
import { SectionHeader } from "../components/section-header";
|
import { SectionHeader } from "../components/section-header";
|
||||||
import { TestimonialCard } from "../components/testimonial-card";
|
import { TestimonialCard } from "../components/testimonial-card";
|
||||||
import { StatCard } from "../components/stat-card";
|
import { StatCard } from "../components/stat-card";
|
||||||
import { LootdropCard } from "../components/lootdrop-card";
|
import { LootdropCard } from "../components/lootdrop-card";
|
||||||
import { Activity, Coins, Flame, Trophy } from "lucide-react";
|
|
||||||
import { SettingsDrawer } from "../components/settings-drawer";
|
|
||||||
import { QuestForm } from "../components/quest-form";
|
|
||||||
|
|
||||||
import { RecentActivity } from "../components/recent-activity";
|
|
||||||
import { type RecentEvent } from "@shared/modules/dashboard/dashboard.types";
|
|
||||||
import { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
|
import { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
|
||||||
import { ActivityChart } from "../components/activity-chart";
|
import { ActivityChart } from "../components/activity-chart";
|
||||||
import { type ActivityData } from "@shared/modules/dashboard/dashboard.types";
|
import { RecentActivity } from "../components/recent-activity";
|
||||||
|
import { QuestForm } from "../components/quest-form";
|
||||||
|
import { Activity, Coins, Flame, Trophy, Check, User, Mail, Shield, Bell } from "lucide-react";
|
||||||
|
import { type RecentEvent, type ActivityData } from "@shared/modules/dashboard/dashboard.types";
|
||||||
|
|
||||||
|
// Mock Data
|
||||||
const mockEvents: RecentEvent[] = [
|
const mockEvents: RecentEvent[] = [
|
||||||
{ type: 'success', message: 'User leveled up to 5', timestamp: new Date(Date.now() - 1000 * 60 * 5), icon: '⬆️' },
|
{ type: 'success', message: 'User leveled up to 5', timestamp: new Date(Date.now() - 1000 * 60 * 5), icon: '⬆️' },
|
||||||
{ type: 'info', message: 'New user joined', timestamp: new Date(Date.now() - 1000 * 60 * 15), icon: '👋' },
|
{ type: 'info', message: 'New user joined', timestamp: new Date(Date.now() - 1000 * 60 * 15), icon: '👋' },
|
||||||
@@ -37,92 +40,65 @@ const mockActivityData: ActivityData[] = Array.from({ length: 24 }).map((_, i) =
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
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`,
|
|
||||||
timestamp: new Date(Date.now() - 1000 * 60 * i * 10),
|
|
||||||
icon: i % 3 === 0 ? '✨' : i % 3 === 1 ? 'ℹ️' : '🚨',
|
|
||||||
}));
|
|
||||||
|
|
||||||
const mockLeaderboardData: LeaderboardData = {
|
const mockLeaderboardData: LeaderboardData = {
|
||||||
topLevels: [
|
topLevels: [
|
||||||
{ username: "StellarMage", level: 99 },
|
{ username: "StellarMage", level: 99 },
|
||||||
{ username: "MoonWalker", level: 85 },
|
{ username: "MoonWalker", level: 85 },
|
||||||
{ username: "SunChaser", level: 72 },
|
{ username: "SunChaser", level: 72 },
|
||||||
{ username: "NebulaKnight", level: 68 },
|
|
||||||
{ username: "CometRider", level: 65 },
|
|
||||||
{ username: "VoidWalker", level: 60 },
|
|
||||||
{ username: "AstroBard", level: 55 },
|
|
||||||
{ username: "StarGazer", level: 50 },
|
|
||||||
{ username: "CosmicDruid", level: 45 },
|
|
||||||
{ username: "GalaxyGuard", level: 42 }
|
|
||||||
],
|
],
|
||||||
topWealth: [
|
topWealth: [
|
||||||
{ username: "GoldHoarder", balance: "1000000" },
|
{ username: "GoldHoarder", balance: "1000000" },
|
||||||
{ username: "MerchantKing", balance: "750000" },
|
{ username: "MerchantKing", balance: "750000" },
|
||||||
{ username: "LuckyLooter", balance: "500000" },
|
{ username: "LuckyLooter", balance: "500000" },
|
||||||
{ username: "CryptoMiner", balance: "450000" },
|
|
||||||
{ username: "MarketMaker", balance: "300000" },
|
|
||||||
{ username: "TradeWind", balance: "250000" },
|
|
||||||
{ username: "CoinKeeper", balance: "150000" },
|
|
||||||
{ username: "GemHunter", balance: "100000" },
|
|
||||||
{ username: "DustCollector", balance: "50000" },
|
|
||||||
{ username: "BrokeBeginner", balance: "100" }
|
|
||||||
],
|
],
|
||||||
topNetWorth: [
|
topNetWorth: [
|
||||||
{ username: "MerchantKing", netWorth: "1500000" },
|
{ username: "MerchantKing", netWorth: "1500000" },
|
||||||
{ username: "GoldHoarder", netWorth: "1250000" },
|
{ username: "GoldHoarder", netWorth: "1250000" },
|
||||||
{ username: "LuckyLooter", netWorth: "850000" },
|
{ username: "LuckyLooter", netWorth: "850000" },
|
||||||
{ username: "MarketMaker", netWorth: "700000" },
|
|
||||||
{ username: "GemHunter", netWorth: "650000" },
|
|
||||||
{ username: "CryptoMiner", netWorth: "550000" },
|
|
||||||
{ username: "TradeWind", netWorth: "400000" },
|
|
||||||
{ username: "CoinKeeper", netWorth: "250000" },
|
|
||||||
{ username: "DustCollector", netWorth: "150000" },
|
|
||||||
{ username: "BrokeBeginner", netWorth: "5000" }
|
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
export function DesignSystem() {
|
export function DesignSystem() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-aurora-page text-foreground font-outfit">
|
<div className="pt-8 px-8 max-w-7xl mx-auto space-y-8 text-center md:text-left pb-24">
|
||||||
{/* 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">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
|
|
||||||
<span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-6">
|
|
||||||
<Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Home
|
|
||||||
</Link>
|
|
||||||
<Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Dashboard
|
|
||||||
</Link>
|
|
||||||
<Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Admin
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div className="pt-32 px-8 max-w-6xl mx-auto space-y-12 text-center md:text-left">
|
|
||||||
{/* Header Section */}
|
{/* Header Section */}
|
||||||
<header className="space-y-4 animate-in fade-in">
|
<header className="space-y-4 animate-in fade-in">
|
||||||
<Badge variant="aurora" className="mb-2">v1.2.0-solar</Badge>
|
<div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-4">
|
||||||
<h1 className="text-6xl font-extrabold tracking-tight text-primary">
|
<div className="space-y-2">
|
||||||
|
<Badge variant="aurora" className="mb-2">v2.0.0-solaris</Badge>
|
||||||
|
<h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-primary glow-text">
|
||||||
Aurora Design System
|
Aurora Design System
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto md:mx-0">
|
<p className="text-xl text-muted-foreground max-w-2xl">
|
||||||
Welcome to the Solaris Dark theme. A warm, celestial-inspired aesthetic designed for the Aurora astrology RPG.
|
The Solaris design language. A cohesive collection of celestial components,
|
||||||
|
glassmorphic surfaces, and radiant interactions.
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<div className="size-32 rounded-full bg-aurora opacity-20 blur-3xl animate-pulse" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<Tabs defaultValue="foundations" className="space-y-8 animate-in slide-up delay-100">
|
||||||
|
<div className="flex items-center justify-center md:justify-start">
|
||||||
|
<TabsList className="grid w-full max-w-md grid-cols-3">
|
||||||
|
<TabsTrigger value="foundations">Foundations</TabsTrigger>
|
||||||
|
<TabsTrigger value="components">Components</TabsTrigger>
|
||||||
|
<TabsTrigger value="patterns">Patterns</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* FOUNDATIONS TAB */}
|
||||||
|
<TabsContent value="foundations" className="space-y-12">
|
||||||
{/* Color Palette */}
|
{/* Color Palette */}
|
||||||
<section className="space-y-6 animate-in slide-up delay-100">
|
<section className="space-y-6">
|
||||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
<div className="flex items-center gap-4">
|
||||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
<div className="h-px bg-border flex-1" />
|
||||||
Color Palette
|
<h2 className="text-2xl font-bold text-foreground">Color Palette</h2>
|
||||||
</h2>
|
<div className="h-px bg-border flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||||
<ColorSwatch label="Primary" color="bg-primary" text="text-primary-foreground" />
|
<ColorSwatch label="Primary" color="bg-primary" text="text-primary-foreground" />
|
||||||
<ColorSwatch label="Secondary" color="bg-secondary" text="text-secondary-foreground" />
|
<ColorSwatch label="Secondary" color="bg-secondary" text="text-secondary-foreground" />
|
||||||
@@ -134,54 +110,16 @@ export function DesignSystem() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Badges & Pills */}
|
|
||||||
<section className="space-y-6 animate-in slide-up delay-200">
|
|
||||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
|
||||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
|
||||||
Badges & Tags
|
|
||||||
</h2>
|
|
||||||
<div className="flex flex-wrap gap-4 items-center justify-center md:justify-start">
|
|
||||||
<Badge className="hover-scale cursor-default">Primary</Badge>
|
|
||||||
<Badge variant="secondary" className="hover-scale cursor-default">Secondary</Badge>
|
|
||||||
<Badge variant="aurora" className="hover-scale cursor-default">Solaris</Badge>
|
|
||||||
<Badge variant="glass" className="hover-scale cursor-default">Celestial Glass</Badge>
|
|
||||||
<Badge variant="outline" className="hover-scale cursor-default">Outline</Badge>
|
|
||||||
<Badge variant="destructive" className="hover-scale cursor-default">Destructive</Badge>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Animations & Interactions */}
|
|
||||||
<section className="space-y-6 animate-in slide-up delay-300">
|
|
||||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
|
||||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
|
||||||
Animations & Interactions
|
|
||||||
</h2>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<div className="glass-card p-6 rounded-xl hover-lift cursor-pointer space-y-2">
|
|
||||||
<h3 className="font-bold text-primary">Hover Lift</h3>
|
|
||||||
<p className="text-sm text-muted-foreground">Smooth upward translation with enhanced depth.</p>
|
|
||||||
</div>
|
|
||||||
<div className="glass-card p-6 rounded-xl hover-glow cursor-pointer space-y-2">
|
|
||||||
<h3 className="font-bold text-primary">Hover Glow</h3>
|
|
||||||
<p className="text-sm text-muted-foreground">Subtle border and shadow illumination on hover.</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-center p-6">
|
|
||||||
<Button className="bg-primary text-primary-foreground active-press font-bold px-8 py-6 rounded-xl shadow-lg">
|
|
||||||
Press Interaction
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Gradients & Special Effects */}
|
{/* Gradients & Special Effects */}
|
||||||
<section className="space-y-6 animate-in slide-up delay-400">
|
<section className="space-y-6">
|
||||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
<div className="flex items-center gap-4">
|
||||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
<div className="h-px bg-border flex-1" />
|
||||||
Gradients & Effects
|
<h2 className="text-2xl font-bold text-foreground">Gradients & Effects</h2>
|
||||||
</h2>
|
<div className="h-px bg-border flex-1" />
|
||||||
|
</div>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-center">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-center">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-xl font-medium text-muted-foreground">The Solaris Gradient (Background)</h3>
|
<h3 className="text-xl font-medium text-muted-foreground">The Solaris Gradient</h3>
|
||||||
<div className="h-32 w-full rounded-xl bg-aurora-page sun-flare flex items-center justify-center border border-border hover-glow transition-all">
|
<div className="h-32 w-full rounded-xl bg-aurora-page sun-flare flex items-center justify-center border border-border hover-glow transition-all">
|
||||||
<span className="text-primary font-bold text-2xl">Celestial Void</span>
|
<span className="text-primary font-bold text-2xl">Celestial Void</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -197,292 +135,14 @@ export function DesignSystem() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Components Showcase */}
|
|
||||||
<section className="space-y-6 animate-in slide-up delay-500">
|
|
||||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
|
||||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
|
||||||
Component Showcase
|
|
||||||
</h2>
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
||||||
{/* Action Card with Tags */}
|
|
||||||
<Card className="glass-card sun-flare overflow-hidden border-none text-left hover-lift transition-all">
|
|
||||||
<div className="h-2 bg-primary w-full" />
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
||||||
<CardTitle className="text-primary">Celestial Action</CardTitle>
|
|
||||||
<Badge variant="aurora" className="h-5">New</Badge>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Badge variant="glass" className="text-[10px] uppercase">Quest</Badge>
|
|
||||||
<Badge variant="glass" className="text-[10px] uppercase">Level 15</Badge>
|
|
||||||
</div>
|
|
||||||
<p className="text-muted-foreground text-sm">
|
|
||||||
Experience the warmth of the sun in every interaction and claim your rewards.
|
|
||||||
</p>
|
|
||||||
<div className="flex gap-2 pt-2">
|
|
||||||
<Button className="bg-primary text-primary-foreground active-press font-bold px-6">
|
|
||||||
Ascend
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Profile/Entity Card with Tags */}
|
|
||||||
<Card className="glass-card text-left hover-lift transition-all">
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<div className="flex justify-between items-start">
|
|
||||||
<div className="w-12 h-12 rounded-full bg-aurora border-2 border-primary/20 hover-scale transition-transform cursor-pointer" />
|
|
||||||
<Badge variant="secondary" className="bg-green-500/10 text-green-500 border-green-500/20">Online</Badge>
|
|
||||||
</div>
|
|
||||||
<CardTitle className="mt-4">Stellar Navigator</CardTitle>
|
|
||||||
<p className="text-xs text-muted-foreground uppercase tracking-wider">Level 42 Mage</p>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Astronomy</Badge>
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Pyromancy</Badge>
|
|
||||||
<Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Leadership</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="h-1.5 w-full bg-secondary/20 rounded-full overflow-hidden">
|
|
||||||
<div className="h-full bg-aurora w-[75%] animate-in slide-up delay-500" />
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Interactive Card with Tags */}
|
|
||||||
<Card className="glass-card text-left hover-glow transition-all">
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center gap-2 mb-2">
|
|
||||||
<Badge variant="glass" className="bg-primary/10 text-primary border-primary/20">Beta</Badge>
|
|
||||||
</div>
|
|
||||||
<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">
|
|
||||||
<div className="space-y-0.5">
|
|
||||||
<div className="font-medium">Starry Background</div>
|
|
||||||
<div className="text-sm text-muted-foreground">Enable animated SVG stars</div>
|
|
||||||
</div>
|
|
||||||
<Switch defaultChecked />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="space-y-0.5">
|
|
||||||
<div className="font-medium flex items-center gap-2">
|
|
||||||
Solar Flare Glow
|
|
||||||
<Badge className="bg-amber-500/10 text-amber-500 border-amber-500/20 text-[9px] h-4">Pro</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-muted-foreground">Add bloom to primary elements</div>
|
|
||||||
</div>
|
|
||||||
<Switch defaultChecked />
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Refactored Application Components */}
|
|
||||||
<section className="space-y-6 animate-in slide-up delay-600">
|
|
||||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
|
||||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
|
||||||
Application Components
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div className="space-y-12">
|
|
||||||
{/* Section Header Demo */}
|
|
||||||
<div className="border border-border/50 rounded-xl p-8 bg-background/50">
|
|
||||||
<SectionHeader
|
|
||||||
badge="Components"
|
|
||||||
title="Section Headers"
|
|
||||||
description="Standardized header component for defining page sections with badge, title, and description."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Feature Cards Demo */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<FeatureCard
|
|
||||||
title="Feature Card"
|
|
||||||
category="UI Element"
|
|
||||||
description="A versatile card component for the bento grid layout."
|
|
||||||
icon={<div className="w-20 h-20 bg-primary/20 rounded-full animate-pulse" />}
|
|
||||||
/>
|
|
||||||
<FeatureCard
|
|
||||||
title="Interactive Feature"
|
|
||||||
category="Interactive"
|
|
||||||
description="Supports custom children nodes for complex content."
|
|
||||||
>
|
|
||||||
<div className="mt-2 p-3 bg-secondary/10 border border-secondary/20 rounded text-center text-secondary text-sm font-bold">
|
|
||||||
Custom Child Content
|
|
||||||
</div>
|
|
||||||
</FeatureCard>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Info Cards Demo */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<InfoCard
|
|
||||||
icon={<div className="w-6 h-6 rounded-full bg-primary animate-ping" />}
|
|
||||||
title="Info Card"
|
|
||||||
description="Compact card for highlighting features or perks with an icon."
|
|
||||||
iconWrapperClassName="bg-primary/20 text-primary"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stat Cards Demo */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<StatCard
|
|
||||||
title="Standard Stat"
|
|
||||||
value="1,234"
|
|
||||||
subtitle="Active users"
|
|
||||||
icon={Activity}
|
|
||||||
isLoading={false}
|
|
||||||
/>
|
|
||||||
<StatCard
|
|
||||||
title="Colored Stat"
|
|
||||||
value="9,999 AU"
|
|
||||||
subtitle="Total Wealth"
|
|
||||||
icon={Coins}
|
|
||||||
isLoading={false}
|
|
||||||
valueClassName="text-primary"
|
|
||||||
iconClassName="text-primary"
|
|
||||||
/>
|
|
||||||
<StatCard
|
|
||||||
title="Loading State"
|
|
||||||
value={null}
|
|
||||||
icon={Flame}
|
|
||||||
isLoading={true}
|
|
||||||
/>
|
|
||||||
</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>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<LootdropCard
|
|
||||||
isLoading={true}
|
|
||||||
/>
|
|
||||||
<LootdropCard
|
|
||||||
drop={null}
|
|
||||||
state={{
|
|
||||||
monitoredChannels: 3,
|
|
||||||
hottestChannel: {
|
|
||||||
id: "123",
|
|
||||||
messages: 42,
|
|
||||||
progress: 42,
|
|
||||||
cooldown: false
|
|
||||||
},
|
|
||||||
config: { requiredMessages: 100, dropChance: 0.1 }
|
|
||||||
}}
|
|
||||||
isLoading={false}
|
|
||||||
/>
|
|
||||||
<LootdropCard
|
|
||||||
drop={null}
|
|
||||||
state={{
|
|
||||||
monitoredChannels: 3,
|
|
||||||
hottestChannel: {
|
|
||||||
id: "123",
|
|
||||||
messages: 100,
|
|
||||||
progress: 100,
|
|
||||||
cooldown: true
|
|
||||||
},
|
|
||||||
config: { requiredMessages: 100, dropChance: 0.1 }
|
|
||||||
}}
|
|
||||||
isLoading={false}
|
|
||||||
/>
|
|
||||||
<LootdropCard
|
|
||||||
drop={{
|
|
||||||
rewardAmount: 500,
|
|
||||||
currency: "AU",
|
|
||||||
createdAt: new Date().toISOString(),
|
|
||||||
expiresAt: new Date(Date.now() + 60000).toISOString()
|
|
||||||
}}
|
|
||||||
isLoading={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Leaderboard Demo */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-xl font-semibold text-muted-foreground">Leaderboard Cards</h3>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
<LeaderboardCard
|
|
||||||
isLoading={true}
|
|
||||||
/>
|
|
||||||
<LeaderboardCard
|
|
||||||
data={mockLeaderboardData}
|
|
||||||
isLoading={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Testimonial Cards Demo */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
||||||
<TestimonialCard
|
|
||||||
quote="The testimonial card is perfect for social proof sections."
|
|
||||||
author="Jane Doe"
|
|
||||||
role="Beta Tester"
|
|
||||||
avatarGradient="bg-gradient-to-br from-pink-500 to-rose-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Recent Activity Demo */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-xl font-semibold text-muted-foreground">Recent Activity Feed</h3>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 h-[500px]">
|
|
||||||
<RecentActivity
|
|
||||||
events={[]}
|
|
||||||
isLoading={true}
|
|
||||||
className="h-full"
|
|
||||||
/>
|
|
||||||
<RecentActivity
|
|
||||||
events={[]}
|
|
||||||
isLoading={false}
|
|
||||||
className="h-full"
|
|
||||||
/>
|
|
||||||
<RecentActivity
|
|
||||||
events={mockEvents}
|
|
||||||
isLoading={false}
|
|
||||||
className="h-full"
|
|
||||||
/>
|
|
||||||
<RecentActivity
|
|
||||||
events={mockManyEvents}
|
|
||||||
isLoading={false}
|
|
||||||
className="h-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Administrative Tools Showcase */}
|
|
||||||
<section className="space-y-6 animate-in slide-up delay-700">
|
|
||||||
<h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
|
|
||||||
<span className="w-8 h-8 rounded-full bg-primary inline-block" />
|
|
||||||
Administrative Tools
|
|
||||||
</h2>
|
|
||||||
<div className="grid grid-cols-1 gap-6 text-left">
|
|
||||||
<QuestForm />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Typography */}
|
{/* Typography */}
|
||||||
<section className="space-y-8 pb-12">
|
<section className="space-y-8">
|
||||||
<h2 className="text-step-3 font-bold text-center">Fluid Typography</h2>
|
<div className="flex items-center gap-4">
|
||||||
<div className="space-y-6">
|
<div className="h-px bg-border flex-1" />
|
||||||
|
<h2 className="text-2xl font-bold text-foreground">Typography</h2>
|
||||||
|
<div className="h-px bg-border flex-1" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2 border border-border/50 rounded-xl p-8 bg-card/50">
|
||||||
<TypographyRow step="-2" className="text-step--2" label="Step -2 (Small Print)" />
|
<TypographyRow step="-2" className="text-step--2" label="Step -2 (Small Print)" />
|
||||||
<TypographyRow step="-1" className="text-step--1" label="Step -1 (Small)" />
|
<TypographyRow step="-1" className="text-step--1" label="Step -1 (Small)" />
|
||||||
<TypographyRow step="0" className="text-step-0" label="Step 0 (Base / Body)" />
|
<TypographyRow step="0" className="text-step-0" label="Step 0 (Base / Body)" />
|
||||||
@@ -492,19 +152,214 @@ export function DesignSystem() {
|
|||||||
<TypographyRow step="4" className="text-step-4 text-primary" label="Step 4 (H1 / Title)" />
|
<TypographyRow step="4" className="text-step-4 text-primary" label="Step 4 (H1 / Title)" />
|
||||||
<TypographyRow step="5" className="text-step-5 text-primary font-black" label="Step 5 (Display)" />
|
<TypographyRow step="5" className="text-step-5 text-primary font-black" label="Step 5 (Display)" />
|
||||||
</div>
|
</div>
|
||||||
<p className="text-step--1 text-muted-foreground text-center italic">
|
|
||||||
Try resizing your browser window to see the text scale smoothly.
|
|
||||||
</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* COMPONENTS TAB */}
|
||||||
|
<TabsContent value="components" className="space-y-12">
|
||||||
|
{/* Buttons & Badges */}
|
||||||
|
<section className="space-y-6">
|
||||||
|
<SectionTitle title="Buttons & Badges" />
|
||||||
|
<Card className="p-8">
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Label>Buttons</Label>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<Button variant="default">Default</Button>
|
||||||
|
<Button variant="secondary">Secondary</Button>
|
||||||
|
<Button variant="outline">Outline</Button>
|
||||||
|
<Button variant="ghost">Ghost</Button>
|
||||||
|
<Button variant="destructive">Destructive</Button>
|
||||||
|
<Button variant="link">Link</Button>
|
||||||
|
<Button variant="aurora">Aurora</Button>
|
||||||
|
<Button variant="glass">Glass</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Label>Badges</Label>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<Badge>Primary</Badge>
|
||||||
|
<Badge variant="secondary">Secondary</Badge>
|
||||||
|
<Badge variant="outline">Outline</Badge>
|
||||||
|
<Badge variant="destructive">Destructive</Badge>
|
||||||
|
<Badge variant="aurora">Aurora</Badge>
|
||||||
|
<Badge variant="glass">Glass</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Form Controls */}
|
||||||
|
<section className="space-y-6">
|
||||||
|
<SectionTitle title="Form Controls" />
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<Card className="p-6 space-y-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="email">Email Address</Label>
|
||||||
|
<Input id="email" placeholder="enter@email.com" type="email" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="bio">Bio</Label>
|
||||||
|
<Textarea id="bio" placeholder="Tell us about yourself..." />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Label htmlFor="notifications">Enable Notifications</Label>
|
||||||
|
<Switch id="notifications" />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<Card className="p-6 space-y-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Role Selection</Label>
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select a role" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="admin">Administrator</SelectItem>
|
||||||
|
<SelectItem value="mod">Moderator</SelectItem>
|
||||||
|
<SelectItem value="user">User</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Tooltip Demo</Label>
|
||||||
|
<div className="p-4 border border-dashed rounded-lg flex items-center justify-center">
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Button variant="outline">Hover Me</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>This is a glowing tooltip!</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Cards & Containers */}
|
||||||
|
<section className="space-y-6">
|
||||||
|
<SectionTitle title="Cards & Containers" />
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<Card className="hover-lift">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Standard Card</CardTitle>
|
||||||
|
<CardDescription>Default glassmorphic style</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-muted-foreground">The default card component comes with built-in separation and padding.</p>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Button size="sm" variant="secondary" className="w-full">Action</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-aurora/10 border-primary/20 hover-glow">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-primary">Highlighted Card</CardTitle>
|
||||||
|
<CardDescription>Active or featured state</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-muted-foreground">Use this variation to draw attention to specific content blocks.</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="border-dashed shadow-none bg-transparent">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Ghost/Dashed Card</CardTitle>
|
||||||
|
<CardDescription>Placeholder or empty state</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex items-center justify-center py-8">
|
||||||
|
<div className="bg-muted p-4 rounded-full">
|
||||||
|
<Activity className="size-6 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* PATTERNS TAB */}
|
||||||
|
<TabsContent value="patterns" className="space-y-12">
|
||||||
|
{/* Dashboard Widgets */}
|
||||||
|
<section className="space-y-6">
|
||||||
|
<SectionTitle title="Dashboard Widgets" />
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<StatCard
|
||||||
|
title="Total XP"
|
||||||
|
value="1,240,500"
|
||||||
|
subtitle="+12% from last week"
|
||||||
|
icon={Trophy}
|
||||||
|
isLoading={false}
|
||||||
|
iconClassName="text-yellow-500"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="Active Users"
|
||||||
|
value="3,405"
|
||||||
|
subtitle="Currently online"
|
||||||
|
icon={User}
|
||||||
|
isLoading={false}
|
||||||
|
iconClassName="text-blue-500"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="System Load"
|
||||||
|
value="42%"
|
||||||
|
subtitle="Optimal performance"
|
||||||
|
icon={Activity}
|
||||||
|
isLoading={false}
|
||||||
|
iconClassName="text-green-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Complex Lists */}
|
||||||
|
<section className="space-y-6">
|
||||||
|
<SectionTitle title="Complex Lists & Charts" />
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<RecentActivity
|
||||||
|
events={mockEvents}
|
||||||
|
isLoading={false}
|
||||||
|
className="h-[400px]"
|
||||||
|
/>
|
||||||
|
<LeaderboardCard
|
||||||
|
data={mockLeaderboardData}
|
||||||
|
isLoading={false}
|
||||||
|
className="h-[400px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Application Patterns */}
|
||||||
|
<section className="space-y-6">
|
||||||
|
<SectionTitle title="Application Forms" />
|
||||||
|
<div className="max-w-xl mx-auto">
|
||||||
|
<QuestForm />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SectionTitle({ title }: { title: string }) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-4 py-4">
|
||||||
|
<div className="h-0.5 bg-gradient-to-r from-transparent via-primary/50 to-transparent flex-1" />
|
||||||
|
<h2 className="text-xl font-bold text-foreground/80 uppercase tracking-widest">{title}</h2>
|
||||||
|
<div className="h-0.5 bg-gradient-to-r from-transparent via-primary/50 to-transparent flex-1" />
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function TypographyRow({ step, className, label }: { step: string, className: string, label: string }) {
|
function TypographyRow({ step, className, label }: { step: string, className: string, label: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col md:flex-row md:items-baseline gap-4 border-b border-border/50 pb-4">
|
<div className="flex flex-col md:flex-row md:items-baseline gap-4 border-b border-border/50 pb-4 last:border-0 last:pb-0">
|
||||||
<span className="text-step--2 font-mono text-muted-foreground w-20">Step {step}</span>
|
<span className="text-xs font-mono text-muted-foreground w-24 shrink-0">var(--step-{step})</span>
|
||||||
<p className={`${className} font-medium truncate`}>{label}</p>
|
<p className={`${className} font-medium truncate`}>{label}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -512,9 +367,13 @@ function TypographyRow({ step, className, label }: { step: string, className: st
|
|||||||
|
|
||||||
function ColorSwatch({ label, color, text = "text-foreground", border = false }: { label: string, color: string, text?: string, border?: boolean }) {
|
function ColorSwatch({ label, color, text = "text-foreground", border = false }: { label: string, color: string, text?: string, border?: boolean }) {
|
||||||
return (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="group space-y-2 cursor-pointer">
|
||||||
<div className={`h-20 w-full rounded-lg ${color} ${border ? 'border border-border' : ''} flex items-end p-2 shadow-lg`}>
|
<div className={`h-24 w-full rounded-xl ${color} ${border ? 'border border-border' : ''} flex items-end p-3 shadow-lg group-hover:scale-105 transition-transform duration-300 relative overflow-hidden`}>
|
||||||
<span className={`text-xs font-bold uppercase tracking-widest ${text}`}>{label}</span>
|
<div className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
<span className={`text-xs font-bold uppercase tracking-widest ${text} relative z-10`}>{label}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-xs text-muted-foreground px-1">
|
||||||
|
<span>{color.replace('bg-', '')}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { Badge } from "../components/ui/badge";
|
import { Badge } from "../components/ui/badge";
|
||||||
import { Button } from "../components/ui/button";
|
import { Button } from "../components/ui/button";
|
||||||
import { FeatureCard } from "../components/feature-card";
|
import { FeatureCard } from "../components/feature-card";
|
||||||
@@ -17,28 +16,9 @@ import {
|
|||||||
|
|
||||||
export function Home() {
|
export function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
|
<>
|
||||||
{/* Navigation (Simple) */}
|
|
||||||
<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">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
|
|
||||||
<span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-6">
|
|
||||||
<Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Dashboard
|
|
||||||
</Link>
|
|
||||||
<Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Design System
|
|
||||||
</Link>
|
|
||||||
<Link to="/admin/quests" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
||||||
Admin
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<header className="relative pt-32 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
|
<header className="relative pt-16 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
|
||||||
<Badge variant="glass" className="mb-4 py-1.5 px-4 text-step--1 animate-in zoom-in spin-in-12 duration-700 delay-100">
|
<Badge variant="glass" className="mb-4 py-1.5 px-4 text-step--1 animate-in zoom-in spin-in-12 duration-700 delay-100">
|
||||||
The Ultimate Academic Strategy RPG
|
The Ultimate Academic Strategy RPG
|
||||||
</Badge>
|
</Badge>
|
||||||
@@ -232,7 +212,7 @@ export function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
164
web/src/pages/admin/Overview.tsx
Normal file
164
web/src/pages/admin/Overview.tsx
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { SectionHeader } from "../../components/section-header";
|
||||||
|
import { useSocket } from "../../hooks/use-socket";
|
||||||
|
import { StatCard } from "../../components/stat-card";
|
||||||
|
import { ActivityChart } from "../../components/activity-chart";
|
||||||
|
import { LootdropCard } from "../../components/lootdrop-card";
|
||||||
|
import { LeaderboardCard } from "../../components/leaderboard-card";
|
||||||
|
import { RecentActivity } from "../../components/recent-activity";
|
||||||
|
import { CommandsDrawer } from "../../components/commands-drawer";
|
||||||
|
import { Server, Users, Terminal, Activity, Coins, TrendingUp, Flame, Package } from "lucide-react";
|
||||||
|
import { cn } from "../../lib/utils";
|
||||||
|
|
||||||
|
export function AdminOverview() {
|
||||||
|
const { isConnected, stats } = useSocket();
|
||||||
|
const [commandsDrawerOpen, setCommandsDrawerOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
|
||||||
|
<SectionHeader
|
||||||
|
badge="Admin Dashboard"
|
||||||
|
title="Overview"
|
||||||
|
description="Monitor your Aurora RPG server statistics and activity."
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 animate-in fade-in slide-up duration-700">
|
||||||
|
<StatCard
|
||||||
|
title="Total Servers"
|
||||||
|
icon={Server}
|
||||||
|
isLoading={!stats}
|
||||||
|
value={stats?.guilds.count.toLocaleString()}
|
||||||
|
subtitle={stats?.guilds.changeFromLastMonth
|
||||||
|
? `${stats.guilds.changeFromLastMonth > 0 ? '+' : ''}${stats.guilds.changeFromLastMonth} from last month`
|
||||||
|
: "Active Guilds"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StatCard
|
||||||
|
title="Total Users"
|
||||||
|
icon={Users}
|
||||||
|
isLoading={!stats}
|
||||||
|
value={stats?.users.total.toLocaleString()}
|
||||||
|
subtitle={stats ? `${stats.users.active.toLocaleString()} active now` : undefined}
|
||||||
|
className="delay-100"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StatCard
|
||||||
|
title="Commands"
|
||||||
|
icon={Terminal}
|
||||||
|
isLoading={!stats}
|
||||||
|
value={stats?.commands.total.toLocaleString()}
|
||||||
|
subtitle={stats ? `${stats.commands.active} active · ${stats.commands.disabled} disabled` : undefined}
|
||||||
|
className="delay-200"
|
||||||
|
onClick={() => setCommandsDrawerOpen(true)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StatCard
|
||||||
|
title="System Ping"
|
||||||
|
icon={Activity}
|
||||||
|
isLoading={!stats}
|
||||||
|
value={stats ? `${Math.round(stats.ping.avg)}ms` : undefined}
|
||||||
|
subtitle="Average latency"
|
||||||
|
className="delay-300"
|
||||||
|
valueClassName={stats ? cn(
|
||||||
|
"transition-colors duration-300",
|
||||||
|
stats.ping.avg < 100 ? "text-emerald-500" :
|
||||||
|
stats.ping.avg < 200 ? "text-yellow-500" : "text-red-500"
|
||||||
|
) : undefined}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-semibold tracking-tight mb-4">Economy Overview</h2>
|
||||||
|
<div className="grid gap-4 md:grid-cols-2">
|
||||||
|
<StatCard
|
||||||
|
title="Total Wealth"
|
||||||
|
icon={Coins}
|
||||||
|
isLoading={!stats}
|
||||||
|
value={stats ? `${Number(stats.economy.totalWealth).toLocaleString()} AU` : undefined}
|
||||||
|
subtitle="Astral Units in circulation"
|
||||||
|
valueClassName="text-primary"
|
||||||
|
iconClassName="text-primary"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StatCard
|
||||||
|
title="Items Circulating"
|
||||||
|
icon={Package}
|
||||||
|
isLoading={!stats}
|
||||||
|
value={stats?.economy.totalItems?.toLocaleString()}
|
||||||
|
subtitle="Total items owned by users"
|
||||||
|
className="delay-75"
|
||||||
|
valueClassName="text-blue-500"
|
||||||
|
iconClassName="text-blue-500"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StatCard
|
||||||
|
title="Average Level"
|
||||||
|
icon={TrendingUp}
|
||||||
|
isLoading={!stats}
|
||||||
|
value={stats ? `Lvl ${stats.economy.avgLevel}` : undefined}
|
||||||
|
subtitle="Global player average"
|
||||||
|
className="delay-100"
|
||||||
|
valueClassName="text-secondary"
|
||||||
|
iconClassName="text-secondary"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<StatCard
|
||||||
|
title="Top /daily Streak"
|
||||||
|
icon={Flame}
|
||||||
|
isLoading={!stats}
|
||||||
|
value={stats?.economy.topStreak}
|
||||||
|
subtitle="Days daily streak"
|
||||||
|
className="delay-200"
|
||||||
|
valueClassName="text-destructive"
|
||||||
|
iconClassName="text-destructive"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<LeaderboardCard
|
||||||
|
data={stats?.leaderboards}
|
||||||
|
isLoading={!stats}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recent Activity & Lootdrops */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<LootdropCard
|
||||||
|
drop={stats?.activeLootdrops?.[0]}
|
||||||
|
state={stats?.lootdropState}
|
||||||
|
isLoading={!stats}
|
||||||
|
/>
|
||||||
|
<div className="h-[calc(100%-12rem)] min-h-[400px]">
|
||||||
|
<h2 className="text-xl font-semibold tracking-tight mb-4">Live Feed</h2>
|
||||||
|
<RecentActivity
|
||||||
|
events={stats?.recentEvents || []}
|
||||||
|
isLoading={!stats}
|
||||||
|
className="h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Commands Drawer */}
|
||||||
|
<CommandsDrawer
|
||||||
|
open={commandsDrawerOpen}
|
||||||
|
onOpenChange={setCommandsDrawerOpen}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdminOverview;
|
||||||
290
web/src/pages/settings/Economy.tsx
Normal file
290
web/src/pages/settings/Economy.tsx
Normal file
@@ -0,0 +1,290 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useSettingsForm } from "./SettingsLayout";
|
||||||
|
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||||
|
import { Users, Backpack, Sparkles, CreditCard, MessageSquare } from "lucide-react";
|
||||||
|
|
||||||
|
export function EconomySettings() {
|
||||||
|
const { form } = useSettingsForm();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6 animate-in fade-in slide-up duration-500">
|
||||||
|
<Accordion type="multiple" className="w-full space-y-4" defaultValue={["daily", "inventory"]}>
|
||||||
|
<AccordionItem value="daily" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||||
|
<AccordionTrigger className="hover:no-underline py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-yellow-500/10 flex items-center justify-center text-yellow-500">
|
||||||
|
<Users className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span className="font-bold">Daily Rewards</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pb-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="economy.daily.amount"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Base Amount</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="text" className="bg-background/50" placeholder="100" />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription className="text-xs">Reward (AU)</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="economy.daily.streakBonus"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Streak Bonus</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="text" className="bg-background/50" placeholder="10" />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription className="text-xs">Bonus/day</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="economy.daily.weeklyBonus"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Weekly Bonus</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="text" className="bg-background/50" placeholder="50" />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription className="text-xs">7-day bonus</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="economy.daily.cooldownMs"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Cooldown (ms)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="inventory" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||||
|
<AccordionTrigger className="hover:no-underline py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-500">
|
||||||
|
<Backpack className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span className="font-bold">Inventory</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pb-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="inventory.maxStackSize"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Max Stack Size</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="text" className="bg-background/50" />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="inventory.maxSlots"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Max Slots</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="leveling" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||||
|
<AccordionTrigger className="hover:no-underline py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
|
||||||
|
<Sparkles className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span className="font-bold">Leveling & XP</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pb-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="leveling.base"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Base XP</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="leveling.exponent"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Exponent</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="bg-muted/30 p-4 rounded-lg space-y-3">
|
||||||
|
<h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
|
||||||
|
<MessageSquare className="w-3 h-3" /> Chat XP
|
||||||
|
</h4>
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="leveling.chat.minXp"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="space-y-1">
|
||||||
|
<FormLabel className="text-xs">Min</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="leveling.chat.maxXp"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="space-y-1">
|
||||||
|
<FormLabel className="text-xs">Max</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="leveling.chat.cooldownMs"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="space-y-1">
|
||||||
|
<FormLabel className="text-xs">Cooldown</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="transfers" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||||
|
<AccordionTrigger className="hover:no-underline py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center text-green-500">
|
||||||
|
<CreditCard className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span className="font-bold">Transfers</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pb-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="economy.transfers.allowSelfTransfer"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel className="text-sm font-medium">Allow Self-Transfer</FormLabel>
|
||||||
|
<FormDescription className="text-xs">
|
||||||
|
Permit users to transfer currency to themselves.
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="economy.transfers.minAmount"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Minimum Transfer Amount</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="text" placeholder="1" className="bg-background/50" />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="exam" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||||
|
<AccordionTrigger className="hover:no-underline py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500">
|
||||||
|
<Sparkles className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span className="font-bold">Exams</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pb-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="economy.exam.multMin"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Min Multiplier</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="economy.exam.multMax"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Max Multiplier</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
149
web/src/pages/settings/General.tsx
Normal file
149
web/src/pages/settings/General.tsx
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useSettingsForm } from "./SettingsLayout";
|
||||||
|
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { MessageSquare, Terminal } from "lucide-react";
|
||||||
|
import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";
|
||||||
|
|
||||||
|
export function GeneralSettings() {
|
||||||
|
const { form, meta } = useSettingsForm();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8 animate-in fade-in slide-up duration-500">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||||
|
<MessageSquare className="w-3 h-3 mr-1" /> Onboarding
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="welcomeChannelId"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||||
|
<FormLabel className="text-foreground/80">Welcome Channel</FormLabel>
|
||||||
|
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="bg-background/50 border-border/50">
|
||||||
|
<SelectValue placeholder="Select a channel" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||||
|
{meta?.channels
|
||||||
|
.filter(c => c.type === 0)
|
||||||
|
.map(c => (
|
||||||
|
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription>Where to send welcome messages.</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="welcomeMessage"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||||
|
<FormLabel className="text-foreground/80">Welcome Message Template</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Textarea
|
||||||
|
{...field}
|
||||||
|
value={field.value || ""}
|
||||||
|
placeholder="Welcome {user}!"
|
||||||
|
className="min-h-[100px] font-mono text-xs bg-background/50 border-border/50 focus:border-primary/50 focus:ring-primary/20 resize-none"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>Available variables: {"{user}"}, {"{count}"}.</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||||
|
Channels & Features
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="feedbackChannelId"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||||
|
<FormLabel className="text-foreground/80">Feedback Channel</FormLabel>
|
||||||
|
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="bg-background/50 border-border/50">
|
||||||
|
<SelectValue placeholder="Select a channel" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||||
|
{meta?.channels.filter(c => c.type === 0).map(c => (
|
||||||
|
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription>Where user feedback is sent.</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="glass-card p-5 rounded-xl border border-border/50 space-y-4">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<Terminal className="w-4 h-4 text-muted-foreground" />
|
||||||
|
<h4 className="font-medium text-sm">Terminal Embed</h4>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="terminal.channelId"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Channel</FormLabel>
|
||||||
|
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="bg-background/50 border-border/50 h-9 text-xs">
|
||||||
|
<SelectValue placeholder="Select channel" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||||
|
{meta?.channels.filter(c => c.type === 0).map(c => (
|
||||||
|
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="terminal.messageId"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Message ID</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} value={field.value || ""} placeholder="Message ID" className="font-mono text-xs bg-background/50 border-border/50 h-9" />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
141
web/src/pages/settings/Roles.tsx
Normal file
141
web/src/pages/settings/Roles.tsx
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useSettingsForm } from "./SettingsLayout";
|
||||||
|
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Palette, Users } from "lucide-react";
|
||||||
|
import { fromSelectValue, toSelectValue } from "@/hooks/use-settings";
|
||||||
|
|
||||||
|
export function RolesSettings() {
|
||||||
|
const { form, meta } = useSettingsForm();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8 animate-in fade-in slide-up duration-500">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||||
|
<Users className="w-3 h-3 mr-1" /> System Roles
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="studentRole"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||||
|
<FormLabel className="font-bold">Student Role</FormLabel>
|
||||||
|
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="bg-background/50">
|
||||||
|
<SelectValue placeholder="Select role" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{meta?.roles.map(r => (
|
||||||
|
<SelectItem key={r.id} value={r.id}>
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
|
||||||
|
{r.name}
|
||||||
|
</span>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription className="text-xs">Default role for new members/students.</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="visitorRole"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="glass-card p-5 rounded-xl border border-border/50">
|
||||||
|
<FormLabel className="font-bold">Visitor Role</FormLabel>
|
||||||
|
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="bg-background/50">
|
||||||
|
<SelectValue placeholder="Select role" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{meta?.roles.map(r => (
|
||||||
|
<SelectItem key={r.id} value={r.id}>
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<span className="w-3 h-3 rounded-full" style={{ background: r.color }} />
|
||||||
|
{r.name}
|
||||||
|
</span>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription className="text-xs">Role for visitors/guests.</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
|
||||||
|
<Palette className="w-3 h-3 mr-1" /> Color Roles
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="glass-card p-6 rounded-xl border border-border/50 bg-card/30">
|
||||||
|
<div className="mb-4">
|
||||||
|
<FormDescription className="text-sm">
|
||||||
|
Select roles that users can choose from to set their name color in the bot.
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<ScrollArea className="h-[400px] pr-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
|
{meta?.roles.map((role) => (
|
||||||
|
<FormField
|
||||||
|
key={role.id}
|
||||||
|
control={form.control}
|
||||||
|
name="colorRoles"
|
||||||
|
render={({ field }) => {
|
||||||
|
const isSelected = field.value?.includes(role.id);
|
||||||
|
return (
|
||||||
|
<FormItem
|
||||||
|
key={role.id}
|
||||||
|
className={`flex flex-row items-center space-x-3 space-y-0 p-3 rounded-lg border transition-all cursor-pointer ${
|
||||||
|
isSelected
|
||||||
|
? 'bg-primary/10 border-primary/30 ring-1 ring-primary/20'
|
||||||
|
: 'hover:bg-muted/50 border-transparent'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={isSelected}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
return checked
|
||||||
|
? field.onChange([...(field.value || []), role.id])
|
||||||
|
: field.onChange(
|
||||||
|
field.value?.filter(
|
||||||
|
(value: string) => value !== role.id
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormLabel className="font-medium flex items-center gap-2 cursor-pointer w-full text-foreground text-sm">
|
||||||
|
<span className="w-3 h-3 rounded-full shadow-sm" style={{ background: role.color }} />
|
||||||
|
{role.name}
|
||||||
|
</FormLabel>
|
||||||
|
</FormItem>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
65
web/src/pages/settings/SettingsLayout.tsx
Normal file
65
web/src/pages/settings/SettingsLayout.tsx
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
import React, { createContext, useContext } from "react";
|
||||||
|
import { Outlet } from "react-router-dom";
|
||||||
|
import { useSettings, type FormValues, type ConfigMeta } from "@/hooks/use-settings";
|
||||||
|
import { Form } from "@/components/ui/form";
|
||||||
|
import { SectionHeader } from "@/components/section-header";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Save, Loader2 } from "lucide-react";
|
||||||
|
|
||||||
|
interface SettingsContextType {
|
||||||
|
form: ReturnType<typeof useSettings>["form"];
|
||||||
|
meta: ConfigMeta | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SettingsContext = createContext<SettingsContextType | null>(null);
|
||||||
|
|
||||||
|
export const useSettingsForm = () => {
|
||||||
|
const context = useContext(SettingsContext);
|
||||||
|
if (!context) throw new Error("useSettingsForm must be used within SettingsLayout");
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SettingsLayout() {
|
||||||
|
const { form, meta, loading, isSaving, saveSettings } = useSettings();
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex-1 flex items-center justify-center flex-col gap-4 min-h-[400px]">
|
||||||
|
<Loader2 className="w-10 h-10 animate-spin text-primary" />
|
||||||
|
<p className="text-muted-foreground animate-pulse">Loading configuration...</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SettingsContext.Provider value={{ form, meta }}>
|
||||||
|
<main className="pt-8 px-8 pb-12 max-w-7xl mx-auto space-y-8">
|
||||||
|
<div className="flex justify-between items-end">
|
||||||
|
<SectionHeader
|
||||||
|
badge="System"
|
||||||
|
title="Configuration"
|
||||||
|
description="Manage bot behavior, economy, and game systems."
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={form.handleSubmit(saveSettings)}
|
||||||
|
disabled={isSaving || !form.formState.isDirty}
|
||||||
|
className="shadow-lg hover:shadow-primary/20 transition-all font-bold min-w-[140px]"
|
||||||
|
>
|
||||||
|
{isSaving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Save className="w-4 h-4 mr-2" />}
|
||||||
|
Save Changes
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="glass-card rounded-2xl border border-border/50 overflow-hidden">
|
||||||
|
<Form {...form}>
|
||||||
|
<form className="flex flex-col h-full">
|
||||||
|
<div className="p-8">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</SettingsContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
338
web/src/pages/settings/Systems.tsx
Normal file
338
web/src/pages/settings/Systems.tsx
Normal file
@@ -0,0 +1,338 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useSettingsForm } from "./SettingsLayout";
|
||||||
|
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||||
|
import { CreditCard, Shield } from "lucide-react";
|
||||||
|
import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";
|
||||||
|
|
||||||
|
export function SystemsSettings() {
|
||||||
|
const { form, meta } = useSettingsForm();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6 animate-in fade-in slide-up duration-500">
|
||||||
|
<Accordion type="multiple" className="w-full space-y-4" defaultValue={["lootdrop", "moderation"]}>
|
||||||
|
<AccordionItem value="lootdrop" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||||
|
<AccordionTrigger className="hover:no-underline py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-500">
|
||||||
|
<CreditCard className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span className="font-bold">Loot Drops</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pb-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="lootdrop.spawnChance"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Spawn Chance (0-1)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" step="0.01" min="0" max="1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="lootdrop.minMessages"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Min Messages</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-muted/30 p-4 rounded-lg space-y-3">
|
||||||
|
<h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">Rewards</h4>
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="lootdrop.reward.min"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="space-y-1">
|
||||||
|
<FormLabel className="text-xs">Min</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="lootdrop.reward.max"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="space-y-1">
|
||||||
|
<FormLabel className="text-xs">Max</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="lootdrop.reward.currency"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="space-y-1">
|
||||||
|
<FormLabel className="text-xs">Currency</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} placeholder="AU" className="h-9 text-sm" />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="lootdrop.cooldownMs"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Cooldown (ms)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="lootdrop.activityWindowMs"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Activity Window (ms)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="trivia" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||||
|
<AccordionTrigger className="hover:no-underline py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-sm">
|
||||||
|
🎯
|
||||||
|
</div>
|
||||||
|
<span className="font-bold">Trivia</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pb-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="trivia.entryFee"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Entry Fee (AU)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="text" className="bg-background/50" placeholder="50" />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription className="text-xs">Cost to play</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="trivia.rewardMultiplier"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Reward Multiplier</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription className="text-xs">multiplier</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="trivia.timeoutSeconds"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Timeout (seconds)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="trivia.cooldownMs"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Cooldown (ms)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="trivia.difficulty"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Difficulty</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} value={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="bg-background/50">
|
||||||
|
<SelectValue placeholder="Select difficulty" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="easy">Easy</SelectItem>
|
||||||
|
<SelectItem value="medium">Medium</SelectItem>
|
||||||
|
<SelectItem value="hard">Hard</SelectItem>
|
||||||
|
<SelectItem value="random">Random</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="moderation" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
||||||
|
<AccordionTrigger className="hover:no-underline py-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center text-red-500">
|
||||||
|
<Shield className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span className="font-bold">Moderation</span>
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-6 pb-4">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="font-bold text-sm text-foreground/80 uppercase tracking-wider">Case Management</h4>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="moderation.cases.dmOnWarn"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel className="text-sm font-medium">DM on Warm</FormLabel>
|
||||||
|
<FormDescription className="text-xs">Notify via DM</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="moderation.cases.logChannelId"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="glass-card p-4 rounded-xl border border-border/50">
|
||||||
|
<FormLabel className="text-sm">Log Channel</FormLabel>
|
||||||
|
<Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="bg-background/50 h-9">
|
||||||
|
<SelectValue placeholder="Select a channel" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={NONE_VALUE}>None</SelectItem>
|
||||||
|
{meta?.channels.filter(c => c.type === 0).map(c => (
|
||||||
|
<SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="moderation.cases.autoTimeoutThreshold"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Auto Timeout Threshold</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" min="0" className="bg-background/50" onChange={e => field.onChange(e.target.value ? Number(e.target.value) : undefined)} />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription className="text-xs">Warnings before auto-timeout.</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="font-bold text-sm text-foreground/80 uppercase tracking-wider">Message Pruning</h4>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="moderation.prune.maxAmount"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel className="text-xs">Max Amount</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="moderation.prune.confirmThreshold"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel className="text-xs">Confirm Threshold</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="moderation.prune.batchSize"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel className="text-xs">Batch Size</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="moderation.prune.batchDelayMs"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel className="text-xs">Batch Delay (ms)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input {...field} type="number" className="bg-background/50 h-9" onChange={e => field.onChange(Number(e.target.value))} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -416,7 +416,7 @@ export async function createWebServer(config: WebServerConfig = {}): Promise<Web
|
|||||||
};
|
};
|
||||||
|
|
||||||
const clientStats = unwrap(results[0], {
|
const clientStats = unwrap(results[0], {
|
||||||
bot: { name: 'Aurora', avatarUrl: null },
|
bot: { name: 'Aurora', avatarUrl: null, status: null },
|
||||||
guilds: 0,
|
guilds: 0,
|
||||||
commandsRegistered: 0,
|
commandsRegistered: 0,
|
||||||
commandsKnown: 0,
|
commandsKnown: 0,
|
||||||
|
|||||||
@@ -277,4 +277,38 @@
|
|||||||
.delay-500 {
|
.delay-500 {
|
||||||
animation-delay: 500ms;
|
animation-delay: 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Sidebar collapsed state - center icons */
|
||||||
|
[data-state="collapsed"] [data-sidebar="header"],
|
||||||
|
[data-state="collapsed"] [data-sidebar="footer"] {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-state="collapsed"] [data-sidebar="content"] {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-state="collapsed"] [data-sidebar="group"] {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
align-items: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-state="collapsed"] [data-sidebar="menu"] {
|
||||||
|
align-items: center !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-state="collapsed"] [data-sidebar="menu-item"] {
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-state="collapsed"] [data-sidebar="menu-button"] {
|
||||||
|
justify-content: center !important;
|
||||||
|
gap: 0 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user