feat(04-03): reskin /mobile/tickets/[id] in-page header per D-18

- Add ExternalLink to lucide-react imports
- Replace legacy 'Back' button with three-slot header bar:
  back chevron + 'Tickets' label (router.back()), breadcrumb
  'Tickets / #{ticket_number}', ExternalLink icon to /analyzer/ticket/{id}
- rel='noopener noreferrer' + target='_blank' on external link (T-04-11)
- Detail body (badges, title, stats grid, description, timeline) unchanged per D-19
This commit is contained in:
lorentz 2026-05-03 17:58:51 -04:00
parent 77073bac97
commit b1ff8660d4

View file

@ -4,7 +4,7 @@ import { useEffect, useState, use } from 'react';
import { useRouter } from 'next/navigation';
import {
ArrowLeft, RefreshCw, Clock, FileText, Timer, CheckCircle2,
ChevronDown, ChevronRight, User, Briefcase, AlertCircle, EyeOff, Eye, Mail, AlignLeft, Code2,
ChevronDown, ChevronRight, User, Briefcase, AlertCircle, EyeOff, Eye, ExternalLink, Mail, AlignLeft, Code2,
} from 'lucide-react';
const PRIORITY_LABEL: Record<number, string> = {
@ -237,9 +237,31 @@ export default function TicketTimeline({ params }: { params: Promise<{ id: strin
<div>
{/* Ticket header */}
<div className="px-4 pt-4 pb-3 border-b">
<button onClick={() => router.back()} className="flex items-center gap-1 text-sm text-muted-foreground mb-3 hover:text-foreground">
<ArrowLeft className="w-4 h-4" /> Back
</button>
<div className="flex items-center justify-between -mx-4 px-4 py-3 border-b mb-3">
<button
type="button"
onClick={() => router.back()}
aria-label="Back to Tickets"
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
>
<ArrowLeft className="w-4 h-4" aria-hidden="true" />
<span>Tickets</span>
</button>
<p className="text-sm font-semibold truncate mx-2 flex-1 text-center">
Tickets / #{ticket.ticket_number}
</p>
<a
href={`/analyzer/ticket/${ticket.id}`}
target="_blank"
rel="noopener noreferrer"
aria-label="Open ticket on desktop"
className="text-muted-foreground hover:text-foreground transition-colors shrink-0"
>
<ExternalLink className="w-4 h-4" aria-hidden="true" />
</a>
</div>
<div className="flex items-start gap-2 mb-2">
<span className={`shrink-0 text-xs font-medium px-2 py-0.5 rounded-full border ${priClass}`}>
{PRIORITY_LABEL[ticket.priority] ?? `P${ticket.priority}`}