From b2cc1776013d2b2ab84c7270c05affc97ef08881 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 27 Jan 2025 17:56:24 +0100
Subject: [PATCH] fix: creation flows

---
 src/lib/elements/forms/inputSelect.svelte     |  2 ++
 .../sites/create-site/aside.svelte            | 27 ++---------------
 .../sites/create-site/details.svelte          |  9 +++---
 .../create-site/manual/configuration.svelte   |  1 +
 .../configuration.svelte                      |  4 ++-
 .../sites/create-site/store.ts                | 30 +++++++++++++++++++
 .../template-[template]/+page.svelte          |  4 ++-
 .../templates/template-[template]/+page.ts    |  2 +-
 .../template-[template]/configuration.svelte  | 19 +++++-------
 9 files changed, 55 insertions(+), 43 deletions(-)
 create mode 100644 src/routes/(console)/project-[project]/sites/create-site/store.ts

diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 6cc0d3568..247786a32 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Input } from '@appwrite.io/pink-svelte';
+    import type { ComponentType } from 'svelte';
 
     export let id: string;
     export let label: string | undefined = undefined;
@@ -11,6 +12,7 @@
         value: string | boolean | number | null;
         label: string;
         disabled?: boolean;
+        leadingIcon?: ComponentType;
     }[];
 
     let element: HTMLSelectElement;
diff --git a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
index 20d697c51..e6803ae48 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
@@ -1,16 +1,10 @@
 <script lang="ts">
     import { Card } from '$lib/components';
     import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
-    import {
-        IconGithub,
-        IconReact,
-        IconSvelte,
-        IconNuxt,
-        IconVue,
-        IconGitBranch
-    } from '@appwrite.io/pink-icons-svelte';
+    import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte';
     import { consoleVariables } from '$routes/(console)/store';
     import type { Models } from '@appwrite.io/console';
+    import { getFrameworkIcon } from './store';
 
     export let framework: Partial<Models.Framework>;
     export let repositoryName: string;
@@ -18,21 +12,6 @@
     export let rootDir: string;
     export let domain: string = '';
     export let showAfter = true;
-
-    function getIcon(fr: string) {
-        switch (true) {
-            case fr.toLocaleLowerCase().includes('sveltekit'):
-                return IconSvelte;
-            case fr.toLocaleLowerCase().includes('nuxt'):
-                return IconNuxt;
-            case fr.toLocaleLowerCase().includes('vue'):
-                return IconVue;
-            case fr.toLocaleLowerCase().includes('react'):
-                return IconReact;
-            default:
-                return undefined;
-        }
-    }
 </script>
 
 <Card padding="xs">
