feat: add sub-sidebar result page

components/form-admin-sidebar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { usePathname } from "next/navigation";
 import {
   Sidebar,
@@ -10,12 +11,18 @@ import {
   SidebarGroupLabel,
   SidebarHeader,
   SidebarMenu,
+  SidebarMenuAction,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
 } from "@/components/ui/sidebar";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   ArrowLeft,
   ClipboardList,
+  ChevronRight,
   Eye,
   FilePenLine,
   LayoutDashboard,
@@ -28,6 +35,7 @@ import {
 } from "@/components/dropdown-menu-avatar";
 import { GuardedLink } from "@/components/guarded-link";
 import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 
 export function FormAdminSidebar({
   formId,
@@ -36,6 +44,7 @@ export function FormAdminSidebar({
   userName,
   userImage,
   profile,
+  responseItems,
 }: {
   formId: string;
   formTitle: string;
@@ -43,8 +52,15 @@ export function FormAdminSidebar({
   userName?: string;
   userImage?: string;
   profile?: DiscordMemberProfile | null;
+  responseItems?: {
+    id: string;
+    userName: string | null;
+    userDiscordId: string | null;
+  }[];
 }) {
   const pathname = usePathname();
+  const responseList = responseItems ?? [];
+  const [responsesOpen, setResponsesOpen] = useState(true);
   const currentSection = pathname.startsWith(`/admin/form/${formId}/result`)
     ? "Responses"
     : pathname.startsWith(`/admin/form/${formId}/extra`)
@@ -52,6 +68,7 @@ export function FormAdminSidebar({
       : pathname.startsWith(`/admin/form/${formId}/preview`)
         ? "Preview"
         : "Editor";
+
   const items = [
     {
       href: `/admin/form/${formId}`,
@@ -137,6 +154,50 @@ export function FormAdminSidebar({
                       <span>{label}</span>
                     </GuardedLink>
                   </SidebarMenuButton>
+                  {label === "Responses" && responseList.length > 0 && (
+                    <SidebarMenuAction
+                      onClick={() => setResponsesOpen((open) => !open)}
+                      aria-label={`${responsesOpen ? "Collapse" : "Expand"} responses`}
+                      aria-expanded={responsesOpen}
+                    >
+                      <ChevronRight
+                        className={cn(
+                          "transition-transform",
+                          responsesOpen && "rotate-90"
+                        )}
+                      />
+                    </SidebarMenuAction>
+                  )}
+                  {label === "Responses" &&
+                    responsesOpen &&
+                    responseList.length > 0 && (
+                      <ScrollArea className="max-h-80">
+                        <SidebarMenuSub>
+                          {responseList.map((response) => {
+                            const responseHref = `/admin/form/${formId}/result/${response.id}`;
+                            const name =
+                              response.userName ||
+                              response.userDiscordId ||
+                              "Anonymous";
+
+                            return (
+                              <SidebarMenuSubItem key={response.id}>
+                                <SidebarMenuSubButton
+                                  asChild
+                                  isActive={pathname === responseHref}
+                                >
+                                  <GuardedLink href={responseHref}>
+                                    <span className="min-w-0 truncate">
+                                      {name}
+                                    </span>
+                                  </GuardedLink>
+                                </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                            );
+                          })}
+                        </SidebarMenuSub>
+                      </ScrollArea>
+                    )}
                 </SidebarMenuItem>
               ))}
             </SidebarMenu>