From 334af2fb79530540dc5d83ab460018003e6a8505 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 27 Mar 2025 15:44:20 +0100
Subject: [PATCH] fix: design issues

---
 .../downloadActionMenuItem.svelte             | 26 ++-----
 .../deployment-[deployment]/+page.svelte      | 67 +++++++++++++------
 .../settings/executeFunction.svelte           |  6 +-
 .../settings/updateLogging.svelte             |  2 +-
 .../functions/function-[function]/store.ts    | 22 +++++-
 .../functions/templates/+page.svelte          |  5 +-
 .../sites/site-[site]/+page.svelte            |  1 -
 .../sites/site-[site]/+page.ts                |  3 +-
 .../site-[site]/deployments/table.svelte      |  2 +-
 9 files changed, 80 insertions(+), 54 deletions(-)

diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte
index 40e381531..a347e8ad1 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/(components)/downloadActionMenuItem.svelte
@@ -1,31 +1,13 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { SubMenu } from '$lib/components/menu';
-    import { sdk } from '$lib/stores/sdk';
-    import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
+    import { type Models } from '@appwrite.io/console';
     import { IconDownload } from '@appwrite.io/pink-icons-svelte';
     import { ActionMenu } from '@appwrite.io/pink-svelte';
+    import { getOutputDownload, getSourceDownload } from '../store';
 
     export let deployment: Models.Deployment;
     export let toggle: () => void;
-    function getOutputDownload(deploymentId: string) {
-        return (
-            sdk.forProject.functions.getDeploymentDownload(
-                $page.params.function,
-                deploymentId.toString(),
-                DeploymentDownloadType.Output
-            ) + '&mode=admin'
-        );
-    }
-    function getSourceDownload(deploymentId: string) {
-        return (
-            sdk.forProject.functions.getDeploymentDownload(
-                $page.params.function,
-                deploymentId.toString(),
-                DeploymentDownloadType.Source
-            ) + '&mode=admin'
-        );
-    }
 </script>
 
 {#if deployment?.status === 'ready' || deployment?.status === 'failed' || deployment?.status === 'building'}
@@ -37,7 +19,7 @@
             <ActionMenu.Root noPadding>
                 <ActionMenu.Item.Anchor
                     on:click={toggle}
-                    href={getSourceDownload(deployment.$id)}
+                    href={getSourceDownload($page.params.function, deployment.$id)}
                     external>
                     Download source
                 </ActionMenu.Item.Anchor>
@@ -45,7 +27,7 @@
                 <ActionMenu.Item.Anchor
                     disabled={deployment?.status !== 'ready'}
                     on:click={toggle}
-                    href={getOutputDownload(deployment.$id)}
+                    href={getOutputDownload($page.params.function, deployment.$id)}
                     external>
                     Download output
                 </ActionMenu.Item.Anchor>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index e6d26d0a9..88b9f5469 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -3,7 +3,7 @@
     import { Container } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
+    import { type Models } from '@appwrite.io/console';
     import { page } from '$app/stores';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
@@ -11,11 +11,21 @@
     import Cancel from '../(modals)/cancel.svelte';
     import DeploymentCard from '../(components)/deploymentCard.svelte';
     import Delete from '../(modals)/deleteModal.svelte';
-    import { Accordion, Card, Layout, Logs, Spinner, Typography } from '@appwrite.io/pink-svelte';
+    import {
+        Accordion,
+        ActionMenu,
+        Card,
+        Layout,
+        Logs,
+        Popover,
+        Spinner,
+        Typography
+    } from '@appwrite.io/pink-svelte';
     import { capitalize } from '$lib/helpers/string';
     import { formatTimeDetailed } from '$lib/helpers/timeConversion';
     import { timer } from '$lib/actions/timer';
     import { app } from '$lib/stores/app';
+    import { getOutputDownload, getSourceDownload } from '../store';
 
     export let data;
 
@@ -24,19 +34,6 @@
     let showCancel = false;
     let showActivate = false;
 
-    function handleActivate() {
-        invalidate(Dependencies.DEPLOYMENTS);
-    }
-
-    //TODO: implement output download
-    function getDownload(deploymentId: string) {
-        return (
-            sdk.forProject.functions.getDeploymentDownload(data.func.$id, deploymentId).toString() +
-                '&mode=admin',
-            DeploymentDownloadType.Source
-        );
-    }
-
     onMount(() => {
         logs = data.deployment.buildLogs;
 
@@ -75,9 +72,6 @@
                 return undefined;
         }
     }
-
-    $: console.log(logs);
-    $: console.log(data.deployment);
 </script>
 
 <Container>
@@ -92,8 +86,34 @@
                         }}>Cancel</Button>
                 {/if}
 
