Merge branch 'main' into feat-add-pagination-archive-project-sectiin

Author: HarshMN2345

package.json

@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@2cf27e0",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",

pnpm-lock.yaml

@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { Button } from '$lib/elements/forms';
-    import { DropList, GridItem1, CardContainer } from '$lib/components';
     import ArchivedPaginationWithLimit from './archivedPaginationWithLimit.svelte';
+    import { Button, InputText } from '$lib/elements/forms';
+    import { DropList, GridItem1, CardContainer, Modal } from '$lib/components';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import {
         Badge,
         Icon,
@@ -10,7 +11,8 @@
         Accordion,
         ActionMenu,
         Popover,
-        Layout
+        Layout,
+        Divider
     } from '@appwrite.io/pink-svelte';
     import {
         IconAndroid,
@@ -22,7 +24,8 @@
         IconInfo,
         IconDotsHorizontal,
         IconInboxIn,
-        IconSwitchHorizontal
+        IconSwitchHorizontal,
+        IconTrash
     } from '@appwrite.io/pink-icons-svelte';
     import { getPlatformInfo } from '$lib/helpers/platform';
     import { Status, type Models } from '@appwrite.io/console';
@@ -34,7 +37,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { Modal } from '$lib/components';
+
     import { isSmallViewport } from '$lib/stores/viewport';
     import { isCloud } from '$lib/system';
     import { regions as regionsStore } from '$lib/stores/organization';
@@ -64,6 +67,17 @@
     let readOnlyInfoOpen = $state<Record<string, boolean>>({});
     let showUnarchiveModal = $state(false);
     let projectToUnarchive = $state<Models.Project | null>(null);
