Kishor/void-sentinel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added docs and fixed level bridger

Browse Source
This commit is contained in:
Kishor Ramanan
2026-01-03 22:13:17 +05:30
parent 92ad60fd3c
commit 5ed739f981
10 changed files with 612 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/components/DashboardSidebar.tsx
View File

@@ -3,7 +3,8 @@
import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu, X, Trophy, Sparkles } from "lucide-react";
import { Menu, X, Trophy, Sparkles, BookMarked } from "lucide-react";
interface DashboardSidebarProps {
guildId: string;
@@ -45,10 +46,14 @@ export default function DashboardSidebar({ guildId }: DashboardSidebarProps) {
{/* Sidebar */}
<div
className={`fixed lg:relative inset-y-0 left-0 z-40 w-64 flex-shrink-0 bg-black/90 lg:bg-black/20 border-r border-white/10 overflow-y-auto backdrop-blur-md lg:backdrop-blur-sm transform transition-transform duration-300 ease-in-out ${sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
className={`fixed inset-y-0 left-0 z-40 w-64 flex-shrink-0 bg-black/90 lg:bg-black/20 border-r border-white/10 backdrop-blur-md lg:backdrop-blur-sm transform transition-transform duration-300 ease-in-out flex flex-col ${sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
}`}
>
<div className="p-4 space-y-2 pt-20 lg:pt-4">
<div className="p-4 space-y-2 pt-20 lg:pt-24 flex-1 overflow-y-auto">
{menuItems.map((item) => {
const Icon = item.icon;
const isActive = activeTab === item.id;
@@ -60,8 +65,8 @@ export default function DashboardSidebar({ guildId }: DashboardSidebarProps) {
href={href}
onClick={() => setSidebarOpen(false)}
className={`w-full text-left px-4 py-3 rounded-lg font-medium transition-all flex items-center gap-3 ${isActive
? "bg-blue-600/20 text-blue-400 border border-blue-600/30"
: "text-gray-400 hover:text-white hover:bg-white/5 border border-transparent"
? "bg-blue-600/20 text-blue-400 border border-blue-600/30"
: "text-gray-400 hover:text-white hover:bg-white/5 border border-transparent"
}`}
>
<Icon className="w-5 h-5" />
@@ -70,7 +75,19 @@ export default function DashboardSidebar({ guildId }: DashboardSidebarProps) {
);
})}
</div>
{/* Docs Link at Bottom */}
<div className="p-4 mt-auto border-t border-white/10">
<Link
href="/docs"
className="w-full text-left px-4 py-3 rounded-lg font-medium transition-all flex items-center gap-3 text-gray-400 hover:text-white hover:bg-white/5 border border-transparent"
>
<BookMarked className="w-5 h-5" />
Documentation
</Link>
</div>
</div>
</>
);
}

5
web/components/Footer.tsx
View File

@@ -5,6 +5,11 @@ const Footer = () => {
<div className="text-gray-400 text-sm">
© {new Date().getFullYear()} Void Sentinel. All rights reserved.
</div>
<div className="flex items-center gap-6">
<a href="/docs" className="text-gray-400 hover:text-white transition-colors text-sm font-medium">
Documentation
</a>
</div>
</div>
</footer>
);

115
web/components/LevelingEditor.tsx
View File

@@ -72,7 +72,7 @@ export default function LevelingEditor({ guildId }: LevelingEditorProps) {
// Level Bridger State
const [bridges, setBridges] = useState<LevelBridge[]>([]);
const [deletedBridges, setDeletedBridges] = useState<string[]>([]); // in_role_ids
const [newBridgeIn, setNewBridgeIn] = useState<string | null>(null);
const [newBridgeOut, setNewBridgeOut] = useState<string | null>(null);
const [showAddBridge, setShowAddBridge] = useState(false);
@@ -118,6 +118,68 @@ export default function LevelingEditor({ guildId }: LevelingEditorProps) {
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
// Add bridge
const handleAddBridge = async () => {
if (!newBridgeIn || !newBridgeOut) return;
if (newBridgeIn === newBridgeOut) {
setError("Recruit Role and Initial Role cannot be the same");
return;
}
const bridge = {
in_role_id: String(newBridgeIn),
out_role_id: String(newBridgeOut)
};
try {
const response = await fetch(`/api/guilds/${guildId}/level_bridger`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(bridge),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.error || "Failed to add bridge");
}
setBridges([...bridges, bridge]);
setNewBridgeIn(null);
setNewBridgeOut(null);
setError(null);
setSuccess("Bridge added successfully");
setTimeout(() => setSuccess(null), 3000);
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to add bridge");
}
};
// Delete bridge
const handleDeleteBridge = async (index: number) => {
const bridge = bridges[index];
const inRoleId = String(bridge.in_role_id);
try {
const response = await fetch(`/api/guilds/${guildId}/level_bridger`, {
method: "DELETE",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ in_role_id: inRoleId }),
});
if (!response.ok) {
throw new Error("Failed to delete bridge");
}
const newBridges = [...bridges];
newBridges.splice(index, 1);
setBridges(newBridges);
setSuccess("Bridge deleted successfully");
setTimeout(() => setSuccess(null), 3000);
} catch (err) {
setError(err instanceof Error ? err.message : "Failed to delete bridge");
}
};
// Fetch tracks and roles
const fetchData = useCallback(async () => {
setLoading(true);
@@ -202,7 +264,7 @@ export default function LevelingEditor({ guildId }: LevelingEditorProps) {
setDeletedTracks([]);
setBridges(Array.isArray(bridgesData) ? bridgesData : []);
setDeletedBridges([]);
// All tracks start collapsed
} catch (err) {
@@ -239,19 +301,6 @@ export default function LevelingEditor({ guildId }: LevelingEditorProps) {
await Promise.all(deletePromises);
// Level Bridger Deletions
const deleteBridgePromises = deletedBridges.map(async (inRoleId) => {
const response = await fetch(`/api/guilds/${guildId}/level_bridger`, {
method: "DELETE",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ in_role_id: inRoleId }),
});
if (!response.ok) {
console.error(`Failed to delete bridge for ${inRoleId}`);
}
});
await Promise.all(deleteBridgePromises);
// Then, update/create each track with the new format:
// { track_name: string, roles: [{ role_id: number, level: number }, ...] }
const updatePromises = tracks.map(async (track) => {
@@ -277,23 +326,9 @@ export default function LevelingEditor({ guildId }: LevelingEditorProps) {
await Promise.all(updatePromises);
// Level Bridger Updates (PUT)
const updateBridgePromises = bridges.map(async (bridge) => {
const response = await fetch(`/api/guilds/${guildId}/level_bridger`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(bridge),
});
if (!response.ok) {
console.error(`Failed to save bridge ${bridge.in_role_id} -> ${bridge.out_role_id}`);
}
});
await Promise.all(updateBridgePromises);
// Update tracking state
setOriginalTrackNames(new Set(tracks.map(t => t.name)));
setDeletedTracks([]);
setDeletedBridges([]);
setSuccess("Changes saved successfully!");
setHasChanges(false);
setTimeout(() => setSuccess(null), 3000);
@@ -1054,13 +1089,7 @@ export default function LevelingEditor({ guildId }: LevelingEditorProps) {
</div>
<button
onClick={() => {
const newBridges = [...bridges];
newBridges.splice(index, 1);
setBridges(newBridges);
setDeletedBridges(prev => [...prev, (bridge as any).in_role_id || bridge.in_role_id]);
setHasChanges(true);
}}
onClick={() => handleDeleteBridge(index)}
className="p-2 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-lg transition-colors ml-2"
>
<Trash2 className="w-4 h-4" />
@@ -1241,19 +1270,7 @@ export default function LevelingEditor({ guildId }: LevelingEditorProps) {
</div>
<button
onClick={() => {
if (newBridgeIn && newBridgeOut) {
if (newBridgeIn === newBridgeOut) {
setError("Recruit Role and Initial Role cannot be the same");
return;
}
setBridges([...bridges, { in_role_id: newBridgeIn, out_role_id: newBridgeOut }]);
setNewBridgeIn(null);
setNewBridgeOut(null);
setHasChanges(true);
setError(null);
}
}}
onClick={handleAddBridge}
disabled={!newBridgeIn || !newBridgeOut}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${newBridgeIn && newBridgeOut
? "bg-blue-600 hover:bg-blue-700 text-white"

72
web/components/UserProfile.tsx Normal file
View File

@@ -0,0 +1,72 @@
"use client";
import { useState, useRef, useEffect } from "react";
import { LogOut, User, ChevronDown } from "lucide-react";
import { signOut } from "next-auth/react";
interface UserProfileProps {
user?: {
name?: string | null;
email?: string | null;
image?: string | null;
};
}
export default function UserProfile({ user }: UserProfileProps) {
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
// Close dropdown on click outside
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setIsOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
return (
<div className="relative pointer-events-auto" ref={dropdownRef}>
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 sm:gap-3 bg-white/5 px-2 sm:px-4 py-2 rounded-full border border-white/10 backdrop-blur-md hover:bg-white/10 transition-colors group"
>
<div className="text-right hidden sm:block">
<p className="text-sm font-semibold text-white group-hover:text-blue-200 transition-colors">
{user?.name || "User"}
</p>
</div>
{user?.image ? (
<img
src={user.image}
alt={user.name || "User"}
className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-blue-500/50 group-hover:border-blue-400 transition-colors"
/>
) : (
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-blue-500/50 bg-gray-700 flex items-center justify-center">
<User className="w-5 h-5 text-gray-400" />
</div>
)}
<ChevronDown className={`w-4 h-4 text-gray-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`} />
</button>
{isOpen && (
<div className="absolute right-0 top-full mt-2 w-48 bg-zinc-900 border border-white/10 rounded-xl shadow-xl overflow-hidden z-50 py-1 animate-in fade-in zoom-in-95 duration-100 ease-out">
<div className="px-4 py-3 border-b border-white/10 sm:hidden">
<p className="text-sm font-semibold text-white truncate">{user?.name || "User"}</p>
</div>
<button
onClick={() => signOut({ callbackUrl: "/" })}
className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-400 hover:bg-white/5 hover:text-red-300 transition-colors"
>
<LogOut className="w-4 h-4" />
Log Out
</button>
</div>
)}
</div>
);
}