From 06d59fd11abfe971affcda2bf354f4817b1fd943 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 20 Feb 2025 13:54:57 +0100
Subject: [PATCH 1/8] Support Angular starter kit

---
 .../components/AngularFrameworkIcon.svelte    |  5 ++++
 .../overview/platforms/createWeb.svelte       | 27 +++++++++++++++----
 2 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/overview/platforms/components/AngularFrameworkIcon.svelte

diff --git a/src/routes/(console)/project-[project]/overview/platforms/components/AngularFrameworkIcon.svelte b/src/routes/(console)/project-[project]/overview/platforms/components/AngularFrameworkIcon.svelte
new file mode 100644
index 000000000..66ed5831c
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/platforms/components/AngularFrameworkIcon.svelte
@@ -0,0 +1,5 @@
+<script>
+    import { SvgIcon } from '$lib/components';
+</script>
+
+<SvgIcon name="angular" type="color" iconSize="" />
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
index 4072d26f7..6d8d44f77 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
@@ -21,7 +21,8 @@
         IconReact,
         IconNuxt,
         IconInfo,
-        IconExternalLink
+        IconExternalLink,
+        IconAngular
     } from '@appwrite.io/pink-icons-svelte';
     import { page } from '$app/stores';
     import { type ComponentType, onMount } from 'svelte';
@@ -38,6 +39,7 @@
     import NextjsFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/NextjsFrameworkIcon.svelte';
     import VueFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/VueFrameworkIcon.svelte';
     import NoFrameworkIcon from './components/NoFrameworkIcon.svelte';
+    import AngularFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/AngularFrameworkIcon.svelte';
 
     export let key;
 
@@ -97,6 +99,13 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
             icon: VueFrameworkIcon,
             smallIcon: IconVue,
             portNumber: 5173
+        },
+        {
+            key: 'angular',
+            label: 'Angular',
+            icon: AngularFrameworkIcon,
+            smallIcon: IconAngular,
+            portNumber: 4200
         }
     ];
 
@@ -227,10 +236,18 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                                 code={`\ngit clone https://github.com/appwrite/starter-for-${selectedFramework.key}\ncd starter-for--${selectedFramework.key}`} />
                         </div>
 
-                        <Typography.Text variant="m-500"
-                            >2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode
-                                size="s"
-                                code=".env" /> and update the values.</Typography.Text>
+                        {#if selectedFramework.key === 'angular'}
+                            <Typography.Text variant="m-500"
+                                >2. Change <InlineCode
+                                    size="s"
+                                    code="src/environments/environment(development).ts" /> to reflect
+                                the values below:</Typography.Text>
+                        {:else}
+                            <Typography.Text variant="m-500"
+                                >2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode
+                                    size="s"
+                                    code=".env" /> and update the values.</Typography.Text>
+                        {/if}
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
                         <div class="pink2-code-margin-fix">

From e4b31d2c9cb957e29f8a829700f0349c4e970b86 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 20 Feb 2025 14:02:39 +0100
Subject: [PATCH 2/8] Use curly brackets

---
 .../project-[project]/overview/platforms/createWeb.svelte     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
index 6d8d44f77..f02bad915 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
@@ -240,8 +240,8 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                             <Typography.Text variant="m-500"
                                 >2. Change <InlineCode
                                     size="s"
-                                    code="src/environments/environment(development).ts" /> to reflect
-                                the values below:</Typography.Text>
+                                    code="src/environments/environment&#x7B;.development&#x7D;.ts" />
+                                to reflect the values below:</Typography.Text>
                         {:else}
                             <Typography.Text variant="m-500"
                                 >2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode

From 70319f636a773a0ddbd6b555f4aa5a1c62766308 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 20 Feb 2025 14:11:15 +0100
Subject: [PATCH 3/8] Use environment.ts

---
 .../project-[project]/overview/platforms/createWeb.svelte       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
index f02bad915..05564bb98 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
@@ -240,7 +240,7 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                             <Typography.Text variant="m-500"
                                 >2. Change <InlineCode
                                     size="s"
-                                    code="src/environments/environment&#x7B;.development&#x7D;.ts" />
+                                    code="src/environments/environment.ts" />
                                 to reflect the values below:</Typography.Text>
                         {:else}
                             <Typography.Text variant="m-500"

From 9d5e17c668af1a0b0cc7e5f9860ca4d077f77353 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 24 Feb 2025 11:15:43 +0100
Subject: [PATCH 4/8] design fix creation flow

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 24 +++++++++----------
 .../sites/create-site/deploying/+page.svelte  |  8 +++----
 .../sites/create-site/deploying/+page.ts      |  7 +++---
 .../(components)/addCollaboratorModal.svelte  |  2 +-
 .../sites/create-site/finish/+page.svelte     |  9 ++++---
 .../template-[template]/+page.svelte          |  3 +--
 .../sites/createSiteModal.svelte              |  2 ++
 8 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 53060d96e..cdfc64a0f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f",
         "@appwrite.io/pink-legacy": "^1.0.1",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@362b17a",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e37039d82..b3a3f0086 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.0.1
         version: 1.0.1
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@362b17a
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@362b17a(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -215,14 +215,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@362b17ad51dba0cb024f66ed140ebd29e9712be8':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@362b17ad51dba0cb024f66ed140ebd29e9712be8}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f7e429f7c7be7210ce06603cbcaef09e7f9c2fdf':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f7e429f7c7be7210ce06603cbcaef09e7f9c2fdf}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.1':
     resolution: {integrity: sha512-e5IZx2drqSxgl2WXvmr0eLfg/WiOCzuqQE8oksD+9GoFBkcL9HWvXul5GjFni3RBAN9XFRL3nUExGk4T0H8sFw==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@362b17a':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@362b17a}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4099,11 +4099,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@362b17ad51dba0cb024f66ed140ebd29e9712be8(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f7e429f7c7be7210ce06603cbcaef09e7f9c2fdf(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4116,9 +4116,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@362b17a(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@362b17ad51dba0cb024f66ed140ebd29e9712be8(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f7e429f7c7be7210ce06603cbcaef09e7f9c2fdf(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.3(svelte@4.2.19)
diff --git a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
index 28c87470f..da280cdb8 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
@@ -39,10 +39,10 @@
     <svelte:fragment slot="aside">
         <!-- TODO: fix use repository name instead of id-->
         <Aside
-            framework={data.frameworks.frameworks.find((f) => f.name === data.site.framework)}
-            repositoryName={data.repository.name}
-            branch={data.site.providerBranch}
-            rootDir={data.site.providerRootDirectory}
+            framework={data.frameworks.frameworks.find((f) => f.key === data.site.framework)}
+            repositoryName={data?.repository?.name}
+            branch={data.repository?.id ? data.site.providerBranch : ''}
+            rootDir={data.repository?.id ? data.site.providerRootDirectory : ''}
             domain={data.deployment.domain} />
     </svelte:fragment>
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.ts
index 5476d15f4..d537c10f5 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.ts
+++ b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.ts
@@ -15,9 +15,8 @@ export const load: PageLoad = async ({ url }) => {
     return {
         site,
         deployment,
-        repository: await sdk.forProject.vcs.getRepository(
-            site.installationId,
-            site.providerRepositoryId
-        )
+        repository: site?.installationId
+            ? await sdk.forProject.vcs.getRepository(site.installationId, site.providerRepositoryId)
+            : undefined
     };
 };
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
index 597ed6a56..bf6366984 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
@@ -63,7 +63,7 @@
     // TODO: fix design
 </script>
 
-<Modal title="Add collaborators" {error} bind:show onSubmit={create}>
+<Modal title="Share site" {error} bind:show onSubmit={create}>
     <span slot="description">
         Share your progress and start collaborating by adding members to your organization.
     </span>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
index a085fd418..cb8505733 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
@@ -71,7 +71,7 @@
                                             justifyContent="space-between"
                                             alignItems="center">
                                             <Typography.Title size="s">
-                                                Connect to repository
+                                                Add repository
                                             </Typography.Title>
                                             <Icon
                                                 icon={IconArrowSmRight}
@@ -101,7 +101,7 @@
                                             color="--color-fgcolor-neutral-weak" />
                                     </Layout.Stack>
                                     <Typography.Text variant="m-400">
-                                        Connect to an existing domain or purchase a new one.
+                                        Connect to an existing domain or add a new one.
                                     </Typography.Text>
                                 </Layout.Stack>
                             </Card>
@@ -111,13 +111,12 @@
                                 isButton
                                 padding="s"
                                 on:click={() => (showInviteCollaborator = true)}>
-                                <Layout.Stack gap="s">
+                                <Layout.Stack gap="s" justifyContent="flex-start">
                                     <Layout.Stack
                                         direction="row"
                                         justifyContent="space-between"
                                         alignItems="center">
-                                        <Typography.Title size="s"
-                                            >Add collaborators</Typography.Title>
+                                        <Typography.Title size="s">Share site</Typography.Title>
                                         <Icon
                                             icon={IconArrowSmRight}
                                             size="l"
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
index 733742d49..3c21753fe 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
@@ -356,8 +356,7 @@
                             ? `${base}/images/sites/screenshot-placeholder-dark.svg`
                             : `${base}/images/sites/screenshot-placeholder-light.svg`)}
                     alt={data.template.name}
