fix: icon sizes and details

src/lib/components/git/repositories.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
     import { EmptySearch } from '$lib/components';
     import { Button, InputSearch, InputSelect } from '$lib/elements/forms';
     import { timeFromNow } from '$lib/helpers/date';
@@ -12,7 +11,8 @@
     import { Layout, Table, Typography, Icon, Avatar } from '@appwrite.io/pink-svelte';
     import { IconLockClosed } from '@appwrite.io/pink-icons-svelte';
     import ConnectGit from './connectGit.svelte';
-    import Link from '$lib/elements/link.svelte';
+    import SvgIcon from '../svgIcon.svelte';
+    import { getFrameworkIcon } from '$routes/(console)/project-[project]/sites/store';
 
     const dispatch = createEventDispatcher();
 
@@ -71,6 +71,13 @@
 
         return $repositories.repositories.slice(0, 4);
     }
+
+    async function detectFramework(repo) {
+        console.log(repo);
+        // TODO add code once backend is implemented
+        // const { framework } = await sdk.forProject.functions.detectFramework(repo.id);
+        return '';
+    }
 </script>
 
 {#if hasInstallations}
@@ -110,11 +117,6 @@
                     <InputSearch placeholder="Search repositories" bind:value={search} />
                 </Layout.Stack>
             {/await}
-            <p>
-                Manage organization configuration in your <Link
-                    href={`${base}/project-${$page.params.project}/settings`}>project settings</Link
-                >.
-            </p>
         </Layout.Stack>
         {#if selectedInstallation}
             {#await loadRepositories(selectedInstallation, search)}
@@ -138,7 +140,16 @@
                                                 value={repo.id} />
                                         {/if}
                                         {#if product === 'sites'}
-                                            <Avatar size="xs" alt={repo.name} />
+                                            {#await detectFramework(repo)}
+                                                <Avatar size="xs" alt={repo.name} empty />
+                                            {:then framework}
+                                                <Avatar
+                                                    size="xs"
+                                                    alt={repo.name}
+                                                    empty={!framework}>
+                                                    <SvgIcon name={getFrameworkIcon(framework)} />
+                                                </Avatar>
+                                            {/await}
                                         {:else}
                                             <Avatar
                                                 size="xs"

src/routes/(console)/project-[project]/sites/create-site/aside.svelte

@@ -24,7 +24,7 @@
                     <Typography.Caption variant="400">Framework</Typography.Caption>
                     <Layout.Stack gap="xs" alignItems="center" direction="row">
                         {#if frameworkIcon}
-                            <SvgIcon name={frameworkIcon} />
+                            <SvgIcon iconSize="small" size={20} name={frameworkIcon} />
                         {/if}
                         <Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
                             {framework.name}

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

@@ -9,7 +9,7 @@
     import { Wizard } from '$lib/layout';
     import { installation, repository } from '$lib/stores/vcs.js';
     import type { Models } from '@appwrite.io/console';
-    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
     let hasInstallations = !!data?.installations?.total;
@@ -26,12 +26,15 @@
 </script>
 
 <Wizard title="Create site" href={`${base}/project-${$page.params.project}/sites/`}>
-    <Repositories
-        bind:hasInstallations
-        bind:selectedRepository
-        product="sites"
-        action="button"
-        on:connect={onConnect} />
+    <Fieldset legend="Git repository">
+        <Repositories
+            bind:hasInstallations
+            bind:selectedRepository
+            product="sites"
+            action="button"
+            on:connect={onConnect} />
+    </Fieldset>
+
     <svelte:fragment slot="aside">
         <Card>
             <Layout.Stack gap="m">

src/routes/(console)/project-[project]/sites/grid.svelte

@@ -34,7 +34,7 @@
                 alt={site.name}
                 avatar>
                 <svelte:fragment slot="avatar">
-                    <SvgIcon name={getFrameworkIcon(site.framework)} />
+                    <SvgIcon name={getFrameworkIcon(site.framework)} iconSize="small" />
                 </svelte:fragment>
                 <Popover placement="bottom-end" let:toggle>
                     <Button

src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte

@@ -27,6 +27,8 @@
     let showPromote = false;
     let showRedeploy = false;
     let selectedDeployment: Models.Deployment = null;
+
+    $: console.log(deploymentList);
 </script>
 
 <Layout.Stack>

src/routes/(console)/project-[project]/sites/store.ts

@@ -36,6 +36,6 @@ export function getFrameworkIcon(framework: string) {
             return 'remix';
 
         default:
-            return undefined;
+            return framework.toLocaleLowerCase();
     }
 }