+    let showDeleteModal = $state(false);
+    let projectToDelete = $state<Models.Project | null>(null);
+    let deleteProjectName = $state<string | null>(null);
+    let deleteError = $state<string | null>(null);
+
+    function resetDeleteState() {
+        showDeleteModal = false;
+        projectToDelete = null;
+        deleteProjectName = null;
+        deleteError = null;
+    }
 
     function filterPlatforms(platforms: { name: string; icon: string }[]) {
         return platforms.filter(
@@ -114,6 +128,12 @@
         showUnarchiveModal = true;
     }
 
+    function handleDeleteProject(project: Models.Project) {
+        projectToDelete = project;
+        deleteProjectName = null;
+        showDeleteModal = true;
+    }
+
     // Confirm unarchive action
     async function confirmUnarchive() {
         if (!projectToUnarchive) return;
@@ -152,6 +172,29 @@
         projectToUnarchive = null;
     }
 
+    async function confirmDelete() {
+        if (!projectToDelete) return;
+
+        try {
+            await sdk.forConsoleIn(projectToDelete.region).projects.delete({
+                projectId: projectToDelete.$id
+            });
+
+            await invalidate(Dependencies.ORGANIZATION);
+
+            trackEvent(Submit.ProjectDelete);
+            addNotification({
+                type: 'success',
+                message: `${projectToDelete.name} has been deleted`
+            });
+
+            resetDeleteState();
+        } catch (error) {
+            deleteError = error.message;
+            trackError(error, Submit.ProjectDelete);
+        }
+    }
+
     function findRegion(project: Models.Project) {
         return $regionsStore.regions.find((region) => region.$id === project.region);
     }
@@ -237,6 +280,14 @@
                                                 leadingIcon={IconSwitchHorizontal}
                                                 on:click={() => handleMigrateProject(project)}
                                                 >Migrate project</ActionMenu.Item.Button>
+                                            <div class="action-menu-divider">
+                                                <Divider />
+                                            </div>
+                                            <ActionMenu.Item.Button
+                                                status="danger"
+                                                leadingIcon={IconTrash}
+                                                on:click={() => handleDeleteProject(project)}
+                                                >Delete project</ActionMenu.Item.Button>
                                         </ActionMenu.Root>
                                     </Popover>
                                 </div>
@@ -294,10 +345,51 @@
     </svelte:fragment>
 </Modal>
 
+<!-- Delete Confirmation Modal -->
+<Modal
+    size="s"
+    bind:show={showDeleteModal}
+    title="Delete project"
+    onSubmit={confirmDelete}
+    bind:error={deleteError}>
+    <svelte:fragment slot="description">
+        The archived project <strong>{projectToDelete?.name}</strong> will be deleted along with all
+        of its metadata, stats, and other resources.
+        <b>This action is irreversible.</b>
+    </svelte:fragment>
+
+    <InputText
+        label={`Enter "${projectToDelete?.name}" to continue`}
+        placeholder="Enter name"
+        id="delete-project-name"
+        autofocus
+        required
+        bind:value={deleteProjectName} />
+
+    <svelte:fragment slot="footer">
+        <Button
+            text
+            on:click={() => {
+                resetDeleteState();
+            }}>Cancel</Button>
+        <Button
+            submissionLoader
+            submit
+            disabled={(deleteProjectName ?? '') !== projectToDelete?.name}>
+            Delete
+        </Button>
+    </svelte:fragment>
+</Modal>
+
 <style>
     .archive-projects-margin-top {
         margin-top: 36px;
     }
+    .action-menu-divider {
+        margin-inline: -1rem;
+        padding-block-start: 0.25rem;
+        padding-block-end: 0.25rem;
+    }
 
     .archive-projects-margin {
         margin-top: 16px;

src/lib/components/archiveProject.svelte

@@ -20,11 +20,12 @@
     import { isCloud } from '$lib/system';
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { currentPlan, newOrgModal } from '$lib/stores/organization';
+    import { currentPlan, newOrgModal, organization } from '$lib/stores/organization';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import { type Models, Query } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
     import { page } from '$app/state';
+    import { BillingPlan } from '$lib/constants';
 
     type Organization = {
         name: string;
@@ -226,6 +227,10 @@
     $: if (shouldReloadProjects) {
         projectsBottomSheet = createProjectsBottomSheet(selectedOrg);
     }
+
+    let badgeType: 'success' | undefined;
+    $: badgeType =
+        $organization && $organization.billingPlan !== BillingPlan.FREE ? 'success' : undefined;
 </script>
 
 <svelte:window on:resize={onResize} />
@@ -240,10 +245,13 @@
                 use:melt={$triggerOrganizations}
                 aria-label="Open organizations tab">
                 <span class="orgName">{selectedOrg?.name ?? 'Organization'}</span>
-                <span class="not-mobile"
+                <span class="not-mobile" style="padding-inline-start: 2px"
                     >{#if correctPlanName}<Badge
+                            size="xs"
                             variant="secondary"
-                            content={correctPlanName} />{/if}</span>
+                            type={badgeType}
+                            content={correctPlanName} />
+                    {/if}</span>
                 <Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
             </button>
         {:else}
@@ -257,7 +265,11 @@
                 <span class="orgName" class:noProjects={!currentProject}
                     >{selectedOrg?.name ?? 'Organization'}</span>
                 <span class="not-mobile"
-                    ><Badge variant="secondary" content={correctPlanName ?? ''} /></span>
+                    ><Badge
+                        size="xs"
+                        variant="secondary"
+                        type={badgeType}
+                        content={correctPlanName ?? ''} /></span>
                 <Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
             </button>
         {/if}
@@ -476,6 +488,7 @@
         border-radius: var(--border-radius-S, 8px);
         background: var(--overlay-neutral-hover, rgba(25, 25, 28, 0.03));
     }
+
     .trigger {
         display: inline-flex;
         align-items: center;

src/lib/components/breadcrumbs.svelte

@@ -23,8 +23,8 @@
         {/if}
     </Layout.Stack>
     <Typography.Text variant="m-400">
-        Add the following nameservers on your DNS provider. Note that DNS changes may take time to
-        propagate fully.
+        Add the following nameservers on your DNS provider. Note that changes may take up to 48
+        hours to propagate fully.
     </Typography.Text>
 </Layout.Stack>
 

src/lib/components/domains/nameserverTable.svelte

@@ -14,6 +14,10 @@
     export let wrapperFullWidth = false;
     export let position: 'relative' | 'static' = 'relative';
     export let noMaxWidthList = false;
+    export let paddingBlock: string = undefined;
+    export let paddingInline: string = undefined;
+    export let resetListPadding: boolean = false;
+    export let gap: string = undefined;
     let classes: string = '';
     export { classes as class };
 </script>
@@ -34,14 +38,20 @@
             class="drop is-no-arrow {classes}"
             class:u-max-width-100-percent={fullWidth}
             style:--drop-width-size-desktop={width ? `${width}rem` : ''}
+            style:margin-block-start={gap}
             style:position>
             {#if $$slots.list}
                 <section
                     class:u-overflow-y-auto={scrollable}
                     class:u-max-height-200={scrollable}
                     class="drop-section"
-                    style={noMaxWidthList ? 'max-inline-size: 100%' : ''}>
-                    <ul class="drop-list">
+                    style={noMaxWidthList ? 'max-inline-size: 100%' : ''}
+                    style:padding-block={paddingBlock}
+                    style:padding-inline={paddingInline}>
+                    <ul
+                        class="drop-list"
+                        style:padding={resetListPadding ? '0' : undefined}
+                        style:margin={resetListPadding ? '0' : undefined}>
                         <slot name="list" />
                     </ul>
                 </section>

src/lib/components/dropList.svelte

@@ -63,7 +63,7 @@ function initQueries(initialValue = new Map<TagValue, string>()) {
         const currentLocation = window.location.pathname;
 
         if (usableQueries.size) {
-            const queryParam = mapToQueryParams(get(queries));
+            const queryParam = mapToQueryParams(usableQueries);
             goto(`${currentLocation}?query=${queryParam}`, { noScroll: true });
         } else {
             goto(currentLocation, { noScroll: true });

src/lib/components/filters/store.ts

@@ -21,7 +21,7 @@
         const url = new URL(pageStore.url);
         const previousLimit = Number(url.searchParams.get('limit'));
         url.searchParams.set('limit', limit.toString());
-        preferences.setLimit(limit);
+        await preferences.setLimit(limit);
 
         if (url.searchParams.has('page')) {
             const page = Number(url.searchParams.get('page'));

src/lib/components/limit.svelte

@@ -66,6 +66,7 @@
 {:else}
     <Layout.Stack direction="row" inline>
         <Button.Button
+            type="button"
             size="s"
             variant="compact"
             on:click={prev}
@@ -75,6 +76,7 @@
         </Button.Button>
 
         <Button.Button
+            type="button"
             size="s"
             variant="compact"
             on:click={next}

src/lib/components/paginationInline.svelte

@@ -250,8 +250,6 @@
                         </Tooltip>
                     {/each}
                     {#if project && $isSmallViewport}
-                        <Divider />
-
                         <div class="mobile-tablet-settings">
                             <Tooltip placement="right" disabled={state !== 'icons'}>
                                 <a
@@ -593,6 +591,7 @@
         @media (min-width: 1024px) {
             width: 166px;
         }
+
         .info {
             position: absolute;
             display: flex;