From e336d2c7e5f8eaa2ddc7208f562ad1712d24916c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 13 Mar 2026 16:40:37 +0100
Subject: [PATCH] feat: show verification status in site settings page

---
 CHANGELOG.md                           |  1 +
 app/sites/[id]/settings/page.tsx       | 43 ++++++++++++++++++--------
 components/sites/VerificationModal.tsx |  5 +--
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e819caf..d9df91f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 ### Improved
 
 - **Sites now show their verification status.** Each site on your dashboard now displays either a green "Active" badge (if verified) or an amber "Unverified" badge. When you verify your tracking script installation, the status is saved permanently — no more showing "Active" for sites that haven't been set up yet.
+- **Verification status visible in Settings too.** Once your tracking script is verified, the Settings page shows a green confirmation bar instead of the verify button — so you can tell at a glance that everything is working. A "Re-verify" link is still there if you ever need to check again.
 - **Cleaner page paths in your reports.** Pages like `/products?_t=123456` or `/about?session=abc` now correctly show as `/products` and `/about`. Only marketing attribution parameters (like UTM tags) are preserved for traffic source tracking — all other junk parameters are automatically removed, so your Top Pages and Journeys stay clean without us having to chase down every new parameter format.
 - **Easier to hover country dots on the map.** The orange location markers on the world map are now much easier to interact with — you no longer need pixel-perfect aim to see the tooltip.
 - **Smoother chart curves and filled area.** The dashboard chart line now flows with natural curves instead of sharp flat tops at peaks. The area beneath the line is filled with a soft transparent orange gradient that fades toward the bottom, making trends easier to read at a glance.
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 4a6a939..087f6ee 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -709,19 +709,35 @@ export default function SiteSettingsPage() {
                       className="mb-4"
                     />
 
-                    <div className="flex items-center gap-4 mt-4">
-                      <button
-                        type="button"
-                        onClick={() => setShowVerificationModal(true)}
-                        className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
-                      >
-                        <ZapIcon className="w-4 h-4" />
-                        Verify Installation
-                      </button>
-                      <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                        Check if your site is sending data correctly.
-                      </p>
-                    </div>
+                    {site.is_verified ? (
+                      <div className="flex items-center justify-between mt-4 px-4 py-3 rounded-xl bg-green-50 dark:bg-green-900/10 border border-green-200 dark:border-green-900/30">
+                        <div className="flex items-center gap-2 text-sm font-medium text-green-700 dark:text-green-400">
+                          <CheckIcon className="w-4 h-4" />
+                          Script verified — your site is sending data correctly.
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => setShowVerificationModal(true)}
+                          className="text-xs text-green-600 dark:text-green-500 hover:underline"
+                        >
+                          Re-verify
+                        </button>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-4 mt-4">
+                        <button
+                          type="button"
+                          onClick={() => setShowVerificationModal(true)}
+                          className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
+                        >
+                          <ZapIcon className="w-4 h-4" />
+                          Verify Installation
+                        </button>
+                        <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                          Check if your site is sending data correctly.
+                        </p>
+                      </div>
+                    )}
                   </div>
 
                     <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
@@ -1614,6 +1630,7 @@ export default function SiteSettingsPage() {
         isOpen={showVerificationModal}
         onClose={() => setShowVerificationModal(false)}
         site={site}
+        onVerified={() => mutateSite()}
       />
     </div>
   )
diff --git a/components/sites/VerificationModal.tsx b/components/sites/VerificationModal.tsx
index f382e47..926b342 100644
--- a/components/sites/VerificationModal.tsx
+++ b/components/sites/VerificationModal.tsx
@@ -17,9 +17,10 @@ interface VerificationModalProps {
   isOpen: boolean
   onClose: () => void
   site: Site
+  onVerified?: () => void
 }
 
-export default function VerificationModal({ isOpen, onClose, site }: VerificationModalProps) {
+export default function VerificationModal({ isOpen, onClose, site, onVerified }: VerificationModalProps) {
   const [mounted, setMounted] = useState(false)
   const [status, setStatus] = useState<'idle' | 'checking' | 'success' | 'error'>('idle')
   const [attempts, setAttempts] = useState(0)
@@ -56,7 +57,7 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
           if (data.visitors > 0) {
             setStatus('success')
             toast.success('Connection established!')
-            try { await verifySite(site.id) } catch {}
+            try { await verifySite(site.id); onVerified?.() } catch {}
           }
         } catch (e) {
           // Ignore errors