From ccb5f3810ab8b98f894bb1d3a43b08349eb0c9ab Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 29 Jan 2025 15:53:30 +0100
Subject: [PATCH] fix: icon sizes and details

---
 src/lib/components/git/repositories.svelte    | 27 +++++++++++++------
 .../sites/create-site/aside.svelte            |  2 +-
 .../create-site/repositories/+page.svelte     | 17 +++++++-----
 .../project-[project]/sites/grid.svelte       |  2 +-
 .../site-[site]/deploymentsOverview.svelte    |  2 ++
 .../project-[project]/sites/store.ts          |  2 +-
 6 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte
index 0ca069f6a..75e83bca7 100644
--- a/src/lib/components/git/repositories.svelte
+++ b/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"
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 0905dd6ff..7d310c96b 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
+++ b/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}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
index cc8dcce97..f98d97f38 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
+++ b/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">
diff --git a/src/routes/(console)/project-[project]/sites/grid.svelte b/src/routes/(console)/project-[project]/sites/grid.svelte
index 17d04034f..a6f5d7957 100644
--- a/src/routes/(console)/project-[project]/sites/grid.svelte
+++ b/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
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
index 69040cfaa..5d372966a 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
+++ b/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>
diff --git a/src/routes/(console)/project-[project]/sites/store.ts b/src/routes/(console)/project-[project]/sites/store.ts
index 1c1b004a5..8912e25d0 100644
--- a/src/routes/(console)/project-[project]/sites/store.ts
+++ b/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();
     }
 }