feat: add Discord profile dropdown menu with role display and integrate with admin and form layouts via AdminShellServer.
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
|
||||
import { getDiscordMemberProfile } from "@/app/actions/discord";
|
||||
import { AdminShell } from "@/components/admin-shell";
|
||||
|
||||
export async function AdminShellServer({ children }: { children: React.ReactNode }) {
|
||||
const session = await getServerSession(authOptions);
|
||||
const discordId = (session?.user as any)?.discordId;
|
||||
let profile = null;
|
||||
|
||||
if (discordId) {
|
||||
profile = await getDiscordMemberProfile(discordId);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminShell
|
||||
userName={session?.user?.name ?? ""}
|
||||
userImage={session?.user?.image ?? ""}
|
||||
profile={profile}
|
||||
>
|
||||
{children}
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
+67
-43
@@ -16,21 +16,70 @@ import {
|
||||
SidebarInset,
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar";
|
||||
import { ClipboardList, Server, LayoutDashboard } from "lucide-react";
|
||||
import { ClipboardList, Server, LayoutDashboard, LucideIcon } from "lucide-react";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { DropdownMenuAvatar, DiscordMemberProfile } from "@/components/dropdown-menu-avatar";
|
||||
|
||||
export function AdminShell({ children }: { children: React.ReactNode }) {
|
||||
interface NavItem {
|
||||
href: string;
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
isActive: (pathname: string) => boolean;
|
||||
}
|
||||
|
||||
const NAV_ITEMS: NavItem[] = [
|
||||
{
|
||||
href: "/admin",
|
||||
label: "Dashboard",
|
||||
icon: LayoutDashboard,
|
||||
isActive: (pathname) => pathname === "/admin",
|
||||
},
|
||||
{
|
||||
href: "/admin/form",
|
||||
label: "Form",
|
||||
icon: ClipboardList,
|
||||
isActive: (pathname) => pathname === "/admin/form",
|
||||
},
|
||||
{
|
||||
href: "/admin/backend",
|
||||
label: "Backend",
|
||||
icon: Server,
|
||||
isActive: (pathname) => pathname.startsWith("/admin/backend"),
|
||||
},
|
||||
];
|
||||
|
||||
export function AdminShell({
|
||||
children,
|
||||
userName,
|
||||
userImage,
|
||||
profile,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
userName?: string;
|
||||
userImage?: string;
|
||||
profile?: DiscordMemberProfile | null;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<div className="flex w-full min-h-screen bg-background text-foreground">
|
||||
<Sidebar variant="sidebar" collapsible="icon">
|
||||
<SidebarHeader className="border-b border-border py-4 px-4 flex flex-row items-center justify-between">
|
||||
<span className="font-bold tracking-wider text-primary text-sm uppercase">
|
||||
Admin
|
||||
</span>
|
||||
<ThemeToggle />
|
||||
<SidebarHeader className="border-b border-border py-4 px-4">
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<span className="font-bold text-primary text-lg">Admin</span>
|
||||
<div className="flex items-center gap-1">
|
||||
{(userName || profile) && (
|
||||
<DropdownMenuAvatar
|
||||
userName={userName || ""}
|
||||
userImage={userImage || ""}
|
||||
profile={profile || null}
|
||||
showName={false}
|
||||
/>
|
||||
)}
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
@@ -38,41 +87,16 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
|
||||
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={pathname === "/admin"}
|
||||
>
|
||||
<Link href="/admin">
|
||||
<LayoutDashboard className="w-4 h-4" />
|
||||
<span>Dashboard</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={pathname === "/admin/form"}
|
||||
>
|
||||
<Link href="/admin/form">
|
||||
<ClipboardList className="w-4 h-4" />
|
||||
<span>Form</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={pathname.startsWith("/admin/backend")}
|
||||
>
|
||||
<Link href="/admin/backend">
|
||||
<Server className="w-4 h-4" />
|
||||
<span>Backend</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
{NAV_ITEMS.map(({ href, label, icon: Icon, isActive }) => (
|
||||
<SidebarMenuItem key={href}>
|
||||
<SidebarMenuButton asChild isActive={isActive(pathname)}>
|
||||
<Link href={href}>
|
||||
<Icon className="w-4 h-4" />
|
||||
<span>{label}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
@@ -88,4 +112,4 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useMemo } from "react";
|
||||
import Image from "next/image";
|
||||
import { LogOut } from "lucide-react";
|
||||
import { signOut } from "next-auth/react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DiscordRole } from "@/app/actions/discord";
|
||||
|
||||
export interface DiscordMemberProfile {
|
||||
id: string;
|
||||
username: string;
|
||||
globalName: string | null;
|
||||
avatarUrl: string | null;
|
||||
bannerUrl: string | null;
|
||||
accentColor: number | null;
|
||||
roles: DiscordRole[];
|
||||
}
|
||||
|
||||
const toHex = (n: number) => `#${n.toString(16).padStart(6, "0")}`;
|
||||
const DEFAULT_ROLE_COLOR = "#99aab5";
|
||||
|
||||
function RolePill({ role }: { role: DiscordRole }) {
|
||||
const colorHex = role.color === 0 ? DEFAULT_ROLE_COLOR : toHex(role.color);
|
||||
return (
|
||||
<div className="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium bg-muted/50 border border-border">
|
||||
<div
|
||||
className="w-2 h-2 rounded-full shrink-0"
|
||||
style={{ backgroundColor: colorHex }}
|
||||
/>
|
||||
<span className="text-foreground max-w-40 truncate">
|
||||
{role.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DropdownMenuAvatar({
|
||||
userName,
|
||||
userImage,
|
||||
profile,
|
||||
showName = true,
|
||||
}: {
|
||||
userName: string;
|
||||
userImage: string;
|
||||
profile: DiscordMemberProfile | null;
|
||||
showName?: boolean;
|
||||
}) {
|
||||
const [imgError, setImgError] = useState(false);
|
||||
|
||||
const displayAvatar = profile?.avatarUrl || userImage;
|
||||
const displayName = profile?.globalName || userName;
|
||||
const username = profile?.username || userName;
|
||||
|
||||
const bannerStyle = useMemo(
|
||||
() => ({
|
||||
height: 100,
|
||||
backgroundColor: profile?.accentColor
|
||||
? toHex(profile.accentColor)
|
||||
: "hsl(var(--muted))",
|
||||
backgroundImage: profile?.bannerUrl
|
||||
? `url(${profile.bannerUrl})`
|
||||
: "none",
|
||||
backgroundSize: "cover" as const,
|
||||
backgroundPosition: "center" as const,
|
||||
}),
|
||||
[profile?.accentColor, profile?.bannerUrl]
|
||||
);
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className={showName ? "pl-1 pr-2 flex items-center gap-2" : "h-9 w-9 rounded-full p-0 flex items-center justify-center"}>
|
||||
{!imgError && displayAvatar ? (
|
||||
<Image
|
||||
src={displayAvatar}
|
||||
alt={displayName}
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded-full object-cover shrink-0"
|
||||
onError={() => setImgError(true)}
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-muted shrink-0" />
|
||||
)}
|
||||
{showName && <span className="text-sm font-medium">{displayName}</span>}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent align="end" className="p-0" style={{ width: 280 }}>
|
||||
{/* Banner Section */}
|
||||
<div className="w-full relative" style={bannerStyle} />
|
||||
|
||||
{/* Body Area */}
|
||||
<div className="relative px-3 pb-3">
|
||||
{/* Avatar - Absolute Positioned to overlap banner and body */}
|
||||
<div className="absolute" style={{ top: -56, left: 12 }}>
|
||||
<div className="relative">
|
||||
<div className="rounded-full bg-popover" style={{ padding: 5 }}>
|
||||
<div
|
||||
className="rounded-full overflow-hidden bg-muted"
|
||||
style={{ width: 76, height: 76 }}
|
||||
>
|
||||
{!imgError && displayAvatar && (
|
||||
<Image
|
||||
src={displayAvatar}
|
||||
alt={displayName}
|
||||
width={76}
|
||||
height={76}
|
||||
className="object-cover w-full h-full"
|
||||
onError={() => setImgError(true)}
|
||||
unoptimized
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profile Info Section */}
|
||||
<div style={{ paddingTop: 36 }}>
|
||||
<div className="font-bold text-lg leading-tight text-foreground">
|
||||
{displayName}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
{username}
|
||||
</div>
|
||||
{/* Roles Section */}
|
||||
{profile && profile.roles.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<div className="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-2">
|
||||
Roles / บทบาท
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{profile.roles.map((role) => (
|
||||
<RolePill key={role.id} role={role} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer / Sign Out */}
|
||||
<div className="p-2 border-t">
|
||||
<DropdownMenuItem
|
||||
onClick={() => signOut({ callbackUrl: "/" })}
|
||||
className="text-destructive"
|
||||
>
|
||||
<LogOut className="w-4 h-4 mr-2" />
|
||||
ออกจากระบบ
|
||||
</DropdownMenuItem>
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user