feat(ticket): add section icons, theme-aware system timeline, and nested sidebar active routes

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

@@ -3,9 +3,10 @@
 import { History, MessageSquareText } from 'lucide-react';
 
 import { PersonInfo } from '@/components/person-avatar';
+import { Badge } from '@/components/ui/badge';
 import { Timeline, TimelineItem } from '@/components/ui/timeline';
 import { cn } from '@/lib/utils';
-import type { TicketDetail, TicketHistoryItem } from '@/types';
+import type { TicketDetail, TicketHistoryItem, TicketHistorySource } from '@/types';
 import { formatTimelineDateTime } from '@/utils/date';
 import { getPersonLabel } from '@/utils/person';
 
@@ -39,14 +40,21 @@ function HistoryNote({ item }: { item: TicketHistoryItem }) {
   );
 }
 
+function getSourceLabel(source: TicketHistorySource) {
+  return source === 'system' ? 'System Generated' : 'User Action';
+}
+
 function SystemHistoryEntry({ item }: { item: TicketHistoryItem }) {
   const noteText = item.note?.text?.trim();
 
   return (
-    <div className="rounded-xl border border-dashed border-violet-300/80 bg-violet-50/90 px-4 py-3.5 dark:border-violet-400/25 dark:bg-violet-500/8">
-      <span className="inline-flex rounded-full bg-violet-200/90 px-2.5 py-0.5 text-[10px] font-semibold tracking-wider text-violet-700 uppercase dark:bg-violet-500/20 dark:text-violet-300">
-        System Generated
-      </span>
+    <div className="rounded-md border border-dashed border-primary/25 bg-primary/5 px-4 py-3.5">
+      <Badge
+        
+        className="rounded-xs px-2.5 py-0.5 text-[10px] font-semibold tracking-wider uppercase"
+      >
+        {getSourceLabel(item.source)}
+      </Badge>
       <h3 className="mt-2 text-sm font-semibold text-foreground">{item.title}</h3>
       {noteText ? (
         <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
@@ -62,7 +70,7 @@ function UserHistoryEntry({ item }: { item: TicketHistoryItem }) {
   const isAssigned = item.event_type === 'assigned';
 
   return (
-    <div className="rounded-xl border border-border bg-card p-4 shadow-sm">
+    <div className="rounded-md border border-border bg-card p-4">
       <h3 className="mb-3 text-sm font-semibold text-foreground">{item.title}</h3>
       <PersonInfo person={item.actor} />
       {isAssigned && item.target_user ? (
@@ -116,7 +124,7 @@ export function TicketHistoryCard({ ticket }: { ticket: TicketDetail }) {
           ))}
         </Timeline>
       ) : (
-        <div className="rounded-lg border border-dashed border-border/80 bg-muted/10 px-4 py-8 text-center">
+        <div className="rounded-md border border-dashed border-border/80 bg-muted/10 px-4 py-8 text-center">
           <p className="text-sm font-medium text-muted-foreground">
             No timeline entries yet
           </p>