From b16f8880cdd2d00474beb5141caa47c31f284bbb Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 22 Jan 2025 15:09:53 +0530
Subject: [PATCH 01/18] add: android starter onboarding [WIP].

---
 src/lib/layout/wizard.svelte                  |   9 +
 .../components/ConnectionLine.svelte          |  79 ++++++
 .../components/OnboardingPlatformCard.svelte  |  63 +++++
 .../overview/platforms/createAndroid.svelte   | 253 +++++++++++++++---
 .../platforms/wizard/android/step1.svelte     |  60 -----
 .../platforms/wizard/android/step2.svelte     |  18 --
 .../platforms/wizard/android/step3.svelte     |  41 ---
 7 files changed, 368 insertions(+), 155 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte
 create mode 100644 src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/android/step1.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/android/step2.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/android/step3.svelte

diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 1e8dcaca1..e2633b4aa 100644
--- a/src/lib/layout/wizard.svelte
+++ b/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,11 @@
             trackEvent('wizard_exit', {
                 from: 'prompt'
             });
+
+            wizard.hide();
+            if (onExit) {
+                onExit();
+            }
         }}>
         <slot name="exit">
             Are you sure you want to exit from this process? All data will be deleted. This action
diff --git a/src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte b/src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte
new file mode 100644
index 000000000..795adcc10
--- /dev/null
+++ b/src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+    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}
+            <span class="icon-check" style="color: #fd366e;"></span>
+        {/if}
+    </div>
+
+    <div
+        class="line-right"
+        style={`opacity: ${status ? 1 : 0.15}; transition: opacity 5s;`}
+        data-status={status}>
+    </div>
+</div>
+
+<style>
+    .connection-line {
+        width: 100%;
+        display: flex;
+        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);
+    }
+
+    .icon-check {
+        color: #fd366e;
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte b/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
new file mode 100644
index 000000000..8b7881df9
--- /dev/null
+++ b/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: 0px 8.757px 8.757px 0px 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: 0px 6.736px 6.736px 0px 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>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index 2f9bf8322..825c0a16c 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -1,46 +1,227 @@
 <script lang="ts">
-    import { WizardWithSteps } from '$lib/layout';
+    import { Wizard } from '$lib/layout';
     import { invalidate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
     import { createPlatform } from './wizard/store';
     import { Dependencies } from '$lib/constants';
-    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
-    import Step1 from './wizard/android/step1.svelte';
-    import Step2 from './wizard/android/step2.svelte';
-    import Step3 from './wizard/android/step3.svelte';
-    import Step4 from './wizard/step4.svelte';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        Spinner
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { IconAndroid, IconAppwrite } from '@appwrite.io/pink-icons-svelte';
+    import { Card } from '$lib/components';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { fade } from 'svelte/transition';
+    import OnboardingPlatformCard from '$routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte';
+    import ConnectionLine from '$routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte';
+    import { PlatformType } from '@appwrite.io/console';
+    import { sleep } from '$lib/helpers/promises';
 
-    async function onFinish() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
-        createPlatform.reset();
-        wizard.hide();
+    let showExitModal = false;
+    let isPlatformCreated = false;
+    let isCreatingPlatform = false;
+    let connectionSuccessful = false;
+    const projectId = $page.params.project;
+
+    const gitCloneCode =
+        '\ngit clone https://github.com/appwrite/starter-for-android\ncd starter-for-android\n';
+
+    async function createAndroidPlatform() {
+        try {
+            isCreatingPlatform = true;
+            await sleep(1500);
+            // await sdk.forConsole.projects.createPlatform(
+            //     projectId,
+            //     PlatformType.Android,
+            //     $createPlatform.name,
+            //     $createPlatform.key || undefined,
+            //     undefined,
+            //     undefined
+            // );
+
+            isPlatformCreated = true;
+            trackEvent(Submit.PlatformCreate, {
+                type: 'android'
+            });
+            addNotification({
+                type: 'success',
+                message: `Android platform has been created.`
+            });
+        } catch (error) {
+            trackError(error, Submit.PlatformCreate);
+        } finally {
+            isCreatingPlatform = false;
+        }
     }
 
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Install',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Import',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Build',
-        component: Step4,
-        optional: true
+    async function resetPlatformStore() {
+        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
+        createPlatform.reset();
+    }
+
+    onMount(() => {
+        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`) && isPlatformCreated) {
+                connectionSuccessful = true;
+                unsubscribe();
+            }
+        });
+
+        return () => {
+            unsubscribe();
+        };
     });
 </script>
 
-<WizardWithSteps
-    title="Add an Android platform"
-    steps={stepsComponents}
-    on:finish={onFinish}
-    on:exit={onFinish}
-    finalAction="Go to dashboard" />
+<Wizard title="Add an Android platform" bind:showExitModal confirmExit onExit={resetPlatformStore}>
+    <Form onSubmit={createAndroidPlatform}>
+        <Layout.Stack gap="xxl">
+            <!-- Step One -->
+            {#if !isPlatformCreated}
+                <Fieldset legend="Details">
+                    <Layout.Stack gap="l" alignItems="flex-end">
+                        <Layout.Stack gap="s">
+                            <InputText
+                                id="name"
+                                label="Name"
+                                placeholder="My Android App"
+                                required
+                                bind:value={$createPlatform.name} />
+
+                            <!-- Tooltips on InputText don't work as of now -->
+                            <InputText
+                                id="key"
+                                label="Package Name"
+                                placeholder="com.company.appname"
+                                tooltip="Your package name is generally the applicationId in your app-level build.gradle file."
+                                required
+                                bind:value={$createPlatform.key} />
+                        </Layout.Stack>
+
+                        <Button
+                            fullWidthMobile
+                            size="s"
+                            submit
+                            forceShowLoader
+                            submissionLoader={isCreatingPlatform}
+                            disabled={!$createPlatform.name ||
+                                !$createPlatform.key ||
+                                isCreatingPlatform}
+                            on:click={async () => await createAndroidPlatform()}>
+                            Create platform
+                        </Button>
+                    </Layout.Stack>
+                </Fieldset>
+            {:else}
+                <Layout.Stack gap="xxl">
+                    <Card isTile padding="s" radius="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Icon size="m" icon={IconAndroid} />
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-primary">
+                                    {$createPlatform.name} ({$createPlatform.key})
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Card>
+                </Layout.Stack>
+            {/if}
+
+            <!-- Step Two -->
+            {#if isPlatformCreated}
+                <Fieldset legend="Clone starter">
+                    <Layout.Stack gap="l">
+                        <Typography.Text variant="m-500">
+                            1. Clone the Android starter kit from GitHub using your terminal or
+                            Android Studio.
+                        </Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="bash" lineNumbers code={gitCloneCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500">2. Configure the project</Typography.Text>
+
+                        <Typography.Text variant="m-400">
+                            Update the configuration in the file
+                            <InlineCode size="s" code="data/repository/AppwriteRepository.kt" />
+                            .
+                        </Typography.Text>
+
+                        <Typography.Text variant="m-500">3. Run the starter kit</Typography.Text>
+                        <Typography.Text variant="m-400">
+                            Launch the starter kit and click the
+                            <InlineCode size="s" code="Send a ping" />
+                            button to test the setup.
+                        </Typography.Text>
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Card padding="l">
+            <Layout.Stack gap="xxl">
+                <Layout.Stack direction="row" justifyContent="center" gap="none">
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#3ddc84"
+                        icon={IconAndroid} />
+
+                    <ConnectionLine status={connectionSuccessful} />
+
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#FD366E"
+                        icon={IconAppwrite} />
+                </Layout.Stack>
+
+                <Layout.Stack direction="row" justifyContent="center" alignItems="center" gap="l">
+                    {#if !connectionSuccessful}
+                        <Spinner />
+                        <Typography.Text variant="m-400">Waiting for connection...</Typography.Text>
+                    {:else}
+                        <!-- cannot apply fade on components -->
+                        <div in:fade={{ duration: 2500 }}>
+                            <Typography.Title size="m">Congratulations!</Typography.Title>
+                        </div>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button
+            size="s"
+            fullWidthMobile
+            secondary
+            disabled={isCreatingPlatform}
+            href={`${base}/project-${projectId}/overview`}>
+            Go to dashboard
+        </Button>
+    </svelte:fragment>
+</Wizard>
+
+<style lang="scss">
+    :global(.pink2-code-margin-fix pre) {
+        margin: revert;
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/android/step1.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/android/step1.svelte
deleted file mode 100644
index bdd6b79a1..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/android/step1.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { PlatformType } from '@appwrite.io/console';
-
-    const projectId = $page.params.project;
-
-    async function beforeSubmit() {
-        if ($createPlatform.$id) {
-            await sdk.forConsole.projects.updatePlatform(
-                projectId,
-                $createPlatform.$id,
-                $createPlatform.name,
-                $createPlatform.key || undefined,
-                $createPlatform.store || undefined,
-                $createPlatform.hostname || undefined
-            );
-
-            return;
-        }
-
-        const platform = await sdk.forConsole.projects.createPlatform(
-            projectId,
-            PlatformType.Android,
-            $createPlatform.name,
-            $createPlatform.key || undefined,
-            undefined,
-            undefined
-        );
-
-        trackEvent(Submit.PlatformCreate, {
-            type: 'android'
-        });
-
-        $createPlatform.$id = platform.$id;
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Android registration</svelte:fragment>
-    <FormList>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="My Android App"
-            required
-            bind:value={$createPlatform.name} />
-        <InputText
-            id="key"
-            label="Package Name"
-            placeholder="com.company.appname"
-            tooltip="Your package name is generally the applicationId in your app-level build.gradle file."
-            required
-            bind:value={$createPlatform.key} />
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/android/step2.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/android/step2.svelte
deleted file mode 100644
index a2c5dd1fb..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/android/step2.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-    import { Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { versions } from '../store';
-
-    const example1 = `repositories {
-    mavenCentral()
-}`;
-    const example2 = `implementation("io.appwrite:sdk-for-android:${$versions['client-android']}")`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Install</svelte:fragment>
-    <p>First, add this to your root level <code class="inline-code">build.gradle</code> file.</p>
-    <Code label="Groovy" labelIcon="android" language="kotlin" code={example1} withCopy />
-    <p class="common-section">And add this to your project's build.gradle file.</p>
-    <Code label="Groovy" labelIcon="android" language="kotlin" code={example2} withCopy />
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/android/step3.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/android/step3.svelte
deleted file mode 100644
index e2c956664..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/android/step3.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-    import { Code } from '$lib/components';
-    import Id from '$lib/components/id.svelte';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { isCloud } from '$lib/system';
-
-    const { endpoint, project } = sdk.forProject.client.config;
-    const code = `import io.appwrite.Client
-import io.appwrite.services.Account
-
-${
-    isCloud
-        ? `val client = Client(context).setProject("${project}")`
-        : `val client = Client(context)
-    .setEndpoint("${endpoint}")
-    .setProject("${project}")
-    .setSelfSigned(status: true) // For self signed certificates, only use for development`
-}`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Initialize</svelte:fragment>
-
-    <h2 class="heading-level-7">Initialize your SDK</h2>
-    <p>
-        Initialize your SDK by pointing the client to your Appwrite project using your <Id
-            value={project}>Project ID</Id
-        >.
-    </p>
-    <div class="u-margin-block-start-16">
-        <Code
-            label="Android SDK"
-            labelIcon="android"
-            language="kotlin"
-            {code}
-            withCopy
-            withLineNumbers
-            noMargin />
-    </div>
-</WizardStep>

From dac374ffba5a12caae5d37bcebcfefc06a2e4250 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 22 Jan 2025 15:10:11 +0530
Subject: [PATCH 02/18] fix: equality checks.

---
 .../project-[project]/overview/onboard.svelte    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index 188666f80..9354e4f3f 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/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="" />
@@ -130,7 +130,7 @@
                             class="onboarding-card platform-card"
                             on:click={() => addPlatform(2)}>
                             <img
-                                src={$app.themeInUse == 'dark'
+                                src={$app.themeInUse === 'dark'
                                     ? PlatformAndroidImgSourceDark
                                     : PlatformAndroidImgSource}
                                 alt="" />
@@ -150,7 +150,7 @@
                             class="onboarding-card platform-card"
                             on:click={() => addPlatform(1)}>
                             <img
-                                src={$app.themeInUse == 'dark'
+                                src={$app.themeInUse === 'dark'
                                     ? PlatformFlutterImgSourceDark
                                     : PlatformFlutterImgSource}
                                 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,7 +284,7 @@
                                 </div>
                             </div>
                             <img
-                                src={$app.themeInUse == 'dark'
+                                src={$app.themeInUse === 'dark'
                                     ? UsersImgSourceDark
                                     : UsersImgSource}
                                 alt="" />
@@ -292,7 +292,7 @@
                         <div class="onboarding-card build-card">
                             <div class="card-content">
                                 <img
-                                    src={$app.themeInUse == 'dark'
+                                    src={$app.themeInUse === 'dark'
                                         ? DiscordImgSourceDark
                                         : DiscordImgSource}
                                     class="discord"

From 0c2aa613609cd803cddf49fd23a95be171bf20bc Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 22 Jan 2025 15:17:56 +0530
Subject: [PATCH 03/18] update: remove mock logic.

---
 .../platforms/components/OnboardingPlatformCard.svelte        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte b/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
index 8b7881df9..126a08b6e 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
@@ -28,7 +28,7 @@
         border-radius: 26.944px;
         border: 1.684px solid rgba(255, 255, 255, 0.08);
         background: rgba(255, 255, 255, 0.5);
-        box-shadow: 0px 8.757px 8.757px 0px rgba(0, 0, 0, 0.04);
+        box-shadow: 0 8.757px 8.757px 0 rgba(0, 0, 0, 0.04);
     }
 
     .inner-card {
@@ -41,7 +41,7 @@
         border-radius: 20.208px;
         background: #fff;
         border: 0.54px solid #ededf0;
-        box-shadow: 0px 6.736px 6.736px 0px rgba(0, 0, 0, 0.05);
+        box-shadow: 0 6.736px 6.736px 0 rgba(0, 0, 0, 0.05);
 
         & :global(svg) {
             width: var(--icon-size);

From 9d981f7c9121b7551aa671322a928c9255ee0b04 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 22 Jan 2025 15:54:23 +0530
Subject: [PATCH 04/18] update: remove mock logic.

---
 .../overview/platforms/createAndroid.svelte    | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index 825c0a16c..5cc938bea 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -25,7 +25,6 @@
     import OnboardingPlatformCard from '$routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte';
     import ConnectionLine from '$routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte';
     import { PlatformType } from '@appwrite.io/console';
-    import { sleep } from '$lib/helpers/promises';
 
     let showExitModal = false;
     let isPlatformCreated = false;
@@ -39,15 +38,14 @@
     async function createAndroidPlatform() {
         try {
             isCreatingPlatform = true;
-            await sleep(1500);
-            // await sdk.forConsole.projects.createPlatform(
-            //     projectId,
-            //     PlatformType.Android,
-            //     $createPlatform.name,
-            //     $createPlatform.key || undefined,
-            //     undefined,
-            //     undefined
-            // );
+            await sdk.forConsole.projects.createPlatform(
+                projectId,
+                PlatformType.Android,
+                $createPlatform.name,
+                $createPlatform.key || undefined,
+                undefined,
+                undefined
+            );
 
             isPlatformCreated = true;
             trackEvent(Submit.PlatformCreate, {

From 987e8d5f861150c8709f8d7f38de2d4f3c5098a0 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 22 Jan 2025 19:47:01 +0530
Subject: [PATCH 05/18] update: copies and ui.

---
 .../components/ConnectionLine.svelte          | 12 +++---
 .../overview/platforms/createAndroid.svelte   | 40 ++++++++++++-------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte b/src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte
index 795adcc10..51e4af067 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconCheck } from '@appwrite.io/pink-icons-svelte';
+
     export let status: boolean = false;
 </script>
 
@@ -14,7 +17,8 @@
         style={`opacity: ${status ? 1 : 0.15}; transition: opacity 2.5s;`}
         data-status={status}>
         {#if status}
-            <span class="icon-check" style="color: #fd366e;"></span>
+            <!-- todo: xs missing atm, need to test -->
+            <Icon icon={IconCheck} size="s" color="#fd366e" />
         {/if}
     </div>
 
@@ -27,8 +31,8 @@
 
 <style>
     .connection-line {
-        width: 100%;
         display: flex;
+        width: 6.125rem;
         align-items: center;
     }
 
@@ -72,8 +76,4 @@
         border: 1.8px solid hsla(343, 98%, 60%, 0.32);
         background-color: hsla(343, 98%, 60%, 0.08);
     }
-
-    .icon-check {
-        color: #fd366e;
-    }
 </style>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index 5cc938bea..b9c60c27e 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -146,8 +146,8 @@
                 <Fieldset legend="Clone starter">
                     <Layout.Stack gap="l">
                         <Typography.Text variant="m-500">
-                            1. Clone the Android starter kit from GitHub using your terminal or
-                            Android Studio.
+                            1. Clone the starter kit from GitHub using the terminal or Android
+                            Studio.
                         </Typography.Text>
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
@@ -155,27 +155,31 @@
                             <Code lang="bash" lineNumbers code={gitCloneCode} />
                         </div>
 
-                        <Typography.Text variant="m-500">2. Configure the project</Typography.Text>
+                        <Typography.Text variant="m-500"
+                            >2. Open the file <InlineCode
+                                size="s"
+                                code="data/repository/AppwriteRepository.kt" /> and update the configuration
+                            settings.</Typography.Text>
 
-                        <Typography.Text variant="m-400">
-                            Update the configuration in the file
-                            <InlineCode size="s" code="data/repository/AppwriteRepository.kt" />
-                            .
-                        </Typography.Text>
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code
+                                lang="kotlin"
+                                lineNumbers
+                                code={`const val APPWRITE_PROJECT_ID = "${projectId}"`} />
+                        </div>
 
-                        <Typography.Text variant="m-500">3. Run the starter kit</Typography.Text>
-                        <Typography.Text variant="m-400">
-                            Launch the starter kit and click the
-                            <InlineCode size="s" code="Send a ping" />
-                            button to test the setup.
-                        </Typography.Text>
+                        <Typography.Text variant="m-500"
+                            >3. Run the app on a connected device or emulator, then click the <InlineCode
+                                size="s"
+                                code="Send a ping" /> button to verify the setup.</Typography.Text>
                     </Layout.Stack>
                 </Fieldset>
             {/if}
         </Layout.Stack>
     </Form>
     <svelte:fragment slot="aside">
-        <Card padding="l">
+        <Card padding="l" class="responsive-padding">
             <Layout.Stack gap="xxl">
                 <Layout.Stack direction="row" justifyContent="center" gap="none">
                     <OnboardingPlatformCard
@@ -222,4 +226,10 @@
     :global(.pink2-code-margin-fix pre) {
         margin: revert;
     }
+
+    :global(.responsive-padding) {
+        @media (max-width: 768px) {
+            padding: 16px;
+        }
+    }
 </style>

From c07185eb1f9045c2c8b3d64b4fd5ac3f5d7c05b7 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 10:08:02 +0530
Subject: [PATCH 06/18] update: copies and ui.

---
 .../overview/platforms/createAndroid.svelte   | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index b9c60c27e..cbf67e144 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -25,6 +25,7 @@
     import OnboardingPlatformCard from '$routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte';
     import ConnectionLine from '$routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte';
     import { PlatformType } from '@appwrite.io/console';
+    import { isCloud } from '$lib/system';
 
     let showExitModal = false;
     let isPlatformCreated = false;
@@ -35,6 +36,12 @@
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-android\ncd starter-for-android\n';
 
+    const updateConfigCode = isCloud
+        ? `const val APPWRITE_PROJECT_ID = "${projectId}"`
+        : `const val APPWRITE_PROJECT_ID = "${projectId}"
+const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
+        `;
+
     async function createAndroidPlatform() {
         try {
             isCreatingPlatform = true;
@@ -51,12 +58,12 @@
             trackEvent(Submit.PlatformCreate, {
                 type: 'android'
             });
-            addNotification({
-                type: 'success',
-                message: `Android platform has been created.`
-            });
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
         } finally {
             isCreatingPlatform = false;
         }
@@ -81,7 +88,7 @@
     });
 </script>
 
-<Wizard title="Add an Android platform" bind:showExitModal confirmExit onExit={resetPlatformStore}>
+<Wizard title="Add Android platform" bind:showExitModal confirmExit onExit={resetPlatformStore}>
     <Form onSubmit={createAndroidPlatform}>
         <Layout.Stack gap="xxl">
             <!-- Step One -->
@@ -99,7 +106,7 @@
                             <!-- Tooltips on InputText don't work as of now -->
                             <InputText
                                 id="key"
-                                label="Package Name"
+                                label="Package name"
                                 placeholder="com.company.appname"
                                 tooltip="Your package name is generally the applicationId in your app-level build.gradle file."
                                 required
@@ -163,10 +170,7 @@
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
                         <div class="pink2-code-margin-fix">
-                            <Code
-                                lang="kotlin"
-                                lineNumbers
-                                code={`const val APPWRITE_PROJECT_ID = "${projectId}"`} />
+                            <Code lang="kotlin" lineNumbers code={updateConfigCode} />
                         </div>
 
                         <Typography.Text variant="m-500"
@@ -201,8 +205,13 @@
                         <Typography.Text variant="m-400">Waiting for connection...</Typography.Text>
                     {:else}
                         <!-- cannot apply fade on components -->
-                        <div in:fade={{ duration: 2500 }}>
+                        <div
+                            in:fade={{ duration: 2500 }}
+                            class="u-flex u-flex-vertical u-cross-center u-gap-8">
                             <Typography.Title size="m">Congratulations!</Typography.Title>
+
+                            <Typography.Text variant="m-400"
+                                >You connected your app successfully.</Typography.Text>
                         </div>
                     {/if}
                 </Layout.Stack>

From 5da1ac899c7f2209e1216a9c72a53d038b1aeced Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 13:45:13 +0530
Subject: [PATCH 07/18] new: ios onboarding flow.

---
 .../overview/platforms/createApple.svelte     | 292 +++++++++++++++---
 .../platforms/wizard/apple/step1.svelte       |  85 -----
 .../platforms/wizard/apple/step2.svelte       |  81 -----
 .../platforms/wizard/apple/step3.svelte       |  48 ---
 4 files changed, 256 insertions(+), 250 deletions(-)
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step1.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step2.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step3.svelte

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
index 9da9fd934..0a5b7a3e9 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
@@ -1,47 +1,267 @@
 <script lang="ts">
-    import { WizardWithSteps } from '$lib/layout';
+    import { Wizard } from '$lib/layout';
     import { invalidate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
     import { createPlatform } from './wizard/store';
-    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
-    import Step1 from './wizard/apple/step1.svelte';
-    import Step2 from './wizard/apple/step2.svelte';
-    import Step3 from './wizard/apple/step3.svelte';
-    import Step4 from './wizard/step4.svelte';
     import { Dependencies } from '$lib/constants';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        Spinner
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { IconApple, IconAppwrite } from '@appwrite.io/pink-icons-svelte';
+    import { Card } from '$lib/components';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { fade } from 'svelte/transition';
+    import OnboardingPlatformCard from '$routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte';
+    import ConnectionLine from '$routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte';
+    import { PlatformType } from '@appwrite.io/console';
+    import { isCloud } from '$lib/system';
+    import { app } from '$lib/stores/app';
+    import { LabelCard } from '$lib/components';
 
-    async function onFinish() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
+    let showExitModal = false;
+    let isPlatformCreated = false;
+    let isCreatingPlatform = false;
+    let connectionSuccessful = false;
+    const projectId = $page.params.project;
 
-        createPlatform.reset();
-        wizard.hide();
+    const gitCloneCode =
+        '\ngit clone https://github.com/appwrite/starter-for-ios\ncd starter-for-ios\n';
+
+    const updateConfigCode = isCloud
+        ? `APPWRITE_PROJECT_ID: "${projectId}"`
+        : `APPWRITE_PROJECT_ID: "${projectId}"
+APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
+        `;
+
+    let platform: PlatformType | null = null;
+
+    let platforms: { [key: string]: PlatformType } = {
+        iOS: PlatformType.Appleios,
+        macOS: PlatformType.Applemacos,
+        watchOS: PlatformType.Applewatchos,
+        tvOS: PlatformType.Appletvos
+    };
+
+    async function createApplePlatform() {
+        try {
+            isCreatingPlatform = true;
+            await sdk.forConsole.projects.createPlatform(
+                projectId,
+                platform,
+                $createPlatform.name,
+                $createPlatform.key || undefined,
+                undefined,
+                undefined
+            );
+
+            isPlatformCreated = true;
+            trackEvent(Submit.PlatformCreate, {
+                type: platform
+            });
+        } catch (error) {
+            trackError(error, Submit.PlatformCreate);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            isCreatingPlatform = false;
+        }
     }
 
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Install',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Import',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Build',
-        component: Step4,
-        optional: true
+    async function resetPlatformStore() {
+        createPlatform.reset();
+        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
+    }
+
+    onMount(() => {
+        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`) && isPlatformCreated) {
+                connectionSuccessful = true;
+                unsubscribe();
+            }
+        });
+
+        return () => {
+            unsubscribe();
+        };
     });
 </script>
 
