fix: functions

2026-06-06 19:27:48 +00:00 · 2025-03-07 17:50:33 +01:00
parent 624a60ead5
commit 8e5cf0bb7f
21 changed files with 299 additions and 354 deletions
@@ -2,3 +2,5 @@ export { default as Repositories } from './repositories.svelte';
 export { default as ConnectGit } from './connectGit.svelte';
 export { default as NewRepository } from './newRepository.svelte';
 export { default as RepositoryBehaviour } from './repositoryBehaviour.svelte';
+export { default as DeploymentCreatedBy } from './deploymentCreatedBy.svelte';
+export { default as DeploymentSource } from './deploymentSource.svelte';
@@ -16,7 +16,7 @@
    import ConnectBehaviour from './connectBehaviour.svelte';
    import ProductionBranch from '$lib/components/git/productionBranchFieldset.svelte';
    import Configuration from './configuration.svelte';
-    import { ID, Runtime, Type, type Models } from '@appwrite.io/console';
+    import { ID, Runtime, type Models } from '@appwrite.io/console';
    import { NewRepository, Repositories, RepositoryBehaviour } from '$lib/components/git';
    import { consoleVariables } from '$routes/(console)/store';
    import Details from '../(components)/details.svelte';
@@ -105,6 +105,8 @@
            return;
        } else {
            try {
+                const rt = data.template.runtimes.find((r) => r.name === runtime);
+
                const func = await sdk.forProject.functions.create(
                    id,
                    name,
@@ -115,11 +117,11 @@
                    data.template.timeout ? data.template.timeout : undefined,
                    undefined,
                    undefined,
-                    entrypoint,
+                    entrypoint || rt.entrypoint,
                    undefined,
                    selectedScopes?.length ? selectedScopes : undefined,
-                    $installation.$id,
-                    $repository.id,
+                    connectBehaviour === 'later' ? undefined : $installation?.$id || undefined,
+                    connectBehaviour === 'later' ? undefined : $repository?.id || undefined,
                    branch,
                    silentMode,
                    rootDir,
@@ -145,10 +147,12 @@
                );
                await Promise.all(promises);

-                await sdk.forProject.functions.createVcsDeployment(
+                await sdk.forProject.functions.createTemplateDeployment(
                    func.$id,
-                    Type.Branch,
-                    branch,
+                    data.template.providerRepositoryId || undefined,
+                    data.template.providerOwner || undefined,
+                    rt?.providerRootDirectory || undefined,
+                    data.template.providerVersion || undefined,
                    true
                );

@@ -3,7 +3,7 @@
    import { Modal, Code, Alert } from '$lib/components';
    import { onMount } from 'svelte';
    import { page } from '$app/stores';
-    import { func } from './store';
+    import { func } from '../store';
    import SecondaryTabs from '$lib/components/secondaryTabs.svelte';
    import SecondaryTabsItem from '$lib/components/secondaryTabsItem.svelte';

@@ -1,7 +1,7 @@
 <script lang="ts">
    import { Button } from '$lib/elements/forms';
    import { Box, Code, Modal, NumericList, NumericListItem } from '$lib/components';
-    import { func } from './store';
+    import { func } from '../store';
    import { base } from '$app/paths';
    import { page } from '$app/stores';

@@ -14,7 +14,7 @@
    import { invalidate } from '$app/navigation';
    import { Dependencies } from '$lib/constants';
    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { func } from './store';
+    import { func } from '../store';

    export let show = false;

@@ -10,6 +10,14 @@
    import type { Models } from '@appwrite.io/console';
    import { base } from '$app/paths';
    import { canWriteFunctions } from '$lib/stores/roles';
+    import {
+        IconCalendar,
+        IconClock,
+        IconList,
+        IconPlus,
+        IconSearch,
+        IconXCircle
+    } from '@appwrite.io/pink-icons-svelte';

    onMount(() => {
        let previousStatus = null;
@@ -48,7 +56,7 @@
            },
            keys: $page.url.pathname.endsWith($func.$id) ? ['c'] : ['c', 'd'],
            group: 'functions',
-            icon: 'plus',
+            icon: IconPlus,
            disabled: !$canWriteFunctions
        },
        {
@@ -59,7 +67,7 @@
                );
                scrollBy({ top: -100 });
            },
-            icon: 'search',
+            icon: IconSearch,
            group: 'functions',
            disabled: !$canWriteFunctions
        },
@@ -71,7 +79,7 @@
                );
                scrollBy({ top: -100 });
            },
