feat: Settings overview screen

src/lib/components/copyInput.svelte

@@ -4,6 +4,8 @@
     import { addNotification } from '$lib/stores/notifications';
 
     export let value: string;
+    export let label: string = null;
+    export let showLabel = false;
 
     let content = 'Click to copy';
 
@@ -21,17 +23,20 @@
 </script>
 
 <div class="input-text-wrapper is-with-end-button">
-    <input {value} type="text" class="input-text" readonly />
-    <button
-        type="button"
-        class="input-button"
-        aria-label="Click to copy."
-        on:click={copy}
-        on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
-        use:tooltip={{
-            content,
-            hideOnClick: false
-        }}>
-        <span class="icon-duplicate" aria-hidden="true" />
-    </button>
+    <label class:u-hide={!showLabel} class="label" for={label}>{label}</label>
+    <div class="input-text-wrapper">
+        <input {value} id={label} type="text" class="input-text" readonly />
+        <button
+            type="button"
+            class="input-button"
+            aria-label="Click to copy."
+            on:click={copy}
+            on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
+            use:tooltip={{
+                content,
+                hideOnClick: false
+            }}>
+            <span class="icon-duplicate" aria-hidden="true" />
+        </button>
+    </div>
 </div>

src/lib/stores/project-services.ts

@@ -0,0 +1,117 @@
+import { writable } from 'svelte/store';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export type Service = {
+    label: string;
+    method: string;
+    value: boolean | null;
+};
+
+function createServices() {
+    const { subscribe, set } = writable({
+        list: [
+            {
+                label: 'Account',
+                method: 'account',
+                value: null
+            },
+            {
+                label: 'Avatars',
+                method: 'avatars',
+                value: null
+            },
+            {
+                label: 'Databases',
+                method: 'databases',
+                value: null
+            },
+            {
+                label: 'Functions',
+                method: 'functions',
+                value: null
+            },
+            {
+                label: 'Health',
+                method: 'health',
+                value: null
+            },
+            {
+                label: 'Locale',
+                method: 'locale',
+                value: null
+            },
+            {
+                label: 'Storage',
+                method: 'storage',
+                value: null
+            },
+            {
+                label: 'Teams',
+                method: 'teams',
+                value: null
+            },
+            {
+                label: 'Users',
+                method: 'users',
+                value: null
+            }
+        ]
+    });
+
+    return {
+        subscribe,
+        set,
+        load: (project: Models.Project) => {
+            const list = [
+                {
+                    label: 'Account',
+                    method: 'account',
+                    value: project.serviceStatusForAccount
+                },
+                {
+                    label: 'Avatars',
+                    method: 'avatars',
+                    value: project.serviceStatusForAvatars
+                },
+                {
+                    label: 'Databases',
+                    method: 'databases',
+                    value: project.serviceStatusForDatabases
+                },
+                {
+                    label: 'Functions',
+                    method: 'functions',
+                    value: project.serviceStatusForFunctions
+                },
+                {
+                    label: 'Health',
+                    method: 'health',
+                    value: project.serviceStatusForHealth
+                },
+                {
+                    label: 'Locale',
+                    method: 'locale',
+                    value: project.serviceStatusForLocale
+                },
+                {
+                    label: 'Storage',
+                    method: 'storage',
+                    value: project.serviceStatusForStorage
+                },
+                {
+                    label: 'Teams',
+                    method: 'teams',
+                    value: project.serviceStatusForTeams
+                },
+                {
+                    label: 'Users',
+                    method: 'users',
+                    value: project.serviceStatusForUsers
+                }
+            ];
+            set({ list });
+        }
+    };
+}
+
+export const services = createServices();

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

@@ -29,10 +29,6 @@
                 {
                     href: `${path}/domains`,
                     title: 'Custom Domains'
-                },
-                {
-                    href: `${path}/members`,
-                    title: 'Members'
                 }
             ]
         });

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>