refactor: extract email path into standalone card component

Move the received chain display out of BlacklistCard into EmailPathCard,
giving it its own card styling and placing it as a dedicated section on
the report page.

web/src/lib/components/BlacklistCard.svelte

@@ -1,18 +1,16 @@
 <script lang="ts">
-    import type { BlacklistCheck, ReceivedHop } from "$lib/api/types.gen";
+    import type { BlacklistCheck } from "$lib/api/types.gen";
     import { getScoreColorClass } from "$lib/score";
     import { theme } from "$lib/stores/theme";
-    import EmailPathCard from "./EmailPathCard.svelte";
     import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
         blacklists: Record<string, BlacklistCheck[]>;
         blacklistGrade?: string;
         blacklistScore?: number;
-        receivedChain?: ReceivedHop[];
     }
 
-    let { blacklists, blacklistGrade, blacklistScore, receivedChain }: Props = $props();
+    let { blacklists, blacklistGrade, blacklistScore }: Props = $props();
 </script>
 
 <div class="card shadow-sm" id="rbl-details">
@@ -35,10 +33,6 @@
         </h4>
     </div>
     <div class="card-body">
-        {#if receivedChain}
-            <EmailPathCard {receivedChain} />
-        {/if}
-
         <div class="row row-cols-1 row-cols-lg-2">
             {#each Object.entries(blacklists) as [ip, checks]}
                 <div class="col mb-3">

web/src/lib/components/EmailPathCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { ReceivedHop } from "$lib/api/types.gen";
+    import { theme } from "$lib/stores/theme";
 
     interface Props {
         receivedChain: ReceivedHop[];
@@ -9,9 +10,18 @@
 </script>
 
 {#if receivedChain && receivedChain.length > 0}
-    <div class="mb-3" id="email-path">
+    <div class="card shadow-sm" id="email-path">
-        <h5>Email Path (Received Chain)</h5>
+        <div
-        <div class="list-group">
+            class="card-header"
+            class:bg-white={$theme === "light"}
+            class:bg-dark={$theme !== "light"}
+        >
+            <h4 class="mb-0">
+                <i class="bi bi-pin-map me-2"></i>
+                Email Path
+            </h4>
+        </div>
+        <div class="list-group list-group-flush">
             {#each receivedChain as hop, i}
                 <div class="list-group-item">
                     <div class="d-flex w-100 justify-content-between">
@@ -30,7 +40,7 @@
                                 : "-"}
                         </small>
                     </div>
-                    {#if hop.with || hop.id}
+                    {#if hop.with || hop.id || hop.from}
                         <p class="mb-1 small d-flex gap-3">
                             {#if hop.with}
                                 <span>

web/src/routes/test/[test]/+page.svelte

@@ -9,6 +9,7 @@
         BlacklistCard,
         ContentAnalysisCard,
         DnsRecordsCard,
+        EmailPathCard,
         ErrorDisplay,
         HeaderAnalysisCard,
         PendingState,
@@ -294,6 +295,15 @@
                 </div>
             </div>
 
+            <!-- Received Chain -->
+            {#if report.header_analysis?.received_chain && report.header_analysis.received_chain.length > 0}
+                <div class="row mb-4" id="received-chain">
+                    <div class="col-12">
+                        <EmailPathCard receivedChain={report.header_analysis.received_chain} />
+                    </div>
+                </div>
+            {/if}
+
             <!-- DNS Records -->
             {#if report.dns_results}
                 <div class="row mb-4" id="dns">
@@ -329,7 +339,6 @@
                     {blacklists}
                     blacklistGrade={report.summary?.blacklist_grade}
                     blacklistScore={report.summary?.blacklist_score}
-                    receivedChain={report.header_analysis?.received_chain}
                 />
             {/snippet}