fix: finish page

src/lib/actions/timer.ts

@@ -22,7 +22,13 @@ export const timer: Action<HTMLElement, Props> = (node, props) => {
 
     function step() {
         const diffInSeconds = Math.floor((new Date().getTime() - startDate.getTime()) / 1000);
-        node.textContent = calculateTime(diffInSeconds);
+        const minutes = Math.floor(diffInSeconds / 60);
+        if (minutes > 0) {
+            const seconds = diffInSeconds % 60;
+            node.textContent = `${minutes}m ${seconds}s`;
+        } else {
+            node.textContent = calculateTime(diffInSeconds);
+        }
         frame = window.requestAnimationFrame(step);
     }
 

src/lib/helpers/timeConversion.ts

@@ -94,3 +94,23 @@ export function secsToUnit(time: number, unit: Unit) {
             return time;
     }
 }
+
+/**
+ * Formats time in seconds to a detailed string showing days, hours, minutes, and seconds
+ * @param time Time in seconds
+ * @returns Formatted string like "3d 4h 30m 23s"
+ */
+export function formatTimeDetailed(time: number): string {
+    const seconds = Math.floor(time % 60);
+    const minutes = Math.floor((time / 60) % 60);
+    const hours = Math.floor((time / (60 * 60)) % 24);
+    const days = Math.floor(time / (60 * 60 * 24));
+
+    const parts: string[] = [];
+    if (days > 0) parts.push(`${days}d`);
+    if (hours > 0) parts.push(`${hours}h`);
+    if (minutes > 0) parts.push(`${minutes}m`);
+    if (seconds > 0 || parts.length === 0) parts.push(`${seconds}s`);
+
+    return parts.join(' ');
+}

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

@@ -5,7 +5,8 @@
     import { timer } from '$lib/actions/timer';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import { calculateTime } from '$lib/helpers/timeConversion';
+    import { capitalize } from '$lib/helpers/string';
+    import { calculateTime, formatTimeDetailed } from '$lib/helpers/timeConversion';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
@@ -55,35 +56,56 @@
             });
         }
     }
+
+    function badgeType(status: string) {
+        switch (status) {
+            case 'failed':
+                return 'error';
+            case 'ready':
+                return 'success';
+            case 'building':
+                return undefined;
+            case 'processing':
+                return 'warning';
+            default:
+                return undefined;
+        }
+    }
 </script>
 
-<Layout.Stack>
+<Layout.Stack gap="xl">
     <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <Typography.Text variant="m-500">Deployment logs</Typography.Text>
+        <Layout.Stack direction="row" alignItems="center" gap="s" inline>
+            <Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
+                Deployment logs
+            </Typography.Text>
             <Badge
-                content={status}
+                content={capitalize(status)}
                 size="xs"
                 variant="secondary"
-                type={status === 'failed' ? 'error' : undefined} />
+                type={badgeType(status)} />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" inline>
+            {#if ['processing', 'building'].includes(status)}
+                <Typography.Code color="--color-fgcolor-neutral-secondary">
+                    <Layout.Stack direction="row" alignItems="center" inline>
+                        <p use:timer={{ start: deployment.$createdAt }} />
+                        <Spinner />
+                    </Layout.Stack>
+                </Typography.Code>
+            {:else}
+                <Typography.Code color="--color-fgcolor-neutral-secondary">
+                    {formatTimeDetailed(deployment.buildTime)}
+                </Typography.Code>
+            {/if}
         </Layout.Stack>
-        <div>
-            <Layout.Stack direction="row" alignItems="center">
-                {#if ['processing', 'building'].includes(status)}
-                    <span use:timer={{ start: deployment.$createdAt }} />
-                    <Spinner />
-                {:else}
-                    {calculateTime(deployment.buildTime)}
-                {/if}
-            </Layout.Stack>
-        </div>
-    </Layout.Stack>
-
-    <Logs logs={buildLogs} />
-
-    <Layout.Stack alignItems="flex-end">
-        {#if ['processing', 'building'].includes(status)}
-            <Button size="xs" text on:click={cancelDeployment}>Cancel deployment</Button>
-        {/if}
     </Layout.Stack>
+    {#key buildLogs}
+        <Logs logs={buildLogs} />
+    {/key}
+    {#if ['processing', 'building'].includes(status)}
+        <Layout.Stack alignItems="flex-end">
+            <Button size="s" text on:click={cancelDeployment}>Cancel deployment</Button>
+        </Layout.Stack>
+    {/if}
 </Layout.Stack>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Card, SvgIcon, Trim } from '$lib/components';
-    import { Icon, Layout, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte';
     import { consoleVariables } from '$routes/(console)/store';
     import type { Models } from '@appwrite.io/console';

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

@@ -11,7 +11,7 @@
 
     export let data;
 
-    $: console.log(data.site);
+    $: console.log(data);
 </script>
 
 <Wizard
@@ -40,16 +40,18 @@
         <!-- TODO: fix use repository name instead of id-->
         <Aside
             framework={data.frameworks.frameworks.find((f) => f.name === data.site.framework)}
-            repositoryName={data.site.providerRepositoryId}
+            repositoryName={data.repository.name}
             branch={data.site.providerBranch}
             rootDir={data.site.providerRootDirectory}
             domain={data.deployment.domain} />
     </svelte:fragment>
     <svelte:fragment slot="footer">
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <Typography.Text variant="m-400" color="--color-fgColor-neutral-tertiary">
-                Deployment will continue in the background
-            </Typography.Text>
+            {#if ['processing', 'building', 'failed'].includes(data.deployment.status)}
+                <Typography.Text variant="m-400" color="--color-fgColor-neutral-tertiary">
+                    Deployment will continue in the background
+                </Typography.Text>
+            {/if}
             <Button
                 size="s"
                 fullWidthMobile

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

@@ -14,6 +14,10 @@ export const load: PageLoad = async ({ url }) => {
 
     return {
         site,
-        deployment
+        deployment,
+        repository: await sdk.forProject.vcs.getRepository(
+            site.installationId,
+            site.providerRepositoryId
+        )
     };
 };