-            icon: 'calendar',
+            icon: IconCalendar,
            group: 'functions',
            disabled: !$canWriteFunctions
        },
@@ -82,7 +90,7 @@
                    `${base}/project-${$project.$id}/functions/function-${$func.$id}/settings#variables`
                );
            },
-            icon: 'list',
+            icon: IconList,
            group: 'functions',
            disabled: !$canWriteFunctions
        },
@@ -93,7 +101,7 @@
                    `${base}/project-${$project.$id}/functions/function-${$func.$id}/settings#timeout`
                );
            },
-            icon: 'x-circle',
+            icon: IconXCircle,
            group: 'functions',
            disabled: !$canWriteFunctions
        },
@@ -105,7 +113,7 @@
                );
                scrollBy({ top: -100 });
            },
-            icon: 'clock',
+            icon: IconClock,
            group: 'functions',
            disabled: !$canWriteFunctions
        },
@@ -3,14 +3,12 @@
    import { page } from '$app/stores';
    import { Empty, PaginationWithLimit, Alert, ViewSelector, EmptySearch } from '$lib/components';
    import { Button } from '$lib/elements/forms';
-    import { deploymentList, func } from './store';
+    import { columns, deploymentList, func } from './store';
    import { Container, ContainerHeader } from '$lib/layout';
    import type { Models } from '@appwrite.io/console';
    import Create from './create.svelte';
    import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
    import { readOnly } from '$lib/stores/billing';
-    import { writable } from 'svelte/store';
-    import type { Column } from '$lib/helpers/types';
    import Table from './table.svelte';
    import { Filters } from '$lib/components/filters';
    import { queries, tags } from '$lib/components/filters/store';
@@ -21,8 +19,9 @@
    import { Pill } from '$lib/elements';
    import { onMount } from 'svelte';
    import { canWriteFunctions } from '$lib/stores/roles';
-    import { Typography } from '@appwrite.io/pink-svelte';
+    import { Icon, Typography } from '@appwrite.io/pink-svelte';
    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { IconFilterLine } from '@appwrite.io/pink-icons-svelte';

    export let data;

@@ -31,94 +30,6 @@

    let selectedDeployment: Models.Deployment = null;

