feat: completed setting page

src/routes/console/project-[project]/settings/_deleteProject.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button, Form, FormList, InputPassword, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { project } from '../store';
+
+    export let showDelete = false;
+
+    const projectId = $page.params.project;
+    let password: string = null;
+    let name: string = null;
+
+    onMount(async () => {
+        if (projectId !== $project.$id) await project.load(projectId);
+    });
+
+    const handleDelete = async () => {
+        try {
+            await sdkForConsole.projects.delete($project.$id, password);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$project.name} has been deleted`
+            });
+            await goto(`${base}/console`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={handleDelete}>
+    <Modal bind:show={showDelete} warning>
+        <svelte:fragment slot="header">Delete Project</svelte:fragment>
+        <p>
+            <b>This project will be deleted</b>, along with all of its metadata, stats, and other
+            resources. <b>This action is irreversible</b>.
+        </p>
+
+        <FormList>
+            <InputText
+                label={`Enter "${$project.name}" to continue`}
+                placeholder="Enter name"
+                id="name"
+                autofocus
+                required
+                bind:value={name} />
+            <InputPassword
+                label="To verify, enter your password"
+                placeholder="Enter password"
+                id="password"
+                required
+                showPasswordButton={true}
+                bind:value={password} />
+        </FormList>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button disabled={!name || !password || name !== $project.name} secondary submit
+                >Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>

src/routes/console/project-[project]/settings/index.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { CardGrid, CopyInput } from '$lib/components';
-    import { Button, Form, FormList, InputText, InputSwitch } from '$lib/elements/forms';
-    import { Container } from '$lib/layout';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { addNotification } from '$lib/stores/notifications';
     import { project } from '../store';
     import { services, type Service } from '$lib/stores/project-services';
+    import { CardGrid, CopyInput, Box } from '$lib/components';
+    import { Button, Form, FormList, InputText, InputSwitch } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
+    import Delete from './_deleteProject.svelte';
 
     let name: string = null;
+    let showDelete = false;
     const endpoint = import.meta.env.VITE_APPWRITE_ENDPOINT.toString();
 
     onMount(async () => {
@@ -21,7 +24,7 @@
     const updateName = async () => {
         try {
             await sdkForConsole.projects.update($project.$id, name);
-            await project.load($project.$id);
+            $project.name = name;
             addNotification({
                 type: 'success',
                 message: 'Project name has been updated'
@@ -119,5 +122,29 @@
                 </FormList>
             </svelte:fragment>
         </CardGrid>
+
+        <CardGrid>
+            <div>
+                <h6 class="heading-level-7">Delete Project</h6>
+            </div>
+            <p>
+                The project will be permanently deleted, including all the metadata, resources and
+                stats within it. This action is irreversible.
+            </p>
+            <svelte:fragment slot="aside">
+                <Box>
+                    <svelte:fragment slot="title">
+                        <h6 class="u-bold">{$project.name}</h6>
+                    </svelte:fragment>
+                    <p>Last update: {toLocaleDateTime($project.$updatedAt)}</p>
+                </Box>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+            </svelte:fragment>
+        </CardGrid>
     {/if}
 </Container>
+
+<Delete bind:showDelete />