From aeb1d4e6745fc1114bc234e467ca75242b7fbee8 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 9 Apr 2025 17:53:54 +0200
Subject: [PATCH] chore: clean up, use snippets

---
 .../components/git/deploymentDomains.svelte   |  4 --
 .../components/git/deploymentSource.svelte    |  6 ++-
 .../(components)/deploymentCard.svelte        | 37 +++++++------------
 .../project-[project]/sites/+page.svelte      |  2 +-
 4 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/lib/components/git/deploymentDomains.svelte b/src/lib/components/git/deploymentDomains.svelte
index 1f8f79426..bb6ed3942 100644
--- a/src/lib/components/git/deploymentDomains.svelte
+++ b/src/lib/components/git/deploymentDomains.svelte
@@ -6,10 +6,6 @@
     import type { Models } from '@appwrite.io/console';
     import { IconExternalLink, IconQrcode } from '@appwrite.io/pink-icons-svelte';
     import { ActionMenu, Icon, Layout, Popover, Tag, Typography } from '@appwrite.io/pink-svelte';
-    import { createEventDispatcher } from 'svelte';
-
-    // export let domains: Models.ProxyRuleList;
-    // export let hideQRCode = true;
 
     let {
         domains,
diff --git a/src/lib/components/git/deploymentSource.svelte b/src/lib/components/git/deploymentSource.svelte
index 071b7c5e6..99d7aebfc 100644
--- a/src/lib/components/git/deploymentSource.svelte
+++ b/src/lib/components/git/deploymentSource.svelte
@@ -11,7 +11,11 @@
     } from '@appwrite.io/pink-icons-svelte';
     import { ActionMenu, Layout, Popover, Icon } from '@appwrite.io/pink-svelte';
 
-    export let deployment: Models.Deployment;
+    let {
+        deployment
+    }: {
+        deployment: Models.Deployment;
+    } = $props();
 </script>
 
 {#if deployment.type === 'vcs'}
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/(components)/deploymentCard.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(components)/deploymentCard.svelte
index 35609f3df..b131983ca 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/(components)/deploymentCard.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/(components)/deploymentCard.svelte
@@ -22,11 +22,6 @@
     import { page } from '$app/state';
     import type { Snippet } from 'svelte';
 
-    // export let deployment: Models.Deployment;
-    // export let proxyRuleList: Models.ProxyRuleList;
-    // export let variant: 'primary' | 'secondary' = 'primary';
-    // export let activeDeployment = false;
-
     let {
         deployment,
         proxyRuleList,
@@ -44,11 +39,15 @@
     let totalSize = $derived(humanFileSize(deployment?.totalSize ?? 0));
 </script>
 
-{#snippet text(title: string, text: string)}
+{#snippet titleSnippet(title: string)}
+    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+        {title}
+    </Typography.Text>
+{/snippet}
+
+{#snippet textGroup(title: string, text: string)}
     <Layout.Stack gap="xxs" inline>
-        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-            {title}
-        </Typography.Text>
+        {@render titleSnippet(title)}
         <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
             {text}
         </Typography.Text>
@@ -108,9 +107,7 @@
             <Layout.Stack gap="xl">
                 <Layout.Stack direction="row" alignItems="flex-start">
                     <Layout.Stack gap="xxs">
-                        <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                            Domains
-                        </Typography.Text>
+                        {@render titleSnippet('Domains')}
 
                         {#if $func.deploymentId === deployment.$id}
                             <DeploymentDomains domains={proxyRuleList} />
@@ -127,9 +124,7 @@
                 <Layout.Stack direction="row" gap="xl">
                     {#if deployment.status === 'failed'}
                         <Layout.Stack gap="xxs" inline>
-                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                                Status
-                            </Typography.Text>
+                            {@render titleSnippet('Status')}
                             <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                 <Status status={deployment.status} label={deployment.status} />
                             </Typography.Text>
@@ -149,17 +144,15 @@
                 <Layout.Stack gap="xxl" direction="row" wrap="wrap">
                     <Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
                         {#if deployment?.buildDuration}
-                            {@render text(
+                            {@render textGroup(
                                 'Build duration',
                                 formatTimeDetailed(deployment.buildDuration)
                             )}
                         {/if}
-                        {@render text('Total size', `${totalSize.value} ${totalSize.unit}`)}
+                        {@render textGroup('Total size', `${totalSize.value} ${totalSize.unit}`)}
 
                         <Layout.Stack gap="xxs" inline>
-                            <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                                Runtime
-                            </Typography.Text>
+                            {@render titleSnippet('Runtime')}
                             <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                                 <Layout.Stack direction="row" gap="xxs" alignItems="center">
                                     <SvgIcon
@@ -182,9 +175,7 @@
                     )}
                 </Layout.Stack>
                 <Layout.Stack gap="xxs" inline style="width: min-content;">
-                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                        Source
-                    </Typography.Text>
+                    {@render titleSnippet('Source')}
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                         <div>
                             <DeploymentSource {deployment} />
diff --git a/src/routes/(console)/project-[project]/sites/+page.svelte b/src/routes/(console)/project-[project]/sites/+page.svelte
index 1d8ec9dfd..2922fa221 100644
--- a/src/routes/(console)/project-[project]/sites/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/+page.svelte
@@ -60,7 +60,7 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery search={data.search} placeholder="Search by name" />
+            <SearchQuery placeholder="Search by name" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector {columns} view={data.view} hideColumns hideView={!data.siteList.total} />