-                {#if data.deployment.sourceSize > 0}
-                    <Button secondary href={getDownload(data.deployment.$id)}>Download</Button>
+                {#if !!data.deployment?.sourceSize || !!data.deployment?.sourceSize}
+                    <Popover let:toggle placement="bottom-end">
+                        <Button secondary on:click={toggle}>Download</Button>
+                        <svelte:fragment slot="tooltip" let:toggle>
+                            <ActionMenu.Root noPadding>
+                                <ActionMenu.Item.Anchor
+                                    on:click={toggle}
+                                    href={getSourceDownload(
+                                        $page.params.function,
+                                        data.deployment.$id
+                                    )}
+                                    external>
+                                    Download source
+                                </ActionMenu.Item.Anchor>
+
+                                <ActionMenu.Item.Anchor
+                                    disabled={data.deployment?.status !== 'ready'}
+                                    on:click={toggle}
+                                    href={getOutputDownload(
+                                        $page.params.function,
+                                        data.deployment.$id
+                                    )}
+                                    external>
+                                    Download output
+                                </ActionMenu.Item.Anchor>
+                            </ActionMenu.Root>
+                        </svelte:fragment>
+                    </Popover>
                 {/if}
 
                 {#if data.func.deploymentId !== data.deployment.$id && data.deployment.status === 'ready'}
@@ -111,7 +131,7 @@
         <Accordion
             title="Deployment logs"
             badge={capitalize(data.deployment.status)}
-            open={data.deployment.status !== 'ready'}
+            open
             badgeType={badgeTypeDeployment(data.deployment.status)}
             hideDivider>
             <Layout.Stack gap="xl">
@@ -145,4 +165,7 @@
 
 <Delete selectedDeployment={data.deployment} bind:showDelete />
 <Cancel selectedDeployment={data.deployment} bind:showCancel />
-<Activate selectedDeployment={data.deployment} bind:showActivate on:activated={handleActivate} />
+<Activate
+    selectedDeployment={data.deployment}
+    bind:showActivate
+    on:activated={() => invalidate(Dependencies.DEPLOYMENTS)} />
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/executeFunction.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/executeFunction.svelte
index 3feb55e48..cbedc4de8 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/executeFunction.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/executeFunction.svelte
@@ -16,7 +16,7 @@
         <Layout.Stack gap="xxxl" direction="row" wrap="wrap">
             <Layout.Stack gap="xxxs" inline>
                 <Typography.Caption variant="400">Runtime</Typography.Caption>
-                <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                     <Layout.Stack direction="row" gap="xxs" alignItems="center">
                         <SvgIcon size={16} iconSize="small" name={$func.runtime.split('-')[0]} />
                         {capitalize($func.runtime)}
@@ -25,7 +25,7 @@
             </Layout.Stack>
             <Layout.Stack gap="xxxs" inline>
                 <Typography.Caption variant="400">Updated</Typography.Caption>
-                <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                     <Tooltip>
                         {capitalize(timeFromNow($func.$updatedAt))}
                         <span slot="tooltip">
@@ -36,7 +36,7 @@
             </Layout.Stack>
             <Layout.Stack gap="xxxs" inline>
                 <Typography.Caption variant="400">Created</Typography.Caption>
-                <Typography.Text variant="m-500" color="--fgcolor-neutral-primary">
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                     {toLocaleDateTime($func.$createdAt)}
                 </Typography.Text>
             </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateLogging.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateLogging.svelte
index a5a92f00a..8959cdc47 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateLogging.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateLogging.svelte
@@ -58,7 +58,7 @@
 
 <Form onSubmit={update}>
     <CardGrid>
-        <svelte:fragment slot="title">Execution logs</svelte:fragment>
+        <svelte:fragment slot="title">Logging</svelte:fragment>
         <svelte:fragment slot="aside">
             <InputSwitch label="Logs" id="logging" bind:value={logging} />
             <Typography.Text>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/store.ts b/src/routes/(console)/project-[project]/functions/function-[function]/store.ts
index 5e726d65f..fb6de754f 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/store.ts
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/store.ts
@@ -1,7 +1,8 @@
 import { page } from '$app/stores';
 import { derived, writable, type Writable } from 'svelte/store';
-import type { Models } from '@appwrite.io/console';
+import { DeploymentDownloadType, type Models } from '@appwrite.io/console';
 import type { Column } from '$lib/helpers/types';
+import { sdk } from '$lib/stores/sdk';
 
 export const func = derived(page, ($page) => $page.data.function as Models.Function);
 export const deploymentList = derived(
@@ -108,3 +109,22 @@ export const columns = writable<Column[]>([
         format: 'datetime'
     }
 ]);
+
+export function getOutputDownload(funcId: string, deploymentId: string) {
+    return (
+        sdk.forProject.functions.getDeploymentDownload(
+            funcId,
+            deploymentId.toString(),
+            DeploymentDownloadType.Output
+        ) + '&mode=admin'
+    );
+}
+export function getSourceDownload(funcId: string, deploymentId: string) {
+    return (
+        sdk.forProject.functions.getDeploymentDownload(
+            funcId,
+            deploymentId.toString(),
+            DeploymentDownloadType.Source
+        ) + '&mode=admin'
+    );
+}
diff --git a/src/routes/(console)/project-[project]/functions/templates/+page.svelte b/src/routes/(console)/project-[project]/functions/templates/+page.svelte
index ad2838179..35331afdb 100644
--- a/src/routes/(console)/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/templates/+page.svelte
@@ -180,8 +180,9 @@
                                                         +{hidden.length}
                                                     </span>
                                                 </Avatar>
-                                                <span slot="tooltip"
-                                                    >{hidden.map((n) => n.name).join(', ')}</span>
+                                                <span slot="tooltip">
+                                                    {hidden.map((n) => n.name).join(', ')}
+                                                </span>
                                             </Tooltip>
                                         {/if}
                                     </AvatarGroup>
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 b7ae9aa9f..fde0eb474 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
@@ -90,7 +90,6 @@
 
         <Divider />
 
-        <!-- TODO: mobile view table doesn't shrink -->
         <Layout.GridFraction gap="xxl" start={1} end={2} breakpoint="m">
             <DomainsOverview proxyRuleList={data.proxyRuleList} />
             <DeploymentsOverview
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/+page.ts b/src/routes/(console)/project-[project]/sites/site-[site]/+page.ts
index 16c38bd17..1aebb9875 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/+page.ts
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/+page.ts
@@ -20,7 +20,8 @@ export const load = async ({ params, depends, parent }) => {
             Query.equal('type', RuleType.DEPLOYMENT),
             Query.equal('deploymentResourceType', DeploymentResourceType.SITE),
             Query.equal('deploymentResourceId', site.$id),
-            Query.equal('deploymentId', site.deploymentId)
+            Query.equal('deploymentId', site.deploymentId),
+            Query.orderDesc('')
         ])
     ]);
 
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 5692c2e05..da1fa8edb 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
@@ -69,7 +69,7 @@
                             {formatTimeDetailed(deployment.buildDuration)}
                         {/if}
                     {:else if column.id === 'totalSize'}
-                        {calculateSize(deployment.totalSize)}
+                        {calculateSize(deployment?.totalSize ?? 0)}
                     {:else if column.id === 'sourceSize'}
                         {calculateSize(deployment.sourceSize)}
                     {:else if column.id === 'buildSize'}