feat: show Discord profiles for form respondents

components/dropdown-menu-avatar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import { usePathname } from "next/navigation";
 import Image from "next/image";
 import { LogOut } from "lucide-react";
@@ -42,6 +42,113 @@ function RolePill({ role }: { role: DiscordRole }) {
   );
 }
 
+function DiscordProfileCard({
+  userName,
+  userImage,
+  profile,
+  imgError,
+  onImageError,
+}: {
+  userName: string;
+  userImage: string;
+  profile: DiscordMemberProfile | null;
+  imgError: boolean;
+  onImageError: () => void;
+}) {
+  const displayAvatar = profile?.avatarUrl || userImage;
+  const displayName = profile?.globalName || userName;
+  const username = profile?.username || userName;
+  const bannerStyle = {
+    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,
+  };
+
+  return (
+    <>
+      <div className="w-full relative" style={bannerStyle} />
+      <div className="relative px-3 pb-3">
+        <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={onImageError}
+                    unoptimized
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <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>
+          {profile && profile.roles.length > 0 && (
+            <div className="mt-2">
+              <div className="text-xs 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>
+    </>
+  );
+}
+
+export function DiscordProfileDropdown({
+  userName,
+  userImage = "",
+  profile,
+  children,
+}: {
+  userName: string;
+  userImage?: string;
+  profile: DiscordMemberProfile;
+  children: ReactNode;
+}) {
+  const [imgError, setImgError] = useState(false);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="p-0" style={{ width: 280 }}>
+        <DiscordProfileCard
+          userName={userName}
+          userImage={userImage}
+          profile={profile}
+          imgError={imgError}
+          onImageError={() => setImgError(true)}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export function DropdownMenuAvatar({
   userName,
   userImage,
@@ -58,17 +165,6 @@ export function DropdownMenuAvatar({
 
   const displayAvatar = profile?.avatarUrl || userImage;
   const displayName = profile?.globalName || userName;
-  const username = profile?.username || userName;
-
-  const bannerStyle = {
-    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,
-  };
 
   return (
     <DropdownMenu>
@@ -92,58 +188,13 @@ export function DropdownMenuAvatar({
       </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 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>
+        <DiscordProfileCard
+          userName={userName}
+          userImage={userImage}
+          profile={profile}
+          imgError={imgError}
+          onImageError={() => setImgError(true)}
+        />
 
         {/* Footer / Sign Out */}
         <div className="p-2 border-t">