From 70ce9684cc8d51c5e596b9d9618a0211aa2fb7f7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 25 Feb 2025 10:55:09 +0100
Subject: [PATCH] feat: implement grid component

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  18 +-
 .../sites/(components)/siteCard.svelte        | 223 ++++++++++--------
 .../sites/create-site/finish/+page.svelte     |  56 ++---
 .../template-[template]/+page.svelte          |   2 +-
 5 files changed, 159 insertions(+), 142 deletions(-)

diff --git a/package.json b/package.json
index 3d6a0a353..a1b0702f8 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@50ea3ca7",
         "@appwrite.io/pink-legacy": "^1.0.1",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063",
         "@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 94cd0b1df..f75329d75 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@50ea3ca7
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -215,8 +215,8 @@ 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@50ea3ca7':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0ad10637d6677476315ab8b4cd0c6f168d246b98':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0ad10637d6677476315ab8b4cd0c6f168d246b98}
     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@50ea3ca7':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4099,7 +4099,7 @@ 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@50ea3ca7(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0ad10637d6677476315ab8b4cd0c6f168d246b98(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@50ea3ca7(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@0ad1063(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@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0ad10637d6677476315ab8b4cd0c6f168d246b98(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)/siteCard.svelte b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
index f35854f74..bc31fd8d1 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
@@ -72,128 +72,149 @@
 
             <Layout.Stack gap="xl">
                 <Layout.Stack direction="row" alignItems="flex-start">