-<WizardWithSteps
-    title="Add an Apple platform"
-    steps={stepsComponents}
-    on:finish={onFinish}
-    on:exit={onFinish}
-    finalAction="Go to dashboard" />
+<Wizard title="Add Apple platform" bind:showExitModal confirmExit onExit={resetPlatformStore}>
+    <Form onSubmit={createApplePlatform}>
+        <Layout.Stack gap="xxl">
+            <!-- Step One -->
+            <Layout.Stack gap="l" direction="row">
+                {#each Object.entries(platforms) as [key, value]}
+                    <div class="u-width-full-line">
+                        <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
+                        <LabelCard
+                            name={key}
+                            bind:group={platform}
+                            variant="primary"
+                            {value}
+                            title={key} />
+                    </div>
+                {/each}
+            </Layout.Stack>
+
+            <!-- Step Two -->
+            {#if !isPlatformCreated}
+                <Fieldset legend="Details">
+                    <Layout.Stack gap="l" alignItems="flex-end">
+                        <Layout.Stack gap="s">
+                            <InputText
+                                id="name"
+                                label="Name"
+                                placeholder="My Apple App"
+                                required
+                                bind:value={$createPlatform.name} />
+
+                            <!-- Tooltips on InputText don't work as of now -->
+                            <InputText
+                                id="hostname"
+                                label="Bundle ID"
+                                placeholder="com.company.appname"
+                                tooltip="You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
+                                required
+                                bind:value={$createPlatform.key} />
+                        </Layout.Stack>
+
+                        <Button
+                            fullWidthMobile
+                            size="s"
+                            submit
+                            forceShowLoader
+                            submissionLoader={isCreatingPlatform}
+                            disabled={!platform ||
+                                !$createPlatform.name ||
+                                !$createPlatform.key ||
+                                isCreatingPlatform}>
+                            Create platform
+                        </Button>
+                    </Layout.Stack>
+                </Fieldset>
+            {:else}
+                <Layout.Stack gap="xxl">
+                    <Card isTile padding="s" radius="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Icon size="m" icon={IconApple} />
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-primary">
+                                    {$createPlatform.name} ({$createPlatform.key})
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Card>
+                </Layout.Stack>
+            {/if}
+
+            <!-- Step Three -->
+            {#if isPlatformCreated}
+                <Fieldset legend="Clone starter">
+                    <Layout.Stack gap="l">
+                        <Typography.Text variant="m-500">
+                            1. Clone the starter kit from GitHub using the terminal or XCode.
+                        </Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="bash" lineNumbers code={gitCloneCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >2. Open the file <InlineCode size="s" code="Sources/Config.plist" /> and
+                            update the configuration settings.</Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="plaintext" lineNumbers code={updateConfigCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >3. Run the app on a connected device or simulator, then click the <InlineCode
+                                size="s"
+                                code="Send a ping" /> button to verify the setup.</Typography.Text>
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Card padding="l" class="responsive-padding">
+            <Layout.Stack gap="xxl">
+                <Layout.Stack direction="row" justifyContent="center" gap="none">
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor={$app.themeInUse === 'light' ? '#000' : '#fff'}
+                        icon={IconApple} />
+
+                    <ConnectionLine status={connectionSuccessful} />
+
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#FD366E"
+                        icon={IconAppwrite} />
+                </Layout.Stack>
+
+                <Layout.Stack direction="row" justifyContent="center" alignItems="center" gap="l">
+                    {#if !connectionSuccessful}
+                        <Spinner />
+                        <Typography.Text variant="m-400">Waiting for connection...</Typography.Text>
+                    {:else}
+                        <!-- cannot apply fade on components -->
+                        <div
+                            in:fade={{ duration: 2500 }}
+                            class="u-flex u-flex-vertical u-cross-center u-gap-8">
+                            <Typography.Title size="m">Congratulations!</Typography.Title>
+
+                            <Typography.Text variant="m-400"
+                                >You connected your app successfully.</Typography.Text>
+                        </div>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button
+            size="s"
+            fullWidthMobile
+            secondary
+            disabled={isCreatingPlatform}
+            href={`${base}/project-${projectId}/overview`}>
+            Go to dashboard
+        </Button>
+    </svelte:fragment>
+</Wizard>
+
+<style lang="scss">
+    :global(.pink2-code-margin-fix pre) {
+        margin: revert;
+    }
+
+    :global(.responsive-padding) {
+        @media (max-width: 768px) {
+            padding: 16px;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step1.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step1.svelte
deleted file mode 100644
index 9c3b9761a..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step1.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Pill } from '$lib/elements';
-    import { FormItem, FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { PlatformType } from '@appwrite.io/console';
-
-    let platform: PlatformType = PlatformType.Appleios;
-
-    const projectId = $page.params.project;
-
-    async function beforeSubmit() {
-        if ($createPlatform.$id) {
-            await sdk.forConsole.projects.deletePlatform(projectId, $createPlatform.$id);
-        }
-
-        const response = await sdk.forConsole.projects.createPlatform(
-            projectId,
-            platform,
-            $createPlatform.name,
-            $createPlatform.key,
-            undefined,
-            undefined
-        );
-
-        trackEvent(Submit.PlatformCreate, {
-            type: platform
-        });
-
-        $createPlatform.$id = response.$id;
-        $createPlatform.type = platform;
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Apple registration</svelte:fragment>
-
-    <FormList isCommonSection>
-        <FormItem>
-            <p>Choose an Apple platform</p>
-            <div class="u-flex u-gap-16 u-margin-block-start-8">
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Appleios)}
-                    selected={platform === PlatformType.Appleios}>
-                    iOS
-                </Pill>
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Applemacos)}
-                    selected={platform === PlatformType.Applemacos}>
-                    macOS
-                </Pill>
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Applewatchos)}
-                    selected={platform === PlatformType.Applewatchos}>
-                    watchOS
-                </Pill>
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Appletvos)}
-                    selected={platform === PlatformType.Appletvos}>
-                    tvOS
-                </Pill>
-            </div>
-        </FormItem>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="My Apple App"
-            required
-            bind:value={$createPlatform.name} />
-        <InputText
-            id="hostname"
-            label="Bundle ID"
-            placeholder="com.company.appname"
-            tooltip="You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
-            required
-            bind:value={$createPlatform.key} />
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step2.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step2.svelte
deleted file mode 100644
index d77381e5b..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step2.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-    import { Code } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { WizardStep } from '$lib/layout';
-    import { versions } from '../store';
-
-    enum Method {
-        Xcode,
-        Swift
-    }
-
-    let method: Method = Method.Xcode;
-
-    const example1 = `dependencies: [
-    .package(
-        name: "Appwrite",
-        url: "https://github.com/appwrite/sdk-for-swift",
-        .exact("${$versions['client-apple']}")
-    )
-]')`;
-    const example2 = `targets: [
-    .target(
-        name: "[YOUR_TARGET]",
-        dependencies: [
-            "Appwrite"
-        ]
-    )
-]`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Install</svelte:fragment>
-    <div class="u-flex u-gap-16 u-margin-block-start-8">
-        <Pill button on:click={() => (method = Method.Xcode)} selected={method === Method.Xcode}>
-            Xcode
-        </Pill>
-        <Pill button on:click={() => (method = Method.Swift)} selected={method === Method.Swift}>
-            Swift Packages
-        </Pill>
-    </div>
-    <div class="common-section">
-        {#if method === Method.Xcode}
-            <ol class="numeric-list">
-                <li class="numeric-list-item">
-                    <span class="text">
-                        In the menu bar under Select File, select Add Packages
-                    </span>
-                </li>
-                <li class="numeric-list-item">
-                    <span class="text">
-                        Search for the Appwrite SDK with the URL
-                        <a class="link" href="https://github.com/appwrite/sdk-for-apple">
-                            https://github.com/appwrite/sdk-for-apple
-                        </a>
-                    </span>
-                </li>
-                <li class="numeric-list-item">
-                    <span class="text"
-                        >In the right panel, select your target project and add your desired version
-                        rules</span>
-                </li>
-                <li class="numeric-list-item">
-                    <span class="text">
-                        Select Add Package and wait for package resolution to complete
-                    </span>
-                </li>
-                <li class="numeric-list-item">
-                    <span class="text">
-                        Make sure the Appwrite package product is checked and select Add Package
-                        again
-                    </span>
-                </li>
-            </ol>
-        {:else if method === Method.Swift}
-            <p>Add this to your <code class="inline-code">Package.swift</code> file.</p>
-            <Code withCopy withLineNumbers label="Swift" language="swift" code={example1} />
-            <p class="common-section">Then add the dependency to your target.</p>
-            <Code withCopy withLineNumbers label="Swift" language="swift" code={example2} />
-        {/if}
-    </div>
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step3.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step3.svelte
deleted file mode 100644
index 8ae1e3d86..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step3.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import { Alert, Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { isCloud } from '$lib/system';
-    import { sdk } from '$lib/stores/sdk';
-    import Id from '$lib/components/id.svelte';
-
-    const { endpoint, project } = sdk.forProject.client.config;
-    const code = `import Appwrite
-
-${
-    isCloud
-        ? `let client = Client().setProject("${project}")`
-        : `let client = Client()
-    .setEndpoint("${endpoint}")
-    .setProject("${project}")
-    .setSelfSigned(true) // For self signed certificates, only use for development`
-}`;
-
-    let showAlert = true;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Initialize</svelte:fragment>
-
-    <h2 class="heading-level-7">Initialize your SDK</h2>
-    <p>
-        Initialize your SDK by pointing the client to your Appwrite project using your
-        <Id value={project}>Project ID</Id>
-        .
-    </p>
-    <Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
-    <p class="u-margin-block-start-24">
-        Before sending any API calls to your new Appwrite project, make sure your device or emulator
-        has network access to your Appwrite project's hostname or IP address.
-    </p>
-    {#if showAlert && !isCloud}
-        <div class="common-section">
-            <Alert type="info" dismissible on:dismiss={() => (showAlert = false)}>
-                <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment>
-                When connecting to a locally hosted Appwrite project from an emulator or a mobile device,
-                you should use the private IP of the device running your Appwrite project as the hostname
-                of the endpoint instead of localhost. You can also use a service like ngrok to proxy
-                the Appwrite server.
-            </Alert>
-        </div>
-    {/if}
-</WizardStep>

From 221a9baa429b853375b761d056cbca90222bc71b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 13:45:47 +0530
Subject: [PATCH 08/18] fix: card selector for `pink#248`.

---
 src/lib/components/labelCard.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
index 53a1582d7..e40ca2c5a 100644
--- a/src/lib/components/labelCard.svelte
+++ b/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>

From 12d90452bf2de5b5d7935af011a9e3809b2b1ec8 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 13:46:03 +0530
Subject: [PATCH 09/18] fix: wizard on exit call.

---
 src/lib/layout/wizard.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index e2633b4aa..fe037c412 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -91,6 +91,9 @@
             wizard.hide();
             if (onExit) {
                 onExit();
+
+                // clear exit
+                onExit = null;
             }
         }}>
         <slot name="exit">

