From 197ac9a44209f6601c54e559de0a44a22aa445ef Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 12 Oct 2022 18:13:31 +0200
Subject: [PATCH 01/16] feat: inintial wizard for platforms creation

---
 src/lib/components/code.svelte                |  3 +-
 src/lib/layout/wizard.svelte                  |  9 +++
 src/lib/layout/wizardStep.svelte              | 21 +++++-
 src/lib/stores/wizard.ts                      | 11 ++-
 .../overview/platforms/+page.svelte           | 53 +++++++++++---
 .../overview/platforms/create.svelte          | 47 -------------
 .../overview/platforms/createWeb.svelte       | 69 +++++++++++++++++++
 .../overview/platforms/wizard/store.ts        |  8 +++
 .../platforms/wizard/web/step1.svelte         | 57 +++++++++++++++
 .../platforms/wizard/web/step2.svelte         | 56 +++++++++++++++
 .../platforms/wizard/web/step3.svelte         | 25 +++++++
 .../platforms/wizard/web/step4.svelte         | 12 ++++
 12 files changed, 309 insertions(+), 62 deletions(-)
 delete mode 100644 src/routes/console/project-[project]/overview/platforms/create.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/createWeb.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/store.ts
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/web/step4.svelte

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 6f1257529..f36802033 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -4,6 +4,7 @@
     import 'prismjs/components/prism-dart';
     import 'prismjs/components/prism-kotlin';
     import 'prismjs/components/prism-json';
+    import 'prismjs/components/prism-bash';
     import 'prismjs/plugins/autoloader/prism-autoloader';
     import 'prismjs/plugins/line-numbers/prism-line-numbers';
     import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
@@ -12,7 +13,7 @@
 
     export let label: string = null;
     export let code: string;