-                    <Layout.Stack direction="row" gap="xl">
-                        {#if deployment.status === 'failed'}
-                            <Layout.Stack gap="xxs" inline>
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-tertiary">
-                                    Status
-                                </Typography.Text>
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-primary">
-                                    <Status status={deployment.status} label={deployment.status} />
-                                </Typography.Text>
-                            </Layout.Stack>
-                        {:else}
-                            <Layout.Stack gap="xxs" inline>
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-tertiary">
-                                    Deployed
-                                </Typography.Text>
-                                <Typography.Text
-                                    variant="m-400"
-                                    color="--color-fgcolor-neutral-primary">
-                                    <DeploymentCreatedBy {deployment} />
-                                </Typography.Text>
-                            </Layout.Stack>
-                        {/if}
-                    </Layout.Stack>
+                    {#if proxyRuleList?.total}
+                        <Layout.Stack gap="xxs">
+                            <Typography.Text
+                                variant="m-400"
+                                color="--color-fgcolor-neutral-tertiary">
+                                Domains
+                            </Typography.Text>
+                            <DeploymentDomains domains={proxyRuleList} />
+                        </Layout.Stack>
+                    {:else if deployment.domain}
+                        <Layout.Stack gap="xxs">
+                            <Typography.Text
+                                variant="m-400"
+                                color="--color-fgcolor-neutral-tertiary">
+                                Domains
+                            </Typography.Text>
+                            <Link
+                                external
+                                href={`${$protocol}${deployment.domain}`}
+                                variant="muted">
+                                <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                                    <Trim alternativeTrim>
+                                        <Typography.Text
+                                            variant="m-400"
+                                            color="--color-fgcolor-neutral-primary">
+                                            {deployment.domain}
+                                        </Typography.Text>
+                                    </Trim>
+                                    <Icon icon={IconExternalLink} size="s" />
+                                </Layout.Stack>
+                            </Link>
+                        </Layout.Stack>
+                    {/if}
                     {#if siteUrl && !hideQRCode}
                         <Button icon secondary on:click={() => (show = true)}>
                             <Icon icon={IconQrcode} size="l" />
                         </Button>
                     {/if}
                 </Layout.Stack>
-                {#if proxyRuleList?.total}
-                    <Layout.Stack gap="xxs">
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
-                            Domains
-                        </Typography.Text>
-                        <DeploymentDomains domains={proxyRuleList} />
-                    </Layout.Stack>
-                {:else if deployment.domain}
-                    <Layout.Stack gap="xxs">
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
-                            Domains
-                        </Typography.Text>
-                        <Link external href={`${$protocol}${deployment.domain}`} variant="muted">
-                            <Layout.Stack gap="xxs" direction="row" alignItems="center">
-                                <Trim alternativeTrim>
-                                    <Typography.Text
-                                        variant="m-400"
-                                        color="--color-fgcolor-neutral-primary">
-                                        {deployment.domain}
-                                    </Typography.Text>
-                                </Trim>
-                                <Icon icon={IconExternalLink} size="s" />
-                            </Layout.Stack>
-                        </Link>
-                    </Layout.Stack>
-                {/if}
-                <Layout.Stack gap="xxl" direction="row" wrap="wrap">
-                    {#if deployment?.buildTime}
+
+                <Layout.Stack direction="row" gap="xl">
+                    {#if deployment.status === 'failed'}
                         <Layout.Stack gap="xxs" inline>
                             <Typography.Text
                                 variant="m-400"
                                 color="--color-fgcolor-neutral-tertiary">
-                                Build time
+                                Status
                             </Typography.Text>
                             <Typography.Text
                                 variant="m-400"
                                 color="--color-fgcolor-neutral-primary">
-                                {formatTimeDetailed(deployment.buildTime)}
+                                <Status status={deployment.status} label={deployment.status} />
+                            </Typography.Text>
+                        </Layout.Stack>
+                    {:else}
+                        <Layout.Stack gap="xxs" inline>
+                            <Typography.Text
+                                variant="m-400"
+                                color="--color-fgcolor-neutral-tertiary">
+                                Deployed
+                            </Typography.Text>
+                            <Typography.Text
+                                variant="m-400"
+                                color="--color-fgcolor-neutral-primary">
+                                <DeploymentCreatedBy {deployment} />
                             </Typography.Text>
                         </Layout.Stack>
                     {/if}
-                    <Layout.Stack gap="xxs" inline>
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
-                            Total size
-                        </Typography.Text>
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
-                            {totalSize.value}{totalSize.unit}
-                        </Typography.Text>
-                    </Layout.Stack>
-                    <Layout.Stack gap="xxs" inline>
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
-                            <Layout.Stack direction="row" gap="xxs" alignItems="center">
-                                Global CDN <Tooltip>
-                                    <Icon icon={IconInfo} size="s" />
-                                    <span slot="tooltip">
-                                        Optimized speed by caching content on servers closer to
-                                        users.
-                                    </span>
-                                </Tooltip>
+                </Layout.Stack>
+
+                <Layout.Stack gap="xxl" direction="row" wrap="wrap">
+                    <Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
+                        {#if deployment?.buildTime}
+                            <Layout.Stack gap="xxs" inline>
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-tertiary">
+                                    Build time
+                                </Typography.Text>
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-primary">
+                                    {formatTimeDetailed(deployment.buildTime)}
+                                </Typography.Text>
                             </Layout.Stack>
-                        </Typography.Text>
-                        <Layout.Stack inline alignItems="flex-start">
-                            <Badge
-                                size="xs"
-                                variant="secondary"
-                                type={isCloud ? 'success' : null}
-                                content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                        {/if}
+                        <Layout.Stack gap="xxs" inline>
+                            <Typography.Text
+                                variant="m-400"
+                                color="--color-fgcolor-neutral-tertiary">
+                                Total size
+                            </Typography.Text>
+                            <Typography.Text
+                                variant="m-400"
+                                color="--color-fgcolor-neutral-primary">
+                                {totalSize.value}{totalSize.unit}
+                            </Typography.Text>
                         </Layout.Stack>
                     </Layout.Stack>
-                    <Layout.Stack gap="xxs" inline>
-                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
-                            <Layout.Stack direction="row" gap="xxs" alignItems="center">
-                                DDoS protection <Tooltip>
-                                    <Icon icon={IconInfo} size="s" />
-                                    <span slot="tooltip">
-                                        Safeguards your site by detecting and blocking malicious
-                                        traffic.
-                                    </span>
-                                </Tooltip>
+                    <Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
+                        <Layout.Stack gap="xxs" inline>
+                            <Typography.Text
+                                variant="m-400"
+                                color="--color-fgcolor-neutral-tertiary">
+                                <Layout.Stack direction="row" gap="xxs" alignItems="center">
+                                    Global CDN <Tooltip>
+                                        <Icon icon={IconInfo} size="s" />
+                                        <span slot="tooltip">
+                                            Optimized speed by caching content on servers closer to
+                                            users.
+                                        </span>
+                                    </Tooltip>
+                                </Layout.Stack>
+                            </Typography.Text>
+                            <Layout.Stack inline alignItems="flex-start">
+                                <Badge
+                                    size="xs"
+                                    variant="secondary"
+                                    type={isCloud ? 'success' : null}
+                                    content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                            </Layout.Stack>
+                        </Layout.Stack>
+                        <Layout.Stack gap="xxs" inline>
+                            <Typography.Text
+                                variant="m-400"
+                                color="--color-fgcolor-neutral-tertiary">
+                                <Layout.Stack direction="row" gap="xxs" alignItems="center">
+                                    DDoS protection <Tooltip>
+                                        <Icon icon={IconInfo} size="s" />
+                                        <span slot="tooltip">
+                                            Safeguards your site by detecting and blocking malicious
+                                            traffic.
+                                        </span>
+                                    </Tooltip>
+                                </Layout.Stack>
+                            </Typography.Text>
+                            <Layout.Stack inline alignItems="flex-start">
+                                <Badge
+                                    size="xs"
+                                    variant="secondary"
+                                    type={isCloud ? 'success' : null}
+                                    content={isCloud ? 'Connected' : 'Available on Cloud'} />
                             </Layout.Stack>
-                        </Typography.Text>
-                        <Layout.Stack inline alignItems="flex-start">
-                            <Badge
-                                size="xs"
-                                variant="secondary"
-                                type={isCloud ? 'success' : null}
-                                content={isCloud ? 'Connected' : 'Available on Cloud'} />
                         </Layout.Stack>
                     </Layout.Stack>
                 </Layout.Stack>
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 555efa368..7e47b6785 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
@@ -1,9 +1,8 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import Card from '$lib/components/card.svelte';
     import { Wizard } from '$lib/layout';
-    import { Layout, Typography, Icon, Lights, Step } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography, Icon, Lights, Step, Card } from '@appwrite.io/pink-svelte';
     import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
     import Check from './(components)/check.svelte';
     import type { PageData } from './$types';
@@ -54,18 +53,20 @@
                     </svelte:fragment>
                 </SiteCard>
             </Layout.Stack>
-            <div style="margin-block-start: var(--gap-xxl);">
-                <Step.List>
-                    <Step.Item state="current" shortLine={true}>
-                        <Layout.Stack direction="row" gap="l" wrap="wrap">
-                            {#if !data.site.installationId && !data.site.providerRepositoryId}
-                                <Card
-                                    isTile
+
+            <!-- To add spacing -->
+            <div></div>
+
+            <Step.List>
+                <Step.Item state="current" shortLine={true}>
+                    <Layout.Stack>
+                        <Layout.Grid columns={!data.site.providerRepositoryId ? 4 : 3} columnsS={1}>
+                            {#if !data.site.providerRepositoryId}
+                                <Card.Button
                                     radius="s"
                                     padding="s"
-                                    isButton
                                     on:click={() => (showConnectRepositry = true)}>
-                                    <Layout.Stack gap="s">
+                                    <Layout.Stack gap="s" style="height: 100%">
                                         <Layout.Stack
                                             direction="row"
                                             justifyContent="space-between"
@@ -82,14 +83,13 @@
                                             Connect to a new repository or an existing one.
                                         </Typography.Text>
                                     </Layout.Stack>
-                                </Card>
+                                </Card.Button>
                             {/if}
-                            <Card
-                                isTile
+                            <Card.Link
                                 radius="s"
                                 padding="s"
                                 href={`${base}/project-${$page.params.project}/sites/site-${data.site.$id}/domains`}>
-                                <Layout.Stack gap="s">
+                                <Layout.Stack gap="s" style="height: 100%">
                                     <Layout.Stack
                                         direction="row"
                                         justifyContent="space-between"
@@ -104,14 +104,12 @@
                                         Connect to an existing domain or add a new one.
                                     </Typography.Text>
                                 </Layout.Stack>
-                            </Card>
-                            <Card
-                                isTile
+                            </Card.Link>
+                            <Card.Button
                                 radius="s"
-                                isButton
                                 padding="s"
                                 on:click={() => (showInviteCollaborator = true)}>
-                                <Layout.Stack gap="s" justifyContent="flex-start">
+                                <Layout.Stack gap="s" style="height: 100%">
                                     <Layout.Stack
                                         direction="row"
                                         justifyContent="space-between"
@@ -126,14 +124,12 @@
                                         Share your progress and start collaborating with your team.
                                     </Typography.Text>
                                 </Layout.Stack>
-                            </Card>
-                            <Card
-                                isTile
+                            </Card.Button>
+                            <Card.Button
                                 radius="s"
-                                isButton
                                 padding="s"
                                 on:click={() => (showOpenOnMobile = true)}>
-                                <Layout.Stack gap="s">
+                                <Layout.Stack gap="s" style="height: 100%">
                                     <Layout.Stack
                                         direction="row"
                                         justifyContent="space-between"
@@ -149,11 +145,11 @@
                                         device.
                                     </Typography.Text>
                                 </Layout.Stack>
-                            </Card>
-                        </Layout.Stack>
-                    </Step.Item>
-                </Step.List>
-            </div>
+                            </Card.Button>
+                        </Layout.Grid>
+                    </Layout.Stack>
+                </Step.Item>
+            </Step.List>
         </Layout.Stack>
     </div>
 
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 3c21753fe..e2e259034 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
@@ -134,7 +134,7 @@
                     framework.buildCommand,
                     framework.outputDirectory,
                     framework.adapter,
-                    selectedInstallationId || undefined,
+                    connectBehaviour === 'later' ? undefined : selectedInstallationId || undefined,
                     framework.fallbackFile,
                     selectedRepository || undefined,
                     branch || undefined,