feat: hacka8

package.json

@@ -23,7 +23,7 @@
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "1.0.0-next.7",
-        "@appwrite.io/pink-svelte": "1.0.0-next.80",
+        "@appwrite.io/pink-svelte": "1.0.0-next.82",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.33.1",
         "@stripe/stripe-js": "^3.5.0",

pnpm-lock.yaml

@@ -21,8 +21,8 @@ importers:
         specifier: 1.0.0-next.7
         version: 1.0.0-next.7(svelte@4.2.19)
       '@appwrite.io/pink-svelte':
-        specifier: 1.0.0-next.80
-        version: 1.0.0-next.80(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: 1.0.0-next.82
+        version: 1.0.0-next.82(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -210,8 +210,8 @@ packages:
   '@appwrite.io/pink-icons@0.25.0':
     resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
 
-  '@appwrite.io/pink-svelte@1.0.0-next.80':
-    resolution: {integrity: sha512-GJRT3evfiRApdDfn8FYme4Dwux3Wp6fYSlAMCS3GySiT5qhNbqG5D68yLjLVBeEJDje48Uz+JzVr9M7FXRtRhQ==}
+  '@appwrite.io/pink-svelte@1.0.0-next.82':
+    resolution: {integrity: sha512-2+e69Vk3rz7Rg4PIC3qC3Q7NZKXZjAK0EE3IB/TCTiiGFjbS3iw+zXX1o/ScCR4k1vBp/p0P4l4ncrwcQ0pGXg==}
     peerDependencies:
       react-dom: ^18.0.0
       svelte: ^4.0.0
@@ -3871,7 +3871,7 @@ snapshots:
 
   '@appwrite.io/pink-icons@0.25.0': {}
 
-  '@appwrite.io/pink-svelte@1.0.0-next.80(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@1.0.0-next.82(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 1.0.0-next.7(svelte@4.2.19)
       '@floating-ui/dom': 1.6.11

src/lib/components/modal.svelte

@@ -49,4 +49,7 @@
         {/if}
         <slot />
     </Form>
+    <svelte:fragment slot="footer">
+        <slot name="footer" />
+    </svelte:fragment>
 </Modal>

src/lib/layout/wizard.svelte

@@ -11,7 +11,8 @@
               showExitModal: boolean;
               href?: string;
               invertColumns?: boolean;
-              hideAside: boolean;
+              hideAside?: boolean;
+              hideFooter?: boolean;
           }
         | {
               title: string;
@@ -19,7 +20,8 @@
               confirmExit?: boolean;
               showExitModal?: boolean;
               invertColumns?: boolean;
-              hideAside: boolean;
+              hideAside?: boolean;
+              hideFooter?: boolean;
           };
 
     export let title: $$Props['title'] = '';

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

@@ -6,11 +6,23 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import ansicolor from 'ansicolor';
-    import { Fieldset, Card, Layout, Tag, Typography, Badge } from '@appwrite.io/pink-svelte';
+    import {
+        Fieldset,
+        Card,
+        Layout,
+        Tag,
+        Typography,
+        Badge,
+        Spinner,
+        Icon
+    } from '@appwrite.io/pink-svelte';
+    import { IconExclamationCircle } from '@appwrite.io/pink-icons-svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import Aside from '../aside.svelte';
     import { app } from '$lib/stores/app';
     import { goto } from '$app/navigation';
+    import { calculateTime } from '$lib/helpers/timeConversion';
+    import { timer } from '$lib/actions/timer';
 
     export let data: PageData;
 
@@ -23,8 +35,10 @@
                     `sites.${data.deployment.resourceId}.deployments.${data.deployment.$id}.update`
                 )
             ) {
+                console.log(response.payload);
                 buildLogs = response.payload.logs;
                 status = response.payload.status;
+
                 if (status === 'ready') {
                     goto(
                         `${base}/project-${$page.params.project}/sites/create-site/finish?site=${data.site.$id}`
@@ -83,6 +97,8 @@
         }
         return output;
     }
+
+    $: console.log(data.deployment);
 </script>
 
 <Wizard
@@ -102,9 +118,28 @@
         </Card.Base>
         <Fieldset legend="Deploy">
             <Layout.Stack>
-                <Layout.Stack direction="row">
-                    <Typography.Text variant="m-500">Deployment logs</Typography.Text>
-                    <Badge content={status} size="xs" variant="secondary" />
+                <Layout.Stack direction="row" justifyContent="space-between">
+                    <Layout.Stack direction="row">
+                        <Typography.Text variant="m-500">Deployment logs</Typography.Text>
+                        <Badge content={status} size="xs" variant="secondary" />
+                    </Layout.Stack>
+                    <div>
+                        <Layout.Stack direction="row" alignItems="center">
+                            {#if ['processing', 'building'].includes(data.deployment.status)}
+                                <span use:timer={{ start: data.deployment.$createdAt }} />
+                                <Spinner />
+                            {:else if ['failed'].includes(data.deployment.status)}
+                                <p>Deployment failed</p>
+                                <span style:color="var(--color-bgcolor-error)">
+                                    <Icon
+                                        icon={IconExclamationCircle}
+                                        color="--color-bgcolor-error" />
+                                </span>
+                            {:else}
+                                {calculateTime(data.deployment.buildTime)}
+                            {/if}
+                        </Layout.Stack>
+                    </div>
                 </Layout.Stack>
                 <pre><code>{@html formatLogs(buildLogs)}</code></pre>
                 <!-- <div>