Feat: New mobile onboarding flows

src/lib/components/labelCard.svelte

@@ -44,9 +44,11 @@
             {disabled}
             title={title ?? slotTitle?.innerText}
             bind:group>
-            <p>
-                <slot />
-            </p>
+            {#if $$slots.default}
+                <p>
+                    <slot />
+                </p>
+            {/if}
         </Card.Selector>
     </div>
     <span slot="tooltip">{tooltipText}</span>

src/lib/layout/wizard.svelte

@@ -3,6 +3,7 @@
     import { trackEvent } from '$lib/actions/analytics';
     import WizardExitModal from './wizardExitModal.svelte';
     import { goto } from '$app/navigation';
+    import { wizard } from '$lib/stores/wizard';
 
     type $$Props =
         | {
@@ -13,6 +14,7 @@
               invertColumns?: boolean;
               hideAside?: boolean;
               hideFooter?: boolean;
+              onExit?: () => void;
           }
         | {
               title: string;
@@ -22,6 +24,7 @@
               invertColumns?: boolean;
               hideAside?: boolean;
               hideFooter?: boolean;
+              onExit?: () => void;
           };
 
     export let title: $$Props['title'] = '';
@@ -31,6 +34,7 @@
     export let invertColumns: $$Props['invertColumns'] = false;
     export let hideAside = false;
     export let hideFooter = false;
+    export let onExit: $$Props['onExit'] = undefined;
 
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape') {
@@ -83,6 +87,14 @@
             trackEvent('wizard_exit', {
                 from: 'prompt'
             });
+
+            wizard.hide();
+            if (onExit) {
+                onExit();
+
+                // clear exit
+                onExit = null;
+            }
         }}>
         <slot name="exit">
             Are you sure you want to exit from this process? All data will be deleted. This action

src/routes/(console)/project-[project]/overview/onboard.svelte

@@ -75,7 +75,7 @@
                             class="onboarding-card platform-card"
                             on:click={() => addPlatform(0)}>
                             <img
