feat: show Discord profiles for form respondents

2026-07-29 12:28:13 +07:00
parent 0ffab96aca
commit 1fb154b465
4 changed files with 210 additions and 72 deletions
@@ -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" />
@@ -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}
      />
@@ -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>