From a4d6758c0698328b7a1b6453ddca905a4024529b Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 2 Sep 2025 23:40:48 +0530
Subject: [PATCH 1/5] feat: add confirm model and delete for archive projects

---
 src/lib/components/archiveProject.svelte | 54 +++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/archiveProject.svelte b/src/lib/components/archiveProject.svelte
index 3ebb938c1..d11463c39 100644
--- a/src/lib/components/archiveProject.svelte
+++ b/src/lib/components/archiveProject.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { DropList, GridItem1, CardContainer } from '$lib/components';
+    import { DropList, GridItem1, CardContainer, Confirm } from '$lib/components';
     import {
         Badge,
         Icon,
@@ -21,7 +21,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';
@@ -53,6 +54,8 @@
     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);
 
     function filterPlatforms(platforms: { name: string; icon: string }[]) {
         return platforms.filter(
@@ -103,6 +106,11 @@
         showUnarchiveModal = true;
     }
 
+    function handleDeleteProject(project: Models.Project) {
+        projectToDelete = project;
+        showDeleteModal = true;
+    }
+
     // Confirm unarchive action
     async function confirmUnarchive() {
         if (!projectToUnarchive) return;
@@ -141,6 +149,32 @@
         projectToUnarchive = null;
     }
 
+    async function confirmDelete() {
+        if (!projectToDelete) return;
+
+        try {
+            await sdk.forConsoleIn(projectToDelete.region).projects.delete({
+                projectId: projectToDelete.$id
+            });
+
+            await invalidate(Dependencies.ORGANIZATION);
+
+            addNotification({
+                type: 'success',
+                message: `${projectToDelete.name} has been deleted`
+            });
+
+            showDeleteModal = false;
+            projectToDelete = null;
+        } catch (error) {
+            const msg =
+                error && typeof error === 'object' && 'message' in error
+                    ? String((error as { message: string }).message)
+                    : 'Failed to delete project';
+            addNotification({ type: 'error', message: msg });
+        }
+    }
+
     function findRegion(project: Models.Project) {
         return $regionsStore.regions.find((region) => region.$id === project.region);
     }
@@ -226,6 +260,10 @@
                                                 leadingIcon={IconSwitchHorizontal}
                                                 on:click={() => handleMigrateProject(project)}
                                                 >Migrate project</ActionMenu.Item.Button>
+                                            <ActionMenu.Item.Button
+                                                leadingIcon={IconTrash}
+                                                on:click={() => handleDeleteProject(project)}
+                                                >Delete project</ActionMenu.Item.Button>
                                         </ActionMenu.Root>
                                     </Popover>
                                 </div>
@@ -275,6 +313,18 @@
     </svelte:fragment>
 </Modal>
 
+<Confirm
+    title="Delete project"
+    bind:open={showDeleteModal}
+    onSubmit={confirmDelete}
+    confirmDeletion={true}
+    confirmDeletionLabel="I understand and confirm">
+    <p>Are you sure you want to delete <strong>{projectToDelete?.name}</strong>?</p>
+    <p>
+        This will permanently delete the project and all of its data. This action is irreversible.
+    </p>
+</Confirm>
+
 <style>
     .archive-projects-margin-top {
         margin-top: 36px;

From 66ef514087af1789d4cf64ade3e82ba7edaa5155 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 3 Sep 2025 12:16:18 +0530
Subject: [PATCH 2/5] feat: delete modal

---
 src/lib/components/archiveProject.svelte | 62 +++++++++++++++++-------
 1 file changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/archiveProject.svelte b/src/lib/components/archiveProject.svelte
index d11463c39..a49e58403 100644
--- a/src/lib/components/archiveProject.svelte
+++ b/src/lib/components/archiveProject.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { Button } from '$lib/elements/forms';
-    import { DropList, GridItem1, CardContainer, Confirm } from '$lib/components';
+    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,
@@ -34,7 +35,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';
@@ -56,6 +57,8 @@
     let projectToUnarchive = $state<Models.Project | null>(null);
     let showDeleteModal = $state(false);
     let projectToDelete = $state<Models.Project | null>(null);
+    let deleteProjectName = $state('');
+    let deleteError = $state<string | null>(null);
 
     function filterPlatforms(platforms: { name: string; icon: string }[]) {
         return platforms.filter(
@@ -108,6 +111,7 @@
 
     function handleDeleteProject(project: Models.Project) {
         projectToDelete = project;
+        deleteProjectName = '';
         showDeleteModal = true;
     }
 
@@ -159,6 +163,7 @@
 
             await invalidate(Dependencies.ORGANIZATION);
 
+            trackEvent(Submit.ProjectDelete);
             addNotification({
                 type: 'success',
                 message: `${projectToDelete.name} has been deleted`
@@ -166,12 +171,11 @@
 
             showDeleteModal = false;
             projectToDelete = null;
+            deleteProjectName = '';
+            deleteError = null;
         } catch (error) {
-            const msg =
-                error && typeof error === 'object' && 'message' in error
-                    ? String((error as { message: string }).message)
-                    : 'Failed to delete project';
-            addNotification({ type: 'error', message: msg });
+            deleteError = error.message;
+            trackError(error, Submit.ProjectDelete);
         }
     }
 
@@ -313,17 +317,41 @@
     </svelte:fragment>
 </Modal>
 
-<Confirm
+<!-- Delete Confirmation Modal -->
+<Modal
+    size="s"
+    bind:show={showDeleteModal}
     title="Delete project"
-    bind:open={showDeleteModal}
     onSubmit={confirmDelete}
-    confirmDeletion={true}
-    confirmDeletionLabel="I understand and confirm">
-    <p>Are you sure you want to delete <strong>{projectToDelete?.name}</strong>?</p>
-    <p>
-        This will permanently delete the project and all of its data. This action is irreversible.
-    </p>
-</Confirm>
+    bind:error={deleteError}>
+    <svelte:fragment slot="description">
+        This archived project 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={() => {
+                showDeleteModal = false;
+                projectToDelete = null;
+                deleteProjectName = '';
+                deleteError = null;
+            }}>Cancel</Button>
+        <Button submissionLoader submit disabled={deleteProjectName !== projectToDelete?.name}>
+            Delete
+        </Button>
+    </svelte:fragment>
+</Modal>
 
 <style>
     .archive-projects-margin-top {

From a0ced67b4bb6a45b90979dbe05c2edec035a414d Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Wed, 3 Sep 2025 18:16:32 +0530
Subject: [PATCH 3/5] fix: added divider and delete button status danger

---
 src/lib/components/archiveProject.svelte | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/archiveProject.svelte b/src/lib/components/archiveProject.svelte
index a49e58403..30e7d18d0 100644
--- a/src/lib/components/archiveProject.svelte
+++ b/src/lib/components/archiveProject.svelte
@@ -10,7 +10,8 @@
         Accordion,
         ActionMenu,
         Popover,
-        Layout
+        Layout,
+        Divider
     } from '@appwrite.io/pink-svelte';
     import {
         IconAndroid,
@@ -264,7 +265,11 @@
                                                 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>
@@ -325,8 +330,8 @@
     onSubmit={confirmDelete}
     bind:error={deleteError}>
     <svelte:fragment slot="description">
-        This archived project will be deleted along with all of its metadata, stats, and other
-        resources.
+        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>
 
@@ -357,6 +362,11 @@
     .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;

From e7ec674e6b7438203a118162c498356fa971f19e Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Thu, 4 Sep 2025 12:36:13 +0530
Subject: [PATCH 4/5] fix: created a reset delet function

---
 src/lib/components/archiveProject.svelte | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/archiveProject.svelte b/src/lib/components/archiveProject.svelte
index 30e7d18d0..5e4af4094 100644
--- a/src/lib/components/archiveProject.svelte
+++ b/src/lib/components/archiveProject.svelte
@@ -61,6 +61,13 @@
     let deleteProjectName = $state('');
     let deleteError = $state<string | null>(null);
 
+    function resetDeleteState() {
+        showDeleteModal = false;
+        projectToDelete = null;
+        deleteProjectName = '';
+        deleteError = null;
+    }
+
     function filterPlatforms(platforms: { name: string; icon: string }[]) {
         return platforms.filter(
             (value, index, self) => index === self.findIndex((t) => t.name === value.name)
@@ -170,10 +177,7 @@
                 message: `${projectToDelete.name} has been deleted`
             });
 
-            showDeleteModal = false;
-            projectToDelete = null;
-            deleteProjectName = '';
-            deleteError = null;
+            resetDeleteState();
         } catch (error) {
             deleteError = error.message;
             trackError(error, Submit.ProjectDelete);
@@ -347,10 +351,7 @@
         <Button
             text
             on:click={() => {
-                showDeleteModal = false;
-                projectToDelete = null;
-                deleteProjectName = '';
-                deleteError = null;
+                resetDeleteState();
             }}>Cancel</Button>
         <Button submissionLoader submit disabled={deleteProjectName !== projectToDelete?.name}>
             Delete

From c3f300844e4b44f5cc236d855a0829e11d509b61 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Thu, 4 Sep 2025 12:54:18 +0530
Subject: [PATCH 5/5] added nullable state

---
 src/lib/components/archiveProject.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/archiveProject.svelte b/src/lib/components/archiveProject.svelte
index 5e4af4094..c7896c991 100644
--- a/src/lib/components/archiveProject.svelte
+++ b/src/lib/components/archiveProject.svelte
@@ -58,13 +58,13 @@
     let projectToUnarchive = $state<Models.Project | null>(null);
     let showDeleteModal = $state(false);
     let projectToDelete = $state<Models.Project | null>(null);
-    let deleteProjectName = $state('');
+    let deleteProjectName = $state<string | null>(null);
     let deleteError = $state<string | null>(null);
 
     function resetDeleteState() {
         showDeleteModal = false;
         projectToDelete = null;
-        deleteProjectName = '';
+        deleteProjectName = null;
         deleteError = null;
     }
 
@@ -119,7 +119,7 @@
 
     function handleDeleteProject(project: Models.Project) {
         projectToDelete = project;
-        deleteProjectName = '';
+        deleteProjectName = null;
         showDeleteModal = true;
     }
 
@@ -353,7 +353,10 @@
             on:click={() => {
                 resetDeleteState();
             }}>Cancel</Button>
-        <Button submissionLoader submit disabled={deleteProjectName !== projectToDelete?.name}>
+        <Button
+            submissionLoader
+            submit
+            disabled={(deleteProjectName ?? '') !== projectToDelete?.name}>
             Delete
         </Button>
     </svelte:fragment>