feat: show Discord profiles for form respondents

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

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { Badge } from "@/components/ui/badge";
+import { Kbd } from "@/components/ui/kbd";
 import {
   Card,
   CardContent,
@@ -33,6 +34,10 @@ import {
 import { DeleteAllSubmissionsButton, DeleteSubmissionButton } from "@/components/delete-buttons";
 import { ResultsFilters } from "@/components/results-filters";
 import { RealtimeRefresh } from "@/components/realtime-refresh";
+import {
+  getDiscordMemberProfile,
+  type DiscordMemberProfile,
+} from "@/lib/discord";
 
 export const dynamic = "force-dynamic";
 
@@ -43,6 +48,32 @@ function formatDate(date: Date) {
   });
 }
 
+function RespondentName({
+  submission,
+  profile,
+}: {
+  submission: {
+    userName: string | null;
+    userDiscordId: string | null;
+  };
+  profile: DiscordMemberProfile | null;
+}) {
+  const displayName =
+    profile?.globalName ||
+    profile?.username ||
+    submission.userName ||
+    submission.userDiscordId ||
+    "Anonymous";
+  const username = profile?.username || submission.userName;
+
+  return (
+    <span className="inline-flex flex-wrap items-center gap-1.5">
+      <span>{displayName}</span>
+      {username && username !== displayName && <Kbd>({username})</Kbd>}
+    </span>
+  );
+}
+
 export default async function ResultsListPage({
   params,
   searchParams,
@@ -59,6 +90,21 @@ export default async function ResultsListPage({
   }
   const currentPage = Math.min(filters.page, pageCount);
   const listQuery = resultFiltersToSearchParams(filters);
+  const discordIds = [
+    ...new Set(
+      rows
+        .map((submission) => submission.userDiscordId)
+        .filter((discordId): discordId is string => Boolean(discordId))
+    ),
+  ];
+  const respondentProfiles = new Map(
+    await Promise.all(
+      discordIds.map(
+        async (discordId) =>
+          [discordId, await getDiscordMemberProfile(discordId)] as const
+      )
+    )
+  );
 
   return (
     <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 pb-12 md:p-6">
@@ -112,9 +158,16 @@ export default async function ResultsListPage({
                             href={detailHref}
                             className="font-medium after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"
                           >
-                            {submission.userName ||
-                              submission.userDiscordId ||
-                              "Anonymous"}
+                            <RespondentName
+                              submission={submission}
+                              profile={
+                                submission.userDiscordId
+                                  ? respondentProfiles.get(
+                                      submission.userDiscordId
+                                    ) ?? null
+                                  : null
+                              }
+                            />
                           </Link>
                           {submission.userName && submission.userDiscordId && (
                             <p className="text-xs text-muted-foreground">
@@ -153,9 +206,16 @@ export default async function ResultsListPage({
                         href={detailHref}
                         className="after:absolute after:inset-0 focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-inset"
                       >
-                        {submission.userName ||
-                          submission.userDiscordId ||
-                          "Anonymous"}
+                        <RespondentName
+                          submission={submission}
+                          profile={
+                            submission.userDiscordId
+                              ? respondentProfiles.get(
+                                  submission.userDiscordId
+                                ) ?? null
+                              : null
+                          }
+                        />
                       </Link>
                     </CardTitle>
                     <CardDescription>