@@ -40,7 +19,7 @@
         <slot />
         <Layout.Stack gap="l">
             {#if framework?.name}
-                {@const frameworkIcon = getIcon(framework.key)}
+                {@const frameworkIcon = getFrameworkIcon(framework.key)}
                 <Layout.Stack gap="xxxs">
                     <Typography.Caption variant="400">Framework</Typography.Caption>
                     <Layout.Stack gap="xs" alignItems="center" direction="row">
diff --git a/src/routes/(console)/project-[project]/sites/create-site/details.svelte b/src/routes/(console)/project-[project]/sites/create-site/details.svelte
index eed685a63..c9d6f9cc8 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/details.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/details.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
     import { InputSelect, InputText } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
-    import { Fieldset, Layout } from '@appwrite.io/pink-svelte';
+    import { Fieldset, Layout, Tag } from '@appwrite.io/pink-svelte';
+    import type { ComponentType } from 'svelte';
 
     export let name: string;
     export let id: string;
@@ -12,6 +12,7 @@
     export let options: {
         value: string;
         label: string;
+        leadingIcon?: ComponentType;
     }[] = [];
 
     let showCustomId = false;
@@ -31,10 +32,10 @@
                 <CustomId bind:id bind:show={showCustomId} name="Site" fullWidth />
             {:else}
                 <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                    <Tag size="s" on:click={() => (showCustomId = !showCustomId)}>
                         <span class="icon-pencil" aria-hidden="true" />
                         <span class="text">Site ID </span>
-                    </Pill>
+                    </Tag>
                 </div>
             {/if}
         </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/manual/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/manual/configuration.svelte
index 36416ffba..581786a1c 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/manual/configuration.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/manual/configuration.svelte
@@ -24,6 +24,7 @@
     import SecretVariableModal from '../secretVariableModal.svelte';
     import ImportSiteVariablesModal from '../importSiteVariablesModal.svelte';
     import type { Models } from '@appwrite.io/console';
+    import { getFrameworkIcon } from '../store';
 
     export let frameworks: Models.Framework[];
     export let selectedFramework: Models.Framework;
diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/configuration.svelte
index 0434cdbc8..93c289d7f 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/configuration.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/configuration.svelte
@@ -24,6 +24,7 @@
     import SecretVariableModal from '../../secretVariableModal.svelte';
     import ImportSiteVariablesModal from '../../importSiteVariablesModal.svelte';
     import type { Models } from '@appwrite.io/console';
+    import { getFrameworkIcon } from '../../store';
 
     export let frameworks: Models.Framework[];
     export let selectedFramework: Models.Framework;
@@ -59,7 +60,8 @@
             bind:value={frameworkId}
             options={frameworks.map((framework) => ({
                 value: framework.key,
-                label: framework.name
+                label: framework.name,
+                leadingIcon: getFrameworkIcon(framework.key)
             }))}
             on:change={() => {
                 selectedFramework = frameworks.find((framework) => framework.key === frameworkId);
diff --git a/src/routes/(console)/project-[project]/sites/create-site/store.ts b/src/routes/(console)/project-[project]/sites/create-site/store.ts
new file mode 100644
index 000000000..226856b6c
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/create-site/store.ts
@@ -0,0 +1,30 @@
+import {
+    IconAngular,
+    IconNuxt,
+    IconReact,
+    IconSvelte,
+    IconVue
+} from '@appwrite.io/pink-icons-svelte';
+
+export function getFrameworkIcon(framework: string) {
+    console.log(framework);
+    switch (true) {
+        case framework.toLocaleLowerCase().includes('sveltekit'):
+            return IconSvelte;
+        case framework.toLocaleLowerCase().includes('nuxt'):
+            return IconNuxt;
+        case framework.toLocaleLowerCase().includes('vue'):
+            return IconVue;
+        case framework.toLocaleLowerCase().includes('react'):
+            return IconReact;
+        case framework.toLocaleLowerCase().includes('angular'):
+            return IconAngular;
+        case framework.toLocaleLowerCase().includes('svelte'):
+            return IconSvelte;
+        case framework.toLocaleLowerCase().includes('next'):
+            return IconReact; //TODO: add next icon
+
+        default:
+            return undefined;
+    }
+}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
index c8dc7bbca..81e362bf5 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
@@ -29,6 +29,7 @@
     import { BuildRuntime, Framework, ID, Query } from '@appwrite.io/console';
     import Domain from '../../domain.svelte';
     import { NewRepository, Repositories, RepositoryBehaviour } from '$lib/components/git';
+    import { getFrameworkIcon } from '../../store';
 
     export let data;
 
@@ -223,7 +224,8 @@
                 {@const options = data.template.frameworks.map((framework) => {
                     return {
                         value: framework.name,
-                        label: framework.name
+                        label: framework.name,
+                        leadingIcon: getFrameworkIcon(framework.key)
                     };
                 })}
                 <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.ts
index f10d6da5a..623f58f49 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.ts
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.ts
@@ -1,7 +1,7 @@
 import { sdk } from '$lib/stores/sdk';
 
 export const load = async ({ parent, params }) => {
-    const { installations, frameworks } = await parent();
+    let { installations, frameworks } = await parent();
     const template = await sdk.forProject.sites.getTemplate(params.template);
 
     return {
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/configuration.svelte
index 940bd89cd..6504ab6fe 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/configuration.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/configuration.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { Collapsible, CollapsibleItem } from '$lib/components';
     import {
         Button,
         InputEmail,
@@ -10,7 +9,7 @@
         InputURL
     } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
-    import { Fieldset, Layout, Tag, Popover, Icon } from '@appwrite.io/pink-svelte';
+    import { Fieldset, Layout, Popover, Icon, Accordion } from '@appwrite.io/pink-svelte';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import type { SvelteComponent } from 'svelte';
 
@@ -51,10 +50,9 @@
 
 <Fieldset legend="Configuration">
     <Layout.Stack gap="l">
-        <Collapsible>
+        <Layout.Stack>
             {#if requiredVariables?.length}
-                <CollapsibleItem open>
-                    <svelte:fragment slot="title">Required environment variables</svelte:fragment>
+                <Accordion title="Required environment variables" open>
                     <Layout.Stack>
                         Provide the values for the required environment variables to run this
                         application.
@@ -94,13 +92,10 @@
                             </Layout.Stack>
                         {/each}
                     </Layout.Stack>
-                </CollapsibleItem>
+                </Accordion>
             {/if}
             {#if optionalVariables?.length}
-                <CollapsibleItem>
-                    <svelte:fragment slot="title">
-                        Environment variables <Tag size="s">Optional</Tag>
-                    </svelte:fragment>
+                <Accordion title="Environment variables" badge="Optional">
                     <Layout.Stack>
                         Set up environment variables to securely manage keys and settings for your
                         project.
@@ -140,8 +135,8 @@
                             </Layout.Stack>
                         {/each}
                     </Layout.Stack>
-                </CollapsibleItem>
+                </Accordion>
             {/if}
-        </Collapsible>
+        </Layout.Stack>
     </Layout.Stack>
 </Fieldset>