-    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json';
+    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh';
     export let showLineNumbers = false;
     export let showCopy = false;
 
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 81ad56cfa..d14f930a1 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -30,6 +30,15 @@
     }
 
     function submit() {
+        if ($wizard.interceptor) {
+            try {
+                $wizard.interceptor();
+            } catch (error) {
+                console.log('hold');
+                return;
+            }
+        }
+        wizard.setInterceptor(null);
         if (isLastStep) {
             dispatch('finish');
         } else {
diff --git a/src/lib/layout/wizardStep.svelte b/src/lib/layout/wizardStep.svelte
index e904411b8..1281775b4 100644
--- a/src/lib/layout/wizardStep.svelte
+++ b/src/lib/layout/wizardStep.svelte
@@ -1,10 +1,25 @@
+<script lang="ts">
+    import { wizard } from '$lib/stores/wizard';
+
+    /**
+     * Pass callback that is run before the Form submit, can be canceled with throwing an exception.
+     */
+    export let beforeSubmit: () => void = null;
+
+    if (beforeSubmit) {
+        wizard.setInterceptor(beforeSubmit);
+    }
+</script>
+
 <header class="form-header">
     <h1 class="heading-level-6">
         <slot name="title" />
     </h1>
-    <p>
-        <slot name="subtitle" />
-    </p>
+    {#if $$slots.subtitle}
+        <p>
+            <slot name="subtitle" />
+        </p>
+    {/if}
 </header>
 
 <slot />
diff --git a/src/lib/stores/wizard.ts b/src/lib/stores/wizard.ts
index 88167f4bf..f8f2b8c58 100644
--- a/src/lib/stores/wizard.ts
+++ b/src/lib/stores/wizard.ts
@@ -4,12 +4,14 @@ import { writable } from 'svelte/store';
 export type WizardStore = {
     show: boolean;
     component?: typeof SvelteComponent;
+    interceptor?: () => void;
 };
 
 function createWizardStore() {
     const { subscribe, update } = writable<WizardStore>({
         show: false,
-        component: null
+        component: null,
+        interceptor: null
     });
 
     return {
@@ -21,6 +23,13 @@ function createWizardStore() {
 
                 return n;
             }),
+        setInterceptor: (callback: () => void) => {
+            update((n) => {
+                n.interceptor = callback;
+
+                return n;
+            });
+        },
         hide: () =>
             update((n) => {
                 n.show = false;
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte
index 34eafdce0..7928f1d91 100644
--- a/src/routes/console/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte
@@ -1,23 +1,58 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { GridItem1 } from '$lib/components';
+    import { DropList, DropListItem, GridItem1 } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { wizard } from '$lib/stores/wizard';
     import { project } from '../../store';
-    import Create from './create.svelte';
-
-    let show = false;
+    import CreateWeb from './createWeb.svelte';
 
+    let showDropdown = false;
     const path = `/console/project-${$page.params.project}/overview/platforms`;
+
+    enum Platform {
+        Web,
+        Flutter,
+        Android,
+        Apple
+    }
+
+    const platforms = {
+        [Platform.Web]: CreateWeb,
+        [Platform.Flutter]: CreateWeb,
+        [Platform.Android]: CreateWeb,
+        [Platform.Apple]: CreateWeb
+    };
+
+    function addPlatform(type: Platform) {
+        wizard.start(platforms[type]);
+    }
 </script>
 
 <div class="common-section u-flex u-gap-12">
     <h3 class="heading-level-7">Platforms</h3>
     <span class="u-margin-inline-start-auto">
-        <Button on:click={() => (show = true)}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Add Platform</span>
-        </Button>
+        <DropList
+            bind:show={showDropdown}
+            position="bottom"
+            horizontal="right"
+            arrow={true}
+            arrowPosition="start">
+            <Button on:click={() => (showDropdown = !showDropdown)}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Add platform</span>
+            </Button>
+            <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>
+            </svelte:fragment>
+        </DropList>
     </span>
 </div>
 
@@ -33,5 +68,3 @@
         </GridItem1>
     {/each}
 </div>
-
-<Create bind:show />
diff --git a/src/routes/console/project-[project]/overview/platforms/create.svelte b/src/routes/console/project-[project]/overview/platforms/create.svelte
deleted file mode 100644
index 11c0597f8..000000000
--- a/src/routes/console/project-[project]/overview/platforms/create.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-    import { Modal } from '$lib/components';
-    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { project } from '../../.../../store';
-
-    export let show = false;
-
-    let name: string;
-    let hostname: string;
-
-    async function create() {
-        try {
-            await sdkForConsole.projects.createPlatform(
-                $project.$id,
-                'web',
-                name,
-                undefined,
-                undefined,
-                hostname
-            );
-            name = hostname = null;
-            project.load($project.$id);
-            show = false;
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    }
-</script>
-
-<Form on:submit={create}>
-    <Modal bind:show>
-        <svelte:fragment slot="header">Add Platform</svelte:fragment>
-        <FormList>
-            <InputText id="name" label="Name" bind:value={name} autofocus required />
-            <InputText id="host" label="Hostname" bind:value={hostname} required />
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button submit>Register</Button>
-            <Button secondary on:click={() => (show = false)}>Cancel</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
new file mode 100644
index 000000000..88900348b
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { beforeNavigate } from '$app/navigation';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { page } from '$app/stores';
+    import { addNotification } from '$lib/stores/notifications';
+    import { wizard } from '$lib/stores/wizard';
+    import { createPlatform } from './wizard/store';
+    import { project } from '../../store';
+    import type { WizardStepsType } from '$lib/layout/wizard.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/web/step4.svelte';
+
+    const projectId = $page.params.project;
+
+    const create = async () => {
+        try {
+            await sdkForConsole.projects.createPlatform(
+                projectId,
+                $createPlatform.type,
+                $createPlatform.name,
+                $createPlatform.key ?? undefined,
+                $createPlatform.store ?? undefined,
+                $createPlatform.hostname ?? undefined
+            );
+            addNotification({
+                message: 'Platform has been added',
+                type: 'success'
+            });
+            project.load(projectId);
+            wizard.hide();
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    };
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Register your app',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Get the SDK',
+        component: Step2
+    });
+    stepsComponents.set(3, {
+        label: "Let's get coding",
+        component: Step3
+    });
+    stepsComponents.set(4, {
+        label: 'All set',
+        component: Step4
+    });
+</script>
+
+<Wizard
+    title="Add a Web Project"
+    steps={stepsComponents}
+    on:finish={create}
+    finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/store.ts b/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
new file mode 100644
index 000000000..d12bd38d3
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
@@ -0,0 +1,8 @@
+import type { Models } from '@aw-labs/appwrite-console';
+import { writable } from 'svelte/store';
+
+export const createPlatform = writable<Partial<Models.Platform>>({
+    name: null,
+    hostname: null,
+    type: null
+});
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
new file mode 100644
index 000000000..892eca7bd
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Alert } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { FormList } from '$lib/elements/forms';
+    import InputText from '$lib/elements/forms/inputText.svelte';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createPlatform } from '../store';
+
+    const projectId = $page.params.project;
+
+    async function beforeSubmit() {
+        await sdkForConsole.projects.createPlatform(
+            projectId,
+            'web',
+            $createPlatform.name,
+            undefined,
+            undefined,
+            $createPlatform.hostname
+        );
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">Register your Web app</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"
+                required
+                bind:value={$createPlatform.hostname} />
+            <div class="u-flex u-gap-16 u-margin-block-start-8">
+                {#each ['*.vercel.app', '*.netlify.app', '*.gitpod.app'] as suggestion}
+                    <Pill
+                        button
+                        on:click={() => ($createPlatform.hostname = suggestion)}
+                        selected={$createPlatform.hostname === suggestion}>
+                        {suggestion}
+                    </Pill>
+                {/each}
+            </div>
+        </div>
+        <Alert type="warning">
+            Tip: Avoid using wildcard hostnames in production to keep your project secure. Check out
+            our documentation for more info.
+        </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
new file mode 100644
index 000000000..caa05ddd2
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { Code } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { WizardStep } from '$lib/layout';
+    enum Method {
+        NPM,
+        CDN
+    }
+
+    let method: Method = Method.NPM;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Get the SDK</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.org" target="_blank" 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" showCopy />
+        <p>
+            When you're using a bundler (like <a
+                href="https://vitejs.dev"
+                target="_blank"
+                class="link">Vite</a>
+            or <a href="https://rollupjs.org" target="_blank" class="link">Rollup</a>), import the
+            Appwrite module when you need it:
+        </p>
+        <Code
+            label="Web SDK"
+            language="js"
+            code={`import { Appwrite } from 'appwrite';`}
+            showCopy />
+    {:else if method === Method.CDN}
+        <p>
+            To install with a CDN (content delivery network) add the following scripts to the bottom
+            of your tag, but before you use any Appwrite services:
+        </p>
+        <Code
+            label="HTML"
+            language="html"
+            code={`<script src="https://cdn.jsdelivr.net/npm/appwrite"></script>`}
+            showCopy />
+    {/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
new file mode 100644
index 000000000..a7b5bbf3e
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    const { endpoint, project } = sdkForProject.client.config;
+    const code = `const appwrite = new Appwrite();
+
+appwrite
+    .setEndpoint('${endpoint}')
+    .setProject('${project}');`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+
+    <div class="common-section">
+        <h2 class="heading-level-7">Init your SDK</h2>
+        <p>
+            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
+            which can be found in your project settings page.
+        </p>
+        <Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
+    </div>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step4.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step4.svelte
new file mode 100644
index 000000000..3b74bbf9d
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step4.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { WizardStep } from '$lib/layout';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">You're ready to go 🎉</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Congrats, you've just added your first platform to your Appwrite dashboard! Are you ready to
+        give it a go? Why not add a database to your project, or start uploading files? The choice
+        is up to you.
+    </svelte:fragment>
+</WizardStep>

From e07bb58aa7762322995c54da6a8c2c2a346aecd9 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 12 Oct 2022 21:06:09 +0200
Subject: [PATCH 02/16] feat: add flutter platform

---
 src/lib/components/code.svelte                |   3 +-
 src/lib/elements/forms/formList.svelte        |   6 +-
 src/lib/layout/wizard.svelte                  |  12 +-
 src/lib/layout/wizardStep.svelte              |   2 +-
 src/lib/stores/wizard.ts                      |   4 +-
 .../overview/platforms/+page.svelte           |   3 +-
 .../platforms/[platform]/delete.svelte        |   2 +-
 .../overview/platforms/createFlutter.svelte   |  69 ++++++++
 .../overview/platforms/createWeb.svelte       |   2 +-
 .../platforms/wizard/flutter/step1.svelte     | 167 ++++++++++++++++++
 .../platforms/wizard/flutter/step2.svelte     |  16 ++
 .../platforms/wizard/flutter/step3.svelte     |  40 +++++
 .../platforms/wizard/{web => }/step4.svelte   |   0
 .../overview/platforms/wizard/store.ts        |   2 +-
 .../platforms/wizard/web/step1.svelte         |  27 ++-
 .../platforms/wizard/web/step2.svelte         |   1 +
 16 files changed, 338 insertions(+), 18 deletions(-)
 create mode 100644 src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
 rename src/routes/console/project-[project]/overview/platforms/wizard/{web => }/step4.svelte (100%)

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index f36802033..089e59377 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -5,6 +5,7 @@
     import 'prismjs/components/prism-kotlin';
     import 'prismjs/components/prism-json';
     import 'prismjs/components/prism-bash';
+    import 'prismjs/components/prism-yaml';
     import 'prismjs/plugins/autoloader/prism-autoloader';
     import 'prismjs/plugins/line-numbers/prism-line-numbers';
     import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
@@ -13,7 +14,7 @@
 
     export let label: string = null;
     export let code: string;
-    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh';
+    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml';
     export let showLineNumbers = false;
     export let showCopy = false;
 
diff --git a/src/lib/elements/forms/formList.svelte b/src/lib/elements/forms/formList.svelte
index cdb4bd69b..7a02bc5be 100644
--- a/src/lib/elements/forms/formList.svelte
+++ b/src/lib/elements/forms/formList.svelte
@@ -1,3 +1,7 @@
-<ul class="form-list">
+<script lang="ts">
+    export let isCommonSection = false;
+</script>
+
+<ul class="form-list" class:common-section={isCommonSection}>
     <slot />
 </ul>
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index d14f930a1..f7d7b9b09 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -11,6 +11,7 @@
 <script lang="ts">
     import { Steps } from '$lib/components';
     import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
     import { wizard } from '$lib/stores/wizard';
     import { createEventDispatcher, type SvelteComponent } from 'svelte';
 
@@ -29,15 +30,20 @@
         }
     }
 
-    function submit() {
+    async function submit() {
         if ($wizard.interceptor) {
             try {
-                $wizard.interceptor();
+                console.log($wizard.interceptor);
+                await $wizard.interceptor();
             } catch (error) {
-                console.log('hold');
+                addNotification({
+                    message: error.message,
+                    type: 'error'
+                });
                 return;
             }
         }
+
         wizard.setInterceptor(null);
         if (isLastStep) {
             dispatch('finish');
diff --git a/src/lib/layout/wizardStep.svelte b/src/lib/layout/wizardStep.svelte
index 1281775b4..622f800c2 100644
--- a/src/lib/layout/wizardStep.svelte
+++ b/src/lib/layout/wizardStep.svelte
@@ -4,7 +4,7 @@
     /**
      * Pass callback that is run before the Form submit, can be canceled with throwing an exception.
      */
-    export let beforeSubmit: () => void = null;
+    export let beforeSubmit: () => Promise<void> = null;
 
     if (beforeSubmit) {
         wizard.setInterceptor(beforeSubmit);
diff --git a/src/lib/stores/wizard.ts b/src/lib/stores/wizard.ts
index f8f2b8c58..76602df78 100644
--- a/src/lib/stores/wizard.ts
+++ b/src/lib/stores/wizard.ts
@@ -4,7 +4,7 @@ import { writable } from 'svelte/store';
 export type WizardStore = {
     show: boolean;
     component?: typeof SvelteComponent;
-    interceptor?: () => void;
+    interceptor?: () => Promise<void>;
 };
 
 function createWizardStore() {
@@ -23,7 +23,7 @@ function createWizardStore() {
 
                 return n;
             }),
-        setInterceptor: (callback: () => void) => {
+        setInterceptor: (callback: WizardStore['interceptor']) => {
             update((n) => {
                 n.interceptor = callback;
 
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte
index 7928f1d91..164dd9bda 100644
--- a/src/routes/console/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte
@@ -5,6 +5,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { wizard } from '$lib/stores/wizard';
     import { project } from '../../store';
+    import CreateFlutter from './createFlutter.svelte';
     import CreateWeb from './createWeb.svelte';
 
     let showDropdown = false;
@@ -19,7 +20,7 @@
 
     const platforms = {
         [Platform.Web]: CreateWeb,
-        [Platform.Flutter]: CreateWeb,
+        [Platform.Flutter]: CreateFlutter,
         [Platform.Android]: CreateWeb,
         [Platform.Apple]: CreateWeb
     };
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
index d1bb5d3b4..14c384daf 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
@@ -19,8 +19,8 @@
                 message: `${$platform.name} has been deleted`
             });
             project.load($project.$id);
-            platform.set(null);
             await goto(`${base}/console/project-${$project.$id}/overview/platforms`);
+            platform.set(null);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
new file mode 100644
index 000000000..c48a34905
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { beforeNavigate } from '$app/navigation';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { page } from '$app/stores';
+    import { addNotification } from '$lib/stores/notifications';
+    import { wizard } from '$lib/stores/wizard';
+    import { createPlatform } from './wizard/store';
+    import { project } from '../../store';
+    import type { WizardStepsType } from '$lib/layout/wizard.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';
+
+    const projectId = $page.params.project;
+
+    const create = async () => {
+        try {
+            await sdkForConsole.projects.createPlatform(
+                projectId,
+                $createPlatform.type,
+                $createPlatform.name,
+                $createPlatform.key ?? undefined,
+                $createPlatform.store ?? undefined,
+                $createPlatform.hostname ?? undefined
+            );
+            addNotification({
+                message: 'Platform has been added',
+                type: 'success'
+            });
+            project.load(projectId);
+            wizard.hide();
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    };
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Register your app',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Get the SDK',
+        component: Step2
+    });
+    stepsComponents.set(3, {
+        label: "Let's get coding",
+        component: Step3
+    });
+    stepsComponents.set(4, {
+        label: 'All set',
+        component: Step4
+    });
+</script>
+
+<Wizard
+    title="Add a Flutter Project"
+    steps={stepsComponents}
+    on:finish={create}
+    finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
index 88900348b..e6a92124e 100644
--- a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -11,7 +11,7 @@
     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/web/step4.svelte';
+    import Step4 from './wizard/step4.svelte';
 
     const projectId = $page.params.project;
 
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
new file mode 100644
index 000000000..ea514878e
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
@@ -0,0 +1,167 @@
+<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 { sdkForConsole } from '$lib/stores/sdk';
+    import { createPlatform } from '../store';
+
+    enum Platform {
+        Android = 'flutter-android',
+        Ios = 'flutter-ios',
+        Linux = 'flutter-linux',
+        Macos = 'flutter-macos',
+        Windows = 'flutter-windows',
+        Web = 'flutter-web'
+    }
+
+    let platform: Platform = Platform.Android;
+
+    const projectId = $page.params.project;
+    const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.app'];
+    const placeholder: Record<
+        Platform,
+        {
+            name: string;
+            hostname: string;
+        }
+    > = {
+        [Platform.Android]: {
+            name: 'My Android App',
+            hostname: 'com.company.appname'
+        },
+        [Platform.Ios]: {
+            name: 'My iOS App',
+            hostname: 'com.company.appname'
+        },
+        [Platform.Linux]: {
+            name: 'My Linux App',
+            hostname: 'com.company.appname'
+        },
+        [Platform.Macos]: {
+            name: 'My mac OS App',
+            hostname: 'com.company.appname'
+        },
+        [Platform.Web]: {
+            name: 'My Web App',
+            hostname: 'com.company.appname'
+        },
+        [Platform.Windows]: {
+            name: 'My Windows App',
+            hostname: 'localhost'
+        }
+    };
+
+    const hostname: Record<Platform, string> = {
+        [Platform.Android]: 'Package Name',
+        [Platform.Ios]: 'Package Name',
+        [Platform.Linux]: 'Package Name',
+        [Platform.Macos]: 'Bundle ID',
+        [Platform.Web]: 'Hostname',
+        [Platform.Windows]: 'Package Name'
+    };
+
+    async function beforeSubmit() {
+        if ($createPlatform.$id) {
+            await sdkForConsole.projects.updatePlatform(
+                projectId,
+                $createPlatform.$id,
+                $createPlatform.name,
+                undefined,
+                undefined,
+                $createPlatform.hostname
+            );
+
+            return;
+        }
+
+        const response = await sdkForConsole.projects.createPlatform(
+            projectId,
+            platform,
+            $createPlatform.name,
+            undefined,
+            undefined,
+            $createPlatform.hostname
+        );
+
+        $createPlatform.$id = response.$id;
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">Register your Flutter app</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        <div class="u-flex u-gap-16 u-margin-block-start-8">
+            <Pill
+                button
+                on:click={() => (platform = Platform.Android)}
+                selected={platform === Platform.Android}>
+                Android
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = Platform.Ios)}
+                selected={platform === Platform.Ios}>
+                iOS
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = Platform.Linux)}
+                selected={platform === Platform.Linux}>
+                Linux
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = Platform.Macos)}
+                selected={platform === Platform.Macos}>
+                Mac OS
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = Platform.Windows)}
+                selected={platform === Platform.Windows}>
+                Windows
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = Platform.Web)}
+                selected={platform === Platform.Web}>
+                Web
+            </Pill>
+        </div>
+    </svelte:fragment>
+    <Alert type="warning">
+        Note: If you are building your Flutter application for multiple devices, you will have to
+        follow this process for each different device.
+    </Alert>
+
+    <FormList isCommonSection>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder={placeholder[platform].name}
+            required
+            bind:value={$createPlatform.name} />
+        <div>
+            <InputText
+                id="hostname"
+                label={hostname[platform]}
+                placeholder={placeholder[platform].hostname}
+                required
+                bind:value={$createPlatform.hostname} />
+            {#if platform === Platform.Web}
+                <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>
+            {/if}
+        </div>
+    </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
new file mode 100644
index 000000000..2f0c0ab17
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+
+    const pubspec = `dependencies:
+  appwrite: ^5.0.0`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Get the SDK</svelte:fragment>
+
+    <p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
+    <Code label="YAML" language="yml" code={pubspec} showCopy />
+    <p>You can also install the SDK using the Dart package manager from your terminal:</p>
+    <Code label="Web SDK" language="js" code={`import { Appwrite } from 'appwrite';`} showCopy />
+</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
new file mode 100644
index 000000000..afebcaa6c
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { Alert, Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    const { endpoint, project } = sdkForProject.client.config;
+    const code = `import 'package:appwrite/appwrite.dart';
+
+Client client = Client();
+client
+    .setEndpoint('${endpoint}')
+    .setProject('${project}')
+    .setSelfSigned(status: true); // For self signed certificates, only use for development`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+
+    <div class="common-section">
+        <h2 class="heading-level-7">Init your SDK</h2>
+        <p>
+            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
+            which can be found in your project settings page.
+        </p>
+        <Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
+    </div>
+    <p>
+        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>
+    <div class="common-section">
+        <Alert type="info">
+            <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>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step4.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
similarity index 100%
rename from src/routes/console/project-[project]/overview/platforms/wizard/web/step4.svelte
rename to src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/store.ts b/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
index d12bd38d3..51adff1ec 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
@@ -1,5 +1,5 @@
-import type { Models } from '@aw-labs/appwrite-console';
 import { writable } from 'svelte/store';
+import type { Models } from '@aw-labs/appwrite-console';
 
 export const createPlatform = writable<Partial<Models.Platform>>({
     name: null,
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
index 892eca7bd..b2a807690 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
@@ -2,16 +2,29 @@
     import { page } from '$app/stores';
     import { Alert } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { FormList } from '$lib/elements/forms';
-    import InputText from '$lib/elements/forms/inputText.svelte';
+    import { FormList, InputText } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createPlatform } from '../store';
 
     const projectId = $page.params.project;
+    const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.app'];
 
     async function beforeSubmit() {
-        await sdkForConsole.projects.createPlatform(
+        if ($createPlatform.$id) {
+            await sdkForConsole.projects.updatePlatform(
+                projectId,
+                $createPlatform.$id,
+                $createPlatform.name,
+                undefined,
+                undefined,
+                $createPlatform.hostname
+            );
+
+            return;
+        }
+
+        const platform = await sdkForConsole.projects.createPlatform(
             projectId,
             'web',
             $createPlatform.name,
@@ -19,6 +32,8 @@
             undefined,
             $createPlatform.hostname
         );
+
+        $createPlatform.$id = platform.$id;
     }
 </script>
 
@@ -39,11 +54,11 @@
                 required
                 bind:value={$createPlatform.hostname} />
             <div class="u-flex u-gap-16 u-margin-block-start-8">
-                {#each ['*.vercel.app', '*.netlify.app', '*.gitpod.app'] as suggestion}
+                {#each suggestions as suggestion}
                     <Pill
                         button
-                        on:click={() => ($createPlatform.hostname = suggestion)}
-                        selected={$createPlatform.hostname === suggestion}>
+                        selected={$createPlatform.hostname === suggestion}
+                        on:click={() => ($createPlatform.hostname = suggestion)}>
                         {suggestion}
                     </Pill>
                 {/each}
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
index caa05ddd2..4c1aae83d 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -2,6 +2,7 @@
     import { Code } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { WizardStep } from '$lib/layout';
+
     enum Method {
         NPM,
         CDN

From 1c76765d668c458470d5f46d3352d8f88cff5e35 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Oct 2022 13:03:02 +0200
Subject: [PATCH 03/16] feat: initial draft for flutter, apple and android
 platforms

---
 src/lib/components/code.svelte                |  3 +-
 .../overview/platforms/+page.svelte           | 11 ++-
 .../overview/platforms/createAndroid.svelte   | 47 +++++++++
 .../overview/platforms/createApple.svelte     | 47 +++++++++
 .../overview/platforms/createFlutter.svelte   | 30 +-----
 .../overview/platforms/createWeb.svelte       | 30 +-----
 .../platforms/wizard/android/step1.svelte     | 53 ++++++++++
 .../platforms/wizard/android/step2.svelte     | 21 ++++
 .../platforms/wizard/android/step3.svelte     | 25 +++++
 .../platforms/wizard/apple/step1.svelte       | 98 +++++++++++++++++++
 .../platforms/wizard/apple/step2.svelte       | 74 ++++++++++++++
 .../platforms/wizard/apple/step3.svelte       | 39 ++++++++
 .../platforms/wizard/flutter/step2.svelte     |  7 +-
 .../overview/platforms/wizard/store.ts        | 33 +++++++
 .../platforms/wizard/web/step2.svelte         |  4 +-
 15 files changed, 461 insertions(+), 61 deletions(-)
 create mode 100644 src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/createApple.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 089e59377..e0c0be09c 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -6,6 +6,7 @@
     import 'prismjs/components/prism-json';
     import 'prismjs/components/prism-bash';
     import 'prismjs/components/prism-yaml';
+    import 'prismjs/components/prism-swift';
     import 'prismjs/plugins/autoloader/prism-autoloader';
     import 'prismjs/plugins/line-numbers/prism-line-numbers';
     import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
@@ -14,7 +15,7 @@
 
     export let label: string = null;
     export let code: string;
-    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml';
+    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
     export let showLineNumbers = false;
     export let showCopy = false;
 
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte
index 164dd9bda..33c12edca 100644
--- a/src/routes/console/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte
@@ -5,8 +5,11 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { wizard } from '$lib/stores/wizard';
     import { project } from '../../store';
+    import CreateAndroid from './createAndroid.svelte';
+    import CreateApple from './createApple.svelte';
     import CreateFlutter from './createFlutter.svelte';
     import CreateWeb from './createWeb.svelte';
+    import { versions } from './wizard/store';
 
     let showDropdown = false;
     const path = `/console/project-${$page.params.project}/overview/platforms`;
@@ -21,11 +24,12 @@
     const platforms = {
         [Platform.Web]: CreateWeb,
         [Platform.Flutter]: CreateFlutter,
-        [Platform.Android]: CreateWeb,
-        [Platform.Apple]: CreateWeb
+        [Platform.Android]: CreateAndroid,
+        [Platform.Apple]: CreateApple
     };
 
-    function addPlatform(type: Platform) {
+    async function addPlatform(type: Platform) {
+        await versions.load();
         wizard.start(platforms[type]);
     }
 </script>
@@ -61,7 +65,6 @@
     {#each $project.platforms as platform}
         <GridItem1 href={`${path}/${platform.$id}`}>
             <svelte:fragment slot="title">{platform.name}</svelte:fragment>
-
             <div class="grid-item-1-end-start">
                 <p>Last Updated</p>
                 <p>{toLocaleDateTime(platform.$updatedAt)}</p>
diff --git a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
new file mode 100644
index 000000000..dec7e6af2
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { beforeNavigate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { wizard } from '$lib/stores/wizard';
+    import { project } from '../../store';
+    import type { WizardStepsType } from '$lib/layout/wizard.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';
+
+    const projectId = $page.params.project;
+
+    async function create() {
+        project.load(projectId);
+        wizard.hide();
+    }
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Register your app',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Get the SDK',
+        component: Step2
+    });
+    stepsComponents.set(3, {
+        label: "Let's get coding",
+        component: Step3
+    });
+    stepsComponents.set(4, {
+        label: 'All set',
+        component: Step4
+    });
+</script>
+
+<Wizard
+    title="Add an Android Project"
+    steps={stepsComponents}
+    on:finish={create}
+    finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createApple.svelte b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
new file mode 100644
index 000000000..1e59063e7
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { beforeNavigate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { wizard } from '$lib/stores/wizard';
+    import { project } from '../../store';
+    import type { WizardStepsType } from '$lib/layout/wizard.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';
+
+    const projectId = $page.params.project;
+
+    async function create() {
+        project.load(projectId);
+        wizard.hide();
+    }
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Register your app',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Get the SDK',
+        component: Step2
+    });
+    stepsComponents.set(3, {
+        label: "Let's get coding",
+        component: Step3
+    });
+    stepsComponents.set(4, {
+        label: 'All set',
+        component: Step4
+    });
+</script>
+
+<Wizard
+    title="Add an Apple Project"
+    steps={stepsComponents}
+    on:finish={create}
+    finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
index c48a34905..c19092c95 100644
--- a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
     import { beforeNavigate } from '$app/navigation';
-    import { sdkForConsole } from '$lib/stores/sdk';
     import { page } from '$app/stores';
-    import { addNotification } from '$lib/stores/notifications';
     import { wizard } from '$lib/stores/wizard';
-    import { createPlatform } from './wizard/store';
     import { project } from '../../store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/flutter/step1.svelte';
@@ -15,29 +12,10 @@
 
     const projectId = $page.params.project;
 
-    const create = async () => {
-        try {
-            await sdkForConsole.projects.createPlatform(
-                projectId,
-                $createPlatform.type,
-                $createPlatform.name,
-                $createPlatform.key ?? undefined,
-                $createPlatform.store ?? undefined,
-                $createPlatform.hostname ?? undefined
-            );
-            addNotification({
-                message: 'Platform has been added',
-                type: 'success'
-            });
-            project.load(projectId);
-            wizard.hide();
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    };
+    async function create() {
+        project.load(projectId);
+        wizard.hide();
+    }
 
     beforeNavigate(() => {
         wizard.hide();
diff --git a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
index e6a92124e..d8a6706eb 100644
--- a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
     import { beforeNavigate } from '$app/navigation';
-    import { sdkForConsole } from '$lib/stores/sdk';
     import { page } from '$app/stores';
-    import { addNotification } from '$lib/stores/notifications';
     import { wizard } from '$lib/stores/wizard';
-    import { createPlatform } from './wizard/store';
     import { project } from '../../store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/web/step1.svelte';
@@ -15,29 +12,10 @@
 
     const projectId = $page.params.project;
 
-    const create = async () => {
-        try {
-            await sdkForConsole.projects.createPlatform(
-                projectId,
-                $createPlatform.type,
-                $createPlatform.name,
-                $createPlatform.key ?? undefined,
-                $createPlatform.store ?? undefined,
-                $createPlatform.hostname ?? undefined
-            );
-            addNotification({
-                message: 'Platform has been added',
-                type: 'success'
-            });
-            project.load(projectId);
-            wizard.hide();
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    };
+    async function create() {
+        project.load(projectId);
+        wizard.hide();
+    }
 
     beforeNavigate(() => {
         wizard.hide();
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
new file mode 100644
index 000000000..28988253a
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { FormList, InputText } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createPlatform } from '../store';
+
+    const projectId = $page.params.project;
+
+    async function beforeSubmit() {
+        if ($createPlatform.$id) {
+            await sdkForConsole.projects.updatePlatform(
+                projectId,
+                $createPlatform.$id,
+                $createPlatform.name,
+                undefined,
+                undefined,
+                $createPlatform.hostname
+            );
+
+            return;
+        }
+
+        const platform = await sdkForConsole.projects.createPlatform(
+            projectId,
+            'android',
+            $createPlatform.name,
+            undefined,
+            undefined,
+            $createPlatform.hostname
+        );
+
+        $createPlatform.$id = platform.$id;
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">Register your Android app</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="My Android App"
+            required
+            bind:value={$createPlatform.name} />
+        <InputText
+            id="hostname"
+            label="Package Name"
+            placeholder="com.company.appname"
+            required
+            bind:value={$createPlatform.hostname} />
+    </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
new file mode 100644
index 000000000..1f984af26
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { versions } from '../store';
+
+    const example1 = `repositories {
+    mavenCentral()
+}`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Get the SDK</svelte:fragment>
+    <p>First, add this to your root level build.gradle file:</p>
+    <Code label="Groovy" language="kotlin" code={example1} showCopy />
+    <p>And add this to your project's build.gradle file:</p>
+    <Code
+        label="Groovy"
+        language="kotlin"
+        code={`implementation("io.appwrite:sdk-for-android:${versions['client-android']}")`}
+        showCopy />
+</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
new file mode 100644
index 000000000..a7b5bbf3e
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    const { endpoint, project } = sdkForProject.client.config;
+    const code = `const appwrite = new Appwrite();
+
+appwrite
+    .setEndpoint('${endpoint}')
+    .setProject('${project}');`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+
+    <div class="common-section">
+        <h2 class="heading-level-7">Init your SDK</h2>
+        <p>
+            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
+            which can be found in your project settings page.
+        </p>
+        <Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
+    </div>
+</WizardStep>
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
new file mode 100644
index 000000000..7478cd44f
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Alert } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { FormItem, FormList, InputText } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createPlatform } from '../store';
+
+    enum Platform {
+        iOS = 'apple-ios',
+        macOS = 'apple-macos',
+        watchOS = 'apple-watchos',
+        tvOS = 'apple-tvos'
+    }
+
+    let platform: Platform = Platform.iOS;
+
+    const projectId = $page.params.project;
+
+    async function beforeSubmit() {
+        if ($createPlatform.$id) {
+            await sdkForConsole.projects.updatePlatform(
+                projectId,
+                $createPlatform.$id,
+                $createPlatform.name,
+                undefined,
+                undefined,
+                $createPlatform.hostname
+            );
+
+            return;
+        }
+
+        const response = await sdkForConsole.projects.createPlatform(
+            projectId,
+            platform,
+            $createPlatform.name,
+            undefined,
+            undefined,
+            $createPlatform.hostname
+        );
+
+        $createPlatform.$id = response.$id;
+    }
+</script>
+
+<WizardStep {beforeSubmit}>
+    <svelte:fragment slot="title">Register your Flutter app</svelte:fragment>
+    <Alert type="warning">
+        Note: If you are building your Flutter application for multiple devices, you will have to
+        follow this process for each different device.
+    </Alert>
+
+    <FormList isCommonSection>
+        <FormItem>
+            <p>Choose a platform</p>
+            <div class="u-flex u-gap-16 u-margin-block-start-8">
+                <Pill
+                    button
+                    on:click={() => (platform = Platform.iOS)}
+                    selected={platform === Platform.iOS}>
+                    iOS
+                </Pill>
+                <Pill
+                    button
+                    on:click={() => (platform = Platform.macOS)}
+                    selected={platform === Platform.macOS}>
+                    macOS
+                </Pill>
+                <Pill
+                    button
+                    on:click={() => (platform = Platform.watchOS)}
+                    selected={platform === Platform.watchOS}>
+                    watchOS
+                </Pill>
+                <Pill
+                    button
+                    on:click={() => (platform = Platform.tvOS)}
+                    selected={platform === Platform.tvOS}>
+                    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"
+            required
+            bind:value={$createPlatform.hostname} />
+    </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
new file mode 100644
index 000000000..0b206e879
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
@@ -0,0 +1,74 @@
+<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">Get the SDK</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="list ">
+                <li class="list-item">
+                    <span class="text">Select File > Swift Packages > Add Package Dependency</span>
+                </li>
+                <li class="list-item">
+                    <span class="text">
+                        Search for the Appwrite SDK with the URL
+                        https://github.com/appwrite/sdk-for-apple
+                    </span>
+                </li>
+                <li class="list-item">
+                    <span class="text">Add version rules</span>
+                </li>
+                <li class="list-item">
+                    <span class="text">
+                        Select next and wait for package resolution to complete
+                    </span>
+                </li>
+                <li class="list-item">
+                    <span class="text">
+                        Make sure `Appwrite` is selected to add to your target and select finish
+                    </span>
+                </li>
+            </ol>
+        {:else if method === Method.Swift}
+            <p class="text">Add this to your Package.swift file:</p>
+            <Code showCopy showLineNumbers label="Swift" language="swift" code={example1} />
+            <p class="text">Then add the dependency to your target:</p>
+            <Code showCopy showLineNumbers 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
new file mode 100644
index 000000000..1fd933866
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+    import { Alert, Code } from '$lib/components';
+    import { WizardStep } from '$lib/layout';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    const { endpoint, project } = sdkForProject.client.config;
+    const code = `import Appwrite
+
+let client = Client()
+    .setEndpoint("${endpoint}")
+    .setProject("${project}")
+    .setSelfSigned(status: true) // For self signed certificates, only use for development`;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Let's get coding</svelte:fragment>
+
+    <div class="common-section">
+        <h2 class="heading-level-7">Init your SDK</h2>
+        <p>
+            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
+            which can be found in your project settings page.
+        </p>
+        <Code label="Apple SDK" language="swift" {code} showCopy showLineNumbers />
+    </div>
+    <p>
+        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>
+    <div class="common-section">
+        <Alert type="info">
+            <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>
+</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
index 2f0c0ab17..063f62048 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
     import { Code } from '$lib/components';
     import { WizardStep } from '$lib/layout';
+    import { versions } from '../store';
 
-    const pubspec = `dependencies:
-  appwrite: ^5.0.0`;
+    const example1 = `dependencies:
+  appwrite: ^${$versions['client-flutter']}`;
 </script>
 
 <WizardStep>
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
 
     <p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
-    <Code label="YAML" language="yml" code={pubspec} showCopy />
+    <Code label="YAML" language="yml" code={example1} showCopy />
     <p>You can also install the SDK using the Dart package manager from your terminal:</p>
     <Code label="Web SDK" language="js" code={`import { Appwrite } from 'appwrite';`} showCopy />
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/store.ts b/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
index 51adff1ec..090ec1f2e 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
@@ -1,4 +1,6 @@
 import { writable } from 'svelte/store';
+import { sdkForConsole } from '$lib/stores/sdk';
+import { cachedStore } from '$lib/helpers/cache';
 import type { Models } from '@aw-labs/appwrite-console';
 
 export const createPlatform = writable<Partial<Models.Platform>>({
@@ -6,3 +8,34 @@ export const createPlatform = writable<Partial<Models.Platform>>({
     hostname: null,
     type: null
 });
+
+export const versions = cachedStore<
+    {
+        server: string;
+        'client-web': string;
+        'client-flutter': string;
+        'client-apple': string;
+        'client-android': string;
+        'console-web': string;
+        'console-cli': string;
+        'server-nodejs': string;
+        'server-deno': string;
+        'server-php': string;
+        'server-python': string;
+        'server-ruby': string;
+        'server-dart': string;
+        'server-kotlin': string;
+        'server-swift': string;
+    },
+    {
+        load: () => Promise<void>;
+    }
+>('versions', function ({ set }) {
+    return {
+        load: async () => {
+            const { endpoint } = sdkForConsole.client.config;
+            const response = await fetch(`${endpoint}/../versions`);
+            set(await response.json());
+        }
+    };
+});
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
index 4c1aae83d..e158c02d6 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { versions } from '../store';
+
     import { Code } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { WizardStep } from '$lib/layout';
@@ -51,7 +53,7 @@
         <Code
             label="HTML"
             language="html"
-            code={`<script src="https://cdn.jsdelivr.net/npm/appwrite"></script>`}
+            code={`<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}"></script>`}
             showCopy />
     {/if}
 </WizardStep>

From 93a9c2042594736e2fd6d36ba0746f5fe11f583e Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Oct 2022 14:16:52 +0200
Subject: [PATCH 04/16] fix: numbered list and code examples

---
 package-lock.json                             | 28 +++++++++----------
 package.json                                  |  4 +--
 src/lib/components/code.svelte                | 27 ++++++------------
 .../platforms/wizard/apple/step2.svelte       | 26 +++++++++--------
 4 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0e9b8d8d5..41a4a2977 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^6.0.0",
-                "@aw-labs/icons": "0.0.0-61",
-                "@aw-labs/ui": "0.0.0-61",
+                "@aw-labs/icons": "0.0.0-62",
+                "@aw-labs/ui": "0.0.0-62",
                 "echarts": "^5.4.0",
                 "prismjs": "^1.29.0",
                 "tippy.js": "^6.3.7",
@@ -79,14 +79,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz",
-            "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w=="
+            "version": "0.0.0-62",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-62.tgz",
+            "integrity": "sha512-fehLk+DDor3IlIKaAx2UypUggO/0b3Btsq/HC6f5FfkMbjbjwKvKvYXG4c4C3KoDW6kESttccQZqEnm2krVn+A=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz",
-            "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==",
+            "version": "0.0.0-62",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-62.tgz",
+            "integrity": "sha512-gU59XQNDeeXOqDPGxkQxDJIq70sCUxTafnDcDJlMFiAnz7yGLTgB2dO/6dv0KlNJ7u+9XC7UtsHWs0vFtVkICw==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -7788,14 +7788,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz",
-            "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w=="
+            "version": "0.0.0-62",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-62.tgz",
+            "integrity": "sha512-fehLk+DDor3IlIKaAx2UypUggO/0b3Btsq/HC6f5FfkMbjbjwKvKvYXG4c4C3KoDW6kESttccQZqEnm2krVn+A=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz",
-            "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==",
+            "version": "0.0.0-62",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-62.tgz",
+            "integrity": "sha512-gU59XQNDeeXOqDPGxkQxDJIq70sCUxTafnDcDJlMFiAnz7yGLTgB2dO/6dv0KlNJ7u+9XC7UtsHWs0vFtVkICw==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index 5d2bde148..0c6478d22 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^6.0.0",
-        "@aw-labs/icons": "0.0.0-61",
-        "@aw-labs/ui": "0.0.0-61",
+        "@aw-labs/icons": "0.0.0-62",
+        "@aw-labs/ui": "0.0.0-62",
         "echarts": "^5.4.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index e0c0be09c..24d6c99e9 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -24,35 +24,27 @@
     });
 </script>
 
-<div class="code">
-    <div class="controls">
+<section class="box u-overflow-hidden u-min-height-100">
+    <div class="u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
             <Pill>{label}</Pill>
         {/if}
         {#if showCopy}
             <Copy value={code}>
-                <span class="icon-duplicate" aria-hidden="true" style="cursor: pointer;" />
+                <button class="button is-small is-text is-only-icon" aria-label="copy code">
+                    <span class="icon-duplicate" aria-hidden="true" />
+                </button>
             </Copy>
         {/if}
     </div>
+
     <pre class={`language-${language}`} class:line-numbers={showLineNumbers}><code
             >{code}</code></pre>
-</div>
+</section>
 
 <style lang="scss" global>
     @import 'prismjs/themes/prism.css';
 
-    div.code {
-        position: relative;
-
-        div.controls {
-            position: absolute;
-            right: 0.5rem;
-            top: 0.5rem;
-            z-index: 1;
-        }
-    }
-
     code,
     pre {
         &[class*='language-'] {
@@ -80,10 +72,7 @@
 
     :not(pre) > code[class*='language-'],
     pre[class*='language-'] {
-        background: #1b1b28;
-        body.theme-light & {
-            background: #fcfcff;
-        }
+        background: hsl(var(--p-box-background-color));
     }
     .token {
         &.comment,
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
index 0b206e879..3fb7f0fd2 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
@@ -40,25 +40,29 @@
     </div>
     <div class="common-section">
         {#if method === Method.Xcode}
-            <ol class="list ">
-                <li class="list-item">
-                    <span class="text">Select File > Swift Packages > Add Package Dependency</span>
-                </li>
-                <li class="list-item">
+            <ol class="numeric-list">
+                <li class="numeric-list-item">
                     <span class="text">
-                        Search for the Appwrite SDK with the URL
-                        https://github.com/appwrite/sdk-for-apple
+                        Select File > Swift Packages > Add Package Dependency
                     </span>
                 </li>
-                <li class="list-item">
-                    <span class="text">Add version rules</span>
+                <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="list-item">
+                <li class="numeric-list-item">
+                    <span class="text"> Add version rules </span>
+                </li>
+                <li class="numeric-list-item">
                     <span class="text">
                         Select next and wait for package resolution to complete
                     </span>
                 </li>
-                <li class="list-item">
+                <li class="numeric-list-item">
                     <span class="text">
                         Make sure `Appwrite` is selected to add to your target and select finish
                     </span>

From 9039b42e0c5ca94cdc8ccd685e532e21e42d0e07 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Oct 2022 14:43:35 +0200
Subject: [PATCH 05/16] feat: add exit event to wizard

---
 src/lib/layout/wizard.svelte                  |  3 +-
 .../overview/platforms/createAndroid.svelte   |  2 ++
 .../overview/platforms/createApple.svelte     |  2 ++
 .../overview/platforms/createFlutter.svelte   |  2 ++
 .../overview/platforms/createWeb.svelte       |  2 ++
 .../overview/platforms/wizard/store.ts        | 29 +++++++++++++++----
 6 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index dbaad2b0f..53be0048a 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -30,6 +30,7 @@
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape' && !showExitModal) {
             event.preventDefault();
+            dispatch('exit');
             wizard.hide();
         }
     }
@@ -38,6 +39,7 @@
         if (confirmExit) {
             showExitModal = true;
         } else {
+            dispatch('exit');
             wizard.hide();
         }
     }
@@ -52,7 +54,6 @@
     async function submit() {
         if ($wizard.interceptor) {
             try {
-                console.log($wizard.interceptor);
                 await $wizard.interceptor();
             } catch (error) {
                 addNotification({
diff --git a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
index dec7e6af2..de371face 100644
--- a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
@@ -9,6 +9,7 @@
     import Step2 from './wizard/android/step2.svelte';
     import Step3 from './wizard/android/step3.svelte';
     import Step4 from './wizard/step4.svelte';
+    import { createPlatform } from './wizard/store';
 
     const projectId = $page.params.project;
 
@@ -44,4 +45,5 @@
     title="Add an Android Project"
     steps={stepsComponents}
     on:finish={create}
+    on:exit={createPlatform.reset}
     finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createApple.svelte b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
index 1e59063e7..67f98323d 100644
--- a/src/routes/console/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
@@ -9,6 +9,7 @@
     import Step2 from './wizard/apple/step2.svelte';
     import Step3 from './wizard/apple/step3.svelte';
     import Step4 from './wizard/step4.svelte';
+    import { createPlatform } from './wizard/store';
 
     const projectId = $page.params.project;
 
@@ -44,4 +45,5 @@
     title="Add an Apple Project"
     steps={stepsComponents}
     on:finish={create}
+    on:exit={createPlatform.reset}
     finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
index c19092c95..cc4c624f1 100644
--- a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
@@ -9,6 +9,7 @@
     import Step2 from './wizard/flutter/step2.svelte';
     import Step3 from './wizard/flutter/step3.svelte';
     import Step4 from './wizard/step4.svelte';
+    import { createPlatform } from './wizard/store';
 
     const projectId = $page.params.project;
 
@@ -44,4 +45,5 @@
     title="Add a Flutter Project"
     steps={stepsComponents}
     on:finish={create}
+    on:exit={createPlatform.reset}
     finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
index d8a6706eb..ed06d3b47 100644
--- a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -9,6 +9,7 @@
     import Step2 from './wizard/web/step2.svelte';
     import Step3 from './wizard/web/step3.svelte';
     import Step4 from './wizard/step4.svelte';
+    import { createPlatform } from './wizard/store';
 
     const projectId = $page.params.project;
 
@@ -44,4 +45,5 @@
     title="Add a Web Project"
     steps={stepsComponents}
     on:finish={create}
+    on:exit={createPlatform.reset}
     finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/store.ts b/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
index 090ec1f2e..7eb9e8b5e 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/store.ts
@@ -3,11 +3,30 @@ import { sdkForConsole } from '$lib/stores/sdk';
 import { cachedStore } from '$lib/helpers/cache';
 import type { Models } from '@aw-labs/appwrite-console';
 
-export const createPlatform = writable<Partial<Models.Platform>>({
-    name: null,
-    hostname: null,
-    type: null
-});
+function createPlatformStore() {
+    const { subscribe, update, set } = writable<Partial<Models.Platform>>({
+        $id: null,
+        name: null,
+        hostname: null,
+        type: null
+    });
+
+    return {
+        subscribe,
+        update,
+        set,
+        reset() {
+            set({
+                $id: null,
+                name: null,
+                hostname: null,
+                type: null
+            });
+        }
+    };
+}
+
+export const createPlatform = createPlatformStore();
 
 export const versions = cachedStore<
     {

From 9add33a56ee189d4b2c5da00c8e43ceaee7e917c Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Oct 2022 14:45:51 +0200
Subject: [PATCH 06/16] fix: tests for code snippet

---
 src/lib/components/code.svelte     | 4 +++-
 tests/unit/components/code.test.ts | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 24d6c99e9..79af698ce 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -25,7 +25,9 @@
 </script>
 
 <section class="box u-overflow-hidden u-min-height-100">
-    <div class="u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
+    <div
+        data-testid="controls"
+        class="u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
             <Pill>{label}</Pill>
         {/if}
diff --git a/tests/unit/components/code.test.ts b/tests/unit/components/code.test.ts
index a23ce8f49..7edda4f5e 100644
--- a/tests/unit/components/code.test.ts
+++ b/tests/unit/components/code.test.ts
@@ -4,12 +4,12 @@ import { vi } from 'vitest';
 import { Code } from '../../../src/lib/components';
 
 test('default props', async () => {
-    const { container } = render(Code, {
+    const { getByTestId } = render(Code, {
         code: 'console.log("test");',
         language: 'js'
     });
 
-    expect(container.querySelector('.controls').children.length).toEqual(0);
+    expect(getByTestId('controls').children.length).toEqual(0);
 });
 
 test('shows label', async () => {

From 03027920bf3c282077b8cc8cc23f0e5b38b53db1 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Oct 2022 15:54:28 +0200
Subject: [PATCH 07/16] fix: code snippet and wizard

---
 package-lock.json              | 28 ++++++++++++++--------------
 package.json                   |  4 ++--
 src/lib/components/code.svelte | 15 ++++++++++++---
 src/lib/components/step.svelte |  2 +-
 4 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 41a4a2977..b20e5c093 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^6.0.0",
-                "@aw-labs/icons": "0.0.0-62",
-                "@aw-labs/ui": "0.0.0-62",
+                "@aw-labs/icons": "0.0.0-63",
+                "@aw-labs/ui": "0.0.0-63",
                 "echarts": "^5.4.0",
                 "prismjs": "^1.29.0",
                 "tippy.js": "^6.3.7",
@@ -79,14 +79,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-62",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-62.tgz",
-            "integrity": "sha512-fehLk+DDor3IlIKaAx2UypUggO/0b3Btsq/HC6f5FfkMbjbjwKvKvYXG4c4C3KoDW6kESttccQZqEnm2krVn+A=="
+            "version": "0.0.0-63",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-63.tgz",
+            "integrity": "sha512-aSVriQp0x2cfyhld3LodKrDBZwkS/rOErjvQtR5HWmrYTjDNm21dmehfg6rVhV5Al8Bvpd82HihAWdTVYP5cwA=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-62",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-62.tgz",
-            "integrity": "sha512-gU59XQNDeeXOqDPGxkQxDJIq70sCUxTafnDcDJlMFiAnz7yGLTgB2dO/6dv0KlNJ7u+9XC7UtsHWs0vFtVkICw==",
+            "version": "0.0.0-63",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-63.tgz",
+            "integrity": "sha512-+lNFpbMBT/AU2sVefN6gmBJE06Z1L93iqpr6B4Xl8T5YxDwrAeoxjTB5I50vVhughN/JkYxTJd+rMOCSOfh/DQ==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -7788,14 +7788,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-62",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-62.tgz",
-            "integrity": "sha512-fehLk+DDor3IlIKaAx2UypUggO/0b3Btsq/HC6f5FfkMbjbjwKvKvYXG4c4C3KoDW6kESttccQZqEnm2krVn+A=="
+            "version": "0.0.0-63",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-63.tgz",
+            "integrity": "sha512-aSVriQp0x2cfyhld3LodKrDBZwkS/rOErjvQtR5HWmrYTjDNm21dmehfg6rVhV5Al8Bvpd82HihAWdTVYP5cwA=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-62",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-62.tgz",
-            "integrity": "sha512-gU59XQNDeeXOqDPGxkQxDJIq70sCUxTafnDcDJlMFiAnz7yGLTgB2dO/6dv0KlNJ7u+9XC7UtsHWs0vFtVkICw==",
+            "version": "0.0.0-63",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-63.tgz",
+            "integrity": "sha512-+lNFpbMBT/AU2sVefN6gmBJE06Z1L93iqpr6B4Xl8T5YxDwrAeoxjTB5I50vVhughN/JkYxTJd+rMOCSOfh/DQ==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index 0c6478d22..3119db2d2 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^6.0.0",
-        "@aw-labs/icons": "0.0.0-62",
-        "@aw-labs/ui": "0.0.0-62",
+        "@aw-labs/icons": "0.0.0-63",
+        "@aw-labs/ui": "0.0.0-63",
         "echarts": "^5.4.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 79af698ce..2f6c3b0f9 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -24,10 +24,9 @@
     });
 </script>
 
-<section class="box u-overflow-hidden u-min-height-100">
+<section class="box u-overflow-hidden common-section">
     <div
-        data-testid="controls"
-        class="u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
+        class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
             <Pill>{label}</Pill>
         {/if}
@@ -47,12 +46,20 @@
 <style lang="scss" global>
     @import 'prismjs/themes/prism.css';
 
+    .controls {
+        z-index: 2;
+    }
+
     code,
     pre {
         &[class*='language-'] {
             color: #fcfcff;
             text-shadow: none;
             font-family: 'Source Code Pro';
+
+            &.line-numbers {
+                padding-left: 2.5em;
+            }
             body.theme-light & {
                 color: #373b4d;
             }
@@ -75,6 +82,8 @@
     :not(pre) > code[class*='language-'],
     pre[class*='language-'] {
         background: hsl(var(--p-box-background-color));
+        padding: 0;
+        margin: 0;
     }
     .token {
         &.comment,
diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index 7d2c5dffd..bc1418187 100644
--- a/src/lib/components/step.svelte
+++ b/src/lib/components/step.svelte
@@ -25,7 +25,7 @@
             {:else}
                 <div class="bullet" class:is-current={current} />
             {/if}
-            <div class="step-item-content">
+            <div class="steps-item-content">
                 <span class="text">{step.text}</span>
                 {#if step?.substeps}
                     <ul class="steps-sub">

From 5f5ff753263814a3689e374e9b2531882a5304bd Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Oct 2022 16:01:52 +0200
Subject: [PATCH 08/16] tests: fix code tests

---
 tests/unit/components/code.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/unit/components/code.test.ts b/tests/unit/components/code.test.ts
index 7edda4f5e..a23ce8f49 100644
--- a/tests/unit/components/code.test.ts
+++ b/tests/unit/components/code.test.ts
@@ -4,12 +4,12 @@ import { vi } from 'vitest';
 import { Code } from '../../../src/lib/components';
 
 test('default props', async () => {
-    const { getByTestId } = render(Code, {
+    const { container } = render(Code, {
         code: 'console.log("test");',
         language: 'js'
     });
 
-    expect(getByTestId('controls').children.length).toEqual(0);
+    expect(container.querySelector('.controls').children.length).toEqual(0);
 });
 
 test('shows label', async () => {

From 30b7c15048c0b6409846a1d5486a2356d30f5840 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Oct 2022 16:20:00 +0200
Subject: [PATCH 09/16] fix: padding in paragraphs

---
 .../overview/platforms/wizard/android/step2.svelte            | 2 +-
 .../overview/platforms/wizard/apple/step2.svelte              | 4 ++--
 .../overview/platforms/wizard/flutter/step2.svelte            | 4 +++-
 .../overview/platforms/wizard/web/step2.svelte                | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

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
index 1f984af26..c2e075d22 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
@@ -12,7 +12,7 @@
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
     <p>First, add this to your root level build.gradle file:</p>
     <Code label="Groovy" language="kotlin" code={example1} showCopy />
-    <p>And add this to your project's build.gradle file:</p>
+    <p class="common-section">And add this to your project's build.gradle file:</p>
     <Code
         label="Groovy"
         language="kotlin"
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
index 3fb7f0fd2..2a41b6d77 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
@@ -69,9 +69,9 @@
                 </li>
             </ol>
         {:else if method === Method.Swift}
-            <p class="text">Add this to your Package.swift file:</p>
+            <p>Add this to your Package.swift file:</p>
             <Code showCopy showLineNumbers label="Swift" language="swift" code={example1} />
-            <p class="text">Then add the dependency to your target:</p>
+            <p class="common-section">Then add the dependency to your target:</p>
             <Code showCopy showLineNumbers label="Swift" language="swift" code={example2} />
         {/if}
     </div>
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
index 063f62048..0a22eef07 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -12,6 +12,8 @@
 
     <p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
     <Code label="YAML" language="yml" code={example1} showCopy />
-    <p>You can also install the SDK using the Dart package manager from your terminal:</p>
+    <p class="common-section">
+        You can also install the SDK using the Dart package manager from your terminal:
+    </p>
     <Code label="Web SDK" language="js" code={`import { Appwrite } from 'appwrite';`} showCopy />
 </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
index e158c02d6..68f73c970 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -32,7 +32,7 @@
                 >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" showCopy />
-        <p>
+        <p class="common-section">
             When you're using a bundler (like <a
                 href="https://vitejs.dev"
                 target="_blank"

From fa7be9ccd5ebba14a98abeca595f1ccae96f5d8b Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Oct 2022 17:44:53 +0200
Subject: [PATCH 10/16] trigger vercel


From ee41c13f52006a36f8303290e89cade2e421fb17 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Oct 2022 18:31:49 +0200
Subject: [PATCH 11/16] fix: notification alert

---
 src/lib/layout/notification.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index a6d6e9c7b..877283cc1 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -13,7 +13,7 @@
     class="alert-sticky"
     class:is-success={type === 'success'}
     class:is-warning={type === 'warning'}
-    class:is-error={type === 'error'}
+    class:is-danger={type === 'error'}
     class:is-info={type === 'info'}>
     <button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
         <span class="icon-x" aria-hidden="true" />

From 54480b2a35eb3e77b6038a3320653b48dd95d9c3 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 14 Oct 2022 14:31:31 +0200
Subject: [PATCH 12/16] fix: all platforms

---
 src/lib/components/code.svelte                | 28 ++++++++++++++-----
 src/lib/components/json.svelte                |  2 +-
 src/lib/layout/wizard.svelte                  |  4 +--
 .../overview/platforms/createAndroid.svelte   |  9 ++++--
 .../overview/platforms/createApple.svelte     |  9 ++++--
 .../overview/platforms/createFlutter.svelte   |  9 ++++--
 .../overview/platforms/createWeb.svelte       |  9 ++++--
 .../platforms/wizard/android/step2.svelte     |  5 ++--
 .../platforms/wizard/android/step3.svelte     | 14 ++++------
 .../platforms/wizard/apple/step2.svelte       |  4 +--
 .../platforms/wizard/apple/step3.svelte       | 14 ++++------
 .../platforms/wizard/flutter/step2.svelte     |  4 +--
 .../platforms/wizard/flutter/step3.svelte     | 14 ++++------
 .../overview/platforms/wizard/step4.svelte    |  4 +--
 .../platforms/wizard/web/step2.svelte         |  7 +++--
 .../platforms/wizard/web/step3.svelte         | 14 ++++------
 16 files changed, 85 insertions(+), 65 deletions(-)

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 2f6c3b0f9..f3f4cf5de 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -14,10 +14,11 @@
     import { Copy } from '.';
 
     export let label: string = null;
+    export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
     export let code: string;
     export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
-    export let showLineNumbers = false;
-    export let showCopy = false;
+    export let withLineNumbers = false;
+    export let withCopy = false;
 
     afterUpdate(async () => {
         Prism.highlightAll();
@@ -28,9 +29,14 @@
     <div
         class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
-            <Pill>{label}</Pill>
+            <Pill>
+                {#if labelIcon}
+                    <span class={`icon-${labelIcon}`} aria-hidden="true" />
+                {/if}
+                {label}
+            </Pill>
         {/if}
-        {#if showCopy}
+        {#if withCopy}
             <Copy value={code}>
                 <button class="button is-small is-text is-only-icon" aria-label="copy code">
                     <span class="icon-duplicate" aria-hidden="true" />
@@ -39,15 +45,23 @@
         {/if}
     </div>
 
-    <pre class={`language-${language}`} class:line-numbers={showLineNumbers}><code
+    <pre class={`language-${language}`} class:line-numbers={withLineNumbers}><code
             >{code}</code></pre>
 </section>
 
 <style lang="scss" global>
     @import 'prismjs/themes/prism.css';
 
-    .controls {
-        z-index: 2;
+    .box {
+        --p-box-background-color: var(--color-neutral-300) !important;
+
+        body.theme-light & {
+            --p-box-background-color: var(--color-neutral-5) !important;
+        }
+
+        .controls {
+            z-index: 2;
+        }
     }
 
     code,
diff --git a/src/lib/components/json.svelte b/src/lib/components/json.svelte
index 47d8326f5..4286cdb6e 100644
--- a/src/lib/components/json.svelte
+++ b/src/lib/components/json.svelte
@@ -4,4 +4,4 @@
     export let code: string;
 </script>
 
-<Code showLineNumbers showCopy language="json" {code} />
+<Code withLineNumbers withCopy language="json" {code} />
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 53be0048a..ee46327de 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -113,8 +113,8 @@
             {/each}
             <div class="form-footer">
                 <div class="u-flex u-main-end u-gap-12">
-                    {#if sortedSteps[currentStep - 1][1].optional}
-                        <Button text on:click={() => (isLastStep = true)} submit
+                    {#if !isLastStep && sortedSteps[currentStep - 1][1].optional}
+                        <Button text on:click={() => dispatch('finish')}
                             >Skip optional steps</Button>
                     {/if}
                     {#if currentStep === 1}
diff --git a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
index de371face..a2eed23ec 100644
--- a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
@@ -29,15 +29,18 @@
     });
     stepsComponents.set(2, {
         label: 'Get the SDK',
-        component: Step2
+        component: Step2,
+        optional: true
     });
     stepsComponents.set(3, {
         label: "Let's get coding",
-        component: Step3
+        component: Step3,
+        optional: true
     });
     stepsComponents.set(4, {
         label: 'All set',
-        component: Step4
+        component: Step4,
+        optional: true
     });
 </script>
 
diff --git a/src/routes/console/project-[project]/overview/platforms/createApple.svelte b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
index 67f98323d..d1157ef05 100644
--- a/src/routes/console/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
@@ -29,15 +29,18 @@
     });
     stepsComponents.set(2, {
         label: 'Get the SDK',
-        component: Step2
+        component: Step2,
+        optional: true
     });
     stepsComponents.set(3, {
         label: "Let's get coding",
-        component: Step3
+        component: Step3,
+        optional: true
     });
     stepsComponents.set(4, {
         label: 'All set',
-        component: Step4
+        component: Step4,
+        optional: true
     });
 </script>
 
diff --git a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
index cc4c624f1..889f1c4e5 100644
--- a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
@@ -29,15 +29,18 @@
     });
     stepsComponents.set(2, {
         label: 'Get the SDK',
-        component: Step2
+        component: Step2,
+        optional: true
     });
     stepsComponents.set(3, {
         label: "Let's get coding",
-        component: Step3
+        component: Step3,
+        optional: true
     });
     stepsComponents.set(4, {
         label: 'All set',
-        component: Step4
+        component: Step4,
+        optional: true
     });
 </script>
 
diff --git a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
index ed06d3b47..cff74706f 100644
--- a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -29,15 +29,18 @@
     });
     stepsComponents.set(2, {
         label: 'Get the SDK',
-        component: Step2
+        component: Step2,
+        optional: true
     });
     stepsComponents.set(3, {
         label: "Let's get coding",
-        component: Step3
+        component: Step3,
+        optional: true
     });
     stepsComponents.set(4, {
         label: 'All set',
-        component: Step4
+        component: Step4,
+        optional: true
     });
 </script>
 
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
index c2e075d22..f246663aa 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
@@ -11,11 +11,12 @@
 <WizardStep>
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
     <p>First, add this to your root level build.gradle file:</p>
-    <Code label="Groovy" language="kotlin" code={example1} showCopy />
+    <Code label="Groovy" 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={`implementation("io.appwrite:sdk-for-android:${versions['client-android']}")`}
-        showCopy />
+        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
index a7b5bbf3e..e13329c53 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
@@ -14,12 +14,10 @@ appwrite
 <WizardStep>
     <svelte:fragment slot="title">Let's get coding</svelte:fragment>
 
-    <div class="common-section">
-        <h2 class="heading-level-7">Init your SDK</h2>
-        <p>
-            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
-            which can be found in your project settings page.
-        </p>
-        <Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
-    </div>
+    <h2 class="heading-level-7">Init your SDK</h2>
+    <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Web SDK" labelIcon="code" language="js" {code} withCopy withLineNumbers />
 </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
index 2a41b6d77..2be3f3c62 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
@@ -70,9 +70,9 @@
             </ol>
         {:else if method === Method.Swift}
             <p>Add this to your Package.swift file:</p>
-            <Code showCopy showLineNumbers label="Swift" language="swift" code={example1} />
+            <Code withCopy withLineNumbers label="Swift" language="swift" code={example1} />
             <p class="common-section">Then add the dependency to your target:</p>
-            <Code showCopy showLineNumbers label="Swift" language="swift" code={example2} />
+            <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
index 1fd933866..fe5be13fc 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
@@ -15,14 +15,12 @@ let client = Client()
 <WizardStep>
     <svelte:fragment slot="title">Let's get coding</svelte:fragment>
 
-    <div class="common-section">
-        <h2 class="heading-level-7">Init your SDK</h2>
-        <p>
-            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
-            which can be found in your project settings page.
-        </p>
-        <Code label="Apple SDK" language="swift" {code} showCopy showLineNumbers />
-    </div>
+    <h2 class="heading-level-7">Init your SDK</h2>
+    <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
     <p>
         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.
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
index 0a22eef07..b0b075502 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -11,9 +11,9 @@
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
 
     <p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
-    <Code label="YAML" language="yml" code={example1} showCopy />
+    <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>
-    <Code label="Web SDK" language="js" code={`import { Appwrite } from 'appwrite';`} showCopy />
+    <Code label="Bash" language="sh" code={`pub get appwrite`} withCopy />
 </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
index afebcaa6c..6f46f657d 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
@@ -16,15 +16,13 @@ client
 <WizardStep>
     <svelte:fragment slot="title">Let's get coding</svelte:fragment>
 
-    <div class="common-section">
-        <h2 class="heading-level-7">Init your SDK</h2>
-        <p>
-            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
-            which can be found in your project settings page.
-        </p>
-        <Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
-    </div>
+    <h2 class="heading-level-7">Init your SDK</h2>
     <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Flutter SDK" labelIcon="flutter" language="dart" {code} withCopy withLineNumbers />
+    <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>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
index 3b74bbf9d..c6cbb6d17 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
@@ -4,9 +4,9 @@
 
 <WizardStep>
     <svelte:fragment slot="title">You're ready to go 🎉</svelte:fragment>
-    <svelte:fragment slot="subtitle">
+    <p>
         Congrats, you've just added your first platform to your Appwrite dashboard! Are you ready to
         give it a go? Why not add a database to your project, or start uploading files? The choice
         is up to you.
-    </svelte:fragment>
+    </p>
 </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
index 68f73c970..d94f989ca 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -31,7 +31,7 @@
             Use <a href="https://npmjs.org" target="_blank" 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" showCopy />
+        <Code label="Bash" language="sh" code="npm install appwrite" withCopy />
         <p class="common-section">
             When you're using a bundler (like <a
                 href="https://vitejs.dev"
@@ -42,9 +42,10 @@
         </p>
         <Code
             label="Web SDK"
+            labelIcon="code"
             language="js"
             code={`import { Appwrite } from 'appwrite';`}
-            showCopy />
+            withCopy />
     {:else if method === Method.CDN}
         <p>
             To install with a CDN (content delivery network) add the following scripts to the bottom
@@ -54,6 +55,6 @@
             label="HTML"
             language="html"
             code={`<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}"></script>`}
-            showCopy />
+            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
index a7b5bbf3e..e13329c53 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
@@ -14,12 +14,10 @@ appwrite
 <WizardStep>
     <svelte:fragment slot="title">Let's get coding</svelte:fragment>
 
-    <div class="common-section">
-        <h2 class="heading-level-7">Init your SDK</h2>
-        <p>
-            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
-            which can be found in your project settings page.
-        </p>
-        <Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
-    </div>
+    <h2 class="heading-level-7">Init your SDK</h2>
+    <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Web SDK" labelIcon="code" language="js" {code} withCopy withLineNumbers />
 </WizardStep>

From a379fb690a620c70728938ed8c35ea79390bd783 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 14 Oct 2022 14:54:57 +0200
Subject: [PATCH 13/16] tests: fix code tests

---
 tests/unit/components/code.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/unit/components/code.test.ts b/tests/unit/components/code.test.ts
index a23ce8f49..eb704cd6b 100644
--- a/tests/unit/components/code.test.ts
+++ b/tests/unit/components/code.test.ts
@@ -26,7 +26,7 @@ test('shows line numbers', async () => {
     const { container } = render(Code, {
         code: 'a\nb;\nc;',
         language: 'js',
-        showLineNumbers: true
+        withLineNumbers: true
     });
 
     expect(container.querySelectorAll('.line-numbers').length).toEqual(1);
@@ -60,7 +60,7 @@ test('copy to clipboard function called on click', async () => {
     const { container } = render(Code, {
         code: 'console.log("test");',
         language: 'js',
-        showCopy: true
+        withCopy: true
     });
 
     Object.assign(window.navigator, {

From f6d89ca2216776c6f8d9e91634b983c4bc0990c6 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 17 Oct 2022 10:56:28 +0200
Subject: [PATCH 14/16] fix: svelte a11y

---
 package-lock.json                             | 14 ++++++-------
 package.json                                  |  2 +-
 src/lib/layout/footer.svelte                  | 21 +++++++++++++++----
 .../platforms/wizard/web/step2.svelte         |  9 +++++---
 .../bucket/[bucket]/file/[file]/+page.svelte  |  1 +
 src/routes/invite/+page.svelte                |  9 ++++++--
 6 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2a62815f8..6f31fe939 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,7 +37,7 @@
                 "prettier": "^2.7.1",
                 "prettier-plugin-svelte": "^2.8.0",
                 "sass": "^1.55.0",
-                "svelte": "^3.51.0",
+                "svelte": "^3.52.0",
                 "svelte-check": "^2.9.2",
                 "svelte-jester": "^2.3.2",
                 "svelte-preprocess": "^4.10.7",
@@ -6989,9 +6989,9 @@
             }
         },
         "node_modules/svelte": {
-            "version": "3.51.0",
-            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.51.0.tgz",
-            "integrity": "sha512-PBITYIrsNOuW+Dtds00gSY68raNZQn7i59Dg/fjgf6WwyawPKeBwle692coO7ILZqSO+UJe9899aDn9sMdeOHA==",
+            "version": "3.52.0",
+            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.52.0.tgz",
+            "integrity": "sha512-FxcnEUOAVfr10vDU5dVgJN19IvqeHQCS1zfe8vayTfis9A2t5Fhx+JDe5uv/C3j//bB1umpLJ6quhgs9xyUbCQ==",
             "dev": true,
             "engines": {
                 "node": ">= 8"
@@ -12991,9 +12991,9 @@
             "dev": true
         },
         "svelte": {
-            "version": "3.51.0",
-            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.51.0.tgz",
-            "integrity": "sha512-PBITYIrsNOuW+Dtds00gSY68raNZQn7i59Dg/fjgf6WwyawPKeBwle692coO7ILZqSO+UJe9899aDn9sMdeOHA==",
+            "version": "3.52.0",
+            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.52.0.tgz",
+            "integrity": "sha512-FxcnEUOAVfr10vDU5dVgJN19IvqeHQCS1zfe8vayTfis9A2t5Fhx+JDe5uv/C3j//bB1umpLJ6quhgs9xyUbCQ==",
             "dev": true
         },
         "svelte-check": {
diff --git a/package.json b/package.json
index 20d136b53..1a46b84ec 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
         "prettier": "^2.7.1",
         "prettier-plugin-svelte": "^2.8.0",
         "sass": "^1.55.0",
-        "svelte": "^3.51.0",
+        "svelte": "^3.52.0",
         "svelte-check": "^2.9.2",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^4.10.7",
diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 24579831c..23f83e399 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -2,13 +2,21 @@
     <div class="container">
         <ul class="inline-links is-center">
             <li class="inline-links-item">
-                <a class="link" href="https://github.com/appwrite/appwrite" target="_blank">
+                <a
+                    class="link"
+                    href="https://github.com/appwrite/appwrite"
+                    target="_blank"
+                    rel="noopener noreferrer">
                     <span class="icon-github-circled" aria-hidden="true" />
                     <span class="text">GitHub</span>
                 </a>
             </li>
             <li class="inline-links-item">
-                <a class="link" href="https://appwrite.io/discord" target="_blank">
+                <a
+                    class="link"
+                    href="https://appwrite.io/discord"
+                    target="_blank"
+                    rel="noopener noreferrer">
                     <span class="icon-discord" aria-hidden="true" />
                     <span class="text">Discord</span>
                 </a>
@@ -17,12 +25,17 @@
                 <a
                     class="link"
                     href="https://github.com/appwrite/appwrite/issues/new"
-                    target="_blank">
+                    target="_blank"
+                    rel="noopener noreferrer">
                     <span class="text">Open an Issue</span>
                 </a>
             </li>
             <li class="inline-links-item">
-                <a class="link" href="https://appwrite.io/docs" target="_blank">
+                <a
+                    class="link"
+                    href="https://appwrite.io/docs"
+                    target="_blank"
+                    rel="noopener noreferrer">
                     <span class="text">Docs</span>
                 </a>
             </li>
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
index d94f989ca..bd6064ad0 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -28,7 +28,7 @@
     </svelte:fragment>
     {#if method === Method.NPM}
         <p>
-            Use <a href="https://npmjs.org" target="_blank" class="link"
+            Use <a href="https://npmjs.org" 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 />
@@ -36,9 +36,12 @@
             When 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" class="link">Rollup</a>), import the
-            Appwrite module when you need it:
+            or
+            <a href="https://rollupjs.org" target="_blank" rel="noopener noreferrer" class="link"
+                >Rollup</a
+            >), import the Appwrite module when you need it:
         </p>
         <Code
             label="Web SDK"
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
index 152ab8451..2271aec85 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
@@ -70,6 +70,7 @@
                     href={downloadFile()}
                     class="file-preview is-with-image"
                     target="_blank"
+                    rel="noopener noreferrer"
                     aria-label="open file in new window">
                     <div class="file-preview-image">
                         <img
diff --git a/src/routes/invite/+page.svelte b/src/routes/invite/+page.svelte
index 374ebc914..a3a3de806 100644
--- a/src/routes/invite/+page.svelte
+++ b/src/routes/invite/+page.svelte
@@ -59,9 +59,14 @@
                         By accepting the invitation, you agree to the <a
                             class="link"
                             href="https://appwrite.io/policy/terms"
-                            target="_blank">Terms and Conditions</a>
+                            target="_blank"
+                            rel="noopener noreferrer">Terms and Conditions</a>
                         and
-                        <a class="link" href="https://appwrite.io/policy/privacy" target="_blank">
+                        <a
+                            class="link"
+                            href="https://appwrite.io/policy/privacy"
+                            target="_blank"
+                            rel="noopener noreferrer">
                             Privacy Policy</a
                         >.</InputChoice>
 

From d798c6bf7f1c27f684ba2cdf9a6ee6875d8c59bb Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 17 Oct 2022 11:27:43 +0200
Subject: [PATCH 15/16] fix: html snippets

---
 src/lib/components/code.svelte     | 67 ++++++++++++++++--------------
 tests/unit/components/code.test.ts | 14 +++----
 2 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index f3f4cf5de..1644926ec 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -8,6 +8,7 @@
     import 'prismjs/components/prism-yaml';
     import 'prismjs/components/prism-swift';
     import 'prismjs/plugins/autoloader/prism-autoloader';
+    import 'prismjs/plugins/custom-class/prism-custom-class';
     import 'prismjs/plugins/line-numbers/prism-line-numbers';
     import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
     import { afterUpdate } from 'svelte';
@@ -20,6 +21,8 @@
     export let withLineNumbers = false;
     export let withCopy = false;
 
+    Prism.plugins.customClass.prefix('prism-');
+
     afterUpdate(async () => {
         Prism.highlightAll();
     });
@@ -99,44 +102,44 @@
         padding: 0;
         margin: 0;
     }
-    .token {
-        &.comment,
-        &.prolog,
-        &.doctype,
-        &.cdata {
+    .prism-token {
+        &.prism-comment,
+        &.prism-prolog,
+        &.prism-doctype,
+        &.prism-cdata {
             color: #868ea3;
         }
 
-        &.punctuation {
+        &.prism-punctuation {
             color: #fcfcff;
 
             body.theme-light & {
                 color: #373b4d;
             }
         }
-        &.property,
-        &.tag,
-        &.boolean,
-        &.number,
-        &.constant,
-        &.symbol,
-        &.deleted,
-        &.selector,
-        &.attr-name,
-        &.string,
-        &.char,
-        &.builtin,
-        &.inserted {
+        &.prism-property,
+        &.prism-tag,
+        &.prism-boolean,
+        &.prism-number,
+        &.prism-constant,
+        &.prism-symbol,
+        &.prism-deleted,
+        &.prism-selector,
+        &.prism-attr-name,
+        &.prism-string,
+        &.prism-char,
+        &.prism-builtin,
+        &.prism-inserted {
             color: #fdc584;
             body.theme-light & {
                 color: #e49545;
             }
         }
-        &.operator,
-        &.entity,
-        &.url,
-        .language-css &.string,
-        .style &.string {
+        &.prism-operator,
+        &.prism-entity,
+        &.prism-url,
+        .language-css &.prism-string,
+        .style &.prism-string {
             color: #fcfcff;
             background: none;
             body.theme-light & {
@@ -144,29 +147,29 @@
             }
         }
 
-        &.atrule,
-        &.attr-value,
-        &.keyword {
+        &.prism-atrule,
+        &.prism-attr-value,
+        &.prism-keyword {
             color: #cbb1fc;
             body.theme-light & {
                 color: #6a6af7;
             }
         }
-        &.function {
+        &.prism-function {
             color: #ffa1ce;
             body.theme-light & {
                 color: #f02e7f;
             }
         }
-        &.class-name {
+        &.prism-class-name {
             color: #a1c4ff;
             body.theme-light & {
                 color: #62aed2;
             }
         }
-        &.regex,
-        &.important,
-        &.variable {
+        &.prism-regex,
+        &.prism-important,
+        &.prism-variable {
             color: #a1c4ff;
             body.theme-light & {
                 color: #62aed2;
diff --git a/tests/unit/components/code.test.ts b/tests/unit/components/code.test.ts
index eb704cd6b..4a02795af 100644
--- a/tests/unit/components/code.test.ts
+++ b/tests/unit/components/code.test.ts
@@ -39,9 +39,9 @@ test('shows code highlighted javascript', async () => {
         language: 'js'
     });
 
-    expect(container.querySelectorAll('.token.function').length).toEqual(1);
-    expect(container.querySelectorAll('.token.string').length).toEqual(1);
-    expect(container.querySelectorAll('.token.punctuation').length).toEqual(4);
+    expect(container.querySelectorAll('.prism-token.prism-function').length).toEqual(1);
+    expect(container.querySelectorAll('.prism-token.prism-string').length).toEqual(1);
+    expect(container.querySelectorAll('.prism-token.prism-punctuation').length).toEqual(4);
 });
 
 test('shows code highlighted json', async () => {
@@ -50,10 +50,10 @@ test('shows code highlighted json', async () => {
         language: 'json'
     });
 
-    expect(container.querySelectorAll('.token.property').length).toEqual(1);
-    expect(container.querySelectorAll('.token.operator').length).toEqual(1);
-    expect(container.querySelectorAll('.token.string').length).toEqual(1);
-    expect(container.querySelectorAll('.token.punctuation').length).toEqual(2);
+    expect(container.querySelectorAll('.prism-token.prism-property').length).toEqual(1);
+    expect(container.querySelectorAll('.prism-token.prism-operator').length).toEqual(1);
+    expect(container.querySelectorAll('.prism-token.prism-string').length).toEqual(1);
+    expect(container.querySelectorAll('.prism-token.prism-punctuation').length).toEqual(2);
 });
 
 test('copy to clipboard function called on click', async () => {

From 358d6d9c464078cd7a7f40c361035f92b357805a Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 17 Oct 2022 11:28:03 +0200
Subject: [PATCH 16/16] fix: adapt to review

---
 .../overview/platforms/createAndroid.svelte      |  1 +
 .../overview/platforms/createApple.svelte        |  1 +
 .../overview/platforms/createFlutter.svelte      |  1 +
 .../overview/platforms/createWeb.svelte          |  1 +
 .../platforms/wizard/android/step2.svelte        | 10 +++-------
 .../platforms/wizard/flutter/step2.svelte        |  3 ++-
 .../overview/platforms/wizard/web/step2.svelte   | 16 +++++-----------
 7 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
index a2eed23ec..d2bc06936 100644
--- a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
@@ -15,6 +15,7 @@
 
     async function create() {
         project.load(projectId);
+        createPlatform.reset();
         wizard.hide();
     }
 
diff --git a/src/routes/console/project-[project]/overview/platforms/createApple.svelte b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
index d1157ef05..6a08eff4c 100644
--- a/src/routes/console/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
@@ -15,6 +15,7 @@
 
     async function create() {
         project.load(projectId);
+        createPlatform.reset();
         wizard.hide();
     }
 
diff --git a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
index 889f1c4e5..c243b7bcd 100644
--- a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
@@ -15,6 +15,7 @@
 
     async function create() {
         project.load(projectId);
+        createPlatform.reset();
         wizard.hide();
     }
 
diff --git a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
index cff74706f..1b2aebfe5 100644
--- a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -15,6 +15,7 @@
 
     async function create() {
         project.load(projectId);
+        createPlatform.reset();
         wizard.hide();
     }
 
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
index f246663aa..a84c90cc3 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
@@ -6,17 +6,13 @@
     const example1 = `repositories {
     mavenCentral()
 }`;
+    const example2 = `implementation("io.appwrite:sdk-for-android:${versions['client-android']}")`;
 </script>
 
 <WizardStep>
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
     <p>First, add this to your root level build.gradle file:</p>
-    <Code label="Groovy" language="kotlin" code={example1} withCopy />
+    <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={`implementation("io.appwrite:sdk-for-android:${versions['client-android']}")`}
-        withCopy />
+    <Code label="Groovy" labelIcon="android" language="kotlin" code={example2} withCopy />
 </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
index b0b075502..7d7dc3551 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -5,6 +5,7 @@
 
     const example1 = `dependencies:
   appwrite: ^${$versions['client-flutter']}`;
+    const example2 = `pub get appwrite`;
 </script>
 
 <WizardStep>
@@ -15,5 +16,5 @@
     <p class="common-section">
         You can also install the SDK using the Dart package manager from your terminal:
     </p>
-    <Code label="Bash" language="sh" code={`pub get appwrite`} withCopy />
+    <Code label="Bash" language="sh" code={example2} withCopy />
 </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
index bd6064ad0..b5222156f 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -11,6 +11,9 @@
     }
 
     let method: Method = Method.NPM;
+
+    const example1 = `import { Appwrite } from 'appwrite';`;
+    const example2 = `<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}" />`;
 </script>
 
 <WizardStep>
@@ -43,21 +46,12 @@
                 >Rollup</a
             >), import the Appwrite module when you need it:
         </p>
-        <Code
-            label="Web SDK"
-            labelIcon="code"
-            language="js"
-            code={`import { Appwrite } from 'appwrite';`}
-            withCopy />
+        <Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
     {:else if method === Method.CDN}
         <p>
             To install with a CDN (content delivery network) add the following scripts to the bottom
             of your tag, but before you use any Appwrite services:
         </p>
-        <Code
-            label="HTML"
-            language="html"
-            code={`<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}"></script>`}
-            withCopy />
+        <Code label="HTML" language="html" code={example2} withCopy />
     {/if}
 </WizardStep>