From 4b955c36ae2e0d5b9591dd3bd94ba89f702ca11d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 13:46:28 +0530
Subject: [PATCH 10/18] fix: correct reset and submission logic.

---
 .../overview/platforms/createAndroid.svelte                  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index cbf67e144..c00652739 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -70,8 +70,8 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
     }
 
     async function resetPlatformStore() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
         createPlatform.reset();
+        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
     }
 
     onMount(() => {
@@ -121,8 +121,7 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                             submissionLoader={isCreatingPlatform}
                             disabled={!$createPlatform.name ||
                                 !$createPlatform.key ||
-                                isCreatingPlatform}
-                            on:click={async () => await createAndroidPlatform()}>
+                                isCreatingPlatform}>
                             Create platform
                         </Button>
                     </Layout.Stack>

From 9d2e60a2f8492ea95d4363199239725f0f071c3e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 14:20:20 +0530
Subject: [PATCH 11/18] new: flutter platform.

---
 .../overview/platforms/createFlutter.svelte   | 348 ++++++++++++++++--
 .../platforms/wizard/flutter/step1.svelte     | 199 ----------
 .../platforms/wizard/flutter/step2.svelte     |  25 --
 .../platforms/wizard/flutter/step3.svelte     |  57 ---
 4 files changed, 312 insertions(+), 317 deletions(-)
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step1.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step2.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step3.svelte

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
index 3a6bac032..5f3ce1178 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
@@ -1,47 +1,323 @@
 <script lang="ts">
-    import { WizardWithSteps } from '$lib/layout';
+    import { Wizard } from '$lib/layout';
     import { invalidate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
     import { createPlatform } from './wizard/store';
-    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
-    import Step1 from './wizard/flutter/step1.svelte';
-    import Step2 from './wizard/flutter/step2.svelte';
-    import Step3 from './wizard/flutter/step3.svelte';
-    import Step4 from './wizard/step4.svelte';
     import { Dependencies } from '$lib/constants';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        Spinner
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { IconFlutter, IconAppwrite } from '@appwrite.io/pink-icons-svelte';
+    import { Card } from '$lib/components';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { fade } from 'svelte/transition';
+    import ConnectionLine from './components/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import { PlatformType } from '@appwrite.io/console';
+    import { isCloud } from '$lib/system';
+    import { LabelCard } from '$lib/components';
 
-    async function onFinish() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
+    let showExitModal = false;
+    let isPlatformCreated = false;
+    let isCreatingPlatform = false;
+    let connectionSuccessful = false;
+    const projectId = $page.params.project;
 
-        createPlatform.reset();
-        wizard.hide();
+    const gitCloneCode =
+        '\ngit clone https://github.com/appwrite/starter-for-flutter\ncd starter-for-flutter\n';
+
+    const updateConfigCode = isCloud
+        ? `static const String APPWRITE_PROJECT_ID = "${projectId}"`
+        : `static const String APPWRITE_PROJECT_ID = "${projectId}"
+static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
+        `;
+
+    let platform: PlatformType = PlatformType.Flutterandroid;
+
+    let platforms: { [key: string]: PlatformType } = {
+        Android: PlatformType.Flutterandroid,
+        iOS: PlatformType.Flutterios,
+        Linux: PlatformType.Flutterlinux,
+        macOS: PlatformType.Fluttermacos,
+        Windows: PlatformType.Flutterwindows,
+        Web: PlatformType.Flutterweb
+    };
+
+    const placeholder: Partial<
+        Record<
+            PlatformType,
+            {
+                name: string;
+                hostname: string;
+                tooltip: string;
+            }
+        >
+    > = {
+        [PlatformType.Flutterandroid]: {
+            name: 'My Android App',
+            hostname: 'com.company.appname',
+            tooltip:
+                'Your package name is generally the applicationId in your app-level build.gradle file.'
+        },
+        [PlatformType.Flutterios]: {
+            name: 'My iOS App',
+            hostname: 'com.company.appname',
+            tooltip:
+                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
+        },
+        [PlatformType.Flutterlinux]: {
+            name: 'My Linux App',
+            hostname: 'appname',
+            tooltip: 'Your application name'
+        },
+        [PlatformType.Fluttermacos]: {
+            name: 'My mac OS App',
+            hostname: 'com.company.appname',
+            tooltip:
+                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
+        },
+        [PlatformType.Flutterwindows]: {
+            name: 'My Windows App',
+            hostname: 'appname',
+            tooltip: 'Your application name'
+        },
+        [PlatformType.Flutterweb]: {
+            name: 'My Web App',
+            hostname: 'localhost',
+            tooltip:
+                'The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required.'
+        }
+    };
+
+    const hostname: Partial<Record<PlatformType, string>> = {
+        [PlatformType.Flutterandroid]: 'Package Name',
+        [PlatformType.Flutterios]: 'Bundle ID',
+        [PlatformType.Flutterlinux]: 'Package Name',
+        [PlatformType.Fluttermacos]: 'Bundle ID',
+        [PlatformType.Flutterweb]: 'Hostname',
+        [PlatformType.Flutterwindows]: 'Package Name'
+    };
+
+    async function createFlutterPlatform() {
+        try {
+            isCreatingPlatform = true;
+            await sdk.forConsole.projects.createPlatform(
+                projectId,
+                platform,
+                $createPlatform.name,
+                $createPlatform.key || undefined,
+                undefined,
+                undefined
+            );
+
+            isPlatformCreated = true;
+            trackEvent(Submit.PlatformCreate, {
+                type: platform
+            });
+        } catch (error) {
+            trackError(error, Submit.PlatformCreate);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            isCreatingPlatform = false;
+        }
     }
 
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Install',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Import',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Build',
-        component: Step4,
-        optional: true
+    async function resetPlatformStore() {
+        createPlatform.reset();
+        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
+    }
+
+    onMount(() => {
+        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`) && isPlatformCreated) {
+                connectionSuccessful = true;
+                unsubscribe();
+            }
+        });
+
+        return () => {
+            unsubscribe();
+        };
     });
 </script>
 
-<WizardWithSteps
-    title="Add a Flutter platform"
-    steps={stepsComponents}
-    on:finish={onFinish}
-    on:exit={onFinish}
-    finalAction="Go to dashboard" />
+<Wizard title="Add Flutter platform" bind:showExitModal confirmExit onExit={resetPlatformStore}>
+    <Form onSubmit={createFlutterPlatform}>
+        <Layout.Stack gap="xxl">
+            <!-- Step One -->
+            <Layout.Stack gap="l" direction="row">
+                {#each Object.entries(platforms) as [key, value]}
+                    <div class="u-width-full-line">
+                        <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
+                        <LabelCard
+                            name={key}
+                            bind:group={platform}
+                            variant="primary"
+                            {value}
+                            title={key} />
+                    </div>
+                {/each}
+            </Layout.Stack>
+
+            <!-- Step Two -->
+            {#if !isPlatformCreated}
+                <Fieldset legend="Details">
+                    <Layout.Stack gap="l" alignItems="flex-end">
+                        <Layout.Stack gap="s">
+                            <InputText
+                                id="name"
+                                label="Name"
+                                placeholder={placeholder[platform].name}
+                                required
+                                bind:value={$createPlatform.name} />
+
+                            <!-- Tooltips on InputText don't work as of now -->
+                            <InputText
+                                id="hostname"
+                                label={hostname[platform]}
+                                placeholder={placeholder[platform].hostname}
+                                tooltip={placeholder[platform].tooltip}
+                                required
+                                bind:value={$createPlatform.key} />
+                        </Layout.Stack>
+
+                        <Button
+                            fullWidthMobile
+                            size="s"
+                            submit
+                            forceShowLoader
+                            submissionLoader={isCreatingPlatform}
+                            disabled={!platform ||
+                                !$createPlatform.name ||
+                                !$createPlatform.key ||
+                                isCreatingPlatform}>
+                            Create platform
+                        </Button>
+                    </Layout.Stack>
+                </Fieldset>
+            {:else}
+                <Layout.Stack gap="xxl">
+                    <Card isTile padding="s" radius="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Icon size="m" icon={IconFlutter} />
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-primary">
+                                    {$createPlatform.name} ({$createPlatform.key})
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Card>
+                </Layout.Stack>
+            {/if}
+
+            <!-- Step Three -->
+            {#if isPlatformCreated}
+                <Fieldset legend="Clone starter">
+                    <Layout.Stack gap="l">
+                        <Typography.Text variant="m-500">
+                            1. Clone the starter kit from GitHub using the terminal, Android Studio or VSCode.
+                        </Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="bash" lineNumbers code={gitCloneCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                        >2. Open the file <InlineCode size="s" code="lib/constants/appwrite.dart" /> and
+                            update the configuration settings.</Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="dart" lineNumbers code={updateConfigCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                        >3. Run the app on a connected device or simulator, then click the <InlineCode
+                            size="s"
+                            code="Send a ping" /> button to verify the setup.</Typography.Text>
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Card padding="l" class="responsive-padding">
+            <Layout.Stack gap="xxl">
+                <Layout.Stack direction="row" justifyContent="center" gap="none">
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#47C5FB"
+                        icon={IconFlutter} />
+
+                    <ConnectionLine status={connectionSuccessful} />
+
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#FD366E"
+                        icon={IconAppwrite} />
+                </Layout.Stack>
+
+                <Layout.Stack direction="row" justifyContent="center" alignItems="center" gap="l">
+                    {#if !connectionSuccessful}
+                        <Spinner />
+                        <Typography.Text variant="m-400">Waiting for connection...</Typography.Text>
+                    {:else}
+                        <!-- cannot apply fade on components -->
+                        <div
+                            in:fade={{ duration: 2500 }}
+                            class="u-flex u-flex-vertical u-cross-center u-gap-8">
+                            <Typography.Title size="m">Congratulations!</Typography.Title>
+
+                            <Typography.Text variant="m-400"
+                            >You connected your app successfully.</Typography.Text>
+                        </div>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button
+            size="s"
+            fullWidthMobile
+            secondary
+            disabled={isCreatingPlatform}
+            href={`${base}/project-${projectId}/overview`}>
+            Go to dashboard
+        </Button>
+    </svelte:fragment>
+</Wizard>
+
+<style lang="scss">
+  :global(.pink2-code-margin-fix pre) {
+    margin: revert;
+  }
+
+  :global(.responsive-padding) {
+    @media (max-width: 768px) {
+      padding: 16px;
+    }
+  }
+</style>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step1.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step1.svelte
deleted file mode 100644
index e9bb56165..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step1.svelte
+++ /dev/null
@@ -1,199 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Pill } from '$lib/elements';
-    import { FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { PlatformType } from '@appwrite.io/console';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-
-    // enum Platform {
-    //     Android = 'flutter-android',
-    //     Ios = 'flutter-ios',
-    //     Linux = 'flutter-linux',
-    //     Macos = 'flutter-macos',
-    //     Windows = 'flutter-windows',
-    //     Web = 'flutter-web'
-    // }
-
-    // function isPlatform(value: string): value is Platform {
-    //     return Object.values(Platform).includes(value as Platform);
-    // }
-
-    let platform: PlatformType = isValueOfStringEnum(PlatformType, $createPlatform.type)
-        ? $createPlatform.type
-        : PlatformType.Flutterandroid;
-
-    const projectId = $page.params.project;
-    const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.io'];
-    const placeholder: Partial<
-        Record<
-            PlatformType,
-            {
-                name: string;
-                hostname: string;
-                tooltip: string;
-            }
-        >
-    > = {
-        [PlatformType.Flutterandroid]: {
-            name: 'My Android App',
-            hostname: 'com.company.appname',
-            tooltip:
-                'Your package name is generally the applicationId in your app-level build.gradle file.'
-        },
-        [PlatformType.Flutterios]: {
-            name: 'My iOS App',
-            hostname: 'com.company.appname',
-            tooltip:
-                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
-        },
-        [PlatformType.Flutterlinux]: {
-            name: 'My Linux App',
-            hostname: 'appname',
-            tooltip: 'Your application name'
-        },
-        [PlatformType.Fluttermacos]: {
-            name: 'My mac OS App',
-            hostname: 'com.company.appname',
-            tooltip:
-                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
-        },
-        [PlatformType.Flutterweb]: {
-            name: 'My Web App',
-            hostname: 'localhost',
-            tooltip:
-                'The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required.'
-        },
-        [PlatformType.Flutterwindows]: {
-            name: 'My Windows App',
-            hostname: 'appname',
-            tooltip: 'Your application name'
-        }
-    };
-
-    const hostname: Partial<Record<PlatformType, string>> = {
-        [PlatformType.Flutterandroid]: 'Package Name',
-        [PlatformType.Flutterios]: 'Bundle ID',
-        [PlatformType.Flutterlinux]: 'Package Name',
-        [PlatformType.Fluttermacos]: 'Bundle ID',
-        [PlatformType.Flutterweb]: 'Hostname',
-        [PlatformType.Flutterwindows]: 'Package Name'
-    };
-
-    async function beforeSubmit() {
-        if ($createPlatform.$id) {
-            await sdk.forConsole.projects.deletePlatform(projectId, $createPlatform.$id);
-        }
-
-        const response = await sdk.forConsole.projects.createPlatform(
-            projectId,
-            platform,
-            $createPlatform.name,
-            platform !== PlatformType.Flutterweb ? $createPlatform.key : undefined,
-            undefined,
-            platform === PlatformType.Flutterweb ? $createPlatform.hostname : undefined
-        );
-
-        trackEvent(Submit.PlatformCreate, {
-            type: platform
-        });
-
-        $createPlatform.$id = response.$id;
-        $createPlatform.type = platform;
-    }
-
-    $: registee = {
-        [PlatformType.Flutterandroid]: 'Package name',
-        [PlatformType.Flutterios]: 'Bundle ID',
-        [PlatformType.Flutterlinux]: 'Package name',
-        [PlatformType.Fluttermacos]: 'Bundle ID',
-        [PlatformType.Flutterwindows]: 'Package name',
-        [PlatformType.Flutterweb]: 'Hostname'
-    }[platform];
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">{registee} registration</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Flutterandroid)}
-                selected={platform === PlatformType.Flutterandroid}>
-                Android
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Flutterios)}
-                selected={platform === PlatformType.Flutterios}>
-                iOS
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Flutterlinux)}
-                selected={platform === PlatformType.Flutterlinux}>
-                Linux
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Fluttermacos)}
-                selected={platform === PlatformType.Fluttermacos}>
-                macOS
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Flutterwindows)}
-                selected={platform === PlatformType.Flutterwindows}>
-                Windows
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Flutterweb)}
-                selected={platform === PlatformType.Flutterweb}>
-                Web
-            </Pill>
-        </div>
-    </svelte:fragment>
-
-    <FormList isCommonSection>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder={placeholder[platform].name}
-            required
-            bind:value={$createPlatform.name} />
-        {#if platform === PlatformType.Flutterweb}
-            <div>
-                <InputText
-                    id="hostname"
-                    label={hostname[platform]}
-                    placeholder={placeholder[platform].hostname}
-                    tooltip={placeholder[platform].tooltip}
-                    required
-                    bind:value={$createPlatform.hostname} />
-
-                <div class="u-flex u-gap-16 u-margin-block-start-8">
-                    {#each suggestions as suggestion}
-                        <Pill
-                            button
-                            selected={$createPlatform.hostname === suggestion}
-                            on:click={() => ($createPlatform.hostname = suggestion)}>
-                            {suggestion}
-                        </Pill>
-                    {/each}
-                </div>
-            </div>
-        {:else}
-            <InputText
-                id="key"
-                label={hostname[platform]}
-                placeholder={placeholder[platform].hostname}
-                tooltip={placeholder[platform].tooltip}
-                required
-                bind:value={$createPlatform.key} />
-        {/if}
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step2.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step2.svelte
deleted file mode 100644
index 27d4667f3..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-    import { Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { versions } from '../store';
-
-    const example1 = `dependencies:
-  appwrite: ^${$versions['client-flutter']}`;
-    const example2 = `flutter pub add appwrite`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Install</svelte:fragment>
-
-    <p>
-        Add Appwrite SDK to your package's <code class="inline-code">pubspec.yaml</code> file. You can
-        view an example here.
-    </p>
-    <Code label="YAML" language="yml" code={example1} withCopy />
-    <p class="common-section">
-        You can also install the SDK using the Dart package manager from your terminal.
-    </p>
-    <div class="u-margin-block-start-16">
-        <Code label="Bash" language="sh" code={example2} withCopy noMargin />
-    </div>
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step3.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step3.svelte
deleted file mode 100644
index 2a0a1b97f..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step3.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts">
-    import { Alert, Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { isCloud } from '$lib/system';
-    import { sdk } from '$lib/stores/sdk';
-    import Id from '$lib/components/id.svelte';
-
-    const { endpoint, project } = sdk.forProject.client.config;
-    const code = `import 'package:appwrite/appwrite.dart';
-
-Client client = Client();
-${
-    isCloud
-        ? `client.setProject('${project}');`
-        : `client
-    .setEndpoint('${endpoint}')
-    .setProject('${project}')
-    .setSelfSigned(status: true); // For self signed certificates, only use for development;`
-}`;
-
-    let showAlert = true;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Initialize</svelte:fragment>
-
-    <h2 class="heading-level-7">Initialize your SDK</h2>
-    <p data-private>
-        Initialize your SDK by pointing the client to your Appwrite project using your
-        <Id value={project}>Project ID</Id>
-    </p>
-    <div class="u-margin-block-start-16">
-        <Code
-            label="Flutter SDK"
-            labelIcon="flutter"
-            language="dart"
-            {code}
-            withCopy
-            withLineNumbers
-            noMargin />
-    </div>
-    <p class="common-section">
-        Before sending any API calls to your new Appwrite project, make sure your device or emulator
-        has network access to your Appwrite project's hostname or IP address.
-    </p>
-    {#if showAlert && !isCloud}
-        <div class="common-section">
-            <Alert type="info" on:dismiss={() => (showAlert = false)}>
-                <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment>
-                When connecting to a locally hosted Appwrite project from an emulator or a mobile device,
-                you should use the private IP of the device running your Appwrite project as the hostname
-                of the endpoint instead of localhost. You can also use a service like ngrok to proxy
-                the Appwrite server.
-            </Alert>
-        </div>
-    {/if}
-</WizardStep>

From 244af872c29ffafaddc958e22172ea5aa1608426 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 14:20:35 +0530
Subject: [PATCH 12/18] fix: import paths.

---
 .../overview/platforms/createAndroid.svelte                 | 4 ++--
 .../project-[project]/overview/platforms/createApple.svelte | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index c00652739..0d53be27d 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -22,8 +22,8 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
-    import OnboardingPlatformCard from '$routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte';
-    import ConnectionLine from '$routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte';
+    import ConnectionLine from './components/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
 
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
index 0a5b7a3e9..7c56a1048 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
@@ -22,8 +22,8 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
-    import OnboardingPlatformCard from '$routes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte';
-    import ConnectionLine from '$routes/(console)/project-[project]/overview/platforms/components/ConnectionLine.svelte';
+    import ConnectionLine from './components/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
     import { app } from '$lib/stores/app';
@@ -44,7 +44,7 @@
 APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
         `;
 
-    let platform: PlatformType | null = null;
+    let platform: PlatformType = PlatformType.Appleios;
 
     let platforms: { [key: string]: PlatformType } = {
         iOS: PlatformType.Appleios,

From 0985f3997996bf3a91d140ab3aed20e780c4bada Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 14:36:47 +0530
Subject: [PATCH 13/18] new: react native onboarding flow.

---
 .../platforms/createReactNative.svelte        | 320 ++++++++++++++++--
 .../wizard/react-native/step1.svelte          | 106 ------
 .../wizard/react-native/step2.svelte          |  13 -
 .../wizard/react-native/step3.svelte          |  58 ----
 4 files changed, 284 insertions(+), 213 deletions(-)
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step1.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step2.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
index 1751468bf..8864632a9 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
@@ -1,47 +1,295 @@
 <script lang="ts">
-    import { WizardWithSteps } from '$lib/layout';
+    import { Wizard } from '$lib/layout';
     import { invalidate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
     import { createPlatform } from './wizard/store';
-    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
-    import Step1 from './wizard/react-native/step1.svelte';
-    import Step2 from './wizard/react-native/step2.svelte';
-    import Step3 from './wizard/react-native/step3.svelte';
-    import Step4 from './wizard/step4.svelte';
     import { Dependencies } from '$lib/constants';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        Spinner
+    } from '@appwrite.io/pink-svelte';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { IconReact, IconAppwrite } from '@appwrite.io/pink-icons-svelte';
+    import { Card } from '$lib/components';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { fade } from 'svelte/transition';
+    import ConnectionLine from './components/ConnectionLine.svelte';
+    import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
+    import { PlatformType } from '@appwrite.io/console';
+    import { isCloud } from '$lib/system';
+    import { LabelCard } from '$lib/components';
 
-    async function onFinish() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
+    let showExitModal = false;
+    let isPlatformCreated = false;
+    let isCreatingPlatform = false;
+    let connectionSuccessful = false;
+    const projectId = $page.params.project;
 
-        createPlatform.reset();
-        wizard.hide();
+    const gitCloneCode =
+        '\ngit clone https://github.com/appwrite/starter-for-react-native\ncd starter-for-react-native\n';
+
+    const updateConfigCode = isCloud
+        ? `const APPWRITE_PROJECT_ID = "${projectId}";`
+        : `const APPWRITE_PROJECT_ID = "${projectId}";
+const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
+        `;
+
+    let platform: PlatformType = PlatformType.Reactnativeandroid;
+
+    let platforms: { [key: string]: PlatformType } = {
+        Android: PlatformType.Reactnativeandroid,
+        iOS: PlatformType.Reactnativeios
+    };
+
+    const placeholder: Partial<
+        Record<
+            PlatformType,
+            {
+                name: string;
+                hostname: string;
+                tooltip: string;
+            }
+        >
+    > = {
+        [PlatformType.Reactnativeandroid]: {
+            name: 'My Android App',
+            hostname: 'com.company.appname',
+            tooltip:
+                'Your package name is generally the applicationId in your app-level build.gradle file.'
+        },
+        [PlatformType.Reactnativeios]: {
+            name: 'My iOS App',
+            hostname: 'com.company.appname',
+            tooltip:
+                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
+        }
+    };
+
+    const hostname: Partial<Record<PlatformType, string>> = {
+        [PlatformType.Reactnativeandroid]: 'Package Name',
+        [PlatformType.Reactnativeios]: 'Bundle ID'
+    };
+
+    async function createFlutterPlatform() {
+        try {
+            isCreatingPlatform = true;
+            await sdk.forConsole.projects.createPlatform(
+                projectId,
+                platform,
+                $createPlatform.name,
+                $createPlatform.key || undefined,
+                undefined,
+                undefined
+            );
+
+            isPlatformCreated = true;
+            trackEvent(Submit.PlatformCreate, {
+                type: platform
+            });
+        } catch (error) {
+            trackError(error, Submit.PlatformCreate);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        } finally {
+            isCreatingPlatform = false;
+        }
     }
 
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Install',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Import',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Build',
-        component: Step4,
-        optional: true
+    async function resetPlatformStore() {
+        createPlatform.reset();
+        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
+    }
+
+    onMount(() => {
+        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
+            if (response.events.includes(`projects.${projectId}.ping`) && isPlatformCreated) {
+                connectionSuccessful = true;
+                unsubscribe();
+            }
+        });
+
+        return () => {
+            unsubscribe();
+        };
     });
 </script>
 
-<WizardWithSteps
-    title="Add a React Native platform"
-    steps={stepsComponents}
-    on:finish={onFinish}
-    on:exit={onFinish}
-    finalAction="Go to dashboard" />
+<Wizard
+    title="Add React Native platform"
+    bind:showExitModal
+    confirmExit
+    onExit={resetPlatformStore}>
+    <Form onSubmit={createFlutterPlatform}>
+        <Layout.Stack gap="xxl">
+            <!-- Step One -->
+            <Layout.Stack gap="l" direction="row">
+                {#each Object.entries(platforms) as [key, value]}
+                    <div class="u-width-full-line">
+                        <!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
+                        <LabelCard
+                            name={key}
+                            bind:group={platform}
+                            variant="primary"
+                            {value}
+                            title={key} />
+                    </div>
+                {/each}
+            </Layout.Stack>
+
+            <!-- Step Two -->
+            {#if !isPlatformCreated}
+                <Fieldset legend="Details">
+                    <Layout.Stack gap="l" alignItems="flex-end">
+                        <Layout.Stack gap="s">
+                            <InputText
+                                id="name"
+                                label="Name"
+                                placeholder={placeholder[platform].name}
+                                required
+                                bind:value={$createPlatform.name} />
+
+                            <!-- Tooltips on InputText don't work as of now -->
+                            <InputText
+                                id="hostname"
+                                label={hostname[platform]}
+                                placeholder={placeholder[platform].hostname}
+                                tooltip={placeholder[platform].tooltip}
+                                required
+                                bind:value={$createPlatform.key} />
+                        </Layout.Stack>
+
+                        <Button
+                            fullWidthMobile
+                            size="s"
+                            submit
+                            forceShowLoader
+                            submissionLoader={isCreatingPlatform}
+                            disabled={!platform ||
+                                !$createPlatform.name ||
+                                !$createPlatform.key ||
+                                isCreatingPlatform}>
+                            Create platform
+                        </Button>
+                    </Layout.Stack>
+                </Fieldset>
+            {:else}
+                <Layout.Stack gap="xxl">
+                    <Card isTile padding="s" radius="s">
+                        <Layout.Stack
+                            direction="row"
+                            justifyContent="space-between"
+                            alignItems="center"
+                            gap="xs">
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Icon size="m" icon={IconReact} />
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--color-fgcolor-neutral-primary">
+                                    {$createPlatform.name} ({$createPlatform.key})
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Card>
+                </Layout.Stack>
+            {/if}
+
+            <!-- Step Three -->
+            {#if isPlatformCreated}
+                <Fieldset legend="Clone starter">
+                    <Layout.Stack gap="l">
+                        <Typography.Text variant="m-500">
+                            1. Clone the starter kit from GitHub using the terminal or VSCode.
+                        </Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="bash" lineNumbers code={gitCloneCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >2. Open the file <InlineCode
+                                size="s"
+                                code="lib/constants/appwrite.js" /> and update the configuration settings.</Typography.Text>
+
+                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                        <div class="pink2-code-margin-fix">
+                            <Code lang="javascript" lineNumbers code={updateConfigCode} />
+                        </div>
+
+                        <Typography.Text variant="m-500"
+                            >3. Run the app on a connected device or simulator, then click the <InlineCode
+                                size="s"
+                                code="Send a ping" /> button to verify the setup.</Typography.Text>
+                    </Layout.Stack>
+                </Fieldset>
+            {/if}
+        </Layout.Stack>
+    </Form>
+    <svelte:fragment slot="aside">
+        <Card padding="l" class="responsive-padding">
+            <Layout.Stack gap="xxl">
+                <Layout.Stack direction="row" justifyContent="center" gap="none">
+                    <OnboardingPlatformCard iconSize={2.526} iconColor="#61DBFB" icon={IconReact} />
+
+                    <ConnectionLine status={connectionSuccessful} />
+
+                    <OnboardingPlatformCard
+                        iconSize={2.526}
+                        iconColor="#FD366E"
+                        icon={IconAppwrite} />
+                </Layout.Stack>
+
+                <Layout.Stack direction="row" justifyContent="center" alignItems="center" gap="l">
+                    {#if !connectionSuccessful}
+                        <Spinner />
+                        <Typography.Text variant="m-400">Waiting for connection...</Typography.Text>
+                    {:else}
+                        <!-- cannot apply fade on components -->
+                        <div
+                            in:fade={{ duration: 2500 }}
+                            class="u-flex u-flex-vertical u-cross-center u-gap-8">
+                            <Typography.Title size="m">Congratulations!</Typography.Title>
+
+                            <Typography.Text variant="m-400"
+                                >You connected your app successfully.</Typography.Text>
+                        </div>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card>
+    </svelte:fragment>
+
+    <svelte:fragment slot="footer">
+        <Button
+            size="s"
+            fullWidthMobile
+            secondary
+            disabled={isCreatingPlatform}
+            href={`${base}/project-${projectId}/overview`}>
+            Go to dashboard
+        </Button>
+    </svelte:fragment>
+</Wizard>
+
+<style lang="scss">
+    :global(.pink2-code-margin-fix pre) {
+        margin: revert;
+    }
+
+    :global(.responsive-padding) {
+        @media (max-width: 768px) {
+            padding: 16px;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step1.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step1.svelte
deleted file mode 100644
index 77b2daf34..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step1.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Pill } from '$lib/elements';
-    import { FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { PlatformType } from '@appwrite.io/console';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-
-    let platform: PlatformType = isValueOfStringEnum(PlatformType, $createPlatform.type)
-        ? $createPlatform.type
-        : PlatformType.Reactnativeandroid;
-
-    const projectId = $page.params.project;
-    const placeholder: Partial<
-        Record<
-            PlatformType,
-            {
-                name: string;
-                hostname: string;
-                tooltip: string;
-            }
-        >
-    > = {
-        [PlatformType.Reactnativeandroid]: {
-            name: 'My Android App',
-            hostname: 'com.company.appname',
-            tooltip:
-                'Your package name is generally the applicationId in your app-level build.gradle file.'
-        },
-        [PlatformType.Reactnativeios]: {
-            name: 'My iOS App',
-            hostname: 'com.company.appname',
-            tooltip:
-                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
-        }
-    };
-
-    const hostname: Partial<Record<PlatformType, string>> = {
-        [PlatformType.Reactnativeandroid]: 'Package Name',
-        [PlatformType.Reactnativeios]: 'Bundle ID'
-    };
-
-    async function beforeSubmit() {
-        if ($createPlatform.$id) {
-            await sdk.forConsole.projects.deletePlatform(projectId, $createPlatform.$id);
-        }
-
-        const response = await sdk.forConsole.projects.createPlatform(
-            projectId,
-            platform,
-            $createPlatform.name,
-            $createPlatform.key
-        );
-
-        trackEvent(Submit.PlatformCreate, {
-            type: platform
-        });
-
-        $createPlatform.$id = response.$id;
-        $createPlatform.type = platform;
-    }
-
-    $: registee = {
-        [PlatformType.Reactnativeandroid]: 'Package name',
-        [PlatformType.Reactnativeios]: 'Bundle ID'
-    }[platform];
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">{registee} registration</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Reactnativeandroid)}
-                selected={platform === PlatformType.Reactnativeandroid}>
-                Android
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = PlatformType.Reactnativeios)}
-                selected={platform === PlatformType.Reactnativeios}>
-                iOS
-            </Pill>
-        </div>
-    </svelte:fragment>
-
-    <FormList isCommonSection>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder={placeholder[platform].name}
-            required
-            bind:value={$createPlatform.name} />
-        <InputText
-            id="key"
-            label={hostname[platform]}
-            placeholder={placeholder[platform].hostname}
-            tooltip={placeholder[platform].tooltip}
-            required
-            bind:value={$createPlatform.key} />
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step2.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step2.svelte
deleted file mode 100644
index 76b2bdb3c..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step2.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-    import { Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-
-    const example = `npx expo install react-native-appwrite react-native-url-polyfill`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Install</svelte:fragment>
-
-    <p>Install the Appwrite SDK for React Native and required dependencies.</p>
-    <Code label="Bash" language="sh" code={example} withCopy />
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte
deleted file mode 100644
index 13d20b5a0..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-    import { Alert, Code } from '$lib/components';
-    import { WizardStep } from '$lib/layout';
-    import { isCloud } from '$lib/system';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import Id from '$lib/components/id.svelte';
-
-    const { endpoint, project } = sdk.forProject.client.config;
-    const code = `import { Client, Account, ID } from 'react-native-appwrite';
-
-const client = new Client()${
-        isCloud
-            ? ''
-            : `
-    .setEndpoint('${endpoint}')`
-    }
-    .setProject('${project}')
-    .setPlatform('${$createPlatform.key}');
-`;
-
-    let showAlert = true;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Initialize</svelte:fragment>
-
-    <h2 class="heading-level-7">Initialize your SDK</h2>
-    <p data-private>
-        Initialize your SDK by pointing the client to your Appwrite project using your <Id
-            value={project}>Project ID</Id>
-    </p>
-    <div class="u-margin-block-start-16">
-        <Code
-            label="React Native"
-            labelIcon="code"
-            language="js"
-            {code}
-            withCopy
-            withLineNumbers
-            noMargin />
-    </div>
-    <p class="common-section">
-        Before sending any API calls to your new Appwrite project, make sure your device or emulator
-        has network access to your Appwrite project's hostname or IP address.
-    </p>
-    {#if showAlert && !isCloud}
-        <div class="common-section">
-            <Alert type="info" on:dismiss={() => (showAlert = false)}>
-                <svelte:fragment slot="title">For self-hosted solutions</svelte:fragment>
-                When connecting to a locally hosted Appwrite project from an emulator or a mobile device,
-                you should use the private IP of the device running your Appwrite project as the hostname
-                of the endpoint instead of localhost. You can also use a service like ngrok to proxy
-                the Appwrite server.
-            </Alert>
-        </div>
-    {/if}
-</WizardStep>

From b542e62ba416377f1565d2e62ace5d6ba42867a0 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 14:36:56 +0530
Subject: [PATCH 14/18] ran: formatter.

---
 .../overview/platforms/createFlutter.svelte   | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
index 5f3ce1178..f5f6b096d 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
@@ -235,7 +235,8 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
                 <Fieldset legend="Clone starter">
                     <Layout.Stack gap="l">
                         <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal, Android Studio or VSCode.
+                            1. Clone the starter kit from GitHub using the terminal, Android Studio
+                            or VSCode.
                         </Typography.Text>
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
@@ -244,8 +245,9 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
                         </div>
 
                         <Typography.Text variant="m-500"
-                        >2. Open the file <InlineCode size="s" code="lib/constants/appwrite.dart" /> and
-                            update the configuration settings.</Typography.Text>
+                            >2. Open the file <InlineCode
+                                size="s"
+                                code="lib/constants/appwrite.dart" /> and update the configuration settings.</Typography.Text>
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
                         <div class="pink2-code-margin-fix">
@@ -253,9 +255,9 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
                         </div>
 
                         <Typography.Text variant="m-500"
-                        >3. Run the app on a connected device or simulator, then click the <InlineCode
-                            size="s"
-                            code="Send a ping" /> button to verify the setup.</Typography.Text>
+                            >3. Run the app on a connected device or simulator, then click the <InlineCode
+                                size="s"
+                                code="Send a ping" /> button to verify the setup.</Typography.Text>
                     </Layout.Stack>
                 </Fieldset>
             {/if}
@@ -290,7 +292,7 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
                             <Typography.Title size="m">Congratulations!</Typography.Title>
 
                             <Typography.Text variant="m-400"
-                            >You connected your app successfully.</Typography.Text>
+                                >You connected your app successfully.</Typography.Text>
                         </div>
                     {/if}
                 </Layout.Stack>
@@ -311,13 +313,13 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
 </Wizard>
 
 <style lang="scss">
-  :global(.pink2-code-margin-fix pre) {
-    margin: revert;
-  }
+    :global(.pink2-code-margin-fix pre) {
+        margin: revert;
+    }
 
-  :global(.responsive-padding) {
-    @media (max-width: 768px) {
-      padding: 16px;
+    :global(.responsive-padding) {
+        @media (max-width: 768px) {
+            padding: 16px;
+        }
     }
-  }
 </style>

From 9d4e7a407be7a36a408bb6f6a0235efb372d6619 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 14:39:47 +0530
Subject: [PATCH 15/18] update: better projects/platform dependency updates.

---
 .../overview/platforms/createAndroid.svelte                 | 5 ++++-
 .../project-[project]/overview/platforms/createApple.svelte | 5 ++++-
 .../overview/platforms/createFlutter.svelte                 | 5 ++++-
 .../overview/platforms/createReactNative.svelte             | 6 +++++-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index 0d53be27d..518c6b9e2 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -58,6 +58,10 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
             trackEvent(Submit.PlatformCreate, {
                 type: 'android'
             });
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -71,7 +75,6 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
 
     async function resetPlatformStore() {
         createPlatform.reset();
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
     }
 
     onMount(() => {
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
index 7c56a1048..11f553b3a 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
@@ -69,6 +69,10 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
             trackEvent(Submit.PlatformCreate, {
                 type: platform
             });
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -82,7 +86,6 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
 
     async function resetPlatformStore() {
         createPlatform.reset();
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
     }
 
     onMount(() => {
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
index f5f6b096d..5bc9a2487 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
@@ -125,6 +125,10 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
             trackEvent(Submit.PlatformCreate, {
                 type: platform
             });
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -138,7 +142,6 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
 
     async function resetPlatformStore() {
         createPlatform.reset();
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
     }
 
     onMount(() => {
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
index 8864632a9..e57b5a9a8 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
@@ -95,6 +95,11 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
             trackEvent(Submit.PlatformCreate, {
                 type: platform
             });
+
+            await Promise.all([
+                invalidate(Dependencies.PROJECT),
+                invalidate(Dependencies.PLATFORMS)
+            ]);
         } catch (error) {
             trackError(error, Submit.PlatformCreate);
             addNotification({
@@ -108,7 +113,6 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
 
     async function resetPlatformStore() {
         createPlatform.reset();
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
     }
 
     onMount(() => {

From 94a06f6ec5a2f6ecb32ded9fee93f7c2222629f3 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 23 Jan 2025 14:41:45 +0530
Subject: [PATCH 16/18] update: better store reset.

---
 .../overview/platforms/createAndroid.svelte                | 3 ++-
 .../overview/platforms/createApple.svelte                  | 3 ++-
 .../overview/platforms/createFlutter.svelte                | 3 ++-
 .../overview/platforms/createReactNative.svelte            | 7 ++-----
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index 518c6b9e2..928d56810 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -87,11 +87,12 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
 
         return () => {
             unsubscribe();
+            resetPlatformStore();
         };
     });
 </script>
 
-<Wizard title="Add Android platform" bind:showExitModal confirmExit onExit={resetPlatformStore}>
+<Wizard title="Add Android platform" bind:showExitModal confirmExit>
     <Form onSubmit={createAndroidPlatform}>
         <Layout.Stack gap="xxl">
             <!-- Step One -->
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
index 11f553b3a..011435d21 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
@@ -98,11 +98,12 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
 
         return () => {
             unsubscribe();
+            resetPlatformStore();
         };
     });
 </script>
 
-<Wizard title="Add Apple platform" bind:showExitModal confirmExit onExit={resetPlatformStore}>
+<Wizard title="Add Apple platform" bind:showExitModal confirmExit>
     <Form onSubmit={createApplePlatform}>
         <Layout.Stack gap="xxl">
             <!-- Step One -->
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
index 5bc9a2487..adbd189a9 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
@@ -154,11 +154,12 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
 
         return () => {
             unsubscribe();
+            resetPlatformStore();
         };
     });
 </script>
 
-<Wizard title="Add Flutter platform" bind:showExitModal confirmExit onExit={resetPlatformStore}>
+<Wizard title="Add Flutter platform" bind:showExitModal confirmExit>
     <Form onSubmit={createFlutterPlatform}>
         <Layout.Stack gap="xxl">
             <!-- Step One -->
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
index e57b5a9a8..325b6b3c5 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
@@ -125,15 +125,12 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
 
         return () => {
             unsubscribe();
+            resetPlatformStore();
         };
     });
 </script>
 
-<Wizard
-    title="Add React Native platform"
-    bind:showExitModal
-    confirmExit
-    onExit={resetPlatformStore}>
+<Wizard title="Add React Native platform" bind:showExitModal confirmExit>
     <Form onSubmit={createFlutterPlatform}>
         <Layout.Stack gap="xxl">
             <!-- Step One -->

From d8b6d061978b7a6bddda593f560c58b5c2a5e3e2 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 24 Jan 2025 19:51:08 +0530
Subject: [PATCH 17/18] remove: web onboarding flow, add: todo for Ernst.

---
 .../project-[project]/overview/onboard.svelte |  4 +-
 .../overview/platforms/+page.svelte           | 12 +--
 .../overview/platforms/createWeb.svelte       | 47 -----------
 .../platforms/wizard/web/step1.svelte         | 84 -------------------
 .../platforms/wizard/web/step2.svelte         | 64 --------------
 .../platforms/wizard/web/step3.svelte         | 38 ---------
 6 files changed, 6 insertions(+), 243 deletions(-)
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/web/step1.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/web/step2.svelte
 delete mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/web/step3.svelte

diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index 054941161..fd762bd0e 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboard.svelte
@@ -73,7 +73,9 @@
                     <div class="grid">
                         <button
                             class="onboarding-card platform-card"
-                            on:click={() => addPlatform(0)}>
+                            on:click={() => {
+                                // TODO: @ernst web starter > sites websites/starter flow
+                            }}>
                             <img
                                 src={$app.themeInUse === 'dark'
                                     ? PlatformWebImgSourceDark
diff --git a/src/routes/(console)/project-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[project]/overview/platforms/+page.svelte
index a3c2d6bfd..ccb38ad78 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/+page.svelte
@@ -5,7 +5,6 @@
     import CreateAndroid from './createAndroid.svelte';
     import CreateApple from './createApple.svelte';
     import CreateFlutter from './createFlutter.svelte';
-    import CreateWeb from './createWeb.svelte';
     import CreateReactNative from './createReactNative.svelte';
     import { versions } from './wizard/store';
 
@@ -23,7 +22,6 @@
     }
 
     const platforms = {
-        [Platform.Web]: CreateWeb,
         [Platform.Flutter]: CreateFlutter,
         [Platform.Android]: CreateAndroid,
         [Platform.Apple]: CreateApple,
@@ -56,7 +54,6 @@
         'flutter-macos' = 'macOS',
         'flutter-windows' = 'Windows',
         'flutter-web' = 'Web',
-        'web' = 'Web',
         'react-native-android' = 'Android',
         'react-native-ios' = 'iOS'
     }
@@ -73,8 +70,6 @@
             return 'color/apple';
         } else if (platform.includes('android')) {
             return 'color/android';
-        } else if (platform.includes('web')) {
-            return 'grayscale/code';
         } else {
             return 'unknown';
         }
@@ -95,7 +90,6 @@
             </Button>
         {/if}
         <svelte:fragment slot="list">
-            <DropListItem on:click={() => addPlatform(Platform.Web)}>Web app</DropListItem>
             <DropListItem on:click={() => addPlatform(Platform.Flutter)}>Flutter app</DropListItem>
             <DropListItem on:click={() => addPlatform(Platform.Android)}>Android app</DropListItem>
             <DropListItem on:click={() => addPlatform(Platform.Apple)}>Apple app</DropListItem>
@@ -169,9 +163,6 @@
                             </Button>
                         {/if}
                         <svelte:fragment slot="list">
-                            <DropListItem on:click={() => addPlatform(Platform.Web)}>
-                                Web
-                            </DropListItem>
                             <DropListItem on:click={() => addPlatform(Platform.Flutter)}>
                                 Flutter
                             </DropListItem>
@@ -181,6 +172,9 @@
                             <DropListItem on:click={() => addPlatform(Platform.Apple)}>
                                 Apple
                             </DropListItem>
+                            <DropListItem on:click={() => addPlatform(Platform.ReactNative)}>
+                                React Native
+                            </DropListItem>
                         </svelte:fragment>
                     </DropList>
                 </div>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
deleted file mode 100644
index ca38a161f..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-    import { WizardWithSteps } from '$lib/layout';
-    import { invalidate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
-    import { createPlatform } from './wizard/store';
-    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
-    import Step1 from './wizard/web/step1.svelte';
-    import Step2 from './wizard/web/step2.svelte';
-    import Step3 from './wizard/web/step3.svelte';
-    import Step4 from './wizard/step4.svelte';
-    import { Dependencies } from '$lib/constants';
-
-    async function onFinish() {
-        await Promise.all([invalidate(Dependencies.PROJECT), invalidate(Dependencies.PLATFORMS)]);
-
-        createPlatform.reset();
-        wizard.hide();
-    }
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Settings',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Install',
-        component: Step2,
-        optional: true
-    });
-    stepsComponents.set(3, {
-        label: 'Import',
-        component: Step3,
-        optional: true
-    });
-    stepsComponents.set(4, {
-        label: 'Build',
-        component: Step4,
-        optional: true
-    });
-</script>
-
-<WizardWithSteps
-    title="Add a web platform"
-    steps={stepsComponents}
-    on:finish={onFinish}
-    on:exit={onFinish}
-    finalAction="Go to dashboard" />
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/web/step1.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/web/step1.svelte
deleted file mode 100644
index 661b2472d..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/web/step1.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Alert } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { FormList, InputText } from '$lib/elements/forms';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { createPlatform } from '../store';
-    import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { PlatformType } from '@appwrite.io/console';
-
-    const projectId = $page.params.project;
-    const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.io'];
-
-    async function beforeSubmit() {
-        if ($createPlatform.$id) {
-            await sdk.forConsole.projects.updatePlatform(
-                projectId,
-                $createPlatform.$id,
-                $createPlatform.name,
-                $createPlatform.key || undefined,
-                $createPlatform.store || undefined,
-                $createPlatform.hostname || undefined
-            );
-
-            return;
-        }
-
-        const platform = await sdk.forConsole.projects.createPlatform(
-            projectId,
-            PlatformType.Web,
-            $createPlatform.name,
-            undefined,
-            undefined,
-            $createPlatform.hostname || undefined
-        );
-
-        trackEvent(Submit.PlatformCreate, {
-            type: 'web'
-        });
-
-        $createPlatform.$id = platform.$id;
-    }
-</script>
-
-<WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Hostname registration</svelte:fragment>
-    <FormList>
-        <InputText
-            id="name"
-            label="Name"
-            placeholder="My Web App"
-            required
-            bind:value={$createPlatform.name} />
-        <div>
-            <InputText
-                id="hostname"
-                label="Hostname"
-                placeholder="localhost"
-                tooltip="The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required."
-                required
-                bind:value={$createPlatform.hostname} />
-            <div class="u-flex u-gap-16 u-margin-block-start-8">
-                {#each suggestions as suggestion}
-                    <Pill
-                        button
-                        selected={$createPlatform.hostname === suggestion}
-                        on:click={() => ($createPlatform.hostname = suggestion)}>
-                        {suggestion}
-                    </Pill>
-                {/each}
-            </div>
-        </div>
-        <Alert type="warning">
-            Using wildcard hostnames in production can become insecure. You can read about
-            <a
-                href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">
-                Cross-Origin Resource Sharing (CORS)</a> for more information.
-        </Alert>
-    </FormList>
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/web/step2.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/web/step2.svelte
deleted file mode 100644
index 9c21ccc48..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-    import { versions } from '../store';
-
-    import { Code } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { WizardStep } from '$lib/layout';
-
-    enum Method {
-        NPM,
-        CDN
-    }
-
-    let method: Method = Method.NPM;
-
-    const example1 = `import { Client } from 'appwrite';`;
-    const example2 =
-        `<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}"></script` +
-        `>\n` +
-        `<script>
-    const { Client } = Appwrite;
-</script` +
-        `>`; // Prevent svelte from processing the closing script tag
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Install</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose your preferred method of installation
-        <div class="u-flex u-gap-16 u-margin-block-start-8">
-            <Pill button on:click={() => (method = Method.NPM)} selected={method === Method.NPM}>
-                NPM
-            </Pill>
-            <Pill button on:click={() => (method = Method.CDN)} selected={method === Method.CDN}>
-                CDN
-            </Pill>
-        </div>
-    </svelte:fragment>
-    {#if method === Method.NPM}
-        <p>
-            Use <a
-                href="https://npmjs.com/package/appwrite"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">NPM (node package manager)</a> from your command line to add Appwrite SDK
-            to your project.
-        </p>
-        <Code label="Bash" language="sh" code="npm install appwrite" withCopy />
-        <p class="common-section">
-            If you're using a bundler like <a
-                href="https://vitejs.dev"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">Vite</a>
-            or
-            <a href="https://rollupjs.org" target="_blank" rel="noopener noreferrer" class="link"
-                >Rollup</a
-            >, import Appwrite as a module.
-        </p>
-        <Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
-    {:else if method === Method.CDN}
-        <p>Add the following script tags to install Appwrite with a CDN.</p>
-        <Code label="HTML" language="html" code={example2} withCopy />
-    {/if}
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/web/step3.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/web/step3.svelte
deleted file mode 100644
index e9b820208..000000000
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/web/step3.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import { Code } from '$lib/components';
-    import Id from '$lib/components/id.svelte';
-    import { WizardStep } from '$lib/layout';
-    import { sdk } from '$lib/stores/sdk';
-    import { isCloud } from '$lib/system';
-
-    const { endpoint, project } = sdk.forProject.client.config;
-    const code = `const client = new Client();
-${
-    isCloud
-        ? `client.setProject('${project}');`
-        : `client
-    .setEndpoint('${endpoint}')
-    .setProject('${project}');`
-}`;
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Initialize SDK</svelte:fragment>
-
-    <h2 class="heading-level-7">Initialize your SDK</h2>
-    <p>
-        Initialize your SDK by pointing the client to your Appwrite project using your <Id
-            value={project}>Project ID</Id
-        >.
-    </p>
-    <div class="u-margin-block-start-16">
-        <Code
-            label="Web SDK"
-            labelIcon="code"
-            language="js"
-            {code}
-            withCopy
-            withLineNumbers
-            noMargin />
-    </div>
-</WizardStep>

From a759d4dd77f81c1cc0912d6d48efe78a5c701a2f Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 28 Jan 2025 17:55:14 +0100
Subject: [PATCH 18/18] Changes after conflict

---
 .../project-[project]/overview/onboard.svelte   | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index d700bb299..9aa826934 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboard.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-    import { Button, Step, Link, Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Step, Link, Icon, Layout } from '@appwrite.io/pink-svelte';
     import { addPlatform } from './platforms/+page.svelte';
     import { app } from '$lib/stores/app';
-    import { user } from '$lib/stores/user';
     import { IconArrowRight } from '@appwrite.io/pink-icons-svelte';
     import DatabaseImgSource from './assets/database.png';
     import DatabaseImgSourceDark from './assets/database-dark.png';
@@ -21,10 +20,8 @@
     import PlatformFlutterImgSource from './assets/platform-flutter.png';
     import PlatformFlutterImgSourceDark from './assets/platform-flutter-dark.png';
     import { base } from '$app/paths';
-    import { hasOnboardingDismissed, setHasOnboardingDismissed } from '$lib/helpers/onboarding';
     import Wizard from './keys/wizard.svelte';
     import { wizard } from '$lib/stores/wizard';
-    import { goto } from '$app/navigation';
     import { onMount } from 'svelte';
 
     function createKey() {
@@ -72,7 +69,7 @@
                                 on:click={() => addPlatform(0)}>
                                 <Layout.Stack direction="column" justifyContent="space-between">
                                     <img
-                                        src={$app.themeInUse == 'dark'
+                                        src={$app.themeInUse === 'dark'
                                             ? PlatformWebImgSourceDark
                                             : PlatformWebImgSource}
                                         alt="" />
@@ -94,7 +91,7 @@
                                 on:click={createKey}>
                                 <Layout.Stack direction="column" justifyContent="space-between">
                                     <img
-                                        src={$app.themeInUse == 'dark'
+                                        src={$app.themeInUse === 'dark'
                                             ? PlatformServerImgSourceDark
                                             : PlatformServerImgSource}
                                         alt="" />
@@ -115,7 +112,7 @@
                                 on:click={() => addPlatform(3)}>
                                 <Layout.Stack direction="column" justifyContent="space-between">
                                     <img
-                                        src={$app.themeInUse == 'dark'
+                                        src={$app.themeInUse === 'dark'
                                             ? PlatformIosImgSourceDark
                                             : PlatformIosImgSource}
                                         alt="" />
@@ -209,7 +206,7 @@
                                 href={`${base}/project-${projectId}/databases`}>
                                 <Layout.Stack direction="column" justifyContent="space-between">
                                     <img
-                                        src={$app.themeInUse == 'dark'
+                                        src={$app.themeInUse === 'dark'
                                             ? DatabaseImgSourceDark
                                             : DatabaseImgSource}
                                         alt="" />
@@ -280,7 +277,7 @@
                                     </Layout.Stack>
                                 </div>
                                 <img
-                                    src={$app.themeInUse == 'dark'
+                                    src={$app.themeInUse === 'dark'
                                         ? UsersImgSourceDark
                                         : UsersImgSource}
                                     alt="" />
@@ -289,7 +286,7 @@
                                 <div class="card-content">
                                     <Layout.Stack direction="column" justifyContent="space-between">
                                         <img
-                                            src={$app.themeInUse == 'dark'
+                                            src={$app.themeInUse === 'dark'
                                                 ? DiscordImgSourceDark
                                                 : DiscordImgSource}
                                             class="discord"