feat(ticket): make assigned issue images collapsible

src/app/(modules)/ticket/[ticketId]/components/TicketAssignmentsCard.tsx

@@ -1,11 +1,22 @@
 'use client';
 
 import { useEffect } from 'react';
-import { BriefcaseBusiness, CalendarClock, ListChecks } from 'lucide-react';
+import {
+  BriefcaseBusiness,
+  CalendarClock,
+  ChevronDown,
+  Images,
+  ListChecks,
+} from 'lucide-react';
 
 import { PersonInfo } from '@/components/person-avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
 import {
   Card,
   CardContent,
@@ -260,14 +271,34 @@ export function TicketAssignmentsCard({
             >
               <AssignmentOverview assignment={selectedAssignment} />
               {videoId ? (
-                <div className={'mt-4 border-t pt-4'}>
+                <Collapsible
-                  <TicketDetectionPreview
+                  key={selectedAssignment.id}
-                    key={`${videoId}:${selectedAssignment.id}`}
+                  className="group mt-4 overflow-hidden rounded-lg border"
-                    ticketId={ticketId}
+                >
-                    videoId={videoId}
+                  <CollapsibleTrigger asChild>
-                    assignmentId={selectedAssignment.id}
+                    <Button
-                  />
+                      type="button"
-                </div>
+                      variant="ghost"
+                      className="h-auto w-full justify-between rounded-none px-4 py-3"
+                    >
+                      <span className="flex items-center gap-2 font-medium">
+                        <Images className="size-4 text-primary" />
+                        Assigned issue images
+                      </span>
+                      <ChevronDown className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+                    </Button>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <div className="border-t p-4">
+                      <TicketDetectionPreview
+                        key={`${videoId}:${selectedAssignment.id}`}
+                        ticketId={ticketId}
+                        videoId={videoId}
+                        assignmentId={selectedAssignment.id}
+                      />
+                    </div>
+                  </CollapsibleContent>
+                </Collapsible>
               ) : null}
             </div>
           </div>