feat: overview screen

src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte

@@ -4,7 +4,7 @@
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { calculateTime } from '$lib/helpers/timeConversion';
     import type { Models } from '@appwrite.io/console';
-    import { Icon, Image, Layout, Status, Typography } from '@appwrite.io/pink-svelte';
+    import { Divider, Icon, Image, Layout, Status, Typography } from '@appwrite.io/pink-svelte';
     import DeploymentSource from './deploymentSource.svelte';
     import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
     import { Button } from '$lib/elements/forms';
@@ -24,92 +24,106 @@
 </script>
 
 <Card padding="xs">
-    <Layout.Stack gap="m" direction="row">
-        <Image
-            width={445}
-            height={280}
-            src={`https://placehold.co/600x400/111/bbb?text=Screenshot+coming+soon&font=inter`}
-            alt="Screenshot" />
-        <Layout.Stack>
-            <Layout.Stack direction="row" alignItems="flex-start">
-                <Layout.Stack direction="row" gap="xl">
-                    {#if deployment.status === 'failed'}
-                        <Layout.Stack gap="xs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
-                                Status
-                            </Typography.Text>
-                            <Typography.Text variant="m-400">
-                                <Status status={deployment.status} label={deployment.status} />
-                            </Typography.Text>
-                        </Layout.Stack>
-                    {:else}
-                        <Layout.Stack gap="xs" inline>
-                            <Typography.Text
-                                variant="m-400"
-                                color="--color-fgcolor-neutral-tertiary">
-                                Deployed
-                            </Typography.Text>
-                            <DeploymentCreatedBy {deployment} />
-                        </Layout.Stack>
+    <Layout.Stack>
+        <Layout.Stack gap="m" direction="row">
+            <Image
+                width={445}
+                height={280}
+                src={`https://placehold.co/600x400/111/bbb?text=Screenshot+coming+soon&font=inter`}
+                alt="Screenshot" />
+            <Layout.Stack>
+                <Layout.Stack direction="row" alignItems="flex-start">
+                    <Layout.Stack direction="row" gap="xl">
+                        {#if deployment.status === 'failed'}
+                            <Layout.Stack gap="xs" inline>
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-tertiary">
+                                    Status
+                                </Typography.Text>
+                                <Typography.Text variant="m-400">
+                                    <Status status={deployment.status} label={deployment.status} />
+                                </Typography.Text>
+                            </Layout.Stack>
+                        {:else}
+                            <Layout.Stack gap="xs" inline>
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-tertiary">
+                                    Deployed
+                                </Typography.Text>
+                                <DeploymentCreatedBy {deployment} />
+                            </Layout.Stack>
+                        {/if}
+                    </Layout.Stack>
+                    {#if siteUrl}
+                        <Button icon text on:click={() => (show = true)}>
+                            <Icon icon={IconQrcode} />
+                        </Button>
                     {/if}
                 </Layout.Stack>
-                {#if siteUrl}
-                    <Button icon text on:click={() => (show = true)}>
-                        <Icon icon={IconQrcode} />
-                    </Button>
-                {/if}
-            </Layout.Stack>
-            {#if proxyRuleList?.total}
-                <Layout.Stack gap="xs">
-                    <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="xs">
-                    <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>
-                                {deployment.domain}
-                            </Trim>
-                            <Icon icon={IconExternalLink} size="s" />
-                        </Layout.Stack>
-                    </Link>
-                </Layout.Stack>
-            {/if}
-            <Layout.Stack gap="xl" direction="row">
-                {#if deployment?.buildTime}
-                    <Layout.Stack gap="xs" inline>
+                {#if proxyRuleList?.total}
+                    <Layout.Stack gap="xs">
                         <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
-                            Build time
+                            Domains
                         </Typography.Text>
-                        <Typography.Text variant="m-400">
-                            {calculateTime(deployment.buildTime)}
+                        <DeploymentDomains domains={proxyRuleList} />
+                    </Layout.Stack>
+                {:else if deployment.domain}
+                    <Layout.Stack gap="xs">
+                        <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>
+                                    {deployment.domain}
+                                </Trim>
+                                <Icon icon={IconExternalLink} size="s" />
+                            </Layout.Stack>
+                        </Link>
                     </Layout.Stack>
                 {/if}
-                <Layout.Stack gap="xs" inline>
+                <Layout.Stack gap="xl" direction="row">
+                    {#if deployment?.buildTime}
+                        <Layout.Stack gap="xs" inline>
+                            <Typography.Text
+                                variant="m-400"
+                                color="--color-fgcolor-neutral-tertiary">
+                                Build time
+                            </Typography.Text>
+                            <Typography.Text variant="m-400">
+                                {calculateTime(deployment.buildTime)}
+                            </Typography.Text>
+                        </Layout.Stack>
+                    {/if}
+                    <Layout.Stack gap="xs" inline>
+                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+                            Total size
+                        </Typography.Text>
+                        <Typography.Text variant="m-400">
+                            {totalSize.value}{totalSize.unit}
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Layout.Stack>
+                <Layout.Stack gap="xs">
                     <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
-                        Total size
-                    </Typography.Text>
-                    <Typography.Text variant="m-400">
-                        {totalSize.value}{totalSize.unit}
+                        Source
                     </Typography.Text>
+                    <DeploymentSource {deployment} />
                 </Layout.Stack>
             </Layout.Stack>
-            <Layout.Stack gap="xs">
-                <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
-                    Source
-                </Typography.Text>
-                <DeploymentSource {deployment} />
-            </Layout.Stack>
         </Layout.Stack>
+
+        {#if $$slots.footer}
+            <span
+                style="margin-left: calc(-1* var(--space-6));margin-right: calc(-1* var(--space-6));width:auto;">
+                <Divider />
+            </span>
+            <Layout.Stack direction="row-reverse">
+                <slot name="footer" />
+            </Layout.Stack>
+        {/if}
     </Layout.Stack>
 </Card>
 

src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte

@@ -4,24 +4,37 @@
     import SiteCard from '../(components)/siteCard.svelte';
     import DomainsOverview from './domainsOverview.svelte';
     import DeploymentsOverview from './deploymentsOverview.svelte';
+    import { Button } from '$lib/elements/forms';
+    import { protocol } from '$routes/(console)/store';
 
     export let data;
 
     $: console.log(data.site);
     $: console.log(data.deployment);
+    $: console.log(data.deploymentList);
     $: console.log(data.proxyRuleList);
 </script>
 
 <Container>
     <Layout.Stack gap="xxl">
-        <SiteCard deployment={data.deployment} proxyRuleList={data.proxyRuleList} />
+        <SiteCard deployment={data.deployment} proxyRuleList={data.proxyRuleList}>
+            <svelte:fragment slot="footer">
+                <Button external href={`${$protocol}${data.deployment.domain}`}>Visit</Button>
+                <Button secondary disabled={data.hasProdReadyDeployments}>Instant rollback</Button>
+            </svelte:fragment>
+        </SiteCard>
 
         <Divider />
-        <Layout.Stack direction="row" gap="xxl">
-            <DomainsOverview proxyRuleList={data.proxyRuleList} />
-            <DeploymentsOverview
-                activeDeployment={data.deployment}
-                deploymentList={data.deploymentList} />
+
+        <Layout.Stack direction="row" gap="xxl" wrap="wrap">
+            <div style:flex="1">
+                <DomainsOverview proxyRuleList={data.proxyRuleList} />
+            </div>
+            <div style:flex="2">
+                <DeploymentsOverview
+                    activeDeployment={data.deployment}
+                    deploymentList={data.deploymentList} />
+            </div>
         </Layout.Stack>
     </Layout.Stack>
 </Container>

src/routes/(console)/project-[project]/sites/site-[site]/+page.ts

@@ -7,14 +7,20 @@ export const load = async ({ params, depends, parent }) => {
     depends(Dependencies.SITES_DOMAINS);
     const { site, proxyRuleList } = await parent();
 
-    const [deployment, deploymentList] = await Promise.all([
+    const [deployment, deploymentList, prodReadyDeployments] = await Promise.all([
         sdk.forProject.sites.getDeployment(params.site, site.deploymentId),
-        sdk.forProject.sites.listDeployments(params.site, [Query.limit(5), Query.orderDesc('')])
+        sdk.forProject.sites.listDeployments(params.site, [Query.limit(5), Query.orderDesc('')]),
+        sdk.forProject.sites.listDeployments(params.site, [
+            Query.limit(1)
+            // Query.equal('status', 'ready')
+            // Query.equal('live', true)
+        ])
     ]);
     return {
         site,
         deployment,
         deploymentList,
-        proxyRuleList
+        proxyRuleList,
+        hasProdReadyDeployments: prodReadyDeployments?.deployments?.length > 0
     };
 };

src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte

@@ -9,7 +9,7 @@
     import { type Models } from '@appwrite.io/console';
     import { Link } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
-    import { Card } from '$lib/components';
+    import { Card, Trim } from '$lib/components';
 
     export let proxyRuleList: Models.ProxyRuleList;
 
@@ -33,17 +33,15 @@
     </Layout.Stack>
     <Card padding="s" isTile>
         {#each proxyRuleList?.rules?.slice(0, 3) as rule, i}
-            <Layout.Stack
-                gap="xs"
-                alignItems="center"
-                justifyContent="space-between"
-                direction="row">
-                <Layout.Stack gap="xs">
+            <Layout.Stack alignItems="center" justifyContent="space-between" direction="row">
+                <Layout.Stack gap="xs" inline>
                     <Link variant="quiet-muted" href={`${$protocol}${rule.domain}`} external>
-                        {rule.domain}
+                        <Trim alternativeTrim>
+                            {rule.domain}
+                        </Trim>
                         <Icon icon={IconExternalLink} />
                     </Link>
-                    <Typography.Text>
+                    <Typography.Text truncate>
                         Added {timeFromNow(rule.$createdAt)}
                     </Typography.Text>
                 </Layout.Stack>