-    const columns = writable<Column[]>([
-        { id: '$id', title: 'Deployment ID', type: 'string', show: true, width: 150 },
-        {
-            id: 'status',
-            title: 'Status',
-            type: 'enum',
-            show: true,
-            width: 110,
-            array: true,
-            format: 'enum',
-            elements: ['ready', 'processing', 'building', 'waiting', 'cancelled', 'failed'],
-            filter: false
-        },
-        {
-            id: 'type',
-            title: 'Source',
-            type: 'string',
-            show: true,
-            width: 90,
-            array: true,
-            format: 'enum',
-            elements: [
-                { value: 'manual', label: 'Manual' },
-                { value: 'cli', label: 'CLI' },
-                { value: 'vcs', label: 'Git' }
-            ]
-        },
-        {
-            id: '$updatedAt',
-            title: 'Updated',
-            type: 'datetime',
-            show: true,
-            width: 150,
-            format: 'datetime'
-        },
-        {
-            id: 'buildTime',
-            title: 'Build time',
-            type: 'integer',
-            show: true,
-            width: 90,
-            elements: [
-                {
-                    value: 15,
-                    label: 'more than 15 seconds'
-                },
-                {
-                    value: 60,
-                    label: 'more than 1 minute'
-                },
-                {
-                    value: 5 * 60,
-                    label: 'more than 5 minutes'
-                }
-            ],
-            filter: false
-        },
-        {
-            id: 'size',
-            title: 'Source size',
-            type: 'integer',
-            show: true,
-            width: 140,
-            elements: [
-                {
-                    value: 2 * 1000 * 1000,
-                    label: 'more than 2MB'
-                },
-                {
-                    value: 10 * 1000 * 1000,
-                    label: 'more than 10MB'
-                },
-                {
-                    value: 50 * 1000 * 1000,
-                    label: 'more than 50MB'
-                }
-            ]
-        },
-        {
-            id: 'buildSize',
-            title: 'Build size',
-            type: 'integer',
-            show: false,
-            filter: false,
-            width: 80
-        }
-    ]);
-
    let showMobileFilters = false;

    onMount(() => {
@@ -138,8 +49,9 @@
    {#if !data?.deploymentList?.total && !data?.query}
        <Empty single target="deployment">
            <div class="u-text-center">
-                <Typography.Title size="s"
-                    >Create your first deployment to get started.</Typography.Title>
+                <Typography.Title size="s">
+                    Create your first deployment to get started.
+                </Typography.Title>
                <p class="body-text-2 u-bold u-margin-block-start-4">
                    Learn more about deployments in our Documentation.
                </p>
@@ -157,9 +69,7 @@
    {:else}
        {@const activeDeployment = data.activeDeployment}

-        <div class="common-section">
-            <Typography.Title size="s">Active</Typography.Title>
-        </div>
+        <Typography.Title size="s">Active</Typography.Title>
        {#if data?.activeDeployment && !$func.live && showAlert}
            <Alert
                type="warning"
@@ -221,7 +131,7 @@
                </div>
            </Empty>
        {:else}
-            <Empty noMedia single>
+            <Empty single>
                <Create secondary round>
                    <i class="icon-plus" />
                </Create>
@@ -240,79 +150,78 @@
                </div>
            </Empty>
        {/if}
-        <div class="u-margin-block-start-48">
-            <Typography.Title size="s">All deployments</Typography.Title>
-            <div class="u-flex u-main-space-between is-not-mobile u-margin-block-start-16">
-                <div class="u-flex u-gap-8 u-cross-center u-flex-wrap">
-                    <QuickFilters {columns} />
-                    <Filters
-                        query={data.query}
-                        {columns}
-                        let:disabled
-                        let:toggle
-                        singleCondition
-                        analyticsSource="function_filters">
-                        <div class="u-flex u-gap-4">
-                            <Button
-                                text
-                                on:click={toggle}
-                                {disabled}
-                                ariaLabel="open filter"
-                                noMargin={!$tags?.length}>
-                                <span class="icon-filter-line" />
-                                <span class="text">More filters</span>
-                            </Button>
-                            {#if $tags?.length}
-                                <div
-                                    style="flex-basis:1px; background-color:hsl(var(--border)); width: 1px">
-                                </div>
-                                <Button text on:click={clearAll}>Clear all</Button>
-                            {/if}
-                        </div>
-                    </Filters>
-                </div>
-                <div class="u-flex u-gap-16">
-                    <ViewSelector view={View.Table} {columns} hideView allowNoColumns hideText />
-                </div>
+        <Typography.Title size="s">All deployments</Typography.Title>
+        <div class="u-flex u-main-space-between is-not-mobile u-margin-block-start-16">
+            <div class="u-flex u-gap-8 u-cross-center u-flex-wrap">
+                <QuickFilters {columns} />
+                <Filters
+                    query={data.query}
+                    {columns}
+                    let:disabled
+                    let:toggle
+                    singleCondition
+                    analyticsSource="function_filters">
+                    <div class="u-flex u-gap-4">
+                        <Button
+                            text
+                            on:click={toggle}
+                            {disabled}
+                            ariaLabel="open filter"
+                            compact={!$tags?.length}>
+                            <Icon icon={IconFilterLine} size="s" slot="start" />
+                            <span class="text">More filters</span>
+                        </Button>
+                        {#if $tags?.length}
+                            <div
+                                style="flex-basis:1px; background-color:hsl(var(--border)); width: 1px">
+                            </div>
+                            <Button text on:click={clearAll}>Clear all</Button>
+                        {/if}
+                    </div>
+                </Filters>
            </div>
-            <div class="is-only-mobile">
-                <div class="u-flex u-main-space-between u-margin-block-start-16">
-                    <Button
-                        text
-                        on:click={() => (showMobileFilters = !showMobileFilters)}
-                        ariaLabel="toggle filters"
-                        noMargin>
-                        <span class="icon-filter-line" />
-                        <span class="text">Filters</span>
-                    </Button>
+            <div class="u-flex u-gap-16">
+                <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+            </div>
+        </div>
+        <div class="is-only-mobile">
+            <div class="u-flex u-main-space-between u-margin-block-start-16">
+                <Button
+                    text
+                    on:click={() => (showMobileFilters = !showMobileFilters)}
+                    ariaLabel="toggle filters"
+                    compact>
+                    <Icon icon={IconFilterLine} size="s" slot="start" />

-                    <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
-                </div>
-                <div
-                    class:u-hide={!showMobileFilters}
-                    class:u-flex={showMobileFilters}
-                    class=" u-gap-8 u-flex-wrap u-margin-block-start-16">
-                    <QuickFilters {columns} />
+                    <span class="text">Filters</span>
+                </Button>

-                    <Filters
-                        query={data.query}
-                        {columns}
-                        clearOnClick
-                        analyticsSource="function_filters">
-                        <svelte:fragment slot="mobile" let:disabled let:toggle>
-                            <Pill
-                                button
-                                on:click={toggle}
-                                {disabled}
-                                class="u-flex u-gap-4 u-cross-center"
-                                style="--p-tag-content-height: auto">
-                                <!-- <span class="icon-filter-line" /> -->
-                                <span class="text">More filters</span>
-                                <span class="icon-cheveron-down" />
-                            </Pill>
-                        </svelte:fragment>
-                    </Filters>
-                </div>
+                <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+            </div>
+            <div
+                class:u-hide={!showMobileFilters}
+                class:u-flex={showMobileFilters}
+                class=" u-gap-8 u-flex-wrap u-margin-block-start-16">
+                <QuickFilters {columns} />
+
+                <Filters
+                    query={data.query}
+                    {columns}
+                    clearOnClick
+                    analyticsSource="function_filters">
+                    <svelte:fragment slot="mobile" let:disabled let:toggle>
+                        <Pill
+                            button
+                            on:click={toggle}
+                            {disabled}
+                            class="u-flex u-gap-4 u-cross-center"
+                            style="--p-tag-content-height: auto">
+                            <!-- <span class="icon-filter-line" /> -->
+                            <span class="text">More filters</span>
+                            <span class="icon-cheveron-down" />
+                        </Pill>
+                    </svelte:fragment>
+                </Filters>
            </div>
        </div>
        {#if $deploymentList.total}
@@ -1,12 +1,13 @@
 <script lang="ts">
    import { beforeNavigate } from '$app/navigation';
-    import { DropList, DropListItem } from '$lib/components';
    import { Button } from '$lib/elements/forms';
    import { canWriteFunctions } from '$lib/stores/roles';
+    import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
    import CreateCli from './createCli.svelte';
    import CreateGit from './createGit.svelte';
    import CreateManual from './createManual.svelte';
    import { showCreateDeployment } from './store';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';

    export let secondary = false;
    export let round = false;
@@ -24,35 +25,43 @@
    }
 </script>

-<DropList bind:show placement="bottom-end">
+<Popover let:toggle placement="bottom-end" padding="none">
    {#if $canWriteFunctions}
-        <Button {secondary} icon={round} on:click={() => (show = !show)} event="create_deployment">
+        <Button {secondary} icon={round} on:click={toggle} event="create_deployment">
            <slot>
                {#if !secondary}
-                    <span class="icon-plus" aria-hidden="true" />
+                    <Icon icon={IconPlus} size="s" />
                {/if}
-                <span class="text">Create deployment</span>
+                Create deployment
            </slot>
        </Button>
    {/if}
-    <svelte:fragment slot="list">
-        <DropListItem
-            on:click={() => {
-                showCreateGit = true;
-                show = false;
-            }}>Git</DropListItem>
-        <DropListItem
-            on:click={() => {
-                showCreateCli = true;
-                show = false;
-            }}>CLI</DropListItem>
-        <DropListItem
-            on:click={() => {
-                showCreateManual = true;
-                show = false;
-            }}>Manual</DropListItem>
+    <svelte:fragment slot="tooltip" let:toggle>
+        <ActionMenu.Root>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCreateGit = true;
+                    toggle(e);
+                }}>
+                Git
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCreateCli = true;
+                    toggle(e);
+                }}>
+                CLI
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCreateManual = true;
+                    toggle(e);
+                }}>
+                Manual
+            </ActionMenu.Item.Button>
+        </ActionMenu.Root>
    </svelte:fragment>
-</DropList>
+</Popover>
 <CreateCli bind:show={showCreateCli} />
 <CreateGit bind:show={showCreateGit} />
 <CreateManual bind:show={showCreateManual} />
@@ -12,10 +12,10 @@
    import { deployment } from './store';
    import BoxAvatar from '$lib/components/boxAvatar.svelte';
    import { toLocaleDateTime } from '$lib/helpers/date';
-    import Delete from '../delete.svelte';
    import Activate from '../activate.svelte';
-    import Cancel from '../cancel.svelte';
+    import Cancel from '../(modals)/cancel.svelte';
    import DeploymentCard from '../deploymentCard.svelte';
+    import Delete from '../(modals)/delete.svelte';

    export let data;

@@ -5,11 +5,10 @@
    import { Pill } from '$lib/elements';
    import { humanFileSize } from '$lib/helpers/sizeConvertion';
    import { calculateTime } from '$lib/helpers/timeConversion';
-    import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
-    import DeploymentSource from './deploymentSource.svelte';

    import DeploymentDomains from './deploymentDomains.svelte';
    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { DeploymentCreatedBy, DeploymentSource } from '$lib/components/git';

    export let deployment: Models.Deployment;
 </script>
@@ -1,14 +0,0 @@
-<script lang="ts">
-    import { timeFromNow } from '$lib/helpers/date';
-    import type { Models } from '@appwrite.io/console';
-
-    export let deployment: Models.Deployment;
-</script>
-
-{timeFromNow(deployment.$updatedAt)}
-{#if deployment.providerCommitAuthor}
-    by <a
-        class="u-underline u-cursor-pointer"
-        target="_blank"
-        href={deployment.providerCommitAuthorUrl}>{deployment.providerCommitAuthor}</a>
-{/if}
@@ -1,56 +0,0 @@
-<script lang="ts">
-    import { DropList, DropListLink, Trim } from '$lib/components';
-    import type { Models } from '@appwrite.io/console';
-
-    export let deployment: Models.Deployment;
-    let showDropdown = false;
-</script>
-
-{#if deployment.type === 'vcs'}
-    <DropList bind:show={showDropdown}>
-        <button
-            on:click={() => (showDropdown = !showDropdown)}
-            type="button"
-            class="u-flex u-gap-4 u-cross-center">
-            <span class="icon-github" aria-hidden="true" /> <span class="link">GitHub</span>
-        </button>
-        <svelte:fragment slot="list">
-            <DropListLink
-                href={deployment.providerRepositoryUrl}
-                external
-                icon="github"
-                iconStyle="font-size:20px">
-                <Trim alternativeTrim>
-                    <span style:white-space="pre-wrap">
-                        {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
-                    </span>
-                </Trim>
-            </DropListLink>
-            <DropListLink
-                href={deployment.providerBranchUrl}
-                external
-                icon="git-branch"
-                iconStyle="font-size:20px">
-                {deployment.providerBranch}
-            </DropListLink>
-            {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
-                <DropListLink
-                    href={deployment.providerCommitUrl}
-                    external
-                    icon="git-commit"
-                    iconStyle="font-size:20px">
-                    <Trim alternativeTrim>
-                        <span style="white-space: pre-wrap">
-                            {deployment?.providerCommitHash?.substring(0, 7)}
-                            {deployment.providerCommitMessage}
-                        </span>
-                    </Trim>
-                </DropListLink>
-            {/if}
-        </svelte:fragment>
-    </DropList>
-{:else if deployment.type === 'manual'}
-    <span class="icon-code" aria-hidden="true" /> <span>Manual</span>
-{:else if deployment.type === 'cli'}
-    <span class="icon-terminal" aria-hidden="true" /> <span>CLI</span>
-{/if}
@@ -1,6 +1,7 @@
 import { page } from '$app/stores';
 import { derived, writable, type Writable } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
+import type { Column } from '$lib/helpers/types';

 export const func = derived(page, ($page) => $page.data.function as Models.Function);
 export const deploymentList = derived(
@@ -23,3 +24,91 @@ export const repositories: Writable<{
 });

 export const showCreateDeployment: Writable<boolean> = writable(false);
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Deployment ID', type: 'string', show: true, width: 150 },
+    {
+        id: 'status',
+        title: 'Status',
+        type: 'enum',
+        show: true,
+        width: 110,
+        array: true,
+        format: 'enum',
+        elements: ['ready', 'processing', 'building', 'waiting', 'cancelled', 'failed'],
+        filter: false
+    },
+    {
+        id: 'type',
+        title: 'Source',
+        type: 'string',
+        show: true,
+        width: 90,
+        array: true,
+        format: 'enum',
+        elements: [
+            { value: 'manual', label: 'Manual' },
+            { value: 'cli', label: 'CLI' },
+            { value: 'vcs', label: 'Git' }
+        ]
+    },
+    {
+        id: '$updatedAt',
+        title: 'Updated',
+        type: 'datetime',
+        show: true,
+        width: 150,
+        format: 'datetime'
+    },
+    {
+        id: 'buildTime',
+        title: 'Build time',
+        type: 'integer',
+        show: true,
+        width: 90,
+        elements: [
+            {
+                value: 15,
+                label: 'more than 15 seconds'
+            },
+            {
+                value: 60,
+                label: 'more than 1 minute'
+            },
+            {
+                value: 5 * 60,
+                label: 'more than 5 minutes'
+            }
+        ],
+        filter: false
+    },
+    {
+        id: 'size',
+        title: 'Source size',
+        type: 'integer',
+        show: true,
+        width: 140,
+        elements: [
+            {
+                value: 2 * 1000 * 1000,
+                label: 'more than 2MB'
+            },
+            {
+                value: 10 * 1000 * 1000,
+                label: 'more than 10MB'
+            },
+            {
+                value: 50 * 1000 * 1000,
+                label: 'more than 50MB'
+            }
+        ]
+    },
+    {
+        id: 'buildSize',
+        title: 'Build size',
+        type: 'integer',
+        show: false,
+        filter: false,
+        width: 80
+    }
+]);
@@ -1,26 +1,27 @@
 <script lang="ts">
-    import { DropList, DropListItem, DropListLink, Id } from '$lib/components';
+    import { DropListItem, DropListLink, Id } from '$lib/components';
    import type { PageData } from './$types';
    import { type Models } from '@appwrite.io/console';
    import type { Column } from '$lib/helpers/types';
    import { Pill } from '$lib/elements';
    import { calculateTime } from '$lib/helpers/timeConversion';
-    import DeploymentSource from './deploymentSource.svelte';
-    import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
    import { timer } from '$lib/actions/timer';
    import { calculateSize } from '$lib/helpers/sizeConvertion';
    import { func } from './store';
    import { page } from '$app/stores';
-    import Delete from './delete.svelte';
    import Activate from './activate.svelte';
    import RedeployModal from './redeployModal.svelte';
    import { invalidate } from '$app/navigation';
    import { Dependencies } from '$lib/constants';
-    import Cancel from './cancel.svelte';
+    import Cancel from './(modals)/cancel.svelte';
    import { sdk } from '$lib/stores/sdk';
    import { base } from '$app/paths';
-    import { Table } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Icon, Popover, Table } from '@appwrite.io/pink-svelte';
    import { Click, trackEvent } from '$lib/actions/analytics';
+    import { IconDotsHorizontal } from '@appwrite.io/pink-icons-svelte';
+    import { Button } from '$lib/elements/forms';
+    import { DeploymentCreatedBy, DeploymentSource } from '$lib/components/git';
+    import Delete from './(modals)/delete.svelte';

    export let columns: Column[];
    export let data: PageData;
@@ -111,74 +112,71 @@
                {/if}
            {/each}
            <Table.Cell>
-                <DropList bind:show={showDropdown[index]} placement="bottom-start" noArrow>
-                    <button
-                        class="button is-only-icon is-text"
-                        aria-label="More options"
-                        on:click|preventDefault={() => {
-                            showDropdown[index] = !showDropdown[index];
-                        }}>
-                        <span class="icon-dots-horizontal" aria-hidden="true" />
-                    </button>
-                    <svelte:fragment slot="list">
-                        <DropListItem
-                            icon="refresh"
-                            on:click={() => {
-                                selectedDeployment = deployment;
-                                showRedeploy = true;
-                                showDropdown = [];
-                                trackEvent(Click.FunctionsRedeployClick);
-                            }}>
-                            Redeploy
-                        </DropListItem>
-                        {#if deployment.status === 'ready' && deployment.$id !== $func.deployment}
+                <Popover let:toggle placement="bottom-start">
+                    <Button icon text on:click={toggle}>
+                        <Icon icon={IconDotsHorizontal} size="s" />
+                    </Button>
+                    <svelte:fragment slot="tooltip">
+                        <ActionMenu.Root>
                            <DropListItem
-                                icon="lightning-bolt"
+                                icon="refresh"
                                on:click={() => {
                                    selectedDeployment = deployment;
-                                    showActivate = true;
+                                    showRedeploy = true;
                                    showDropdown = [];
+                                    trackEvent(Click.FunctionsRedeployClick);
                                }}>
-                                Activate
+                                Redeploy
                            </DropListItem>
-                        {/if}
-                        <DropListLink
-                            icon="terminal"
-                            href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
-                            Logs
-                        </DropListLink>
-                        <DropListLink
-                            icon="download"
-                            href={getDownload(deployment.$id)}
-                            on:click={() => (showDropdown[index] = false)}>
-                            Download
-                        </DropListLink>
-                        {#if deployment.status === 'processing' || deployment.status === 'building' || deployment.status === 'waiting'}
-                            <DropListItem
-                                icon="x-circle"
-                                event="deployment_cancel"
-                                on:click={() => {
-                                    selectedDeployment = deployment;
-                                    showDropdown = [];
-                                    showCancel = true;
-                                }}>
-                                Cancel
-                            </DropListItem>
-                        {/if}
-                        {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment.status !== 'waiting'}
-                            <DropListItem
-                                icon="trash"
-                                on:click={() => {
-                                    selectedDeployment = deployment;
-                                    showDropdown = [];
-                                    showDelete = true;
-                                    trackEvent(Click.FunctionsDeploymentDeleteClick);
-                                }}>
-                                Delete
-                            </DropListItem>
-                        {/if}
+                            {#if deployment.status === 'ready' && deployment.$id !== $func.deployment}
+                                <DropListItem
+                                    icon="lightning-bolt"
+                                    on:click={() => {
+                                        selectedDeployment = deployment;
+                                        showActivate = true;
+                                        showDropdown = [];
+                                    }}>
+                                    Activate
+                                </DropListItem>
+                            {/if}
+                            <DropListLink
+                                icon="terminal"
+                                href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
+                                Logs
+                            </DropListLink>
+                            <DropListLink
+                                icon="download"
+                                href={getDownload(deployment.$id)}
+                                on:click={() => (showDropdown[index] = false)}>
+                                Download
+                            </DropListLink>
+                            {#if deployment.status === 'processing' || deployment.status === 'building' || deployment.status === 'waiting'}
+                                <DropListItem
+                                    icon="x-circle"
+                                    event="deployment_cancel"
+                                    on:click={() => {
+                                        selectedDeployment = deployment;
+                                        showDropdown = [];
+                                        showCancel = true;
+                                    }}>
+                                    Cancel
+                                </DropListItem>
+                            {/if}
+                            {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment.status !== 'waiting'}
+                                <DropListItem
+                                    icon="trash"
+                                    on:click={() => {
+                                        selectedDeployment = deployment;
+                                        showDropdown = [];
+                                        showDelete = true;
+                                        trackEvent(Click.FunctionsDeploymentDeleteClick);
+                                    }}>
+                                    Delete
+                                </DropListItem>
+                            {/if}
+                        </ActionMenu.Root>
                    </svelte:fragment>
-                </DropList>
+                </Popover>
            </Table.Cell>
        </Table.Row>
    {/each}
@@ -13,8 +13,8 @@
        Tooltip,
        Typography
    } from '@appwrite.io/pink-svelte';
-    import DeploymentSource from './deploymentSource.svelte';
-    import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
+    import { DeploymentSource, DeploymentCreatedBy } from '$lib/components/git';
+
    import { Button } from '$lib/elements/forms';
    import { IconInfo, IconQrcode } from '@appwrite.io/pink-icons-svelte';
    import OpenOnMobileModal from './openOnMobileModal.svelte';
@@ -3,8 +3,7 @@
    import type { PageData } from './$types';
    import { type Models } from '@appwrite.io/console';
    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
-    import DeploymentSource from '../../(components)/deploymentSource.svelte';
-    import DeploymentCreatedBy from '../../(components)/deploymentCreatedBy.svelte';
+    import { DeploymentSource, DeploymentCreatedBy } from '$lib/components/git';
    import { timer } from '$lib/actions/timer';
    import { calculateSize } from '$lib/helpers/sizeConvertion';
    import { page } from '$app/stores';
@@ -4,10 +4,8 @@
    import { base } from '$app/paths';
    import { page } from '$app/stores';
    import { type Models } from '@appwrite.io/console';
-    import DeploymentCreatedBy from '../(components)/deploymentCreatedBy.svelte';
-    import DeploymentSource from '../(components)/deploymentSource.svelte';
+    import { DeploymentSource, DeploymentCreatedBy } from '$lib/components/git';
    import Id from '$lib/components/id.svelte';
-
    import RedeployModal from '../redeployModal.svelte';
    import { Card } from '$lib/components';
    import ActivateDeploymentModal from '../activateDeploymentModal.svelte';