-                                src={$app.themeInUse == 'dark'
+                                src={$app.themeInUse === 'dark'
                                     ? PlatformWebImgSourceDark
                                     : PlatformWebImgSource}
                                 alt="" />
@@ -92,7 +92,7 @@
                         </button>
                         <button class="onboarding-card platform-card" on:click={createKey}>
                             <img
-                                src={$app.themeInUse == 'dark'
+                                src={$app.themeInUse === 'dark'
                                     ? PlatformServerImgSourceDark
                                     : PlatformServerImgSource}
                                 alt="" />
@@ -111,7 +111,7 @@
                             class="onboarding-card platform-card"
                             on:click={() => addPlatform(3)}>
                             <img
-                                src={$app.themeInUse == 'dark'
+                                src={$app.themeInUse === 'dark'
                                     ? PlatformIosImgSourceDark
                                     : PlatformIosImgSource}
                                 alt="" />
@@ -195,7 +195,7 @@
                             class="onboarding-card build-card"
                             href={`${base}/project-${projectId}/databases`}>
                             <img
-                                src={$app.themeInUse == 'dark'
+                                src={$app.themeInUse === 'dark'
                                     ? DatabaseImgSourceDark
                                     : DatabaseImgSource}
                                 alt="" />
@@ -284,15 +284,15 @@
                                 </div>
                             </div>
                             <img
-                                src={$app.themeInUse == 'dark'
+                                src={$app.themeInUse === 'dark'
                                     ? UsersImgSourceDark
                                     : UsersImgSource}
                                 alt="" />
                         </div>
                         <div class="onboarding-card build-card">
                             <div class="card-content">
                                 <img
-                                    src={$app.themeInUse == 'dark'
+                                    src={$app.themeInUse === 'dark'
                                         ? DiscordImgSourceDark
                                         : DiscordImgSource}
                                     class="discord"

src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconCheck } from '@appwrite.io/pink-icons-svelte';
+
+    export let status: boolean = false;
+</script>
+
+<div class="connection-line u-flex u-cross-center">
+    <div
+        class="line-left"
+        style={`opacity: ${status ? 1 : 0.15}; transition: opacity 5s;`}
+        data-status={status}>
+    </div>
+
+    <div
+        class="tick-container"
+        style={`opacity: ${status ? 1 : 0.15}; transition: opacity 2.5s;`}
+        data-status={status}>
+        {#if status}
+            <!-- todo: xs missing atm, need to test -->
+            <Icon icon={IconCheck} size="s" color="#fd366e" />
+        {/if}
+    </div>
+
+    <div
+        class="line-right"
+        style={`opacity: ${status ? 1 : 0.15}; transition: opacity 5s;`}
+        data-status={status}>
+    </div>
+</div>
+
+<style>
+    .connection-line {
+        display: flex;
+        width: 6.125rem;
+        align-items: center;
+    }
+
+    .line-left[data-status='false'],
+    .line-right[data-status='false'] {
+        flex: 1;
+        height: 1px;
+        background: none;
+        border-top: 1px dashed #d8d8db;
+    }
+
+    .line-left[data-status='true'] {
+        flex: 1;
+        height: 1px;
+        background: linear-gradient(to left, #f02e65 0%, rgba(254, 149, 103, 0.15) 100%);
+    }
+
+    .line-right[data-status='true'] {
+        flex: 1;
+        height: 1px;
+        background: linear-gradient(to right, #f02e65 6.32%, rgba(254, 149, 103, 0.15) 116.81%);
+    }
+
+    .tick-container[data-status='false'] {
+        width: 7px;
+        height: 7px;
+        display: flex;
+        border-radius: 50%;
+        margin-inline: 0.25rem;
+        background-color: #ccc;
+    }
+
+    .tick-container[data-status='true'] {
+        display: flex;
+        width: 25px;
+        height: 25px;
+        color: #fd366e;
+        border-radius: 50%;
+        align-items: center;
+        justify-content: center;
+        border: 1.8px solid hsla(343, 98%, 60%, 0.32);
+        background-color: hsla(343, 98%, 60%, 0.08);
+    }
+</style>

src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import type { ComponentType } from 'svelte';
+
+    export let icon: ComponentType;
+    export let iconSize: number | undefined = undefined;
+    export let iconColor: string | undefined = undefined;
+</script>
+
+<div class="outer-card">
+    <div
+        class="inner-card"
+        style="
+            --icon-color: {iconColor || 'inherit'};
+            --icon-size: {iconSize ? `${iconSize}rem` : 'inherit'};
+        ">
+        <svelte:component this={icon} />
+    </div>
+</div>
+
+<style lang="scss">
+    .outer-card {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 94.304px;
+        height: 94.303px;
+        flex-shrink: 0;
+        border-radius: 26.944px;
+        border: 1.684px solid rgba(255, 255, 255, 0.08);
+        background: rgba(255, 255, 255, 0.5);
+        box-shadow: 0 8.757px 8.757px 0 rgba(0, 0, 0, 0.04);
+    }
+
+    .inner-card {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80.832px;
+        height: 80.831px;
+        flex-shrink: 0;
+        border-radius: 20.208px;
+        background: #fff;
+        border: 0.54px solid #ededf0;
+        box-shadow: 0 6.736px 6.736px 0 rgba(0, 0, 0, 0.05);
+
+        & :global(svg) {
+            width: var(--icon-size);
+            height: var(--icon-size);
+            color: var(--icon-color);
+        }
+    }
+
+    :global(.theme-dark) {
+        & .outer-card {
+            background: rgba(255, 255, 255, 0.08);
+        }
+
+        & .inner-card {
+            border: 0.54px solid rgba(237, 237, 240, 0.08);
+            background: var(--color-bgColor-neutral-primary, #1d1d21);
+        }
+    }
+</style>