feat: show Discord profiles for form respondents

app/admin/form/[id]/result/[submissionId]/client.tsx

@@ -27,6 +27,10 @@ import { stripHtml } from "@/lib/utils";
 import { HtmlDisplay } from "@/components/html-display";
 import { formatStoredAnswer } from "@/lib/form-answer-values";
 import { normalizeStoredAnswerSnapshot } from "@/lib/submission-intake";
+import {
+  DiscordProfileDropdown,
+  type DiscordMemberProfile,
+} from "@/components/dropdown-menu-avatar";
 
 interface Question {
   id: string;
@@ -40,6 +44,7 @@ interface SubmissionDetailClientProps {
     id: string;
     userName: string | null;
     userDiscordId: string | null;
+    userProfile: DiscordMemberProfile | null;
     submittedAt: Date;
     editHistory?: { editedAt: string; oldAnswers: Record<string, string | { value: string; imageCdnId: string | null }> }[] | null;
   };
@@ -78,10 +83,24 @@ export default function SubmissionDetailClient({
           <CardDescription>Details about this respondent.</CardDescription>
         </CardHeader>
         <CardContent className="grid gap-2 text-sm">
-          <div className="flex items-center gap-2 text-muted-foreground">
+          <div className="flex flex-wrap items-center gap-2 text-muted-foreground">
             <Users className="w-4 h-4 shrink-0" />
             <span className="font-semibold text-foreground">Respondent:</span>
             <span>{userLabel}</span>
+            {submission.userProfile?.globalName && (
+              <DiscordProfileDropdown
+                userName={submission.userName || submission.userProfile.username}
+                profile={submission.userProfile}
+              >
+                <button
+                  type="button"
+                  className="cursor-pointer rounded-sm bg-[#5865f2]/30 px-1 font-medium text-[#c9cdfb] transition-colors hover:bg-[#5865f2] hover:text-white"
+                  aria-label={`View Discord profile for ${submission.userProfile.globalName}`}
+                >
+                  @{submission.userProfile.globalName}
+                </button>
+              </DiscordProfileDropdown>
+            )}
           </div>
           <div className="flex items-center gap-2 text-muted-foreground">
             <Calendar className="w-4 h-4 shrink-0" />

app/admin/form/[id]/result/[submissionId]/page.tsx

@@ -6,6 +6,7 @@ import { ArrowLeft, ArrowRight } from "lucide-react";
 import SubmissionDetailClient from "./client";
 import { DeleteSubmissionButton } from "@/components/delete-buttons";
 import { RealtimeRefresh } from "@/components/realtime-refresh";
+import { getDiscordMemberProfile } from "@/lib/discord";
 
 interface SubmissionDetailPageProps {
   params: Promise<{
@@ -38,6 +39,10 @@ export default async function SubmissionDetailPage({
     notFound();
   }
 
+  const respondentProfile = submission.userDiscordId
+    ? await getDiscordMemberProfile(submission.userDiscordId)
+    : null;
+
   const questions = await db.query.questions.findMany({
     where: (q, { eq }) => eq(q.formId, submission.formId),
     orderBy: (q, { asc }) => [asc(q.displayOrder)],
@@ -77,7 +82,10 @@ export default async function SubmissionDetailPage({
       </div>
 
       <SubmissionDetailClient
-        submission={submission}
+        submission={{
+          ...submission,
+          userProfile: respondentProfile,
+        }}
         questions={questions}
         answers={answersMap}
       />