-                    width={357}
-                    height={200} />
+                    ratio="16/9" />
             </Layout.Stack>
         </Aside>
     </svelte:fragment>
diff --git a/src/routes/(console)/project-[project]/sites/createSiteModal.svelte b/src/routes/(console)/project-[project]/sites/createSiteModal.svelte
index a21f16b3a..56d81324c 100644
--- a/src/routes/(console)/project-[project]/sites/createSiteModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/createSiteModal.svelte
@@ -24,6 +24,7 @@
                 <Image
                     alt="repositories"
                     radius="xxs"
+                    ratio="16/9"
                     src={$app?.themeInUse === 'dark' ? TemplateDark : TemplateLight} />
                 <Layout.Stack gap="s">
                     <Typography.Text variant="m-600">Clone a template</Typography.Text>
@@ -42,6 +43,7 @@
                 <Image
                     alt="repositories"
                     radius="xxs"
+                    ratio="16/9"
                     src={$app?.themeInUse === 'dark' ? RepoDark : RepoLight} />
 
                 <Layout.Stack gap="s">

From 579ed70057d03d3bcdb6041f20b380efa50cec68 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 24 Feb 2025 12:10:44 +0100
Subject: [PATCH 5/8] fix: deployment

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  18 +--
 .../(components)/connectRepoModal.svelte      |  18 +--
 .../sites/site-[site]/+page.svelte            |  11 +-
 .../site-[site]/deployments/+page.svelte      |   4 +
 .../deployments/createCliModal.svelte         | 103 ++++++++++++++++++
 .../sites/site-[site]/domainsOverview.svelte  |  14 ++-
 7 files changed, 140 insertions(+), 30 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/sites/site-[site]/deployments/createCliModal.svelte

