design review: fix overview, final page, deployment status

2026-06-06 19:27:48 +00:00 · 2025-02-26 16:50:33 +01:00
parent 4884114786
commit 1f1ef69c9c
11 changed files with 104 additions and 70 deletions
@@ -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>
@@ -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
@@ -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"
@@ -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>
@@ -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}
@@ -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';
@@ -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">
@@ -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)}
@@ -49,9 +49,7 @@
        }
    ];
    onMount(async () => {
-        if (deploymentList.total) {
-            await fetchUsage();
-        }
+        await fetchUsage();
    });

    async function fetchUsage() {
@@ -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>
@@ -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}