From 1f1ef69c9cf8bf6dcd259f5618a8cd8dc2d55f62 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 26 Feb 2025 16:50:33 +0100
Subject: [PATCH] design review: fix overview, final page, deployment status

---
 .../(components)/addCollaboratorModal.svelte  | 13 +++-
 .../sites/(components)/siteCard.svelte        |  3 +-
 .../finish/(components)/check.svelte          |  6 +-
 .../sites/create-site/finish/+page.svelte     |  3 +-
 .../project-[project]/sites/grid.svelte       | 61 +++----------------
 .../sites/redeployModal.svelte                |  2 +-
 .../site-[site]/deployments/+page.svelte      |  4 +-
 .../deployment-[deployment]/+page.svelte      |  2 +-
 .../deployments/deploymentMetrics.svelte      |  4 +-
 .../sites/sitesActionMenu.svelte              | 54 ++++++++++++++++
 .../project-[project]/sites/table.svelte      | 22 ++++++-
 11 files changed, 104 insertions(+), 70 deletions(-)
 rename src/routes/(console)/project-[project]/sites/{create-site/finish => }/(components)/addCollaboratorModal.svelte (89%)
 create mode 100644 src/routes/(console)/project-[project]/sites/sitesActionMenu.svelte

diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte b/src/routes/(console)/project-[project]/sites/(components)/addCollaboratorModal.svelte
similarity index 89%
rename from src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
rename to src/routes/(console)/project-[project]/sites/(components)/addCollaboratorModal.svelte
index bf6366984..37b23cea7 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/addCollaboratorModal.svelte
@@ -60,10 +60,10 @@
         name = null;
     }
 
-    // TODO: fix design
+    //TODO: fix popover
 </script>
 
-<Modal title="Share site" {error} bind:show onSubmit={create}>
+<Modal title="Add collaborator" {error} bind:show onSubmit={create}>
     <span slot="description">
         Share your progress and start collaborating by adding members to your organization.
     </span>
@@ -75,7 +75,14 @@
             placeholder="Enter email"
             autofocus={true}
             bind:value={email} />
-        <InputSelect popover={Roles} id="role" label="Role" options={roles} bind:value={role} />
+        <InputSelect
+            popover={Roles}
+            id="role"
+            label="Role"
+            placeholder="Select role"
+            required
+            options={roles}
+            bind:value={role} />
     </Layout.Stack>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
index 182906f4b..a59c4af1b 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
@@ -27,6 +27,7 @@
     export let deployment: Models.Deployment;
     export let proxyRuleList: Models.ProxyRuleList;
     export let hideQRCode = false;
+    export let variant: 'primary' | 'secondary' = 'primary';
 
     let show = false;
     const siteUrl = proxyRuleList.total > 0 ? proxyRuleList.rules[0].domain : deployment.domain;
@@ -55,7 +56,7 @@
     }
 </script>
 
-<Card padding="s" radius="m">
+<Card padding="s" radius="m" {variant}>
     <Layout.Stack gap="l">
         <div class="card-grid">
             <Image
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/check.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/check.svelte
index c6da2d53d..2eedee9f1 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/check.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/check.svelte
@@ -15,7 +15,7 @@
                 cx="10"
                 cy="10"
                 r="8"
-                fill="#FD366E"
+                fill="var(--color-bgcolor-accent)"
                 fill-opacity=".08"
                 in:fade={{ duration: 250, delay: 1000 }} />
             <circle
@@ -25,7 +25,7 @@
                 cx="10"
                 cy="10"
                 r="8"
-                stroke="#FD366E"
+                stroke="var(--color-bgcolor-accent)"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 stroke-opacity=".32"
@@ -33,7 +33,7 @@
         </g>
         <path
             in:draw={{ duration: 1000 }}
-            stroke="#EDEDF0"
+            stroke="var(--color-fgcolor-accent)"
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="1.2"
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
index 745fb156a..c8a01b3d6 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/+page.svelte
@@ -10,7 +10,7 @@
     import SiteCard from '../../(components)/siteCard.svelte';
     import ConnectRepoModal from '../../(components)/connectRepoModal.svelte';
     import { onMount } from 'svelte';
-    import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte';
+    import AddCollaboratorModal from '../../(components)/addCollaboratorModal.svelte';
     import { protocol } from '$routes/(console)/store';
 
     export let data;
@@ -45,6 +45,7 @@
                 </Layout.Stack>
                 <Lights style="top: -100px; height:200px; width: 50%" />
                 <SiteCard
+                    variant="secondary"
                     deployment={data.deployment}
                     proxyRuleList={data.proxyRuleList}
                     hideQRCode>
