From fcdc79f8010d7564682ba4b26d206125319f4a69 Mon Sep 17 00:00:00 2001
From: Jason Crawford <jason@jasoncrawford.org>
Date: Tue, 24 Feb 2026 09:41:43 -0800
Subject: [PATCH] feat: make site URLs clickable throughout the app

URLs now open in a new tab on site cards, open incident cards,
site detail pages, and incident detail pages. Refactored incident
cards on the status page to use the overlay link pattern to avoid
nested anchor tags.

Closes #61

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/incidents/[id]/page.tsx | 11 +++++++++++
 src/app/page.tsx                | 23 ++++++++++++++++-------
 src/app/sites/[id]/page.tsx     | 10 ++++++++--
 src/components/SiteList.tsx     | 10 +++++++---
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/app/incidents/[id]/page.tsx b/src/app/incidents/[id]/page.tsx
index d708242..f1e9a3f 100644
--- a/src/app/incidents/[id]/page.tsx
+++ b/src/app/incidents/[id]/page.tsx
@@ -122,6 +122,17 @@ export default async function IncidentDetailPage({
               Resolved <LocalDateTime dateString={incident.resolved_at} />
             </div>
           )}
+          <div className="text-sm" style={{ color: "#5C5C5C" }}>
+            <a
+              href={incident.site?.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="no-underline hover:underline"
+              style={{ color: "#5C5C5C" }}
+            >
+              {incident.site?.url}
+            </a>
+          </div>
           <div className="text-sm flex items-center gap-1.5" style={{ color: "#5C5C5C" }}>
             <span>Triggered by:</span>
             <span
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5b9eab8..aa31510 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -69,19 +69,22 @@ export default async function StatusPage() {
         {incidents.length > 0 ? (
           <div className="flex flex-col gap-3">
             {incidents.map((incident) => (
-              <Link
+              <div
                 key={incident.id}
-                href={`/incidents/${incident.id}`}
-                className="block no-underline"
+                className="relative"
                 style={{
                   backgroundColor: "#FFFFFF",
                   border: "1px solid #E8E4DF",
                   borderLeft: "3px solid #C4453C",
                   borderRadius: "4px",
                   padding: "16px 20px",
-                  color: "inherit",
                 }}
               >
+                <Link
+                  href={`/incidents/${incident.id}`}
+                  className="absolute inset-0 z-0"
+                  aria-label={`Incident on ${incident.site?.name}`}
+                />
                 <div className="flex items-baseline justify-between gap-3 flex-wrap">
                   <span
                     className="text-[15px] font-bold"
@@ -108,11 +111,17 @@ export default async function StatusPage() {
                       {incident.check.error}
                     </span>
                   )}
-                  <span className="text-[13px]" style={{ color: "#5C5C5C" }}>
+                  <a
+                    href={incident.site?.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-[13px] relative z-10 no-underline hover:underline"
+                    style={{ color: "#5C5C5C" }}
+                  >
                     {incident.site?.url}
-                  </span>
+                  </a>
                 </div>
-              </Link>
+              </div>
             ))}
           </div>
         ) : (
diff --git a/src/app/sites/[id]/page.tsx b/src/app/sites/[id]/page.tsx
index e750f79..71880de 100644
--- a/src/app/sites/[id]/page.tsx
+++ b/src/app/sites/[id]/page.tsx
@@ -74,9 +74,15 @@ export default async function SiteDetailPage({
           >
             {site.name}
           </h1>
-          <div className="text-sm break-all" style={{ color: "#5C5C5C" }}>
+          <a
+            href={site.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm break-all no-underline hover:underline"
+            style={{ color: "#5C5C5C" }}
+          >
             {site.url}
-          </div>
+          </a>
         </div>
 
         {user && (
diff --git a/src/components/SiteList.tsx b/src/components/SiteList.tsx
index ed5a6bf..8af2ddd 100644
--- a/src/components/SiteList.tsx
+++ b/src/components/SiteList.tsx
@@ -138,12 +138,16 @@ function SiteCard({
             {site.name}
           </span>
         </div>
-        <span
-          className="text-xs"
+        <a
+          href={site.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-xs relative z-10 no-underline hover:underline"
           style={{ color: "#5C5C5C" }}
+          onClick={e => e.stopPropagation()}
         >
           {site.url}
-        </span>
+        </a>
         {isAdmin && (
           <div className="relative z-10">
             <SiteFormDialog