diff --git a/package.json b/package.json
index cdfc64a0f..ddabeec1a 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f",
         "@appwrite.io/pink-legacy": "^1.0.1",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3a3f0086..1ccb298e3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.0.1
         version: 1.0.1
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -221,8 +221,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f7e429f7c7be7210ce06603cbcaef09e7f9c2fdf':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f7e429f7c7be7210ce06603cbcaef09e7f9c2fdf}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f99d781924ba95e7ed83708ca8e4c26f80293c3c':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f99d781924ba95e7ed83708ca8e4c26f80293c3c}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.1':
     resolution: {integrity: sha512-e5IZx2drqSxgl2WXvmr0eLfg/WiOCzuqQE8oksD+9GoFBkcL9HWvXul5GjFni3RBAN9XFRL3nUExGk4T0H8sFw==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4103,7 +4103,7 @@ snapshots:
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f7e429f7c7be7210ce06603cbcaef09e7f9c2fdf(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f99d781924ba95e7ed83708ca8e4c26f80293c3c(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4116,9 +4116,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f7e429f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f7e429f7c7be7210ce06603cbcaef09e7f9c2fdf(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f99d781924ba95e7ed83708ca8e4c26f80293c3c(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.3(svelte@4.2.19)
diff --git a/src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte b/src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte
index fce286b89..b855373c9 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/connectRepoModal.svelte
@@ -29,6 +29,7 @@
     let selectedRepository = '';
     let installations = { installations: [], total: 0 };
     let hasInstallations = !!installations?.total;
+    let error = '';
 
     onMount(async () => {
         installations = await sdk.forProject.vcs.listInstallations();
@@ -54,18 +55,17 @@
                 repository.set(repo);
                 selectedRepository = repo.id;
             }
-            console.log(Object.keys(Framework));
 
             const s = await sdk.forProject.sites.update(
                 site.$id,
                 site.name,
-                Framework[site.framework],
+                site.framework as Framework,
                 site.enabled,
                 site.timeout,
                 site.installCommand,
                 site.buildCommand,
                 site.outputDirectory,
-                BuildRuntime[site.buildRuntime],
+                site.buildRuntime as BuildRuntime,
                 site.adapter,
                 site.fallbackFile,
                 selectedInstallationId,
@@ -79,20 +79,20 @@
                 type: 'success',
                 message: 'Repository connected successfully'
             });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+        } catch (e) {
+            error = e.message;
         }
     }
+
+    $: console.log(selectedInstallationId);
 </script>
 
 <Modal
     title="Connect repository"
     bind:show
     hideFooter={!repositoryBehaviour}
-    onSubmit={connectRepo}>
+    onSubmit={connectRepo}
+    bind:error>
     <span slot="description"> Connect to a new repository or an existing one. </span>
     {#if hasInstallations}
         <Layout.Stack gap="xl">
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
index abda0ca03..15b8d609e 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
@@ -43,8 +43,9 @@
                 <svelte:fragment slot="footer">
                     <Button external href={`${$protocol}${data.deployment.domain}`}>Visit</Button>
                     <!-- TODO: disable when disabled={data.hasProdReadyDeployments} -->
-                    <Button secondary on:click={() => (showRollback = true)}
-                        >Instant rollback</Button>
+                    <Button secondary on:click={() => (showRollback = true)}>
+                        Instant rollback
+                    </Button>
                 </svelte:fragment>
             </SiteCard>
         {:else if data.deployment?.status === 'building'}
@@ -61,11 +62,11 @@
         {:else}
             <Card.Base padding="none">
                 <Empty
-                    title="No deployments found"
+                    title="There is no active deployment"
                     src={$app.themeInUse === 'dark' ? EmptyDeploymentDark : EmptyDeploymentLight}>
                     <span slot="description">
-                        You haven't deployed any sites yet. Get started by deploying your first
-                        site.
+                        Deploy your site to get started. Once deployed, you'll see your latest build
+                        details here.
                     </span>
                 </Empty>
             </Card.Base>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
index 0b696c04f..e780be57f 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
@@ -21,6 +21,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
+    import CreateCliModal from './createCliModal.svelte';
 
     export let data;
 
@@ -208,3 +209,6 @@
 {#if showConnectManual}
     <CreateManualDeploymentModal bind:show={showConnectManual} site={data.site} />
 {/if}
+{#if showConnectCLI}
+    <CreateCliModal bind:show={showConnectCLI} site={data.site} />
+{/if}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createCliModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createCliModal.svelte
new file mode 100644
index 000000000..87f082007
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createCliModal.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Modal, Alert } from '$lib/components';
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import SecondaryTabs from '$lib/components/secondaryTabs.svelte';
+    import SecondaryTabsItem from '$lib/components/secondaryTabsItem.svelte';
+    import { Code, Layout, Tabs } from '@appwrite.io/pink-svelte';
+
+    export let show = false;
+
+    let lang = 'js';
+    let codeSnippets = {};
+    let os = 'unknown';
+    let category = 'Unix';
+
+    const siteId = $page.params.site;
+    codeSnippets = setCodeSnippets(lang);
+
+    onMount(() => {
+        // lang = setLanguage($func.runtime);
+        codeSnippets = setCodeSnippets(lang);
+        os = navigator['userAgentData']?.platform || navigator?.platform || 'unknown';
+
+        if (os.includes('Win')) {
+            category = 'CMD';
+        } else if (os.includes('Mac') || os.includes('Linux')) {
+            category = 'Unix';
+        } else {
+            category = 'Unix';
+        }
+    });
+
+    function setCodeSnippets(lang: string) {
+        return {
+            Unix: {
+                code: `appwrite functions createDeployment \\
+    --siteId=${siteId} \\
+    --entrypoint='index.${lang}' \\
+    --code="." \\
+    --activate=true`,
+                language: 'bash'
+            },
+
+            CMD: {
+                code: `appwrite functions createDeployment ^
+    --siteId=${siteId} ^
+    --entrypoint='index.${lang}' ^
+    --code="." ^
+    --activate=true`,
+                language: 'CMD'
+            },
+            PowerShell: {
+                code: `appwrite functions createDeployment ,
+    --siteId=${siteId} ,
+    --entrypoint='index.${lang}' ,
+    --code="." ,
+    --activate=true`,
+                language: 'PowerShell'
+            }
+        };
+    }
+</script>
+
+<Modal title="Create CLI deployment" bind:show hideFooter>
+    <span slot="description">
+        Deploy your site using the Appwrite CLI by running the following command inside your
+        function's folder.
+    </span>
+
+    <Layout.Stack gap="l">
+        <Layout.Stack gap="s">
+            <Tabs.Root let:root stretch>
+                {#each ['Unix', 'CMD', 'PowerShell'] as cat}
+                    <Tabs.Item.Button
+                        {root}
+                        on:click={() => (category = cat)}
+                        active={category === cat}>
+                        {cat}
+                    </Tabs.Item.Button>
+                {/each}
+            </Tabs.Root>
+
+            {#each ['Unix', 'CMD', 'PowerShell'] as cat}
+                {#if category === cat}
+                    <Code hideHeader lang="sh" code={codeSnippets[cat].code} />
+                {/if}
+            {/each}
+        </Layout.Stack>
+
+        <Alert dismissible={false} type="warning">
+            If you did not create your site using the CLI, initialize your function by following our <a
+                href="https://appwrite.io/docs/tooling/command-line/installation"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">documentation</a
+            >.
+        </Alert>
+    </Layout.Stack>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
index e88da8ba8..5c6fdb575 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
@@ -50,12 +50,14 @@
                             unique domain.
                         </Typography.Caption>
                     </Layout.Stack>
-                    <Button
-                        secondary
-                        size="xs"
-                        href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/domains/add-domain`}>
-                        Add domain
-                    </Button>
+                    <div>
+                        <Button
+                            secondary
+                            size="xs"
+                            href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/domains/add-domain`}>
+                            Add domain
+                        </Button>
+                    </div>
                 </Layout.Stack>
                 {#if proxyRuleList?.rules?.length}
                     <Divider />

From b6855dfdafa2ec620807346e6545ebe2a63386c7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 24 Feb 2025 15:37:05 +0100
Subject: [PATCH 6/8] fix: small bugs

---
 .../sites/(components)/siteCard.svelte             |  8 ++++----
 .../sites/create-site/createVariableModal.svelte   | 14 ++++++++------
 .../sites/site-[site]/domainsOverview.svelte       |  2 +-
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
index 11e4a2dc8..f35854f74 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
@@ -41,11 +41,11 @@
             return deployment.screenshotDark
                 ? getFilePreview(deployment.screenshotDark)
                 : `${base}/images/sites/screenshot-placeholder-dark.svg`;
+        } else {
+            return deployment.screenshotLight
+                ? getFilePreview(deployment.screenshotLight)
+                : `${base}/images/sites/screenshot-placeholder-light.svg`;
         }
-
-        return deployment.screenshotLight
-            ? getFilePreview(deployment.screenshotLight)
-            : `${base}/images/sites/screenshot-placeholder-light.svg`;
     }
 
     function getFilePreview(fileId: string) {
diff --git a/src/routes/(console)/project-[project]/sites/create-site/createVariableModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/createVariableModal.svelte
index 50b9abc13..15ee60a15 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/createVariableModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/createVariableModal.svelte
@@ -99,12 +99,14 @@
                     </PinkButton.Button>
                 </Layout.Stack>
             {/each}
-            <Button
-                text
-                compact
-                disabled={newVariables.some((pair) => !pair.key)}
-                on:click={() => (newVariables = [...newVariables, { key: '', value: '' }])}>
-                <Icon slot="start" icon={IconPlus} />Add variable</Button>
+            <div>
+                <Button
+                    text
+                    compact
+                    disabled={newVariables.some((pair) => !pair.key)}
+                    on:click={() => (newVariables = [...newVariables, { key: '', value: '' }])}>
+                    <Icon slot="start" icon={IconPlus} />Add variable</Button>
+            </div>
         </Layout.Stack>
         <Selector.Checkbox
             size="s"
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
index 5c6fdb575..09fa45572 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
@@ -70,7 +70,7 @@
                     direction="row"
                     gap="xl">
                     <Layout.Stack gap="xxs" inline>
-                        <Link variant="quiet" href={`${$protocol}${rule.domain}`} size="m">
+                        <Link variant="quiet" href={`${$protocol}${rule.domain}`} size="m" external>
                             <Layout.Stack gap="xs" inline direction="row" alignItems="center">
                                 <Trim alternativeTrim>
                                     {rule.domain}

From 9eb2b6ea3a2a71a72cb26a0fd209b216b0badae6 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 24 Feb 2025 16:48:28 +0100
Subject: [PATCH 7/8] fix: deployment screens

---
 src/lib/components/filters/filters.svelte     |   2 +-
 .../(components)/deploymentActionMenu.svelte  | 118 +++++++++++
 .../sites/create-site/finish/+page.svelte     |   2 +-
 .../sites/site-[site]/+page.svelte            |   2 +-
 .../site-[site]/deployments/+page.svelte      | 184 +++++++++---------
 .../deployments/deleteDeploymentModal.svelte  |   2 -
 .../site-[site]/deployments/table.svelte      |  95 ++-------
 .../site-[site]/deploymentsOverview.svelte    |  84 ++------
 ...ain.svelte => instantRollbackModal.svelte} |   0
 9 files changed, 237 insertions(+), 252 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/sites/(components)/deploymentActionMenu.svelte
 rename src/routes/(console)/project-[project]/sites/site-[site]/{instantRollbackDomain.svelte => instantRollbackModal.svelte} (100%)

diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index e6f4587e9..bad4a6fe5 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { beforeNavigate } from '$app/navigation';
-    import { Drop, Modal } from '$lib/components';
+    import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
diff --git a/src/routes/(console)/project-[project]/sites/(components)/deploymentActionMenu.svelte b/src/routes/(console)/project-[project]/sites/(components)/deploymentActionMenu.svelte
new file mode 100644
index 000000000..3b2244564
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/(components)/deploymentActionMenu.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Button } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+    import {
+        IconDotsHorizontal,
+        IconDownload,
+        IconLightningBolt,
+        IconRefresh,
+        IconTerminal,
+        IconTrash,
+        IconXCircle
+    } from '@appwrite.io/pink-icons-svelte';
+    import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
+
+    export let selectedDeployment: Models.Deployment;
+    export let deployment: Models.Deployment;
+    export let showDelete = false;
+    export let showActivate = false;
+    export let showRedeploy = false;
+    export let showCancel = false;
+    export let activeDeployment: string;
+
+    function getDownload(deploymentId: string) {
+        return (
+            sdk.forProject.sites.getDeploymentDownload($page.params.site, deploymentId).toString() +
+            '&mode=admin'
+        );
+    }
+</script>
+
+<Popover placement="bottom-end" let:toggle>
+    <Button
+        text
+        icon
+        size="s"
+        on:click={(e) => {
+            e.preventDefault();
+            toggle(e);
+        }}>
+        <Icon size="s" icon={IconDotsHorizontal} />
+    </Button>
+    <svelte:fragment slot="tooltip" let:toggle>
+        <ActionMenu.Root>
+            <ActionMenu.Item.Button
+                leadingIcon={IconRefresh}
+                on:click={(e) => {
+                    e.preventDefault();
+                    selectedDeployment = deployment;
+                    showRedeploy = true;
+                    toggle(e);
+                }}>
+                Redeploy
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Anchor
+                leadingIcon={IconTerminal}
+                href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/deployments/deployment-${deployment.$id}`}
+                on:click={(e) => {
+                    e.preventDefault();
+                    toggle(e);
+                }}>
+                View details
+            </ActionMenu.Item.Anchor>
+            {#if deployment?.status === 'ready' && deployment?.$id !== activeDeployment}
+                <ActionMenu.Item.Button
+                    leadingIcon={IconLightningBolt}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        selectedDeployment = deployment;
+                        showActivate = true;
+                        toggle(e);
+                    }}>
+                    Activate
+                </ActionMenu.Item.Button>
+            {/if}
+            {#if deployment?.status === 'ready'}
+                <ActionMenu.Item.Anchor
+                    href={getDownload(deployment.$id)}
+                    external
+                    leadingIcon={IconDownload}
+                    on:click={(e) => {
+                        toggle(e);
+                    }}>
+                    Download
+                </ActionMenu.Item.Anchor>
+            {/if}
+
+            {#if deployment?.status === 'processing' || deployment?.status === 'building' || deployment.status === 'waiting'}
+                <ActionMenu.Item.Button
+                    leadingIcon={IconXCircle}
+                    status="danger"
+                    on:click={(e) => {
+                        e.preventDefault();
+                        selectedDeployment = deployment;
+                        showCancel = true;
+                        toggle(e);
+                    }}>
+                    Cancel
+                </ActionMenu.Item.Button>
+            {/if}
+            {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment?.status !== 'waiting'}
+                <ActionMenu.Item.Button
+                    status="danger"
+                    leadingIcon={IconTrash}
+                    on:click={(e) => {
+                        e.preventDefault();
+                        selectedDeployment = deployment;
+                        showDelete = true;
+                        toggle(e);
+                    }}>
+                    Delete
+                </ActionMenu.Item.Button>
+            {/if}
+        </ActionMenu.Root>
+    </svelte:fragment>
+</Popover>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
index cb8505733..555efa368 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
@@ -57,7 +57,7 @@
             <div style="margin-block-start: var(--gap-xxl);">
                 <Step.List>
                     <Step.Item state="current" shortLine={true}>
-                        <Layout.Stack direction="row" gap="l">
+                        <Layout.Stack direction="row" gap="l" wrap="wrap">
                             {#if !data.site.installationId && !data.site.providerRepositoryId}
                                 <Card
                                     isTile
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
index 15b8d609e..024e35ff7 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
@@ -6,7 +6,7 @@
     import DeploymentsOverview from './deploymentsOverview.svelte';
     import { Button } from '$lib/elements/forms';
     import { protocol } from '$routes/(console)/store';
-    import InstantRollbackDomain from './instantRollbackDomain.svelte';
+    import InstantRollbackDomain from './instantRollbackModal.svelte';
     import { app } from '$lib/stores/app';
     import EmptyDeploymentDark from './empty-deployment-dark.svg';
     import EmptyDeploymentLight from './empty-deployment-light.svg';
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
index e780be57f..b85d67262 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
@@ -7,7 +7,7 @@
     import { queries, tags } from '$lib/components/filters/store';
     import { View } from '$lib/helpers/load';
     import { Pill } from '$lib/elements';
-    import { ActionMenu, Icon, Layout, Popover } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Icon, Layout, Popover, Tag } from '@appwrite.io/pink-svelte';
     import Table from './table.svelte';
     import QuickFilters from './quickFilters.svelte';
     import RedeployModal from '../../redeployModal.svelte';
@@ -56,92 +56,47 @@
         {/if}
         <Layout.Stack gap="l">
             <Layout.Stack justifyContent="space-between" direction="row">
-                <Layout.Stack alignItems="center" direction="row">
-                    {#if data.deploymentList.total}
-                        <QuickFilters {columns} />
-                        <Filters
-                            query={data.query}
-                            {columns}
-                            let:disabled
-                            let:toggle
-                            singleCondition>
-                            <Layout.Stack alignItems="center" direction="row" gap="xs">
-                                <Button
-                                    compact
-                                    on:click={toggle}
-                                    {disabled}
-                                    size="s"
-                                    ariaLabel="open filter">
-                                    <Icon icon={IconFilterLine} size="s" slot="start" />
-                                    More filters
-                                </Button>
-                                {#if $tags?.length}
-                                    <!-- TODO: add vertical divider to pink 2 -->
-                                    <div
-                                        style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
-                                    </div>
-                                    <Button text on:click={clearAll} size="s">Clear all</Button>
-                                {/if}
-                            </Layout.Stack>
-                        </Filters>
-                    {/if}
-                </Layout.Stack>
-                <Layout.Stack direction="row" inline>
-                    {#if data.deploymentList.total}
-                        <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
-                    {/if}
-                    <Popover let:toggle>
-                        <Button size="s" on:click={toggle}>
-                            <Icon size="s" icon={IconPlus} />
-                            Create deployment
-                        </Button>
-                        <svelte:fragment slot="tooltip" let:toggle>
-                            <ActionMenu.Root noPadding>
-                                <ActionMenu.Item.Button
-                                    badge="Recommended"
-                                    on:click={(e) => {
-                                        toggle(e);
-                                        if (!hasInstallation) {
-                                            showConnectRepo = true;
-                                        } else {
-                                            showCreateDeployment = true;
-                                        }
-                                    }}>
-                                    Git
-                                </ActionMenu.Item.Button>
-                                <ActionMenu.Item.Button
-                                    on:click={(e) => {
-                                        toggle(e);
-                                        showConnectCLI = true;
-                                    }}>
-                                    CLI
-                                </ActionMenu.Item.Button>
-                                <ActionMenu.Item.Button
-                                    on:click={(e) => {
-                                        toggle(e);
-                                        showConnectManual = true;
-                                    }}>
-                                    Manual
-                                </ActionMenu.Item.Button>
-                            </ActionMenu.Root>
-                        </svelte:fragment>
-                    </Popover>
-                </Layout.Stack>
-            </Layout.Stack>
-            {#if data.deploymentList.total}
-                <div class="is-only-mobile">
-                    <Layout.Stack justifyContent="space-between" direction="row">
-                        <Button
-                            text
-                            size="s"
-                            on:click={() => (showMobileFilters = !showMobileFilters)}
-                            ariaLabel="toggle filters">
-                            <span class="icon-filter-line" />
-                            <span class="text">Filters</span>
-                        </Button>
-
-                        <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+                <div class="is-not-mobile">
+                    <Layout.Stack alignItems="center" direction="row">
+                        {#if data.deploymentList.total}
+                            <QuickFilters {columns} />
+                            <Filters
+                                query={data.query}
+                                {columns}
+                                let:disabled
+                                let:toggle
+                                singleCondition>
+                                <Layout.Stack alignItems="center" direction="row" gap="xs">
+                                    <Button
+                                        compact
+                                        on:click={toggle}
+                                        {disabled}
+                                        size="s"
+                                        ariaLabel="open filter">
+                                        <Icon icon={IconFilterLine} size="s" slot="start" />
+                                        More filters
+                                    </Button>
+                                    {#if $tags?.length}
+                                        <!-- TODO: add vertical divider to pink 2 -->
+                                        <div
+                                            style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
+                                        </div>
+                                        <Button text on:click={clearAll} size="s">Clear all</Button>
+                                    {/if}
+                                </Layout.Stack>
+                            </Filters>
+                        {/if}
                     </Layout.Stack>
+                </div>
+                <div class="is-only-mobile">
+                    <Button
+                        secondary
+                        size="s"
+                        on:click={() => (showMobileFilters = !showMobileFilters)}
+                        ariaLabel="toggle filters">
+                        <span class="icon-filter-line" />
+                        <span class="text">Filters</span>
+                    </Button>
                     <div
                         class:u-hide={!showMobileFilters}
                         class:u-flex={showMobileFilters}
@@ -150,20 +105,59 @@
 
                         <Filters query={data.query} {columns} clearOnClick>
                             <svelte:fragment slot="mobile" let:disabled let:toggle>
-                                <Pill
-                                    button
-                                    on:click={toggle}
-                                    {disabled}
-                                    class="u-flex u-gap-4 u-cross-center"
-                                    style="--p-tag-content-height: auto">
+                                <Tag on:click={toggle} {disabled}>
                                     <span class="text">More filters</span>
                                     <span class="icon-cheveron-down" />
-                                </Pill>
+                                </Tag>
                             </svelte:fragment>
                         </Filters>
                     </div>
                 </div>
-            {/if}
+                <div>
+                    <Layout.Stack direction="row" inline>
+                        {#if data.deploymentList.total}
+                            <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+                        {/if}
+                        <Popover let:toggle>
+                            <Button size="s" on:click={toggle}>
+                                <Icon size="s" icon={IconPlus} />
+                                Create deployment
+                            </Button>
+                            <svelte:fragment slot="tooltip" let:toggle>
+                                <ActionMenu.Root noPadding>
+                                    <ActionMenu.Item.Button
+                                        badge="Recommended"
+                                        on:click={(e) => {
+                                            toggle(e);
+                                            if (!hasInstallation) {
+                                                showConnectRepo = true;
+                                            } else {
+                                                showCreateDeployment = true;
+                                            }
+                                        }}>
+                                        Git
+                                    </ActionMenu.Item.Button>
+                                    <ActionMenu.Item.Button
+                                        on:click={(e) => {
+                                            toggle(e);
+                                            showConnectCLI = true;
+                                        }}>
+                                        CLI
+                                    </ActionMenu.Item.Button>
+                                    <ActionMenu.Item.Button
+                                        on:click={(e) => {
+                                            toggle(e);
+                                            showConnectManual = true;
+                                        }}>
+                                        Manual
+                                    </ActionMenu.Item.Button>
+                                </ActionMenu.Root>
+                            </svelte:fragment>
+                        </Popover>
+                    </Layout.Stack>
+                </div>
+            </Layout.Stack>
+
             {#if data.deploymentList.total}
                 <Table {data} />
 
@@ -210,5 +204,5 @@
     <CreateManualDeploymentModal bind:show={showConnectManual} site={data.site} />
 {/if}
 {#if showConnectCLI}
-    <CreateCliModal bind:show={showConnectCLI} site={data.site} />
+    <CreateCliModal bind:show={showConnectCLI} />
 {/if}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
index 7447bde6e..9ac0ca240 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
     import Confirm from '$lib/components/confirm.svelte';
     import { Dependencies } from '$lib/constants';
-    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
index 4fc263b15..54fc8ee74 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
@@ -12,20 +12,13 @@
     import RedeployModal from '../../redeployModal.svelte';
     import Cancel from './cancelDeploymentModal.svelte';
     import { base } from '$app/paths';
-    import { ActionMenu, Icon, Layout, Popover, Status, Table } from '@appwrite.io/pink-svelte';
-    import {
-        IconDotsHorizontal,
-        IconLightningBolt,
-        IconRefresh,
-        IconTerminal,
-        IconTrash,
-        IconXCircle
-    } from '@appwrite.io/pink-icons-svelte';
+    import { Layout, Status, Table } from '@appwrite.io/pink-svelte';
+
     import { columns } from './store';
     import ActivateDeploymentModal from '../../activateDeploymentModal.svelte';
     import { deploymentStatusConverter } from '../store';
     import { capitalize } from '$lib/helpers/string';
-    import { Button } from '$lib/elements/forms';
+    import DeploymentActionMenu from '../../(components)/deploymentActionMenu.svelte';
 
     export let data: PageData;
 
@@ -107,80 +100,14 @@
             {/each}
             <Table.Cell>
                 <Layout.Stack alignItems="flex-end">
-                    <Popover placement="bottom-end" let:toggle>
-                        <Button
-                            text
-                            icon
-                            size="s"
-                            on:click={(e) => {
-                                e.preventDefault();
-                                toggle(e);
-                            }}>
-                            <Icon size="s" icon={IconDotsHorizontal} />
-                        </Button>
-                        <svelte:fragment slot="tooltip" let:toggle>
-                            <ActionMenu.Root>
-                                <ActionMenu.Item.Button
-                                    leadingIcon={IconRefresh}
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        selectedDeployment = deployment;
-                                        showRedeploy = true;
-                                        toggle(e);
-                                    }}>
-                                    Redeploy
-                                </ActionMenu.Item.Button>
-                                <ActionMenu.Item.Anchor
-                                    leadingIcon={IconTerminal}
-                                    href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/deployments/deployment-${deployment.$id}`}
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        toggle(e);
-                                    }}>
-                                    View details
-                                </ActionMenu.Item.Anchor>
-                                {#if deployment?.status === 'ready' && deployment?.$id !== data.site.deploymentId}
-                                    <ActionMenu.Item.Button
-                                        leadingIcon={IconLightningBolt}
-                                        on:click={(e) => {
-                                            e.preventDefault();
-                                            selectedDeployment = deployment;
-                                            showActivate = true;
-                                            toggle(e);
-                                        }}>
-                                        Activate
-                                    </ActionMenu.Item.Button>
-                                {/if}
-
-                                {#if deployment?.status === 'processing' || deployment?.status === 'building' || deployment.status === 'waiting'}
-                                    <ActionMenu.Item.Button
-                                        leadingIcon={IconXCircle}
-                                        status="danger"
-                                        on:click={(e) => {
-                                            e.preventDefault();
-                                            selectedDeployment = deployment;
-                                            showCancel = true;
-                                            toggle(e);
-                                        }}>
-                                        Cancel
-                                    </ActionMenu.Item.Button>
-                                {/if}
-                                {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment?.status !== 'waiting'}
-                                    <ActionMenu.Item.Button
-                                        status="danger"
-                                        leadingIcon={IconTrash}
-                                        on:click={(e) => {
-                                            e.preventDefault();
-                                            selectedDeployment = deployment;
-                                            showDelete = true;
-                                            toggle(e);
-                                        }}>
-                                        Delete
-                                    </ActionMenu.Item.Button>
-                                {/if}
-                            </ActionMenu.Root>
-                        </svelte:fragment>
-                    </Popover>
+                    <DeploymentActionMenu
+                        {deployment}
+                        bind:selectedDeployment
+                        bind:showRedeploy
+                        bind:showActivate
+                        bind:showDelete
+                        bind:showCancel
+                        activeDeployment={data.site.deploymentId} />
                 </Layout.Stack>
             </Table.Cell>
         </Table.Link>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
index fdba19de6..485a4a4e9 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
@@ -1,15 +1,5 @@
 <script lang="ts">
-    import {
-        ActionMenu,
-        Badge,
-        Empty,
-        Icon,
-        Layout,
-        Popover,
-        Status,
-        Table,
-        Typography
-    } from '@appwrite.io/pink-svelte';
+    import { Badge, Empty, Layout, Status, Table, Typography } from '@appwrite.io/pink-svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
@@ -17,18 +7,15 @@
     import DeploymentCreatedBy from '../(components)/deploymentCreatedBy.svelte';
     import DeploymentSource from '../(components)/deploymentSource.svelte';
     import Id from '$lib/components/id.svelte';
-    import {
-        IconDotsHorizontal,
-        IconLightningBolt,
-        IconRefresh,
-        IconXCircle
-    } from '@appwrite.io/pink-icons-svelte';
+
     import RedeployModal from '../redeployModal.svelte';
     import { Card } from '$lib/components';
     import ActivateDeploymentModal from '../activateDeploymentModal.svelte';
     import CancelDeploymentModal from './deployments/cancelDeploymentModal.svelte';
     import { capitalize } from '$lib/helpers/string';
     import { deploymentStatusConverter } from './store';
+    import DeleteDeploymentModal from './deployments/deleteDeploymentModal.svelte';
+    import DeploymentActionMenu from '../(components)/deploymentActionMenu.svelte';
 
     export let site: Models.Site;
     export let activeDeployment: Models.Deployment;
@@ -37,6 +24,7 @@
     let showActivate = false;
     let showRedeploy = false;
     let showCancel = false;
+    let showDelete = false;
     let selectedDeployment: Models.Deployment = null;
 </script>
 
@@ -90,57 +78,14 @@
                     </Table.Cell>
                     <Table.Cell>
                         <Layout.Stack alignItems="flex-end">
-                            <Popover placement="bottom-end" let:toggle>
-                                <Button
-                                    text
-                                    icon
-                                    size="s"
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        toggle(e);
-                                    }}>
-                                    <Icon size="s" icon={IconDotsHorizontal} />
-                                </Button>
-                                <svelte:fragment slot="tooltip" let:toggle>
-                                    <ActionMenu.Root>
-                                        <ActionMenu.Item.Button
-                                            leadingIcon={IconRefresh}
-                                            on:click={(e) => {
-                                                e.preventDefault();
-                                                selectedDeployment = deployment;
-                                                showRedeploy = true;
-                                                toggle(e);
-                                            }}>
-                                            Redeploy
-                                        </ActionMenu.Item.Button>
-                                        {#if deployment?.status === 'ready' && deployment?.$id !== site.deploymentId}
-                                            <ActionMenu.Item.Button
-                                                leadingIcon={IconLightningBolt}
-                                                on:click={(e) => {
-                                                    e.preventDefault();
-                                                    selectedDeployment = deployment;
-                                                    showActivate = true;
-                                                    toggle(e);
-                                                }}>
-                                                Activate
-                                            </ActionMenu.Item.Button>
-                                        {/if}
-                                        {#if deployment?.status === 'processing' || deployment?.status === 'building' || deployment.status === 'waiting'}
-                                            <ActionMenu.Item.Button
-                                                leadingIcon={IconXCircle}
-                                                status="danger"
-                                                on:click={(e) => {
-                                                    e.preventDefault();
-                                                    selectedDeployment = deployment;
-                                                    showCancel = true;
-                                                    toggle(e);
-                                                }}>
-                                                Cancel
-                                            </ActionMenu.Item.Button>
-                                        {/if}
-                                    </ActionMenu.Root>
-                                </svelte:fragment>
-                            </Popover>
+                            <DeploymentActionMenu
+                                {deployment}
+                                bind:selectedDeployment
+                                bind:showRedeploy
+                                bind:showActivate
+                                bind:showDelete
+                                bind:showCancel
+                                activeDeployment={site.deploymentId} />
                         </Layout.Stack>
                     </Table.Cell>
                 </Table.Link>
@@ -172,3 +117,6 @@
 {#if selectedDeployment && showCancel}
     <CancelDeploymentModal {selectedDeployment} bind:showCancel />
 {/if}
+{#if selectedDeployment && showDelete}
+    <DeleteDeploymentModal {selectedDeployment} bind:showDelete />
+{/if}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackDomain.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackDomain.svelte
rename to src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte

From f1737280f0f525eec28db4895ff3cf3cfd6eda2c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 24 Feb 2025 18:00:18 +0100
Subject: [PATCH 8/8] feat: implement grid component

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 24 +++++++++----------
 .../site-[site]/deployments/+page.svelte      |  1 -
 .../deployments/createCliModal.svelte         |  2 --
 .../deployments/deploymentMetrics.svelte      | 19 +++++++++------
 5 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index ddabeec1a..cd435247a 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f",
         "@appwrite.io/pink-legacy": "^1.0.1",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@457f9b8",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1ccb298e3..2136fbf1d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.0.1
         version: 1.0.1
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@457f9b8
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@457f9b8(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -215,14 +215,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@457f9b87732ea908e629a840f0726391645732f2':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@457f9b87732ea908e629a840f0726391645732f2}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f99d781924ba95e7ed83708ca8e4c26f80293c3c':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f99d781924ba95e7ed83708ca8e4c26f80293c3c}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.1':
     resolution: {integrity: sha512-e5IZx2drqSxgl2WXvmr0eLfg/WiOCzuqQE8oksD+9GoFBkcL9HWvXul5GjFni3RBAN9XFRL3nUExGk4T0H8sFw==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@457f9b8':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@457f9b8}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4099,11 +4099,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@457f9b87732ea908e629a840f0726391645732f2(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f99d781924ba95e7ed83708ca8e4c26f80293c3c(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f0102c9f(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4116,9 +4116,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f99d781(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@457f9b8(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f99d781924ba95e7ed83708ca8e4c26f80293c3c(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@457f9b87732ea908e629a840f0726391645732f2(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.3(svelte@4.2.19)
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
index b85d67262..18649a675 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
@@ -6,7 +6,6 @@
     import { Filters } from '$lib/components/filters';
     import { queries, tags } from '$lib/components/filters/store';
     import { View } from '$lib/helpers/load';
-    import { Pill } from '$lib/elements';
     import { ActionMenu, Icon, Layout, Popover, Tag } from '@appwrite.io/pink-svelte';
     import Table from './table.svelte';
     import QuickFilters from './quickFilters.svelte';
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createCliModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createCliModal.svelte
index 87f082007..0f777549a 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createCliModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/createCliModal.svelte
@@ -3,8 +3,6 @@
     import { Modal, Alert } from '$lib/components';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
-    import SecondaryTabs from '$lib/components/secondaryTabs.svelte';
-    import SecondaryTabsItem from '$lib/components/secondaryTabsItem.svelte';
     import { Code, Layout, Tabs } from '@appwrite.io/pink-svelte';
 
     export let show = false;
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
index 099dcee3d..9a80b953a 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
@@ -75,8 +75,6 @@
             }
         }, 800);
     }
-
-    $: console.log(metrics);
 </script>
 
 <Layout.Stack gap="xl">
@@ -99,9 +97,16 @@
                 on:change={fetchUsage} />
         </div>
     </Layout.Stack>
-    <Layout.Stack gap="m" direction="row">
-        {#each metrics as metric}
-            <UsageCard description={metric.description} bind:value={metric.value} />
-        {/each}
-    </Layout.Stack>
+    <Layout.Grid gap="m" columnsL={2} columns={1}>
+        <Layout.Stack direction="row" gap="m">
+            {#each metrics.slice(0, 3) as metric}
+                <UsageCard description={metric.description} bind:value={metric.value} />
+            {/each}
+        </Layout.Stack>
+        <Layout.Stack direction="row" gap="m">
+            {#each metrics.slice(3) as metric}
+                <UsageCard description={metric.description} bind:value={metric.value} />
+            {/each}
+        </Layout.Stack>
+    </Layout.Grid>
 </Layout.Stack>