feat: add description block to mobile ticket detail with View original toggle

This commit is contained in:
lorentz 2026-03-23 16:15:05 -04:00
parent fea62382de
commit 44db9a3019

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,
ChevronDown, ChevronRight, User, Briefcase, AlertCircle, EyeOff, Eye, Mail, AlignLeft, Code2,
} from 'lucide-react';
const PRIORITY_LABEL: Record<number, string> = {
@ -212,6 +212,8 @@ export default function TicketTimeline({ params }: { params: Promise<{ id: strin
const [error, setError] = useState<string | null>(null);
const [showSystem, setShowSystem] = useState(false);
const [showInternal, setShowInternal] = useState(false);
const [descOpen, setDescOpen] = useState(true);
const [descRaw, setDescRaw] = useState(false);
useEffect(() => {
setLoading(true);
@ -279,6 +281,41 @@ export default function TicketTimeline({ params }: { params: Promise<{ id: strin
<p className="text-[10px] text-muted-foreground">Hours logged</p>
</div>
</div>
{/* Description */}
{ticket.description && (
<div className="mt-3">
<button
onClick={() => setDescOpen(o => !o)}
className="w-full flex items-center justify-between py-1.5 text-left"
>
<span className="flex items-center gap-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
<AlignLeft className="w-3.5 h-3.5" />Description
</span>
{descOpen
? <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
: <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />}
</button>
{descOpen && (
<div className="mt-1.5 rounded-xl border bg-muted/40 p-3">
{descRaw ? (
<pre className="text-xs text-muted-foreground whitespace-pre-wrap break-words font-mono leading-relaxed">
{ticket.description.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').trim()}
</pre>
) : (
<p className="text-sm text-foreground leading-relaxed">{renderContent(ticket.description)}</p>
)}
<button
onClick={() => setDescRaw(r => !r)}
className="mt-2 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
>
<Code2 className="w-3 h-3" />
{descRaw ? 'Show formatted' : 'View original'}
</button>
</div>
)}
</div>
)}
</div>
{/* Timeline */}