fix: design issues

2026-06-06 19:27:48 +00:00 · 2025-03-27 15:44:20 +01:00
parent 49f44aba47
commit 334af2fb79
9 changed files with 80 additions and 54 deletions
@@ -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>
@@ -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)} />
@@ -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>
@@ -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>
@@ -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'
+    );
+}
@@ -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>
@@ -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
@@ -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('')
        ])
    ]);

@@ -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'}