feat(form): show submission queue names

app/admin/form/[id]/layout.tsx

@@ -7,7 +7,7 @@ import { getSessionDiscordId } from "@/lib/auth";
 import { getDiscordMemberProfile } from "@/lib/discord";
 import { db } from "@/db";
 import { submissions } from "@/db/schema";
-import { desc, eq } from "drizzle-orm";
+import { asc, eq } from "drizzle-orm";
 import { notFound } from "next/navigation";
 import { isFormAcceptingSubmissions } from "@/lib/form-availability";
 
@@ -44,7 +44,23 @@ export default async function AdminFormLayout(
     })
     .from(submissions)
     .where(eq(submissions.formId, params.id))
-    .orderBy(desc(submissions.submittedAt), desc(submissions.id));
+    .orderBy(asc(submissions.submittedAt), asc(submissions.id));
+
+  const responseDiscordIds = [
+    ...new Set(
+      responseItems
+        .map((response) => response.userDiscordId)
+        .filter((value): value is string => Boolean(value))
+    ),
+  ];
+  const responseProfiles = Object.fromEntries(
+    await Promise.all(
+      responseDiscordIds.map(async (discordId) => [
+        discordId,
+        await getDiscordMemberProfile(discordId),
+      ])
+    )
+  );
   
   let profile = null;
   const discordId = getSessionDiscordId(session);
@@ -58,7 +74,18 @@ export default async function AdminFormLayout(
         <FormAdminSidebar
           formId={params.id}
           formTitle={form.title}
-          responseItems={responseItems}
+          responseItems={responseItems.map((response, index) => ({
+            id: response.id,
+            displayName:
+              (response.userDiscordId
+                ? responseProfiles[response.userDiscordId]?.globalName ||
+                  responseProfiles[response.userDiscordId]?.username
+                : null) ||
+              response.userName ||
+              response.userDiscordId ||
+              "Anonymous",
+            queueNumber: index + 1,
+          }))}
           isOpen={isFormAcceptingSubmissions(form)}
           userName={session?.user?.name || ""}
           userImage={session?.user?.image || ""}

components/form-admin-sidebar.tsx

@@ -54,8 +54,8 @@ export function FormAdminSidebar({
   profile?: DiscordMemberProfile | null;
   responseItems?: {
     id: string;
-    userName: string | null;
+    displayName: string;
-    userDiscordId: string | null;
+    queueNumber: number;
   }[];
 }) {
   const pathname = usePathname();
@@ -175,10 +175,6 @@ export function FormAdminSidebar({
                         <SidebarMenuSub>
                           {responseList.map((response) => {
                             const responseHref = `/admin/form/${formId}/result/${response.id}`;
-                            const name =
-                              response.userName ||
-                              response.userDiscordId ||
-                              "Anonymous";
 
                             return (
                               <SidebarMenuSubItem key={response.id}>
@@ -188,7 +184,7 @@ export function FormAdminSidebar({
                                 >
                                   <GuardedLink href={responseHref}>
                                     <span className="min-w-0 truncate">
-                                      {name}
+                                      {response.queueNumber}. {response.displayName}
                                     </span>
                                   </GuardedLink>
                                 </SidebarMenuSubButton>