diff --git a/src/routes/(console)/project-[project]/sites/grid.svelte b/src/routes/(console)/project-[project]/sites/grid.svelte
index 394c3e877..3c9966635 100644
--- a/src/routes/(console)/project-[project]/sites/grid.svelte
+++ b/src/routes/(console)/project-[project]/sites/grid.svelte
@@ -1,26 +1,20 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Button } from '$lib/elements/forms';
     import { timeFromNow } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
-    import {
-        IconCog,
-        IconDotsHorizontal,
-        IconGlobeAlt,
-        IconRefresh
-    } from '@appwrite.io/pink-icons-svelte';
-    import { ActionMenu, Card, Icon, Layout, Popover } from '@appwrite.io/pink-svelte';
-    import RedeployModal from './redeployModal.svelte';
+    import { Card, Layout } from '@appwrite.io/pink-svelte';
     import { getFrameworkIcon } from './store';
     import { SvgIcon } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { getApiEndpoint } from '$lib/stores/sdk';
+    import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte';
+    import SitesActionMenu from './sitesActionMenu.svelte';
 
     export let siteList: Models.SiteList;
     export let deployments: Models.Deployment[];
 
-    let showRedeploy = false;
+    let showAddCollaborator = false;
     let selectedSite: Models.Site = null;
 
     function getScreenshot(theme: string, site: Models.Site) {
@@ -48,7 +42,7 @@
     }
 </script>
 
