feat: add description block to mobile ticket detail with View original toggle
This commit is contained in:
parent
fea62382de
commit
44db9a3019
1 changed files with 38 additions and 1 deletions
|
|
@ -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(/ /g, ' ').replace(/&/g, '&').replace(/</g, '<').replace(/>/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 */}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue