feat: setting page

src/routes/console/_deleteOrganization.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { organization } from './store';
+
+    export let showDelete = false;
+
+    const deleteUser = async () => {
+        try {
+            await sdkForConsole.teams.delete($organization.$id);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$organization.name} has been deleted`
+            });
+            await goto(`${base}/console/`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteUser}>
+    <Modal bind:show={showDelete} warning>
+        <svelte:fragment slot="header">Delete Organization</svelte:fragment>
+        <p>
+            Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})
+            and data associated with this organization will be deleted. This action is irreversible.
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>

src/routes/console/members@intro.svelte

@@ -15,7 +15,7 @@
     import Delete from './_deleteMember.svelte';
     import Create from './_createMember.svelte';
     import { organization, memberList } from './store';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
 
@@ -26,7 +26,7 @@
     let showCreate = false;
     let showDelete = false;
 
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
+    const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 32, 32).toString();
     const deleted = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
     const created = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
 
@@ -62,7 +62,7 @@
                             <div class="u-flex u-gap-12 u-cross-center">
                                 <Avatar
                                     size={32}
-                                    src={getAvatar(member.userName) + $organization.name}
+                                    src={getAvatar(member.userName)}
                                     name={member.userName} />
                                 <span class="text u-trim"
                                     >{member.userName ? member.userName : 'n/a'}</span>

src/routes/console/settings@intro.svelte

@@ -1 +1,88 @@
-settings
+<script lang="ts">
+    import { CardGrid, Box, Avatar } from '$lib/components';
+    import { InputText, Form, Button } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { organization } from './store';
+    import { title, breadcrumbs } from '$lib/stores/layout';
+    import Delete from './_deleteOrganization.svelte';
+
+    let name: string = $organization.name;
+    let showDelete = false;
+
+    const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 48, 48).toString();
+
+    async function updateName() {
+        try {
+            await sdkForConsole.teams.update($organization.$id, name);
+            $organization.name = name;
+            title.set(name);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
+            breadcrumb.title = name;
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
+            addNotification({
+                message: 'Name has been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+</script>
+
+<Container>
+    <Form on:submit={updateName}>
+        <CardGrid>
+            <h6 class="heading-level-7">Update Name</h6>
+
+            <svelte:fragment slot="aside">
+                <ul>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Enter name"
+                        autocomplete={false}
+                        bind:value={name} />
+                </ul>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={name === $organization.name || !name} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <CardGrid>
+        <div>
+            <h6 class="heading-level-7">Delete Organization</h6>
+        </div>
+        <p>
+            The organization will be permanently deleted, including all projects and data associated
+            with this organization. This action is irreversible.
+        </p>
+        <svelte:fragment slot="aside">
+            <Box>
+                <svelte:fragment slot="image">
+                    <Avatar
+                        size={48}
+                        name={$organization.name}
+                        src={getAvatar($organization.name)} />
+                </svelte:fragment>
+                <svelte:fragment slot="title">
+                    <h6 class="u-bold">{$organization.name}</h6>
+                </svelte:fragment>
+                <p>{$organization.total} projects</p>
+            </Box>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Container>
+
+<Delete bind:showDelete />