-<Layout.GridBox itemSize="274px">
+<Layout.Grid columns={3} columnsXS={1} columnsXXS={1}>
     {#each siteList.sites as site}
         <Card.Link
             href={`${base}/project-${$page.params.project}/sites/site-${site.$id}`}
@@ -62,49 +56,12 @@
                 <svelte:fragment slot="avatar">
                     <SvgIcon name={getFrameworkIcon(site.framework)} iconSize="small" />
                 </svelte:fragment>
-                <Popover placement="bottom-end" let:toggle>
-                    <Button
-                        text
-                        icon
-                        size="s"
-                        on:click={(e) => {
-                            e.preventDefault();
-                            toggle(e);
-                        }}>
-                        <Icon size="s" icon={IconDotsHorizontal} /></Button>
-                    <svelte:fragment slot="tooltip" let:toggle>
-                        <ActionMenu.Root>
-                            <ActionMenu.Item.Button
-                                leadingIcon={IconRefresh}
-                                on:click={(e) => {
-                                    e.preventDefault();
-                                    selectedSite = site;
-                                    showRedeploy = true;
-                                    toggle(e);
-                                }}>
-                                Redeploy
-                            </ActionMenu.Item.Button>
-                            <ActionMenu.Item.Anchor
-                                href={`${base}/project-${$page.params.project}/sites/site-${site.$id}/domains`}
-                                leadingIcon={IconGlobeAlt}>
-                                Domains
-                            </ActionMenu.Item.Anchor>
-                            <ActionMenu.Item.Anchor
-                                href={`${base}/project-${$page.params.project}/sites/site-${site.$id}/settings`}
-                                leadingIcon={IconCog}>
-                                Settings
-                            </ActionMenu.Item.Anchor>
-                        </ActionMenu.Root>
-                    </svelte:fragment>
-                </Popover>
+                <SitesActionMenu {site} bind:showAddCollaborator bind:selectedSite />
             </Card.Media>
         </Card.Link>
     {/each}
-</Layout.GridBox>
+</Layout.Grid>
 
-{#if selectedSite?.$id && showRedeploy}
-    <RedeployModal
-        selectedDeploymentId={selectedSite.deploymentId}
-        bind:show={showRedeploy}
-        site={selectedSite} />
+{#if selectedSite?.$id && showAddCollaborator}
+    <AddCollaboratorModal bind:show={showAddCollaborator} />
 {/if}
diff --git a/src/routes/(console)/project-[project]/sites/redeployModal.svelte b/src/routes/(console)/project-[project]/sites/redeployModal.svelte
index ab470db07..26a8c749d 100644
--- a/src/routes/(console)/project-[project]/sites/redeployModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/redeployModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { Confirm, Modal } from '$lib/components';
+    import { Confirm } from '$lib/components';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
index 10e8f7ed6..f29072e5b 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
@@ -50,9 +50,7 @@
 
 <Container>
     <Layout.Stack gap="xxxl">
-        {#if data.deploymentList.total}
-            <DeploymentMetrics deploymentList={data.deploymentList} />
-        {/if}
+        <DeploymentMetrics deploymentList={data.deploymentList} />
         <Layout.Stack gap="l">
             <Layout.Stack justifyContent="space-between" direction="row">
                 <div class="is-not-mobile">
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte
index 870e48e0b..7e5577107 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte
@@ -73,7 +73,7 @@
     </SiteCard>
     <Card isTile padding="s">
         <Accordion
-            title="Deployment Actions"
+            title="Deployment logs"
             badge={capitalize(data.deployment.status)}
             open={data.deployment.status !== 'ready'}
             badgeType={badgeTypeDeployment(data.deployment.status)}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
index 9a80b953a..cba71c916 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
@@ -49,9 +49,7 @@
         }
     ];
     onMount(async () => {
-        if (deploymentList.total) {
-            await fetchUsage();
-        }
+        await fetchUsage();
     });
 
     async function fetchUsage() {
diff --git a/src/routes/(console)/project-[project]/sites/sitesActionMenu.svelte b/src/routes/(console)/project-[project]/sites/sitesActionMenu.svelte
new file mode 100644
index 000000000..7e74b3108
--- /dev/null
+++ b/src/routes/(console)/project-[project]/sites/sitesActionMenu.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Button } from '$lib/elements/forms';
+    import type { Models } from '@appwrite.io/console';
+    import {
+        IconCog,
+        IconDotsHorizontal,
+        IconGlobeAlt,
+        IconUserAdd
+    } from '@appwrite.io/pink-icons-svelte';
+
+    import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
+
+    export let site: Models.Site;
+    export let showAddCollaborator = false;
+    export let selectedSite: Models.Site = null;
+</script>
+
+<Popover placement="bottom-end" let:toggle>
+    <Button
+        text
+        icon
+        size="s"
+        on:click={(e) => {
+            e.preventDefault();
+            toggle(e);
+        }}>
+        <Icon size="s" icon={IconDotsHorizontal} /></Button>
+    <svelte:fragment slot="tooltip" let:toggle>
+        <ActionMenu.Root noPadding>
+            <ActionMenu.Item.Button
+                leadingIcon={IconUserAdd}
+                on:click={(e) => {
+                    e.preventDefault();
+                    selectedSite = site;
+                    showAddCollaborator = true;
+                    toggle(e);
+                }}>
+                Add collaborator
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Anchor
+                href={`${base}/project-${$page.params.project}/sites/site-${site.$id}/domains`}
+                leadingIcon={IconGlobeAlt}>
+                Domains
+            </ActionMenu.Item.Anchor>
+            <ActionMenu.Item.Anchor
+                href={`${base}/project-${$page.params.project}/sites/site-${site.$id}/settings`}
+                leadingIcon={IconCog}>
+                Settings
+            </ActionMenu.Item.Anchor>
+        </ActionMenu.Root>
+    </svelte:fragment>
+</Popover>
diff --git a/src/routes/(console)/project-[project]/sites/table.svelte b/src/routes/(console)/project-[project]/sites/table.svelte
index 8afbfc9be..3dc3da7c3 100644
--- a/src/routes/(console)/project-[project]/sites/table.svelte
+++ b/src/routes/(console)/project-[project]/sites/table.svelte
@@ -2,11 +2,16 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Table } from '@appwrite.io/pink-svelte';
+    import { Avatar, Layout, Table } from '@appwrite.io/pink-svelte';
     import { columns } from './store';
     import type { Models } from '@appwrite.io/console';
+    import SitesActionMenu from './sitesActionMenu.svelte';
+    import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte';
 
     export let siteList: Models.SiteList;
+
+    let showAddCollaborator = false;
+    let selectedSite: Models.Site = null;
 </script>
 
 <Table.Root>
@@ -18,6 +23,7 @@
                 </Table.Header.Cell>
             {/if}
         {/each}
+        <Table.Header.Cell width="40" />
     </svelte:fragment>
     {#each siteList.sites as site}
         <Table.Link href={`${base}/project-${$page.params.project}/sites/site-${site.$id}`}>
@@ -25,7 +31,11 @@
                 {#if column.show}
                     {#if column.id === 'name'}
                         <Table.Cell width={column?.width?.toString() ?? ''}>
-                            {site.name}
+                            <!-- TODO: check with Matej if we have the favicon -->
+                            <Layout.Stack direction="row" alignItems="center" gap="s" inline>
+                                <Avatar size="xs" src={column.icon} alt={site.name} />
+                                {site.name}
+                            </Layout.Stack>
                         </Table.Cell>
                     {:else if column.id === '$updatedAt'}
                         <Table.Cell width={column?.width?.toString() ?? ''}>
@@ -38,6 +48,14 @@
                     {/if}
                 {/if}
             {/each}
+            <Table.Cell>
+                <Layout.Stack alignItems="flex-end">
+                    <SitesActionMenu {site} bind:showAddCollaborator bind:selectedSite />
+                </Layout.Stack>
+            </Table.Cell>
         </Table.Link>
     {/each}
 </Table.Root>
+{#if selectedSite?.$id && showAddCollaborator}
+    <AddCollaboratorModal bind:show={showAddCollaborator} />
+{/if}