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

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

@@ -54,28 +54,32 @@ export function TicketClassContentSkeleton() {
         </CardContent>
       </Card>
 
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <Skeleton className="size-5 rounded" />
-          <Skeleton className="h-5 w-56" />
-        </div>
-        {Array.from({ length: 3 }).map((_, index) => (
-          <div key={index} className="relative flex gap-4 pb-8 last:pb-0">
-            {index < 2 ? (
-              <span className="absolute top-6 left-2.75 h-[calc(100%-10px)] w-px bg-border" />
-            ) : null}
-            <Skeleton className="relative z-10 mt-0.5 size-6 shrink-0 rounded-full" />
-            <div className="min-w-0 flex-1 space-y-3">
-              <div className="flex flex-wrap items-center gap-3">
-                <Skeleton className="h-4 w-44" />
-                <Skeleton className="h-3 w-28" />
-              </div>
-              <Skeleton className="h-3 w-56" />
-              <Skeleton className="h-12 w-full" />
-            </div>
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Skeleton className="size-5 rounded" />
+            <Skeleton className="h-5 w-56" />
           </div>
-        ))}
-      </div>
+        </CardHeader>
+        <CardContent>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <div key={index} className="relative flex gap-4 pb-8 last:pb-0">
+              {index < 2 ? (
+                <span className="absolute top-6 left-2.75 h-[calc(100%-10px)] w-px bg-border" />
+              ) : null}
+              <Skeleton className="relative z-10 mt-0.5 size-6 shrink-0 rounded-full" />
+              <div className="min-w-0 flex-1 space-y-3">
+                <div className="flex flex-wrap items-center gap-3">
+                  <Skeleton className="h-4 w-44" />
+                  <Skeleton className="h-3 w-28" />
+                </div>
+                <Skeleton className="h-3 w-56" />
+                <Skeleton className="h-12 w-full" />
+              </div>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
     </div>
   );
 }