From ff1a95822078b848f093583c3ec6a0dc09dd0b46 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Fri, 24 Oct 2025 15:37:39 +0700
Subject: [PATCH] Add a menu to results page

---
 web/src/lib/components/ScoreCard.svelte |  43 +++++----
 web/src/routes/test/[test]/+page.svelte | 116 +++++++++++++++++++++---
 2 files changed, 129 insertions(+), 30 deletions(-)

diff --git a/web/src/lib/components/ScoreCard.svelte b/web/src/lib/components/ScoreCard.svelte
index 11e5396..523940f 100644
--- a/web/src/lib/components/ScoreCard.svelte
+++ b/web/src/lib/components/ScoreCard.svelte
@@ -5,10 +5,11 @@
     interface Props {
         grade: string;
         score: number;
+        reanalyzing?: boolean;
         summary?: ScoreSummary;
     }
 
-    let { grade, score, summary }: Props = $props();
+    let { grade, score, reanalyzing, summary }: Props = $props();
 
     function getScoreLabel(score: number): string {
         if (score >= 90) return "Excellent";
@@ -19,25 +20,22 @@
     }
 </script>
 
-<style>
-    .summary-card {
-        transition: all 0.2s ease-in-out;
-        cursor: pointer;
-    }
-
-    .summary-card:hover {
-        background-color: #e2e6ea !important;
-        transform: translateY(-2px);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-</style>
-
 <div class="card shadow-lg bg-white">
     <div class="card-body p-5 text-center">
         <div class="mb-3">
-            <GradeDisplay {grade} {score} size="large" />
+            {#if reanalyzing}
+                <div class="spinner-border spinner-border-lg text-muted display-1"></div>
+            {:else}
+                <GradeDisplay {grade} {score} size="large" />
+            {/if}
         </div>
-        <h3 class="fw-bold mb-2">{getScoreLabel(score)}</h3>
+        <h3 class="fw-bold mb-2">
+            {#if reanalyzing}
+                Analyzing in progress&hellip;
+            {:else}
+                {getScoreLabel(score)}
+            {/if}
+        </h3>
         <p class="text-muted mb-4">Overall Deliverability Score</p>
 
         {#if summary}
@@ -94,3 +92,16 @@
         {/if}
     </div>
 </div>
+
+<style>
+    .summary-card {
+        transition: all 0.2s ease-in-out;
+        cursor: pointer;
+    }
+
+    .summary-card:hover {
+        background-color: #e2e6ea !important;
+        transform: translateY(-2px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+</style>
diff --git a/web/src/routes/test/[test]/+page.svelte b/web/src/routes/test/[test]/+page.svelte
index 98fb3a1..c801bac 100644
--- a/web/src/routes/test/[test]/+page.svelte
+++ b/web/src/routes/test/[test]/+page.svelte
@@ -24,6 +24,7 @@
     let pollInterval: ReturnType<typeof setInterval> | null = null;
     let nextfetch = $state(23);
     let nbfetch = $state(0);
+    let menuOpen = $state(false);
 
     async function fetchTest() {
         if (nbfetch > 0) {
@@ -85,6 +86,7 @@
     async function handleReanalyze() {
         if (!testId || reanalyzing) return;
 
+        menuOpen = false;
         reanalyzing = true;
         error = null;
 
@@ -99,6 +101,18 @@
             reanalyzing = false;
         }
     }
+
+    function handleExportJSON() {
+        const dataStr = JSON.stringify(report, null, 2);
+        const dataBlob = new Blob([dataStr], { type: 'application/json' });
+        const url = URL.createObjectURL(dataBlob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `report-${testId}.json`;
+        link.click();
+        URL.revokeObjectURL(url);
+        menuOpen = false;
+    }
 </script>
 
 <svelte:head>
@@ -135,7 +149,47 @@
             <!-- Score Header -->
             <div class="row mb-4" id="score">
                 <div class="col-12">
-                    <ScoreCard grade={report.grade} score={report.score} summary={report.summary} />
+                    <div class="position-relative">
+                        <div class="position-absolute py-2 px-3" style="z-index: 2; right: 0">
+                            <div class="menu-container">
+                                <button
+                                    class="btn btn-outline-secondary"
+                                    type="button"
+                                    onclick={() => (menuOpen = !menuOpen)}
+                                    aria-label="Menu"
+                                >
+                                    <i class="bi bi-three-dots-vertical"></i>
+                                </button>
+                                {#if menuOpen}
+                                    <div class="menu-dropdown">
+                                        <button class="menu-item" onclick={handleExportJSON}>
+                                            <i class="bi bi-download me-2"></i>
+                                            Export JSON Report
+                                        </button>
+                                        <button
+                                            class="menu-item"
+                                            onclick={handleReanalyze}
+                                            disabled={reanalyzing}
+                                        >
+                                            <i class="bi bi-arrow-clockwise me-2"></i>
+                                            Reanalyze with Latest Version
+                                        </button>
+                                        <hr class="menu-divider" />
+                                        <a
+                                            class="menu-item"
+                                            href={`/api/report/${testId}/raw`}
+                                            target="_blank"
+                                            onclick={() => (menuOpen = false)}
+                                        >
+                                            <i class="bi bi-file-earmark-text me-2"></i>
+                                            View Raw Email
+                                        </a>
+                                    </div>
+                                {/if}
+                            </div>
+                        </div>
+                    </div>
+                    <ScoreCard grade={report.grade} score={report.score} summary={report.summary} {reanalyzing} />
                 </div>
             </div>
 
@@ -233,19 +287,6 @@
             <!-- Action Buttons -->
             <div class="row">
                 <div class="col-12 text-center">
-                    <button
-                        class="btn btn-outline-secondary btn-lg me-3"
-                        onclick={handleReanalyze}
-                        disabled={reanalyzing}
-                    >
-                        {#if reanalyzing}
-                            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-                            Reanalyzing...
-                        {:else}
-                            <i class="bi bi-arrow-clockwise me-2"></i>
-                            Reanalyze with Latest Version
-                        {/if}
-                    </button>
                     <a href="/test/" class="btn btn-primary btn-lg">
                         <i class="bi bi-arrow-repeat me-2"></i>
                         Test Another Email
@@ -288,4 +329,51 @@
         font-size: 1rem;
         font-weight: 700;
     }
+
+    .menu-container {
+        position: relative;
+    }
+
+    .menu-dropdown {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        margin-top: 0.25rem;
+        background: white;
+        border: 1px solid #dee2e6;
+        border-radius: 0.375rem;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+        min-width: 250px;
+        z-index: 1000;
+        padding: 0.5rem 0;
+    }
+
+    .menu-item {
+        display: block;
+        width: 100%;
+        padding: 0.5rem 1rem;
+        background: none;
+        border: none;
+        text-align: left;
+        color: #212529;
+        text-decoration: none;
+        cursor: pointer;
+        transition: background-color 0.15s ease-in-out;
+        font-size: 1rem;
+    }
+
+    .menu-item:hover:not(:disabled) {
+        background-color: #f8f9fa;
+    }
+
+    .menu-item:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .menu-divider {
+        margin: 0.5rem 0;
+        border: 0;
+        border-top: 1px solid #dee2e6;
+    }
 </style>