From ee71860f19ac21dd4cace46e4712ee96d298b3b9 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Fri, 17 Oct 2025 12:35:32 +0530
Subject: [PATCH 1/4]  make deployment screenshots clickable

---
 .../sites/(components)/siteCard.svelte        | 59 +++++++++++++++----
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
index 95562c0add..e8ac5443e4 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
@@ -10,6 +10,7 @@
         Icon,
         Image,
         Layout,
+        Link,
         Status,
         Tooltip,
         Typography
@@ -23,15 +24,31 @@
     import { isCloud } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
     import { capitalize } from '$lib/helpers/string';
+    import { regionalProtocol } from '$routes/(console)/project-[region]-[project]/store';
 
-    export let deployment: Models.Deployment;
-    export let proxyRuleList: Models.ProxyRuleList;
-    export let hideQRCode = false;
-    export let variant: 'primary' | 'secondary' = 'primary';
+    let {
+        deployment,
+        proxyRuleList,
+        hideQRCode = false,
+        variant = 'primary'
+    }: {
+        deployment: Models.Deployment;
+        proxyRuleList: Models.ProxyRuleList;
+        hideQRCode?: boolean;
+        variant?: 'primary' | 'secondary';
+    } = $props();
 
-    let show = false;
+    let show = $state(false);
 
