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>
@@ -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">