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,7 +271,25 @@ export function TicketAssignmentsCard({
             >
               <AssignmentOverview assignment={selectedAssignment} />
               {videoId ? (
-                <div className={'mt-4 border-t pt-4'}>
+                <Collapsible
+                  key={selectedAssignment.id}
+                  className="group mt-4 overflow-hidden rounded-lg border"
+                >
+                  <CollapsibleTrigger asChild>
+                    <Button
+                      type="button"
+                      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}
@@ -268,6 +297,8 @@ export function TicketAssignmentsCard({
                         assignmentId={selectedAssignment.id}
                       />
                     </div>
+                  </CollapsibleContent>
+                </Collapsible>
               ) : null}
             </div>
           </div>