-    $: totalSize = humanFileSize(deployment?.totalSize ?? 0);
+    let totalSize = $derived(humanFileSize(deployment?.totalSize ?? 0));
+
+    let sortedDomains = $derived(
+        proxyRuleList?.rules?.slice()?.sort((a, b) => {
+            if (a?.trigger === 'manual' && b?.trigger !== 'manual') return -1;
+            if (a?.trigger !== 'manual' && b?.trigger === 'manual') return 1;
+            return 0;
+        })
+    );
 
     function getScreenshot(theme: string, deployment: Models.Deployment) {
         if (theme === 'dark') {
@@ -59,13 +76,29 @@
 <Card padding="s" radius="m" {variant}>
     <Layout.Stack gap="l">
         <div class="card-grid">
-            <Image
-                border
-                radius="s"
-                ratio="16/9"
-                style="width: 100%; align-self: start"
-                src={getScreenshot($app.themeInUse, deployment)}
-                alt="Screenshot" />
+            {#if proxyRuleList?.total}
+                <Link.Anchor
+                    href={`${$regionalProtocol}${sortedDomains?.[0]?.domain}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Open site">
+                    <Image
+                        border
+                        radius="s"
+                        ratio="16/9"
+                        style="width: 100%; align-self: start"
+                        src={getScreenshot($app.themeInUse, deployment)}
+                        alt="Screenshot" />
+                </Link.Anchor>
+            {:else}
+                <Image
+                    border
+                    radius="s"
+                    ratio="16/9"
+                    style="width: 100%; align-self: start"
+                    src={getScreenshot($app.themeInUse, deployment)}
+                    alt="Screenshot" />
+            {/if}
 
             <Layout.Stack gap="xl">
                 <Layout.Stack direction="row" alignItems="flex-start">

From f59f9463d75551503ba674b003055912b8b5cced Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Fri, 17 Oct 2025 12:52:09 +0530
Subject: [PATCH 2/4] using plain old anchor instead ofg Link due to height
 contraints

---
 .../sites/(components)/siteCard.svelte        | 23 +++++--------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
index e8ac5443e4..c2be64c75c 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
@@ -10,7 +10,6 @@
         Icon,
         Image,
         Layout,
-        Link,
         Status,
         Tooltip,
         Typography
@@ -76,21 +75,11 @@
 <Card padding="s" radius="m" {variant}>
     <Layout.Stack gap="l">
         <div class="card-grid">
-            {#if proxyRuleList?.total}
-                <Link.Anchor
-                    href={`${$regionalProtocol}${sortedDomains?.[0]?.domain}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="Open site">
-                    <Image
-                        border
-                        radius="s"
-                        ratio="16/9"
-                        style="width: 100%; align-self: start"
-                        src={getScreenshot($app.themeInUse, deployment)}
-                        alt="Screenshot" />
-                </Link.Anchor>
-            {:else}
+            <a
+                href={`${$regionalProtocol}${sortedDomains?.[0]?.domain}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Open site">
                 <Image
                     border
                     radius="s"
@@ -98,7 +87,7 @@
                     style="width: 100%; align-self: start"
                     src={getScreenshot($app.themeInUse, deployment)}
                     alt="Screenshot" />
-            {/if}
+            </a>
 
             <Layout.Stack gap="xl">
                 <Layout.Stack direction="row" alignItems="flex-start">

From 7cf6241bd9b1c80cecb2db0884ff4734313a062d Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Fri, 17 Oct 2025 13:21:16 +0530
Subject: [PATCH 3/4] code rabbit suggestion

---
 .../sites/(components)/siteCard.svelte        | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
index c2be64c75c..af189d6ffd 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
@@ -48,6 +48,7 @@
             return 0;
         })
     );
+    let primaryDomain = $derived(sortedDomains?.[0]?.domain);
 
     function getScreenshot(theme: string, deployment: Models.Deployment) {
         if (theme === 'dark') {
@@ -75,11 +76,21 @@
 <Card padding="s" radius="m" {variant}>
     <Layout.Stack gap="l">
         <div class="card-grid">
-            <a
-                href={`${$regionalProtocol}${sortedDomains?.[0]?.domain}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label="Open site">
+            {#if primaryDomain}
+                <a
+                    href={`${$regionalProtocol}${primaryDomain}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Open site">
+                    <Image
+                        border
+                        radius="s"
+                        ratio="16/9"
+                        style="width: 100%; align-self: start"
+                        src={getScreenshot($app.themeInUse, deployment)}
+                        alt="Screenshot" />
+                </a>
+            {:else}
                 <Image
                     border
                     radius="s"
@@ -87,7 +98,7 @@
                     style="width: 100%; align-self: start"
                     src={getScreenshot($app.themeInUse, deployment)}
                     alt="Screenshot" />
-            </a>
+            {/if}
 
             <Layout.Stack gap="xl">
                 <Layout.Stack direction="row" alignItems="flex-start">

From 2da0313c2b10a9c3dd59e0b7607f4cb2ba089c07 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Thu, 23 Oct 2025 15:35:06 +0530
Subject: [PATCH 4/4] use Card component with href prop instead of anchor tag

---
 .../sites/(components)/siteCard.svelte             | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
index af189d6ffd..0b3128638b 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
@@ -39,16 +39,16 @@
 
     let show = $state(false);
 
-    let totalSize = $derived(humanFileSize(deployment?.totalSize ?? 0));
+    const totalSize = $derived(humanFileSize(deployment?.totalSize ?? 0));
 
-    let sortedDomains = $derived(
+    const sortedDomains = $derived(
         proxyRuleList?.rules?.slice()?.sort((a, b) => {
             if (a?.trigger === 'manual' && b?.trigger !== 'manual') return -1;
             if (a?.trigger !== 'manual' && b?.trigger === 'manual') return 1;
             return 0;
         })
     );
-    let primaryDomain = $derived(sortedDomains?.[0]?.domain);
+    const primaryDomain = $derived(sortedDomains?.[0]?.domain);
 
     function getScreenshot(theme: string, deployment: Models.Deployment) {
         if (theme === 'dark') {
@@ -77,11 +77,7 @@
     <Layout.Stack gap="l">
         <div class="card-grid">
             {#if primaryDomain}
-                <a
-                    href={`${$regionalProtocol}${primaryDomain}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="Open site">
+                <Card href={`${$regionalProtocol}${primaryDomain}`} padding="none" radius="s">
                     <Image
                         border
                         radius="s"
@@ -89,7 +85,7 @@
                         style="width: 100%; align-self: start"
                         src={getScreenshot($app.themeInUse, deployment)}
                         alt="Screenshot" />
-                </a>
+                </Card>
             {:else}
                 <Image
                     border