From 83dcb9b7f96600f0ec723218ab1a1737cda70fcf Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 14 Jul 2022 12:50:19 +0200
Subject: [PATCH 01/75] feat: databases,database, settings screens

---
 .../[project]/databases/__layout.svelte       |  20 ++-
 .../[project]/databases/_create.svelte        |  66 +++++++--
 .../database/[database]/__layout.svelte       |  18 +--
 .../database/[database]/_delete.svelte        |  39 ++++++
 .../database/[database]/index.svelte          | 115 +++++++++++-----
 .../database/[database]/settings.svelte       | 115 ++++++++++++++++
 .../databases/database/[database]/store.ts    |  24 +++-
 .../console/[project]/databases/index.svelte  | 128 ++++++++++++------
 .../console/[project]/databases/store.ts      |  25 ++++
 .../console/[project]/databases/usage.svelte  |  10 ++
 10 files changed, 461 insertions(+), 99 deletions(-)
 create mode 100644 src/routes/console/[project]/databases/database/[database]/_delete.svelte
 create mode 100644 src/routes/console/[project]/databases/database/[database]/settings.svelte
 create mode 100644 src/routes/console/[project]/databases/store.ts
 create mode 100644 src/routes/console/[project]/databases/usage.svelte

diff --git a/src/routes/console/[project]/databases/__layout.svelte b/src/routes/console/[project]/databases/__layout.svelte
index a37df57094..a786cc4625 100644
--- a/src/routes/console/[project]/databases/__layout.svelte
+++ b/src/routes/console/[project]/databases/__layout.svelte
@@ -1,25 +1,37 @@
 <script>
     import { afterNavigate } from '$app/navigation';
+
     import { tabs, title, backButton, copyData } from '$lib/stores/layout';
     import { onMount } from 'svelte';
 
+    const path = 'databases';
+
     onMount(handle);
     afterNavigate(handle);
 
-    function handle() {
-        title.set('Databases');
+    async function handle() {
+        title.set('Database');
         backButton.set('');
-        tabs.set([]);
 
         copyData.set({
             text: '',
             value: ''
         });
+        tabs.set([
+            {
+                href: path,
+                title: 'Databases'
+            },
+            {
+                href: `${path}/usage`,
+                title: 'Usage'
+            }
+        ]);
     }
 </script>
 
 <svelte:head>
-    <title>Appwrite - Databases</title>
+    <title>Appwrite - Database</title>
 </svelte:head>
 
 <slot />
diff --git a/src/routes/console/[project]/databases/_create.svelte b/src/routes/console/[project]/databases/_create.svelte
index 221bad77bd..4afbbc13d2 100644
--- a/src/routes/console/[project]/databases/_create.svelte
+++ b/src/routes/console/[project]/databases/_create.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button, Form, InputText } from '$lib/elements/forms';
-    import InputCustomId from '$lib/elements/forms/inputCustomId.svelte';
+    import { Modal, InnerModal } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Button, InputText, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-
     import { sdkForProject, setDatabase } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
 
@@ -11,12 +10,13 @@
 
     const dispatch = createEventDispatcher();
 
-    let id = '';
     let name = '';
+    let id: string = null;
+    let showDropdown = false;
 
     const create = async () => {
         try {
-            setDatabase(id);
+            setDatabase(id ? id : 'unique()');
             const database = await sdkForProject.databases.create(name);
             name = id = null;
             showCreate = false;
@@ -31,13 +31,57 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
-        <svelte:fragment slot="header">Create Function</svelte:fragment>
-        <InputCustomId id="id" label="ID" bind:value={id} required />
-        <InputText id="name" label="Name" bind:value={name} required />
+    <Modal size="big" bind:show={showCreate}>
+        <svelte:fragment slot="header">Create Database</svelte:fragment>
+        <FormList>
+            <InputText
+                id="name"
+                label="Name"
+                placeholder="Enter database name"
+                bind:value={name}
+                autofocus
+                required />
+
+            {#if !showDropdown}
+                <div>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}
+                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                            Database ID
+                        </span></Pill>
+                </div>
+            {:else}
+                <InnerModal bind:show={showDropdown}>
+                    <svelte:fragment slot="title">Database ID</svelte:fragment>
+                    <p>
+                        Enter a custom database ID. Leave blank for a randomly generated database
+                        ID.
+                    </p>
+                    <svelte:fragment slot="content">
+                        <div class="form">
+                            <InputText
+                                id="id"
+                                label="Custom ID"
+                                showLabel={false}
+                                placeholder="Enter ID"
+                                autofocus={true}
+                                bind:value={id} />
+
+                            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
+                                <span
+                                    class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
+                                    aria-hidden="true" />
+                                <span class="text u-line-height-1-5"
+                                    >Allowed characters: alphanumeric, hyphen, non-leading
+                                    underscore, period</span>
+                            </div>
+                        </div>
+                    </svelte:fragment>
+                </InnerModal>
+            {/if}
+        </FormList>
         <svelte:fragment slot="footer">
-            <Button submit>Create</Button>
             <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+            <Button submit>Create</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/routes/console/[project]/databases/database/[database]/__layout.svelte b/src/routes/console/[project]/databases/database/[database]/__layout.svelte
index dec6d0ff3c..610c4bbe85 100644
--- a/src/routes/console/[project]/databases/database/[database]/__layout.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/__layout.svelte
@@ -1,8 +1,7 @@
 <script>
     import { afterNavigate } from '$app/navigation';
-
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
-
     import { tabs, title, backButton, copyData } from '$lib/stores/layout';
     import { setDatabase } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -18,15 +17,14 @@
         if ($database?.$id !== databaseId) {
             setDatabase($page.params.database);
             await database.load();
-            title.set(`Database - ${$database.name}`);
+            title.set($database.name);
         } else if ($database) {
-            title.set(`Database - ${$database.name}`);
+            title.set($database.name);
         }
-        backButton.set('');
-
+        backButton.set(`${base}/console/${$page.params.project}/databases`);
         copyData.set({
-            text: '',
-            value: ''
+            text: 'Database ID',
+            value: databaseId
         });
 
         tabs.set([
@@ -37,6 +35,10 @@
             {
                 href: `${path}/usage`,
                 title: 'Usage'
+            },
+            {
+                href: `${path}/settings`,
+                title: 'Settings'
             }
         ]);
     }
diff --git a/src/routes/console/[project]/databases/database/[database]/_delete.svelte b/src/routes/console/[project]/databases/database/[database]/_delete.svelte
new file mode 100644
index 0000000000..5f63cc7631
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/_delete.svelte
@@ -0,0 +1,39 @@
+<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 } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { database } from './store';
+
+    export let showDelete = false;
+
+    const deleteElement = async () => {
+        try {
+            await sdkForProject.databases.delete();
+            showDelete = false;
+            await goto(`${base}/console/${$page.params.project}/databases`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteElement}>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete Database</svelte:fragment>
+
+        <p>
+            Are you sure you want to delete <b>{$database.name}</b>?
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/[project]/databases/database/[database]/index.svelte b/src/routes/console/[project]/databases/database/[database]/index.svelte
index b0083a9ca8..e48dbbf6e3 100644
--- a/src/routes/console/[project]/databases/database/[database]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/index.svelte
@@ -1,26 +1,30 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Tile, Tiles } from '$lib/components';
-    import Create from './_create.svelte';
     import { goto } from '$app/navigation';
+    import { Button } from '$lib/elements/forms';
+    import { Empty, Pagination, Copy, Bucket } from '$lib/components';
+    import { Pill } from '$lib/elements';
     import type { Models } from '@aw-labs/appwrite-console';
+    import Create from './_create.svelte';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
+    import { collections } from './store';
 
-    let search = '';
     let showCreate = false;
+    let search = '';
     let offset = 0;
 
-    const limit = 25;
-    const projectId = $page.params.project;
+    const limit = 5;
+    const project = $page.params.project;
     const databaseId = $page.params.database;
     const collectionCreated = async (event: CustomEvent<Models.Collection>) => {
-        await goto(`${base}/console/${projectId}/databases/collection/${event.detail.$id}`);
+        showCreate = false;
+        await goto(
+            `${base}/console/${project}/databases/database/${databaseId}/collection/${event.detail.$id}`
+        );
     };
 
-    $: request = sdkForProject.databases.listCollections(search, limit, offset);
+    $: collections.load(search, limit, offset ?? 0);
     $: if (search) offset = 0;
 </script>
 
@@ -30,31 +34,78 @@
 
         <Button on:click={() => (showCreate = true)}>
             <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create Collection</span>
+            <span class="text">Create collection</span>
         </Button>
     </div>
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        {#if response.total}
-            <Tiles>
-                {#each response.collections as collection}
-                    <Tile
-                        href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${collection.$id}`}
-                        title={collection.name} />
-                {/each}
-            </Tiles>
-            <div class="u-flex common-section u-main-space-between">
-                <p class="text">Total results: {response.total}</p>
-                <Pagination {limit} bind:offset sum={response.total} />
+
+    {#if $collections?.total}
+        <div class="grid-box common-section" style="--grid-gap:2rem; --grid-item-size:25rem;">
+            {#each $collections.collections as collection}
+                <Bucket
+                    href={`${base}/console/${project}/databases/database/${databaseId}/collection/${collection.$id}`}>
+                    <svelte:fragment slot="eyebrow">XX Documents</svelte:fragment>
+                    <svelte:fragment slot="title">{collection.name}</svelte:fragment>
+
+                    <Copy value={collection.$id}>
+                        <Pill button><i class="icon-duplicate" />Collection ID</Pill>
+                    </Copy>
+                </Bucket>
+            {/each}
+            {#if $collections.total % 2 !== 0}
+                <article class="card is-border-dashed">
+                    <div class="bucket">
+                        <div class="u-flex u-flex-vertical u-cross-center">
+                            <div class="common-section">
+                                <Button secondary round on:click={() => (showCreate = true)}>
+                                    <i class="icon-plus" />
+                                </Button>
+                            </div>
+                            <div class="common-section">
+                                <p>Create a new collection</p>
+                            </div>
+                        </div>
+                    </div>
+                </article>
+            {/if}
+        </div>
+
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {$collections.total}</p>
+            <Pagination {limit} bind:offset sum={$collections.total} />
+        </div>
+    {:else if search}
+        <Empty>
+            <div class="u-flex u-flex-vertical">
+                <b>Sorry, we couldn’t find ‘{search}’</b>
+                <div class="common-section">
+                    <p>There are no collections that match your search.</p>
+                </div>
+                <div class="common-section">
+                    <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+                </div>
             </div>
-        {:else if search}
-            <Empty>
-                No results found for <b>{search}</b>
-            </Empty>
-        {:else}
-            <Empty>You haven't created any collections for your project yet.</Empty>
-        {/if}
-    {/await}
+        </Empty>
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {$collections?.total}</p>
+            <Pagination {limit} bind:offset sum={$collections?.total} />
+        </div>
+    {:else}
+        <Empty dashed centered>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <Button secondary round on:click={() => (showCreate = true)}>
+                        <i class="icon-plus" />
+                    </Button>
+                </div>
+                <div class="common-section">
+                    <p>Create your first collection to get started</p>
+                </div>
+                <div class="common-section">
+                    <Button secondary href="#">Documentation</Button>
+                </div>
+            </div>
+        </Empty>
+    {/if}
 </Container>
+
 <Create bind:showCreate on:created={collectionCreated} />
diff --git a/src/routes/console/[project]/databases/database/[database]/settings.svelte b/src/routes/console/[project]/databases/database/[database]/settings.svelte
new file mode 100644
index 0000000000..b3df568140
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/settings.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Card, Avatar, CardGrid, Box } from '$lib/components';
+    import { Container } from '$lib/layout';
+    import { Button, InputText, Helper } from '$lib/elements/forms';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { database } from './store';
+    import Delete from './_delete.svelte';
+    import { onMount } from 'svelte';
+
+    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
+
+    let showDelete = false;
+    let showError: false | 'name' | 'email' | 'password' = false;
+    let errorMessage = 'Something went wrong';
+    let errorType: 'error' | 'warning' | 'success' = 'error';
+    let databaseName: string = null;
+
+    onMount(async () => {
+        await database.load();
+        databaseName ??= $database.name;
+    });
+
+    function addError(location: typeof showError, message: string, type: typeof errorType) {
+        showError = location;
+        errorMessage = message;
+        errorType = type;
+    }
+
+    async function updateName() {
+        try {
+            await sdkForProject.teams.update($page.params.team, databaseName);
+            $database.name = databaseName;
+            addNotification({
+                message: 'Name has been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addError('name', error.message, 'error');
+        }
+    }
+</script>
+
+{#if $database}
+    <Container>
+        <Card>
+            <div class="common-section grid-1-2">
+                <div class="grid-1-2-col-1">
+                    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
+                        <Avatar size={48} name={$database.name} src={getAvatar($database.name)} />
+                        <h6 class="heading-level-7">{$database.name}</h6>
+                    </div>
+                </div>
+                <div class="grid-1-2-col-2">
+                    <p>Created: TO IMPLEMENT</p>
+                    <p>Last Updated: TO IMPLEMENT</p>
+                </div>
+            </div>
+        </Card>
+
+        <CardGrid>
+            <h6 class="heading-level-7">Update Name</h6>
+
+            <svelte:fragment slot="aside">
+                <ul>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Enter database name"
+                        autocomplete={false}
+                        bind:value={databaseName} />
+                    {#if showError === 'name'}
+                        <Helper type={errorType}>{errorMessage}</Helper>
+                    {/if}
+                </ul>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={databaseName === $database.name || !databaseName}
+                    on:click={() => {
+                        updateName();
+                    }}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+
+        <CardGrid>
+            <div>
+                <h6 class="heading-level-7">Danger Zone</h6>
+            </div>
+
+            <p>
+                The database will be permanently deleted, including all data associated with this
+                team. This action is irreversible.
+            </p>
+            <svelte:fragment slot="aside">
+                <Box>
+                    <svelte:fragment slot="image">
+                        <Avatar size={48} name={$database.name} src={getAvatar($database.name)} />
+                    </svelte:fragment>
+                    <svelte:fragment slot="title">
+                        <h6 class="u-bold">{$database.name}</h6>
+                        <span>Last Updated: TO IMPLEMENT</span>
+                    </svelte:fragment>
+                </Box>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Container>
+    <Delete bind:showDelete />
+{/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/store.ts b/src/routes/console/[project]/databases/database/[database]/store.ts
index 02d460453e..dc171a32b4 100644
--- a/src/routes/console/[project]/databases/database/[database]/store.ts
+++ b/src/routes/console/[project]/databases/database/[database]/store.ts
@@ -1,6 +1,21 @@
 import { sdkForProject } from '$lib/stores/sdk';
-import { writable } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
+import { writable } from 'svelte/store';
+import { browser } from '$app/env';
+
+function createCollectionStore() {
+    const { subscribe, set } = writable<Models.CollectionList>(
+        browser ? JSON.parse(sessionStorage.getItem('database')) : null
+    );
+    return {
+        subscribe,
+        set,
+        load: async (search: string, limit: number, offset: number) => {
+            const response = await sdkForProject.databases.listCollections(search, limit, offset);
+            set(response);
+        }
+    };
+}
 
 function createDatabase() {
     const { subscribe, set } = writable<Models.Database>();
@@ -13,5 +28,10 @@ function createDatabase() {
         }
     };
 }
-
+export const collections = createCollectionStore();
 export const database = createDatabase();
+
+if (browser) {
+    collections.subscribe((n) => sessionStorage?.setItem('collections', JSON.stringify(n ?? '')));
+    database.subscribe((n) => sessionStorage?.setItem('database', JSON.stringify(n ?? '')));
+}
diff --git a/src/routes/console/[project]/databases/index.svelte b/src/routes/console/[project]/databases/index.svelte
index 202e9c3899..b31e09f6bf 100644
--- a/src/routes/console/[project]/databases/index.svelte
+++ b/src/routes/console/[project]/databases/index.svelte
@@ -1,62 +1,106 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { Button, InputSearch } from '$lib/elements/forms';
-    import { Card, Empty, Pagination, Tile, Tiles } from '$lib/components';
+    import { goto } from '$app/navigation';
+    import { Button } from '$lib/elements/forms';
+    import { Empty, Pagination, Copy, Bucket } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import type { Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { goto } from '$app/navigation';
+    import { databaseList } from './store';
 
-    let search = '';
     let showCreate = false;
+    let search = '';
     let offset = 0;
 
-    const limit = 25;
+    const limit = 5;
     const project = $page.params.project;
     const databaseCreated = async (event: CustomEvent<Models.Database>) => {
+        showCreate = false;
         await goto(`${base}/console/${project}/databases/database/${event.detail.$id}`);
     };
-    $: request = sdkForProject.databases.list(search, limit, offset);
+
+    $: databaseList.load(search, limit, offset ?? 0);
     $: if (search) offset = 0;
 </script>
 
 <Container>
-    <h1>Databases</h1>
-    <Card>
-        <InputSearch bind:value={search} />
-    </Card>
-
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        {#if response.total}
-            <p>{response.total} databases found</p>
-            <Tiles>
-                {#each response.databases as database}
-                    <Tile
-                        href={`${base}/console/${project}/databases/database/${database.$id}`}
-                        title={database.name} />
-                {/each}
-            </Tiles>
-
-            <Pagination {limit} bind:offset sum={response.total} />
-        {:else if search}
-            <Empty>
-                <svelte:fragment slot="header">
-                    No results found for <b>{search}</b>
-                </svelte:fragment>
-            </Empty>
-        {:else}
-            <Empty>
-                <svelte:fragment slot="header">No Databases Found</svelte:fragment>
-                You haven't created any database for your project yet.
-            </Empty>
-        {/if}
-    {/await}
-
-    <Button on:click={() => (showCreate = true)}>Create Database</Button>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <h2 class="heading-level-5">Databases</h2>
+
+        <Button on:click={() => (showCreate = true)}>
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create database</span>
+        </Button>
+    </div>
+
+    {#if $databaseList?.total}
+        <div class="grid-box common-section" style="--grid-gap:2rem; --grid-item-size:25rem;">
+            {#each $databaseList.databases as database}
+                <Bucket href={`${base}/console/${project}/databases/database/${database.$id}`}>
+                    <svelte:fragment slot="eyebrow">XX Collections</svelte:fragment>
+                    <svelte:fragment slot="title">{database.name}</svelte:fragment>
+
+                    <Copy value={database.$id}>
+                        <Pill button><i class="icon-duplicate" />Database ID</Pill>
+                    </Copy>
+                </Bucket>
+            {/each}
+            {#if $databaseList.total % 2 !== 0}
+                <article class="card is-border-dashed">
+                    <div class="bucket">
+                        <div class="u-flex u-flex-vertical u-cross-center">
+                            <div class="common-section">
+                                <Button secondary round on:click={() => (showCreate = true)}>
+                                    <i class="icon-plus" />
+                                </Button>
+                            </div>
+                            <div class="common-section">
+                                <p>Create a new database</p>
+                            </div>
+                        </div>
+                    </div>
+                </article>
+            {/if}
+        </div>
+
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {$databaseList.total}</p>
+            <Pagination {limit} bind:offset sum={$databaseList.total} />
+        </div>
+    {:else if search}
+        <Empty>
+            <div class="u-flex u-flex-vertical">
+                <b>Sorry, we couldn’t find ‘{search}’</b>
+                <div class="common-section">
+                    <p>There are no databases that match your search.</p>
+                </div>
+                <div class="common-section">
+                    <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+                </div>
+            </div>
+        </Empty>
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {$databaseList?.total}</p>
+            <Pagination {limit} bind:offset sum={$databaseList?.total} />
+        </div>
+    {:else}
+        <Empty dashed centered>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <Button secondary round on:click={() => (showCreate = true)}>
+                        <i class="icon-plus" />
+                    </Button>
+                </div>
+                <div class="common-section">
+                    <p>Create your first Database to get started</p>
+                </div>
+                <div class="common-section">
+                    <Button secondary href="#">Documentation</Button>
+                </div>
+            </div>
+        </Empty>
+    {/if}
 </Container>
 
 <Create bind:showCreate on:created={databaseCreated} />
diff --git a/src/routes/console/[project]/databases/store.ts b/src/routes/console/[project]/databases/store.ts
new file mode 100644
index 0000000000..4545ac637c
--- /dev/null
+++ b/src/routes/console/[project]/databases/store.ts
@@ -0,0 +1,25 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import type { Models } from '@aw-labs/appwrite-console';
+import { writable } from 'svelte/store';
+import { browser } from '$app/env';
+
+function createDatabaseListStore() {
+    const { subscribe, set } = writable<Models.DatabaseList>(
+        browser ? JSON.parse(sessionStorage.getItem('databaseList')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async (search: string, limit: number, offset: number) => {
+            const response = await sdkForProject.databases.list(search, limit, offset);
+            set(response);
+        }
+    };
+}
+
+export const databaseList = createDatabaseListStore();
+
+if (browser) {
+    databaseList.subscribe((n) => sessionStorage?.setItem('databaseList', JSON.stringify(n ?? '')));
+}
diff --git a/src/routes/console/[project]/databases/usage.svelte b/src/routes/console/[project]/databases/usage.svelte
new file mode 100644
index 0000000000..aa43e67418
--- /dev/null
+++ b/src/routes/console/[project]/databases/usage.svelte
@@ -0,0 +1,10 @@
+<script>
+    import { Card } from '$lib/components';
+    import { Container } from '$lib/layout';
+</script>
+
+<Container>
+    <h1>Usage</h1>
+
+    <Card />
+</Container>

From cbf21b15a19ed9b8428589f787bc2ad00d8409d1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 14 Jul 2022 17:55:08 +0200
Subject: [PATCH 02/75] feat: update table with sticky column

---
 src/lib/elements/table/cell.svelte  | 2 ++
 src/lib/elements/table/table.svelte | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/elements/table/cell.svelte b/src/lib/elements/table/cell.svelte
index 4a5259d0fb..4e01206bd6 100644
--- a/src/lib/elements/table/cell.svelte
+++ b/src/lib/elements/table/cell.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
     export let onlyDesktop = false;
     export let width: number = null;
+    export let main = false;
 </script>
 
 <div
     width={width?.toString() ?? ''}
+    class:is-main={main}
     class="table-col"
     class:is-only-desktop={onlyDesktop}
     role="cell">
diff --git a/src/lib/elements/table/table.svelte b/src/lib/elements/table/table.svelte
index 465d4c8f95..96354927ae 100644
--- a/src/lib/elements/table/table.svelte
+++ b/src/lib/elements/table/table.svelte
@@ -1,3 +1,7 @@
-<div class="table is-vertical u-margin-block-start-32" role="table">
+<script>
+    export let sticky = false;
+</script>
+
+<div class:is-sticky-scroll={sticky} class="table is-vertical u-margin-block-start-32" role="table">
     <slot />
 </div>

From 2a05dbaa5c2f54eb79e027810a04a8c2373e5391 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 14 Jul 2022 17:56:13 +0200
Subject: [PATCH 03/75] feat: start work collection screen

---
 .../collection/[collection]/__layout.svelte   |   2 +-
 .../collection/[collection]/index.svelte      | 107 ++++++++++--------
 .../collection/[collection]/store.ts          |  30 ++++-
 .../database/[database]/index.svelte          |   4 +
 4 files changed, 92 insertions(+), 51 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
index 0ef91aa44b..de0d53cfcc 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
@@ -22,7 +22,7 @@
             title.set($collection.name);
         }
 
-        backButton.set(`${base}/console/${$page.params.project}/database`);
+        backButton.set(`${base}/console/${$page.params.project}/database/${databaseId}`);
 
         copyData.set({
             text: '',
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
index 04cb02f3b3..49a3d06121 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
@@ -1,30 +1,32 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
     import {
         Table,
-        TableRow,
+        TableRowLink,
         TableBody,
         TableHeader,
         TableCellHead,
-        TableCellLink
+        TableCell
     } from '$lib/elements/table';
-    import { Empty, Pagination, Search } from '$lib/components';
-    import { collection } from './store';
+    import { Empty, Pagination, Copy } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { collection, documentList } from './store';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { base } from '$app/paths';
+    import { onMount } from 'svelte';
 
     let offset = 0;
-    let search = '';
 
-    const limit = 12;
+    const limit = 5;
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
 
-    $: request = sdkForProject.databases.listDocuments($collection.$id, [], limit, offset);
+    onMount(async () => {
+        await documentList.load($collection.$id, [], limit, offset);
+    });
+
     $: columns = [
-        { key: '$id', title: 'ID' },
         ...$collection.attributes.map((attribute) => ({
             key: attribute.key,
             title: attribute.key
@@ -33,57 +35,64 @@
 </script>
 
 <Container>
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        <Search bind:search placeholder="Search by ID">
-            <Button on:click={() => console.log('showCreate = true')}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create Document</span>
-            </Button>
-        </Search>
-        {#if response.total}
-            <Table>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <h2 class="heading-level-5">Documents</h2>
+
+        <Button on:click={() => console.log('showCreate = true')}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Create document</span>
+        </Button>
+    </div>
+
+    {#if $documentList.total}
+        <div class="table-wrapper">
+            <Table sticky>
                 <TableHeader>
+                    <TableCellHead>Document ID</TableCellHead>
                     {#each columns as column}
                         <TableCellHead>{column.title}</TableCellHead>
                     {/each}
                 </TableHeader>
                 <TableBody>
-                    {#each response.documents as document}
-                        <TableRow>
+                    {#each $documentList.documents as document}
+                        <TableRowLink
+                            href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}>
+                            <TableCell main width={230}>
+                                <Copy value={document.$id}>
+                                    <Pill button
+                                        ><span class="icon-duplicate" aria-hidden="true" />
+                                        <span class="text">{document.$id}</span></Pill>
+                                </Copy>
+                            </TableCell>
                             {#each columns as column}
-                                <TableCellLink
-                                    href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}
-                                    title={column.title}>
+                                <TableCell>
                                     {document[column.key] ?? 'n/a'}
-                                </TableCellLink>
+                                </TableCell>
                             {/each}
-                        </TableRow>
+                        </TableRowLink>
                     {/each}
                 </TableBody>
             </Table>
-
-            <div class="u-flex common-section u-main-space-between">
-                <p class="text">Total results: {response.total}</p>
-                <Pagination {limit} bind:offset sum={response.total} />
-            </div>
-        {:else}
-            <Empty dashed centered>
-                <div class="u-flex u-flex-vertical u-cross-center">
-                    <div class="common-section">
-                        <Button secondary round on:click={() => console.log('showCreate = true')}>
-                            <span class="icon-plus" aria-hidden="true" />
-                        </Button>
-                    </div>
-                    <div class="common-section">
-                        <p>Crate your first document to get started</p>
-                    </div>
-                    <div class="common-section">
-                        <Button secondary href="#">Documentation</Button>
-                    </div>
+        </div>
+        <div class="u-flex common-section u-main-space-between">
+            <p class="text">Total results: {$documentList.total}</p>
+            <Pagination {limit} bind:offset sum={$documentList.total} />
+        </div>
+    {:else}
+        <Empty dashed centered>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <Button secondary round on:click={() => console.log('showCreate = true')}>
+                        <span class="icon-plus" aria-hidden="true" />
+                    </Button>
+                </div>
+                <div class="common-section">
+                    <p>Crate your first document to get started</p>
                 </div>
-            </Empty>
-        {/if}
-    {/await}
+                <div class="common-section">
+                    <Button secondary href="#">Documentation</Button>
+                </div>
+            </div>
+        </Empty>
+    {/if}
 </Container>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
index 036d9fa6e7..e24e9b18ae 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
@@ -1,6 +1,7 @@
 import { sdkForProject } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
 import { writable } from 'svelte/store';
+import { browser } from '$app/env';
 
 type Attributes =
     | Models.AttributeBoolean
@@ -17,7 +18,9 @@ type Collection = Omit<Models.Collection, 'attributes'> & {
 };
 
 function createCollection() {
-    const { subscribe, set, update } = writable<Collection>();
+    const { subscribe, set, update } = writable<Collection>(
+        browser ? JSON.parse(sessionStorage.getItem('collection')) : null
+    );
 
     return {
         subscribe,
@@ -49,4 +52,29 @@ function createCollection() {
     };
 }
 
+function createDocumentListStore() {
+    const { subscribe, set } = writable<Models.DocumentList<Models.Document>>(
+        browser ? JSON.parse(sessionStorage.getItem('documents')) : null
+    );
+    return {
+        subscribe,
+        set,
+        load: async (collectionId: string, queries: [], limit: number, offset: number) => {
+            const response = await sdkForProject.databases.listDocuments(
+                collectionId,
+                queries,
+                limit,
+                offset
+            );
+            set(response);
+        }
+    };
+}
+
 export const collection = createCollection();
+export const documentList = createDocumentListStore();
+
+if (browser) {
+    collection.subscribe((n) => sessionStorage?.setItem('collection', JSON.stringify(n ?? '')));
+    documentList.subscribe((n) => sessionStorage?.setItem('documentList', JSON.stringify(n ?? '')));
+}
diff --git a/src/routes/console/[project]/databases/database/[database]/index.svelte b/src/routes/console/[project]/databases/database/[database]/index.svelte
index e48dbbf6e3..1fd503824d 100644
--- a/src/routes/console/[project]/databases/database/[database]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/index.svelte
@@ -45,6 +45,10 @@
                     href={`${base}/console/${project}/databases/database/${databaseId}/collection/${collection.$id}`}>
                     <svelte:fragment slot="eyebrow">XX Documents</svelte:fragment>
                     <svelte:fragment slot="title">{collection.name}</svelte:fragment>
+                    <svelte:fragment slot="status">
+                        {#if !collection.enabled}
+                            <Pill>Disabled</Pill>
+                        {/if}</svelte:fragment>
 
                     <Copy value={collection.$id}>
                         <Pill button><i class="icon-duplicate" />Collection ID</Pill>

From e4432f6a7bbc2691edc144e611621255a5c91607 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 15 Jul 2022 17:31:32 +0200
Subject: [PATCH 04/75] feat: work on collections & attributes pages

---
 .../database/[database]/_create.svelte        |  63 +++-
 .../collection/[collection]/__layout.svelte   |   6 +-
 .../[collection]/_createAttribute.svelte      |  75 +++++
 .../collection/[collection]/_delete.svelte    |  41 +++
 .../collection/[collection]/attributes.svelte | 129 +++++---
 .../[collection]/attributes/_boolean.svelte   |  27 +-
 .../[collection]/attributes/_email.svelte     |  26 +-
 .../[collection]/attributes/_enum.svelte      |  38 +--
 .../[collection]/attributes/_float.svelte     |  28 +-
 .../[collection]/attributes/_integer.svelte   |  29 +-
 .../[collection]/attributes/_ip.svelte        |  26 +-
 .../[collection]/attributes/_string.svelte    |  27 +-
 .../[collection]/attributes/_url.svelte       |  26 +-
 .../[collection]/attributes/store.ts          |  27 +-
 .../collection/[collection]/index.svelte      |   2 +-
 .../collection/[collection]/settings.svelte   | 293 ++++++++++++++----
 .../collection/[collection]/store.ts          |   2 +-
 .../database/[database]/index.svelte          |   4 +-
 .../console/[project]/databases/index.svelte  |   4 +-
 19 files changed, 562 insertions(+), 311 deletions(-)
 create mode 100644 src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
 create mode 100644 src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte

diff --git a/src/routes/console/[project]/databases/database/[database]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/_create.svelte
index bd5bb1d715..5e1151932a 100644
--- a/src/routes/console/[project]/databases/database/[database]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/_create.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button, InputText, InputCustomId, Form } from '$lib/elements/forms';
+    import { Modal, InnerModal } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Button, InputText, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
 
@@ -10,19 +10,20 @@
 
     const dispatch = createEventDispatcher();
 
-    let id = '';
     let name = '';
+    let id: string = null;
+    let showDropdown = false;
 
     const create = async () => {
         try {
             const collection = await sdkForProject.databases.createCollection(
-                id,
+                id ? id : 'unique()',
                 name,
                 'collection',
                 [],
                 []
             );
-            id = name = '';
+            name = id = null;
             showCreate = false;
             dispatch('created', collection);
         } catch (error) {
@@ -35,10 +36,54 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Collection</svelte:fragment>
-        <InputCustomId label="ID" id="id" bind:value={id} />
-        <InputText label="Name" id="name" bind:value={name} />
+        <FormList>
+            <InputText
+                id="name"
+                label="Name"
+                placeholder="Enter collection name"
+                bind:value={name}
+                autofocus
+                required />
+
+            {#if !showDropdown}
+                <div>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}
+                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                            Collection ID
+                        </span></Pill>
+                </div>
+            {:else}
+                <InnerModal bind:show={showDropdown}>
+                    <svelte:fragment slot="title">Collection ID</svelte:fragment>
+                    <p>
+                        Enter a custom collection ID. Leave blank for a randomly generated
+                        collection ID.
+                    </p>
+                    <svelte:fragment slot="content">
+                        <div class="form">
+                            <InputText
+                                id="id"
+                                label="Custom ID"
+                                showLabel={false}
+                                placeholder="Enter ID"
+                                autofocus={true}
+                                bind:value={id} />
+
+                            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
+                                <span
+                                    class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
+                                    aria-hidden="true" />
+                                <span class="text u-line-height-1-5"
+                                    >Allowed characters: alphanumeric, hyphen, non-leading
+                                    underscore, period</span>
+                            </div>
+                        </div>
+                    </svelte:fragment>
+                </InnerModal>
+            {/if}
+        </FormList>
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
             <Button submit>Create</Button>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
index de0d53cfcc..00a500ead6 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
@@ -22,11 +22,11 @@
             title.set($collection.name);
         }
 
-        backButton.set(`${base}/console/${$page.params.project}/database/${databaseId}`);
+        backButton.set(`${base}/console/${$page.params.project}/databases/database/${databaseId}/`);
 
         copyData.set({
-            text: '',
-            value: ''
+            text: 'Collection ID',
+            value: collectionId
         });
 
         tabs.set([
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
new file mode 100644
index 0000000000..3abaa9d603
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    // import { Pill } from '$lib/elements';
+    import { option, options } from './attributes/store';
+    import { Button, InputText, Form, FormList, InputSelect } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+
+    export let showCreate = false;
+
+    const dispatch = createEventDispatcher();
+
+    let name = '';
+    let id: string = null;
+    let key: string = null;
+    let selectedOption = '';
+
+    const create = async () => {
+        try {
+            console.log('test');
+            showCreate = false;
+            dispatch('created');
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+
+    $: if (selectedOption) {
+        $option = options.find((option) => option.name === selectedOption);
+    }
+</script>
+
+<Form on:submit={create}>
+    <Modal size="big" bind:show={showCreate}>
+        <svelte:fragment slot="header">Create Attribute</svelte:fragment>
+        <FormList>
+            <InputText
+                id="key"
+                label="Attribute key"
+                placeholder="Enter key"
+                bind:value={key}
+                autofocus
+                required />
+
+            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
+                <span
+                    class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
+                    aria-hidden="true" />
+                <span class="text u-line-height-1-5"
+                    >Allowed characters: alphanumeric, hyphen, non-leading underscore, period</span>
+            </div>
+
+            <InputSelect
+                options={options.map((n) => ({ value: n.name, label: n.name }))}
+                id="type"
+                label="Attribute type"
+                bind:value={selectedOption}
+                required />
+            {#if selectedOption}
+                <svelte:component
+                    this={$option.component}
+                    {key}
+                    on:close={() => ($option = null)} />
+            {/if}
+        </FormList>
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+            <Button submit>Create</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte
new file mode 100644
index 0000000000..a016b1fe03
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte
@@ -0,0 +1,41 @@
+<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 } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { collection } from './store';
+
+    export let showDelete = false;
+
+    const deleteElement = async () => {
+        try {
+            await sdkForProject.databases.deleteCollection($collection.$id);
+            showDelete = false;
+            await goto(
+                `${base}/console/${$page.params.project}/databases/${$page.params.database}`
+            );
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteElement}>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete Collection</svelte:fragment>
+
+        <p>
+            Are you sure you want to delete <b>{$collection.name}</b>?
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index 7e67786b26..2cd1107466 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -8,65 +8,122 @@
         TableCellText
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
-    import { DropList, DropListItem, Empty } from '$lib/components';
-    import { option, options } from './attributes/store';
+    import { DropList, DropListItem, Empty, Pagination } from '$lib/components';
     import { collection } from './store';
+    // import type { Attributes } from './store';
     import { Container } from '$lib/layout';
     import { Pill } from '$lib/elements';
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import Create from './_createAttribute.svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
 
-    let showCreateDropdown = false;
+    let offset = 0;
+    const limit = 5;
+    let showDropdown = [];
+    // let selectedAttribute: Attributes = null;
+    // let showDelete = false;
+    let showCreate = false;
+
+    const handleCreate = async (event: CustomEvent<Models.Collection>) => {
+        showCreate = false;
+        console.log(event);
+    };
+
+    onMount(async () => {
+        await collection.load($page.params.collection);
+    });
 </script>
 
 <Container>
-    <h1>Attributes</h1>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <h2 class="heading-level-5">Attributes</h2>
 
-    {#if $collection.attributes.length}
+        <Button on:click={() => (showCreate = true)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Create attribute</span>
+        </Button>
+    </div>
+
+    {#if $collection?.attributes.length}
         <Table>
             <TableHeader>
-                <TableCellHead>Status</TableCellHead>
                 <TableCellHead>Key</TableCellHead>
                 <TableCellHead>Type</TableCellHead>
+                <TableCellHead>Default Value</TableCellHead>
+                <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each $collection.attributes as attribute}
+                {#each $collection.attributes as attribute, index}
                     <TableRow>
-                        <TableCellText title="Status">
-                            <Pill
-                                success={attribute.status === 'available'}
-                                warning={attribute.status === 'processing'}
-                                danger={['deleting', 'stuck', 'failed'].includes(attribute.status)}>
-                                {attribute.status}
-                            </Pill>
-                        </TableCellText>
-                        <TableCellText title="Key">{attribute.key}</TableCellText>
-                        <TableCellText title="Type">
-                            {'format' in attribute ? attribute.format : attribute.type}
+                        <TableCellText title="Key"
+                            >{attribute.key}
+                            {#if attribute.status !== 'available'}
+                                <Pill
+                                    warning={attribute.status === 'processing'}
+                                    danger={['deleting', 'stuck', 'failed'].includes(
+                                        attribute.status
+                                    )}>
+                                    {attribute.status}
+                                </Pill>
+                            {/if}
                         </TableCellText>
                         <TableCellText title="Type">{attribute.type}</TableCellText>
+                        <TableCellText title="Default Value">
+                            {attribute.xdefault ? attribute.xdefault : '-'}
+                        </TableCellText>
+                        <TableCellText showOverflow title="">
+                            <DropList
+                                bind:show={showDropdown[index]}
+                                position="bottom"
+                                horizontal="left"
+                                arrow={false}>
+                                <button
+                                    class="button is-only-icon is-text"
+                                    aria-label="More options"
+                                    on:click|preventDefault={() => {
+                                        showDropdown[index] = !showDropdown[index];
+                                    }}>
+                                    <span class="icon-dots-horizontal" aria-hidden="true" />
+                                </button>
+                                <svelte:fragment slot="list">
+                                    <DropListItem icon="eye">Overview</DropListItem>
+                                    <DropListItem icon="plus">Create Index</DropListItem>
+                                    <DropListItem
+                                        icon="trash"
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            // selectedAttribute = attribute;
+                                            // showDelete = true;
+                                        }}>Delete</DropListItem>
+                                </svelte:fragment>
+                            </DropList>
+                        </TableCellText>
                     </TableRow>
                 {/each}
             </TableBody>
         </Table>
+        <div class="u-flex common-section u-main-space-between">
+            <p class="text">Total results: {$collection?.attributes?.length}</p>
+            <Pagination {limit} bind:offset sum={$collection?.attributes?.length} />
+        </div>
     {:else}
-        <Empty>
-            <svelte:fragment slot="header">No Attributes Found</svelte:fragment>
-            Add your first attribute to get started.
+        <Empty dashed centered>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <Button secondary round on:click={() => console.log('showCreate = true')}>
+                        <span class="icon-plus" aria-hidden="true" />
+                    </Button>
+                </div>
+                <div class="common-section">
+                    <p>Crate your first document to get started</p>
+                </div>
+                <div class="common-section">
+                    <Button secondary href="#">Documentation</Button>
+                </div>
+            </div>
         </Empty>
     {/if}
-
-    <DropList bind:show={showCreateDropdown}>
-        <Button on:click={() => (showCreateDropdown = !showCreateDropdown)}
-            >Create Attribute</Button>
-        <svelte:fragment slot="list">
-            {#each options as o}
-                <DropListItem icon={o.icon} on:click={() => ($option = o)}>
-                    New {o.name} Attribute
-                </DropListItem>
-            {/each}
-        </svelte:fragment>
-    </DropList>
 </Container>
 
-{#if $option}
-    <svelte:component this={$option.component} on:close={() => ($option = null)} />
-{/if}
+<Create bind:showCreate on:created={handleCreate} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
index deef976ce4..a71e818010 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button, InputText, InputSwitch, Form } from '$lib/elements/forms';
+    import { InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
 
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    const dispatch = createEventDispatcher();
+    export const dispatch = createEventDispatcher();
 
-    let key: string,
-        def: boolean,
+    let key: string;
+    let def: boolean,
         required = false,
         array = false;
 
@@ -33,18 +32,6 @@
     };
 </script>
 
-<Form on:submit={submit}>
-    <Modal on:close={() => dispatch('close')} show>
-        <svelte:fragment slot="header">Create Boolean Attribute</svelte:fragment>
-
-        <InputText id="key" label="Key" bind:value={key} required autofocus />
-        <InputSwitch id="required" label="Required" bind:value={required} />
-        <InputSwitch id="array" label="Array" bind:value={array} />
-        <InputSwitch id="default" label="Default" bind:value={def} />
-
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => dispatch('close')}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<InputSwitch id="required" label="Required" required bind:value={required} />
+<InputSwitch id="array" label="Array" bind:value={array} />
+<InputSwitch id="default" label="Default" bind:value={def} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
index d897d747d2..3baffe1004 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-
-    import { Button, InputText, InputSwitch, Form } from '$lib/elements/forms';
+    import { InputText, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    let key: string,
-        def: string,
+    export let key: string;
+    let def: string,
         required = false,
         array = false;
 
@@ -32,18 +30,6 @@
     };
 </script>
 
-<Form on:submit={submit}>
-    <Modal on:close={() => dispatch('close')} show>
-        <svelte:fragment slot="header">Create Email Attribute</svelte:fragment>
-
-        <InputText id="key" label="Key" bind:value={key} required autofocus />
-        <InputSwitch id="required" label="Required" bind:value={required} />
-        <InputSwitch id="required" label="Array" bind:value={array} />
-        <InputText id="default" label="Default" bind:value={def} />
-
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => dispatch('close')}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<InputSwitch id="required" label="Required" bind:value={required} />
+<InputSwitch id="required" label="Array" bind:value={array} />
+<InputText id="default" label="Default" bind:value={def} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
index ac809c6486..a5430498e7 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
@@ -1,20 +1,12 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import {
-        Button,
-        InputText,
-        InputSwitch,
-        InputSelect,
-        Form,
-        InputTags
-    } from '$lib/elements/forms';
+    import { InputSwitch, InputSelect, InputTags } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    let key: string,
-        def = '',
+    export let key: string;
+    let def = '',
         elements: string[],
         required = false,
         array = false;
@@ -46,23 +38,7 @@
         })) ?? [];
 </script>
 
-<Form on:submit={submit}>
-    <Modal on:close={() => dispatch('close')} show>
-        <svelte:fragment slot="header">Create Enum Attribute</svelte:fragment>
-
-        <InputText id="key" label="Key" bind:value={key} required autofocus />
-        <InputTags
-            id="elements"
-            label="Elements"
-            bind:tags={elements}
-            placeholder="Add elements here" />
-        <InputSelect id="default" label="Default" bind:options bind:value={def} />
-        <InputSwitch id="required" label="Required" bind:value={required} />
-        <InputSwitch id="required" label="Array" bind:value={array} />
-
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => dispatch('close')}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<InputTags id="elements" label="Elements" bind:tags={elements} placeholder="Add elements here" />
+<InputSelect id="default" label="Default" bind:options bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} />
+<InputSwitch id="required" label="Array" bind:value={array} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
index f213daebaf..362dd60bd9 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button, InputNumber, InputText, InputSwitch, Form } from '$lib/elements/forms';
+    import { InputNumber, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -8,8 +7,8 @@
 
     const dispatch = createEventDispatcher();
 
-    let key: string,
-        min: number,
+    export let key: string;
+    let min: number,
         max: number,
         def: number,
         required = false,
@@ -36,20 +35,9 @@
     };
 </script>
 
-<Form on:submit={submit}>
-    <Modal on:close={() => dispatch('close')} show>
-        <svelte:fragment slot="header">Create Float Attribute</svelte:fragment>
-        <InputText id="key" label="Key" bind:value={key} required autofocus />
-        <InputNumber id="min" label="Min" bind:value={min} />
-        <InputNumber id="max" label="Max" bind:value={max} />
+<InputNumber id="min" label="Min" bind:value={min} />
+<InputNumber id="max" label="Max" bind:value={max} />
 
-        <InputSwitch id="required" label="Required" bind:value={required} />
-        <InputSwitch id="array" label="Array" bind:value={array} />
-        <InputNumber id="default" label="Default" bind:value={def} />
-
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => dispatch('close')}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<InputSwitch id="required" label="Required" bind:value={required} />
+<InputSwitch id="array" label="Array" bind:value={array} />
+<InputNumber id="default" label="Default" bind:value={def} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
index c30bbb5865..8a3dfea4b5 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-
-    import { Button, InputNumber, InputText, InputSwitch, Form } from '$lib/elements/forms';
+    import { InputNumber, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -9,8 +7,8 @@
 
     const dispatch = createEventDispatcher();
 
-    let key: string,
-        min: number,
+    export let key: string;
+    let min: number,
         max: number,
         def: number,
         required = false,
@@ -37,20 +35,9 @@
     };
 </script>
 
-<Form on:submit={submit}>
-    <Modal on:close={() => dispatch('close')} show>
-        <svelte:fragment slot="header">Create Integer Attribute</svelte:fragment>
-        <InputText id="key" label="Key" bind:value={key} required autofocus />
-        <InputNumber id="min" label="Min" bind:value={min} />
-        <InputNumber id="max" label="Max" bind:value={max} />
-
-        <InputSwitch id="required" label="Required" bind:value={required} />
-        <InputSwitch id="array" label="Array" bind:value={array} />
-        <InputNumber id="default" label="Default" bind:value={def} />
+<InputNumber id="min" label="Min" bind:value={min} />
+<InputNumber id="max" label="Max" bind:value={max} />
 
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => dispatch('close')}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<InputSwitch id="required" label="Required" bind:value={required} />
+<InputSwitch id="array" label="Array" bind:value={array} />
+<InputNumber id="default" label="Default" bind:value={def} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
index 6b28b59486..4d35811901 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-
-    import { Button, InputText, InputSwitch, Form } from '$lib/elements/forms';
+    import { InputText, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    let key: string,
-        def: string,
+    export let key: string;
+    let def: string,
         required = false,
         array = false;
 
@@ -32,18 +30,6 @@
     };
 </script>
 
-<Form on:submit={submit}>
-    <Modal on:close={() => dispatch('close')} show>
-        <svelte:fragment slot="header">Create IP Attribute</svelte:fragment>
-
-        <InputText id="key" label="Key" bind:value={key} required autofocus />
-        <InputSwitch id="required" label="Required" bind:value={required} />
-        <InputSwitch id="required" label="Array" bind:value={array} />
-        <InputText id="default" label="Default" bind:value={def} />
-
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => dispatch('close')}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<InputSwitch id="required" label="Required" bind:value={required} />
+<InputSwitch id="required" label="Array" bind:value={array} />
+<InputText id="default" label="Default" bind:value={def} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
index f9060bd8e4..f153db47db 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button, InputNumber, InputText, InputSwitch, Form } from '$lib/elements/forms';
+    import { InputNumber, InputText, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    let key: string,
-        def: string,
+    export let key: string;
+    let def: string,
         size = 255,
         required = false,
         array = false;
@@ -33,19 +32,7 @@
     };
 </script>
 
-<Form on:submit={submit}>
-    <Modal on:close={() => dispatch('close')} show>
-        <svelte:fragment slot="header">Create String Attribute</svelte:fragment>
-
-        <InputText id="key" label="Key" bind:value={key} required autofocus />
-        <InputNumber id="size" label="Size" bind:value={size} required />
-        <InputSwitch id="required" label="Required" bind:value={required} />
-        <InputSwitch id="required" label="Array" bind:value={array} />
-        <InputText id="default" label="Default" bind:value={def} />
-
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => dispatch('close')}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<InputNumber id="size" label="Size" bind:value={size} required />
+<InputSwitch id="required" label="Required" bind:value={required} />
+<InputSwitch id="required" label="Array" bind:value={array} />
+<InputText id="default" label="Default" bind:value={def} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
index 38a140e73f..601d935e01 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-
-    import { Button, InputText, InputSwitch, Form } from '$lib/elements/forms';
+    import { InputText, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    let key: string,
-        def: string,
+    export let key: string;
+    let def: string,
         required = false,
         array = false;
 
@@ -32,18 +30,6 @@
     };
 </script>
 
-<Form on:submit={submit}>
-    <Modal on:close={() => dispatch('close')} show>
-        <svelte:fragment slot="header">Create URL Attribute</svelte:fragment>
-
-        <InputText id="key" label="Key" bind:value={key} required autofocus />
-        <InputSwitch id="required" label="Required" bind:value={required} />
-        <InputSwitch id="required" label="Array" bind:value={array} />
-        <InputText id="default" label="Default" bind:value={def} />
-
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => dispatch('close')}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<InputSwitch id="required" label="Required" bind:value={required} />
+<InputSwitch id="required" label="Array" bind:value={array} />
+<InputText id="default" label="Default" bind:value={def} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/store.ts b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/store.ts
index a3d8036a49..ed557c44f3 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/store.ts
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/store.ts
@@ -12,50 +12,41 @@ import Url from './_url.svelte';
 export type Option = {
     name: string;
     component: typeof SvelteComponent;
-    icon: string;
 };
 
 export const options: Option[] = [
     {
         name: 'String',
-        component: String,
-        icon: 'string'
+        component: String
     },
     {
         name: 'Integer',
-        component: Integer,
-        icon: 'integer'
+        component: Integer
     },
     {
         name: 'Float',
-        component: Float,
-        icon: 'integer'
+        component: Float
     },
     {
         name: 'Boolean',
-        component: Boolean,
-        icon: 'boolean'
+        component: Boolean
     },
     {
         name: 'Email',
-        component: Email,
-        icon: 'email'
+        component: Email
     },
     {
         name: 'IP',
-        component: Ip,
-        icon: 'ip'
+        component: Ip
     },
     {
         name: 'URL',
-        component: Url,
-        icon: 'url'
+        component: Url
     },
     {
         name: 'Enum',
-        component: Enum,
-        icon: 'enum'
+        component: Enum
     }
 ];
 
-export const option = writable<Option>();
+export const option = writable<Option>({ name: null, component: null });
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
index 49a3d06121..1d38f86baf 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
@@ -44,7 +44,7 @@
         </Button>
     </div>
 
-    {#if $documentList.total}
+    {#if $documentList?.total}
         <div class="table-wrapper">
             <Table sticky>
                 <TableHeader>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
index 3b2a6b879a..a25dc89f0e 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
@@ -1,20 +1,57 @@
 <script lang="ts">
-    import { Card } from '$lib/components';
-    import {
-        Button,
-        Form,
-        FormItem,
-        InputSwitch,
-        InputRadio,
-        InputTags,
-        InputText
-    } from '$lib/elements/forms';
+    import { Alert, CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { Button, InputText, InputTags, InputSwitch, Helper } from '$lib/elements/forms';
     import { collection } from './store';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import Delete from './_delete.svelte';
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+
+    let showDelete = false;
+    let showError: false | 'name' | 'size' = false,
+        errorMessage = 'Something went wrong',
+        errorType: 'error' | 'warning' | 'success' = 'error';
+    let enabled: boolean = null,
+        collectionName: string = null,
+        collectionPermissions: string = null,
+        collectionRead: string[] = null,
+        collectionWrite: string[] = null,
+        arePermsDisabled = true;
+
+    onMount(async () => {
+        await collection.load($page.params.collection);
+        enabled ??= $collection.enabled;
+        collectionName ??= $collection.name;
+        collectionName ??= $collection.name;
+        collectionPermissions ??= $collection.permission;
+        collectionRead ??= $collection.$read;
+        collectionWrite ??= $collection.$write;
+    });
 
-    const updateCollection = async () => {
+    $: if (collectionPermissions || collectionRead || collectionWrite) {
+        if (collectionPermissions !== $collection.permission) {
+            arePermsDisabled = false;
+        } else if (collectionRead) {
+            if (JSON.stringify(collectionRead) !== JSON.stringify($collection.$read)) {
+                arePermsDisabled = false;
+            } else arePermsDisabled = true;
+        } else if (collectionWrite) {
+            if (JSON.stringify(collectionWrite) !== JSON.stringify($collection.$write)) {
+                arePermsDisabled = false;
+            } else arePermsDisabled = true;
+        }
+    }
+
+    function addError(location: typeof showError, message: string, type: typeof errorType) {
+        showError = location;
+        errorMessage = message;
+        errorType = type;
+    }
+
+    async function togglecollection() {
         try {
             await sdkForProject.databases.updateCollection(
                 $collection.$id,
@@ -22,10 +59,11 @@
                 $collection.permission,
                 $collection.$read,
                 $collection.$write,
-                $collection.enabled
+                enabled
             );
+            $collection.enabled = enabled;
             addNotification({
-                message: 'Collection was updated successfully',
+                message: `${$collection.name} has been updated`,
                 type: 'success'
             });
         } catch (error) {
@@ -34,63 +72,184 @@
                 type: 'error'
             });
         }
-    };
+    }
+    async function updateName() {
+        try {
+            await sdkForProject.databases.updateCollection(
+                $collection.$id,
+                $collection.name,
+                $collection.permission
+            );
+            $collection.name = collectionName;
+            showError = false;
+            addNotification({
+                message: 'Name has been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addError('name', error.message, 'error');
+        }
+    }
+    async function updatePermissions() {
+        try {
+            await sdkForProject.databases.updateCollection(
+                $collection.$id,
+                $collection.name,
+                collectionPermissions,
+                collectionPermissions === 'collection' ? collectionRead : $collection.$read,
+                collectionPermissions === 'collection' ? collectionWrite : $collection.$write
+            );
+            $collection.permission = collectionPermissions;
+            $collection.$read = collectionRead;
+            $collection.$write = collectionWrite;
+            arePermsDisabled = true;
+            addNotification({
+                message: 'Permissions have been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
 </script>
 
 <Container>
-    <h1>Settings</h1>
-    <Form on:submit={updateCollection}>
-        <Card>
-            <InputText bind:value={$collection.name} label="Name" id="name" />
-            <InputSwitch bind:value={$collection.enabled} label="Enabled" id="enabled" />
-            <h2>Permissions</h2>
-            <p>Choose the permissions model for this collection.</p>
-            <InputRadio
-                bind:group={$collection.permission}
-                value="collection"
-                id="permission-collection"
-                name="permission"
-                label="Collection Level" />
-            <p>
-                With Collection Level permissions, you assign permissions only once in the
-                collection.
-            </p>
-            <p>
-                In this permission level, permissions assigned to collection takes the precedence
-                and documents permissions are ignored.
-            </p>
-            {#if $collection.permission === 'collection'}
-                <InputTags
-                    bind:tags={$collection.$read}
-                    label="Read Access"
-                    id="read"
-                    helper="Add 'role:all' for wildcard access"
-                    placeholder="User ID, Team ID or Role" />
-                <InputTags
-                    bind:tags={$collection.$write}
-                    label="Write Access"
-                    id="read"
-                    helper="Add 'role:all' for wildcard access"
-                    placeholder="User ID, Team ID or Role" />
-            {/if}
-            <InputRadio
-                bind:group={$collection.permission}
-                value="document"
-                id="permission-document"
-                name="permission"
-                label="Document Level" />
+    {#if $collection}
+        <CardGrid>
+            <h2 class="heading-level-7">{$collection.name}</h2>
+
+            <svelte:fragment slot="aside">
+                <ul>
+                    <InputSwitch
+                        label={enabled ? 'Enabled' : 'Disabled'}
+                        id="toggle"
+                        bind:value={enabled} />
+                </ul>
+                <div>
+                    <p>Created: {toLocaleDateTime($collection.$createdAt)}</p>
+                    <p>Last Updated: {toLocaleDateTime($collection.$updatedAt)}</p>
+                </div>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={enabled === $collection.enabled}
+                    on:click={() => {
+                        togglecollection();
+                    }}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+
+        <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={collectionName} />
+                    {#if showError === 'name'}
+                        <Helper type={errorType}>{errorMessage}</Helper>
+                    {/if}
+                </ul>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={collectionName === $collection.name || !collectionName}
+                    on:click={() => {
+                        updateName();
+                    }}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+        <CardGrid>
+            <h6 class="heading-level-7">Update Permissions</h6>
             <p>
-                With Document Level permissions, you have granular access control over every
-                document. Users will only be able to access documents for which they have explicit
-                permissions.
+                Assign read or write permissions at the <b>Collection Level</b> or
+                <b>Document Level</b>. If collection Level permissions are assigned, permissions
+                applied to individual documents are ignored.
             </p>
+            <svelte:fragment slot="aside">
+                <ul class="u-flex u-gap-12 common-section">
+                    <li>
+                        <label class="label">
+                            <input
+                                type="radio"
+                                class="is-small"
+                                name="level"
+                                bind:group={collectionPermissions}
+                                value="collection" />
+                            <span>Collection Level</span>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label">
+                            <input
+                                type="radio"
+                                class="is-small"
+                                name="level"
+                                bind:group={collectionPermissions}
+                                value="file" />
+                            <span>Document Level</span>
+                        </label>
+                    </li>
+                </ul>
+                <Alert type="info">
+                    <p>
+                        Tip: Add <b>role:all</b> for wildcards access. Check out our documentation
+                        for more on <a href="/#">Permissions</a>
+                    </p>
+                </Alert>
+                {#if collectionPermissions === 'collection'}
+                    <ul class="common-section">
+                        <InputTags
+                            id="read"
+                            label="Read Access"
+                            placeholder="User ID, Team ID, or Role"
+                            bind:tags={collectionRead} />
+                        <InputTags
+                            id="write"
+                            label="Write Access"
+                            placeholder="User ID, Team ID, or Role"
+                            bind:tags={collectionWrite} />
+                    </ul>
+                {/if}
+            </svelte:fragment>
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={arePermsDisabled}
+                    on:click={() => {
+                        updatePermissions();
+                    }}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+
+        <CardGrid>
+            <h6 class="heading-level-7">Delete collection</h6>
             <p>
-                In this permission level, document permissions take precedence and collection
-                permissions are ignored.
+                The collection will be permanently deleted, including all the documents within it.
+                This action is irreversible.
             </p>
-            <FormItem>
-                <Button submit>Update</Button>
-            </FormItem>
-        </Card>
-    </Form>
+            <svelte:fragment slot="aside">
+                <Box>
+                    <svelte:fragment slot="title">
+                        <h6 class="u-bold">{$collection.name}</h6>
+                    </svelte:fragment>
+                    <p>Last Updated: {toLocaleDateTime($collection.$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 />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
index e24e9b18ae..cd7f28747d 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
@@ -3,7 +3,7 @@ import type { Models } from '@aw-labs/appwrite-console';
 import { writable } from 'svelte/store';
 import { browser } from '$app/env';
 
-type Attributes =
+export type Attributes =
     | Models.AttributeBoolean
     | Models.AttributeEmail
     | Models.AttributeEnum
diff --git a/src/routes/console/[project]/databases/database/[database]/index.svelte b/src/routes/console/[project]/databases/database/[database]/index.svelte
index 1fd503824d..69bbea092d 100644
--- a/src/routes/console/[project]/databases/database/[database]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/index.svelte
@@ -17,7 +17,7 @@
     const limit = 5;
     const project = $page.params.project;
     const databaseId = $page.params.database;
-    const collectionCreated = async (event: CustomEvent<Models.Collection>) => {
+    const handleCreate = async (event: CustomEvent<Models.Collection>) => {
         showCreate = false;
         await goto(
             `${base}/console/${project}/databases/database/${databaseId}/collection/${event.detail.$id}`
@@ -112,4 +112,4 @@
     {/if}
 </Container>
 
-<Create bind:showCreate on:created={collectionCreated} />
+<Create bind:showCreate on:created={handleCreate} />
diff --git a/src/routes/console/[project]/databases/index.svelte b/src/routes/console/[project]/databases/index.svelte
index b31e09f6bf..283586e3bf 100644
--- a/src/routes/console/[project]/databases/index.svelte
+++ b/src/routes/console/[project]/databases/index.svelte
@@ -16,7 +16,7 @@
 
     const limit = 5;
     const project = $page.params.project;
-    const databaseCreated = async (event: CustomEvent<Models.Database>) => {
+    const handleCreate = async (event: CustomEvent<Models.Database>) => {
         showCreate = false;
         await goto(`${base}/console/${project}/databases/database/${event.detail.$id}`);
     };
@@ -103,4 +103,4 @@
     {/if}
 </Container>
 
-<Create bind:showCreate on:created={databaseCreated} />
+<Create bind:showCreate on:created={handleCreate} />

From 498bd2e697564a860de797d7b81f89aff444e31d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 18 Jul 2022 16:09:32 +0200
Subject: [PATCH 05/75] feat: create, delete attribute

---
 .../[collection]/_createAttribute.svelte      | 39 ++++++----------
 .../collection/[collection]/_delete.svelte    |  2 +-
 .../[collection]/_deleteAttribute.svelte      | 45 +++++++++++++++++++
 .../collection/[collection]/_overview.svelte  | 37 +++++++++++++++
 .../collection/[collection]/attributes.svelte | 37 +++++++++------
 .../[collection]/attributes/_boolean.svelte   | 25 +++++++----
 .../[collection]/attributes/_email.svelte     | 14 ++++--
 .../[collection]/attributes/_enum.svelte      | 14 ++++--
 .../[collection]/attributes/_float.svelte     | 14 ++++--
 .../[collection]/attributes/_integer.svelte   | 14 ++++--
 .../[collection]/attributes/_ip.svelte        | 14 ++++--
 .../[collection]/attributes/_string.svelte    | 14 ++++--
 .../[collection]/attributes/_url.svelte       | 14 ++++--
 13 files changed, 206 insertions(+), 77 deletions(-)
 create mode 100644 src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
 create mode 100644 src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
index 3abaa9d603..99ef0dd92e 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
@@ -1,32 +1,19 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    // import { Pill } from '$lib/elements';
     import { option, options } from './attributes/store';
     import { Button, InputText, Form, FormList, InputSelect } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
+    import { collection } from './store';
+    import type { Attributes } from './store';
 
     export let showCreate = false;
 
-    const dispatch = createEventDispatcher();
-
-    let name = '';
     let id: string = null;
-    let key: string = null;
     let selectedOption = '';
+    let submitted = false;
 
-    const create = async () => {
-        try {
-            console.log('test');
-            showCreate = false;
-            dispatch('created');
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
+    const created = async (event: CustomEvent<Attributes>) => {
+        collection.addAttribute(event.detail);
+        showCreate = false;
     };
 
     $: if (selectedOption) {
@@ -34,15 +21,15 @@
     }
 </script>
 
-<Form on:submit={create}>
+<Form on:submit={() => (submitted = true)}>
     <Modal size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Attribute</svelte:fragment>
         <FormList>
             <InputText
-                id="key"
-                label="Attribute key"
-                placeholder="Enter key"
-                bind:value={key}
+                id="ID"
+                label="Attribute ID"
+                placeholder="Enter ID"
+                bind:value={id}
                 autofocus
                 required />
 
@@ -63,7 +50,9 @@
             {#if selectedOption}
                 <svelte:component
                     this={$option.component}
-                    {key}
+                    {id}
+                    bind:submitted
+                    on:created={created}
                     on:close={() => ($option = null)} />
             {/if}
         </FormList>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte
index a016b1fe03..0a10d193e8 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte
@@ -15,7 +15,7 @@
             await sdkForProject.databases.deleteCollection($collection.$id);
             showDelete = false;
             await goto(
-                `${base}/console/${$page.params.project}/databases/${$page.params.database}`
+                `${base}/console/${$page.params.project}/databases/database/${$page.params.database}`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
new file mode 100644
index 0000000000..eb730c9718
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
@@ -0,0 +1,45 @@
+<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 } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { collection } from './store';
+    import type { Attributes } from './store';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export let showDelete = false;
+    export let selectedAttribute: Attributes;
+
+    const deleteElement = async () => {
+        try {
+            await sdkForProject.databases.deleteAttribute($collection.$id, selectedAttribute.key);
+            collection.removeAttribute(selectedAttribute);
+            showDelete = false;
+            await goto(
+                `${base}/console/${$page.params.project}/databases/database/${$page.params.database}/collection/${$page.params.collection}/attributes`
+            );
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteElement}>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
+
+        <p>
+            Are you sure you want to delete <b>'{selectedAttribute.key}' from {$collection.name}</b
+            >?
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte
new file mode 100644
index 0000000000..71017e661f
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { option, options } from './attributes/store';
+    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import type { Attributes } from './store';
+
+    export let showOverview = false;
+    export let selectedAttribute: Attributes;
+
+    $: if (selectedAttribute) {
+        $option = options.find(
+            (option) => option.name.toLocaleLowerCase() === selectedAttribute.type
+        );
+    }
+</script>
+
+{#if selectedAttribute}
+    <Modal size="big" bind:show={showOverview}>
+        <svelte:fragment slot="header">Overview</svelte:fragment>
+        <FormList>
+            <InputText
+                id="ID"
+                label="Attribute ID"
+                placeholder="Enter ID"
+                bind:value={selectedAttribute.key}
+                disabled />
+
+            {#if selectedAttribute}
+                <svelte:component this={$option.component} disabled={true} />
+            {/if}
+        </FormList>
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={() => (showOverview = false)}>Cancel</Button>
+            <Button submit>Create</Button>
+        </svelte:fragment>
+    </Modal>
+{/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index 2cd1107466..97ea48cc6a 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -10,25 +10,22 @@
     import { Button } from '$lib/elements/forms';
     import { DropList, DropListItem, Empty, Pagination } from '$lib/components';
     import { collection } from './store';
-    // import type { Attributes } from './store';
+    import type { Attributes } from './store';
     import { Container } from '$lib/layout';
     import { Pill } from '$lib/elements';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import Create from './_createAttribute.svelte';
-    import type { Models } from '@aw-labs/appwrite-console';
+    import Delete from './_deleteAttribute.svelte';
+    import Overview from './_overview.svelte';
 
     let offset = 0;
     const limit = 5;
     let showDropdown = [];
-    // let selectedAttribute: Attributes = null;
-    // let showDelete = false;
+    let selectedAttribute: Attributes = null;
     let showCreate = false;
-
-    const handleCreate = async (event: CustomEvent<Models.Collection>) => {
-        showCreate = false;
-        console.log(event);
-    };
+    let showDelete = false;
+    let showOverview = false;
 
     onMount(async () => {
         await collection.load($page.params.collection);
@@ -48,7 +45,7 @@
     {#if $collection?.attributes.length}
         <Table>
             <TableHeader>
-                <TableCellHead>Key</TableCellHead>
+                <TableCellHead>ID</TableCellHead>
                 <TableCellHead>Type</TableCellHead>
                 <TableCellHead>Default Value</TableCellHead>
                 <TableCellHead width={30} />
@@ -66,6 +63,8 @@
                                     )}>
                                     {attribute.status}
                                 </Pill>
+                            {:else if attribute.required}
+                                <Pill>Required</Pill>
                             {/if}
                         </TableCellText>
                         <TableCellText title="Type">{attribute.type}</TableCellText>
@@ -87,14 +86,20 @@
                                     <span class="icon-dots-horizontal" aria-hidden="true" />
                                 </button>
                                 <svelte:fragment slot="list">
-                                    <DropListItem icon="eye">Overview</DropListItem>
+                                    <DropListItem
+                                        icon="eye"
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedAttribute = attribute;
+                                            showOverview = true;
+                                        }}>Overview</DropListItem>
                                     <DropListItem icon="plus">Create Index</DropListItem>
                                     <DropListItem
                                         icon="trash"
                                         on:click={(e) => {
                                             e.preventDefault();
-                                            // selectedAttribute = attribute;
-                                            // showDelete = true;
+                                            selectedAttribute = attribute;
+                                            showDelete = true;
                                         }}>Delete</DropListItem>
                                 </svelte:fragment>
                             </DropList>
@@ -126,4 +131,8 @@
     {/if}
 </Container>
 
-<Create bind:showCreate on:created={handleCreate} />
+<Create bind:showCreate />
+{#if selectedAttribute}
+    <Delete bind:showDelete {selectedAttribute} />
+    <Overview bind:showOverview {selectedAttribute} />
+{/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
index a71e818010..62648cc833 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
@@ -1,28 +1,31 @@
 <script lang="ts">
     import { InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export const dispatch = createEventDispatcher();
+    export let submitted = false;
+    export let id: string;
+    export let disabled = false;
+
+    const dispatch = createEventDispatcher();
 
-    let key: string;
     let def: boolean,
         required = false,
         array = false;
 
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createBooleanAttribute(
+            const attribute = await sdkForProject.databases.createBooleanAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -30,8 +33,12 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
-<InputSwitch id="required" label="Required" required bind:value={required} />
-<InputSwitch id="array" label="Array" bind:value={array} />
-<InputSwitch id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} {disabled} />
+<InputSwitch id="array" label="Array" bind:value={array} {disabled} />
+<InputSwitch id="default" label="Default" bind:value={def} {disabled} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
index 3baffe1004..401bec14e8 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
@@ -5,22 +5,24 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let def: string,
         required = false,
         array = false;
 
     const dispatch = createEventDispatcher();
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createEmailAttribute(
+            const attribute = await sdkForProject.databases.createEmailAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -28,6 +30,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputSwitch id="required" label="Required" bind:value={required} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
index a5430498e7..a684bf63ce 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
@@ -5,7 +5,8 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let def = '',
         elements: string[],
         required = false,
@@ -13,16 +14,17 @@
 
     const dispatch = createEventDispatcher();
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createEnumAttribute(
+            const attribute = await sdkForProject.databases.createEnumAttribute(
                 $collection.$id,
-                key,
+                id,
                 elements,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -36,6 +38,10 @@
             value: e,
             label: e
         })) ?? [];
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputTags id="elements" label="Elements" bind:tags={elements} placeholder="Add elements here" />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
index 362dd60bd9..b25a1eedb0 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
@@ -7,7 +7,8 @@
 
     const dispatch = createEventDispatcher();
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let min: number,
         max: number,
         def: number,
@@ -15,17 +16,18 @@
         array = false;
 
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createFloatAttribute(
+            const attribute = await sdkForProject.databases.createFloatAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 min,
                 max,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -33,6 +35,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputNumber id="min" label="Min" bind:value={min} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
index 8a3dfea4b5..7ffc7bb292 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
@@ -7,7 +7,8 @@
 
     const dispatch = createEventDispatcher();
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let min: number,
         max: number,
         def: number,
@@ -15,17 +16,18 @@
         array = false;
 
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createIntegerAttribute(
+            const attribute = await sdkForProject.databases.createIntegerAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 min,
                 max,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -33,6 +35,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputNumber id="min" label="Min" bind:value={min} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
index 4d35811901..766dc775ef 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
@@ -5,22 +5,24 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let def: string,
         required = false,
         array = false;
 
     const dispatch = createEventDispatcher();
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createIpAttribute(
+            const attribute = await sdkForProject.databases.createIpAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -28,6 +30,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputSwitch id="required" label="Required" bind:value={required} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
index f153db47db..c844e172a7 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
@@ -5,7 +5,8 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let def: string,
         size = 255,
         required = false,
@@ -13,16 +14,17 @@
 
     const dispatch = createEventDispatcher();
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createStringAttribute(
+            const attribute = await sdkForProject.databases.createStringAttribute(
                 $collection.$id,
-                key,
+                id,
                 size,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -30,6 +32,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputNumber id="size" label="Size" bind:value={size} required />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
index 601d935e01..8a90b70606 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
@@ -5,22 +5,24 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let def: string,
         required = false,
         array = false;
 
     const dispatch = createEventDispatcher();
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createUrlAttribute(
+            const attribute = await sdkForProject.databases.createUrlAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -28,6 +30,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputSwitch id="required" label="Required" bind:value={required} />

From b37209fd6dea3a2d485fa33a4cb410a8c1fc3b7a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 18 Jul 2022 16:27:02 +0200
Subject: [PATCH 06/75] feat: add readonly to inputs

---
 src/lib/elements/forms/inputEmail.svelte    | 2 ++
 src/lib/elements/forms/inputNumber.svelte   | 2 ++
 src/lib/elements/forms/inputPhone.svelte    | 2 ++
 src/lib/elements/forms/inputTags.svelte     | 4 ++++
 src/lib/elements/forms/inputText.svelte     | 2 ++
 src/lib/elements/forms/inputTextarea.svelte | 2 ++
 6 files changed, 14 insertions(+)

diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 0c6575e3a4..5cb06a9ad8 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -9,6 +9,7 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let readonly = false;
     export let autofocus = false;
     export let autocomplete = true;
 
@@ -29,6 +30,7 @@
             {placeholder}
             {disabled}
             {required}
+            {readonly}
             autocomplete={autocomplete ? 'on' : 'off'}
             type="email"
             class="input-text"
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 5892963607..8657598bd2 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -9,6 +9,7 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let readonly = false;
     export let autofocus = false;
     export let maxlength: number = null;
     export let minlength: number = null;
@@ -32,6 +33,7 @@
             {required}
             {minlength}
             {maxlength}
+            {readonly}
             type="number"
             class="input-text"
             bind:value
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 3b9951ec21..5c32f1d4f2 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -9,6 +9,7 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let readonly = false;
     export let autofocus = false;
     export let autocomplete = true;
     export let maxlength: number = null;
@@ -31,6 +32,7 @@
             {disabled}
             {required}
             {maxlength}
+            {readonly}
             autocomplete={autocomplete ? 'on' : 'off'}
             type="tel"
             class="input-text"
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index d9ee6ce298..9d35507def 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -9,6 +9,8 @@
     export let placeholder = '';
     export let helper = '';
     export let autofocus = false;
+    export let disabled = false;
+    export let readonly = false;
 
     let value = '';
     let element: HTMLInputElement;
@@ -77,6 +79,8 @@
                 class="tags-input-text"
                 {id}
                 {placeholder}
+                {disabled}
+                {readonly}
                 on:keydown={handleInput}
                 on:blur={addValue}
                 bind:value
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 93b88ae08a..2f1d9b1ebb 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -9,6 +9,7 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let readonly = false;
     export let autofocus = false;
     export let autocomplete = true;
     export let maxlength: number = null;
@@ -29,6 +30,7 @@
             {id}
             {placeholder}
             {disabled}
+            {readonly}
             {required}
             {maxlength}
             autocomplete={autocomplete ? 'on' : 'off'}
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 7c892d2348..875b61843e 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -9,6 +9,7 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let readonly = false;
     export let autofocus = false;
     export let maxlength: number = null;
 
@@ -28,6 +29,7 @@
             {id}
             {placeholder}
             {disabled}
+            {readonly}
             {required}
             {maxlength}
             class="input-text"

From 9d582467280ff6645a81a6728e2bf0e6ccad3c62 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 18 Jul 2022 17:38:16 +0200
Subject: [PATCH 07/75] feat: add overview

---
 src/lib/components/modal.svelte               | 10 ++++----
 .../collection/[collection]/_overview.svelte  |  8 ++-----
 .../[collection]/attributes/_boolean.svelte   | 18 +++++++++-----
 .../[collection]/attributes/_email.svelte     | 18 ++++++++++----
 .../[collection]/attributes/_enum.svelte      | 23 +++++++++++++-----
 .../[collection]/attributes/_float.svelte     | 21 ++++++++++------
 .../[collection]/attributes/_integer.svelte   | 24 ++++++++++++-------
 .../[collection]/attributes/_ip.svelte        | 17 +++++++++----
 .../[collection]/attributes/_string.svelte    | 19 ++++++++++-----
 .../[collection]/attributes/_url.svelte       | 17 +++++++++----
 10 files changed, 117 insertions(+), 58 deletions(-)

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 7843b7c918..f63098873d 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -78,11 +78,13 @@
             <div class="modal-content">
                 <slot />
             </div>
-            <div class="modal-footer">
-                <div class="u-flex u-main-end u-gap-12">
-                    <slot name="footer" />
+            {#if $$slots.footer}
+                <div class="modal-footer">
+                    <div class="u-flex u-main-end u-gap-12">
+                        <slot name="footer" />
+                    </div>
                 </div>
-            </div>
+            {/if}
         </section>
     </div>
 {/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte
index 71017e661f..52039b6695 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
     import { option, options } from './attributes/store';
-    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import { InputText, FormList } from '$lib/elements/forms';
     import type { Attributes } from './store';
 
     export let showOverview = false;
@@ -26,12 +26,8 @@
                 disabled />
 
             {#if selectedAttribute}
-                <svelte:component this={$option.component} disabled={true} />
+                <svelte:component this={$option.component} overview={true} {selectedAttribute} />
             {/if}
         </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showOverview = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
     </Modal>
 {/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
index 62648cc833..ad39ac810e 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
@@ -4,14 +4,16 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let submitted = false;
     export let id: string;
-    export let disabled = false;
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeBoolean;
 
     const dispatch = createEventDispatcher();
 
-    let def: boolean,
+    let xdefault: boolean,
         required = false,
         array = false;
 
@@ -22,7 +24,7 @@
                 $collection.$id,
                 id,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -37,8 +39,12 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} {disabled} />
-<InputSwitch id="array" label="Array" bind:value={array} {disabled} />
-<InputSwitch id="default" label="Default" bind:value={def} {disabled} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
+<InputSwitch id="default" label="Default" bind:value={xdefault} disabled={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
index 401bec14e8..b3f769de61 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
@@ -4,10 +4,14 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let submitted = false;
-    let def: string,
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeEmail;
+
+    let xdefault: string,
         required = false,
         array = false;
 
@@ -19,7 +23,7 @@
                 $collection.$id,
                 id,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -34,8 +38,12 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="required" label="Array" bind:value={array} />
-<InputText id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
index a684bf63ce..01a98db835 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
@@ -4,10 +4,13 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let submitted = false;
-    let def = '',
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeEnum;
+    let xdefault = '',
         elements: string[],
         required = false,
         array = false;
@@ -21,7 +24,7 @@
                 id,
                 elements,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -42,9 +45,17 @@
     $: if (submitted) {
         submit();
     }
+    $: if (overview) {
+        ({ required, array, elements, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputTags id="elements" label="Elements" bind:tags={elements} placeholder="Add elements here" />
-<InputSelect id="default" label="Default" bind:options bind:value={def} />
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="required" label="Array" bind:value={array} />
+<InputTags
+    id="elements"
+    label="Elements"
+    bind:tags={elements}
+    placeholder="Add elements here"
+    readonly={overview} />
+<InputSelect id="default" label="Default" bind:options bind:value={xdefault} disabled={overview} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
index b25a1eedb0..923b85835b 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
@@ -4,14 +4,17 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     const dispatch = createEventDispatcher();
 
     export let id: string;
     export let submitted = false;
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeFloat;
     let min: number,
         max: number,
-        def: number,
+        xdefault: number,
         required = false,
         array = false;
 
@@ -24,7 +27,7 @@
                 required,
                 min,
                 max,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -39,11 +42,15 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, min, max, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputNumber id="min" label="Min" bind:value={min} />
-<InputNumber id="max" label="Max" bind:value={max} />
+<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
+<InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
 
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="array" label="Array" bind:value={array} />
-<InputNumber id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
+<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
index 7ffc7bb292..3b50c179e4 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
@@ -4,14 +4,17 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     const dispatch = createEventDispatcher();
 
-    export let id: string;
+    export let id: string = null;
     export let submitted = false;
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeInteger;
     let min: number,
         max: number,
-        def: number,
+        xdefault: number,
         required = false,
         array = false;
 
@@ -24,7 +27,7 @@
                 required,
                 min,
                 max,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -39,11 +42,16 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        //TODO: fix xdefault
+        ({ required, array, min, max, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputNumber id="min" label="Min" bind:value={min} />
-<InputNumber id="max" label="Max" bind:value={max} />
+<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
+<InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
 
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="array" label="Array" bind:value={array} />
-<InputNumber id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
+<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
index 766dc775ef..2d91c36aa0 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
@@ -4,10 +4,13 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let submitted = false;
-    let def: string,
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeIp;
+    let xdefault: string,
         required = false,
         array = false;
 
@@ -19,7 +22,7 @@
                 $collection.$id,
                 id,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -34,8 +37,12 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="required" label="Array" bind:value={array} />
-<InputText id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
index c844e172a7..7249544f12 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
@@ -4,10 +4,13 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let submitted = false;
-    let def: string,
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeString;
+    let xdefault: string,
         size = 255,
         required = false,
         array = false;
@@ -21,7 +24,7 @@
                 id,
                 size,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -36,9 +39,13 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, size, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputNumber id="size" label="Size" bind:value={size} required />
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="required" label="Array" bind:value={array} />
-<InputText id="default" label="Default" bind:value={def} />
+<InputNumber id="size" label="Size" bind:value={size} required readonly={overview} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
index 8a90b70606..5622d3036a 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
@@ -4,10 +4,13 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let submitted = false;
-    let def: string,
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeUrl;
+    let xdefault: string,
         required = false,
         array = false;
 
@@ -19,7 +22,7 @@
                 $collection.$id,
                 id,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -34,8 +37,12 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="required" label="Array" bind:value={array} />
-<InputText id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />

From 7e182e57812ecc180b2603d776e4b6dfb60010d9 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 20 Jul 2022 09:58:08 +0200
Subject: [PATCH 08/75] fix: new layout

---
 .../console/[project]/databases/__layout.svelte      | 12 +++++++++++-
 .../databases/database/[database]/__layout.svelte    |  1 +
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/[project]/databases/__layout.svelte b/src/routes/console/[project]/databases/__layout.svelte
index 9794f53397..9b51977d49 100644
--- a/src/routes/console/[project]/databases/__layout.svelte
+++ b/src/routes/console/[project]/databases/__layout.svelte
@@ -13,7 +13,17 @@
     function handle(event = null) {
         updateLayout({
             navigate: event,
-            title: 'Databases'
+            title: 'Databases',
+            tabs: [
+                {
+                    href: path,
+                    title: 'Databases'
+                },
+                {
+                    href: `${path}/usage`,
+                    title: 'Usage'
+                }
+            ]
         });
         loaded = true;
     }
diff --git a/src/routes/console/[project]/databases/database/[database]/__layout.svelte b/src/routes/console/[project]/databases/database/[database]/__layout.svelte
index 6d6fc1714d..62c6d53d39 100644
--- a/src/routes/console/[project]/databases/database/[database]/__layout.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/__layout.svelte
@@ -1,5 +1,6 @@
 <script>
     import { afterNavigate } from '$app/navigation';
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { updateLayout } from '$lib/stores/layout';
     import { setDatabase } from '$lib/stores/sdk';

From 056a09c7211c375105c391c20b288a829778ff58 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 20 Jul 2022 10:07:41 +0200
Subject: [PATCH 09/75] fix: default values shown

---
 .../[database]/collection/[collection]/attributes.svelte       | 2 +-
 .../collection/[collection]/attributes/_boolean.svelte         | 3 ++-
 .../collection/[collection]/attributes/_email.svelte           | 3 ++-
 .../[database]/collection/[collection]/attributes/_enum.svelte | 3 ++-
 .../collection/[collection]/attributes/_float.svelte           | 3 ++-
 .../collection/[collection]/attributes/_integer.svelte         | 3 ++-
 .../[database]/collection/[collection]/attributes/_ip.svelte   | 3 ++-
 .../collection/[collection]/attributes/_string.svelte          | 3 ++-
 .../[database]/collection/[collection]/attributes/_url.svelte  | 3 ++-
 9 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index 97ea48cc6a..552b71e8eb 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -69,7 +69,7 @@
                         </TableCellText>
                         <TableCellText title="Type">{attribute.type}</TableCellText>
                         <TableCellText title="Default Value">
-                            {attribute.xdefault ? attribute.xdefault : '-'}
+                            {attribute.default ? attribute.default : '-'}
                         </TableCellText>
                         <TableCellText showOverflow title="">
                             <DropList
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
index ad39ac810e..b11b22d7c9 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
@@ -41,7 +41,8 @@
     }
 
     $: if (overview) {
-        ({ required, array, xdefault } = selectedAttribute);
+        ({ required, array } = selectedAttribute);
+        xdefault = selectedAttribute.default;
     }
 </script>
 
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
index b3f769de61..5a0b2db268 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
@@ -40,7 +40,8 @@
     }
 
     $: if (overview) {
-        ({ required, array, xdefault } = selectedAttribute);
+        ({ required, array } = selectedAttribute);
+        xdefault = selectedAttribute.default;
     }
 </script>
 
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
index 01a98db835..d68f88e45e 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
@@ -46,7 +46,8 @@
         submit();
     }
     $: if (overview) {
-        ({ required, array, elements, xdefault } = selectedAttribute);
+        ({ required, array, elements } = selectedAttribute);
+        xdefault = selectedAttribute.default;
     }
 </script>
 
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
index 923b85835b..35297b9f3d 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
@@ -44,7 +44,8 @@
     }
 
     $: if (overview) {
-        ({ required, array, min, max, xdefault } = selectedAttribute);
+        ({ required, array, min, max } = selectedAttribute);
+        xdefault = selectedAttribute.default;
     }
 </script>
 
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
index 3b50c179e4..5a0fde47da 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
@@ -45,7 +45,8 @@
 
     $: if (overview) {
         //TODO: fix xdefault
-        ({ required, array, min, max, xdefault } = selectedAttribute);
+        ({ required, array, min, max } = selectedAttribute);
+        xdefault = selectedAttribute.default;
     }
 </script>
 
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
index 2d91c36aa0..f30fde3160 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
@@ -39,7 +39,8 @@
     }
 
     $: if (overview) {
-        ({ required, array, xdefault } = selectedAttribute);
+        ({ required, array } = selectedAttribute);
+        xdefault = selectedAttribute.default;
     }
 </script>
 
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
index 7249544f12..186013dd06 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
@@ -41,7 +41,8 @@
     }
 
     $: if (overview) {
-        ({ required, array, size, xdefault } = selectedAttribute);
+        ({ required, array, size } = selectedAttribute);
+        xdefault = selectedAttribute.default;
     }
 </script>
 
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
index 5622d3036a..6a724f3e88 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
@@ -39,7 +39,8 @@
     }
 
     $: if (overview) {
-        ({ required, array, xdefault } = selectedAttribute);
+        ({ required, array } = selectedAttribute);
+        xdefault = selectedAttribute.default;
     }
 </script>
 

From 95918690ffa089bff7b1901190f95fc150603892 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 20 Jul 2022 13:32:58 +0200
Subject: [PATCH 10/75] fix: made main optional

---
 src/lib/elements/table/cellLink.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/elements/table/cellLink.svelte b/src/lib/elements/table/cellLink.svelte
index 99da3e2f69..d8c673d7bc 100644
--- a/src/lib/elements/table/cellLink.svelte
+++ b/src/lib/elements/table/cellLink.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     export let href: string;
     export let title: string;
+    export let main = false;
 </script>
 
-<div class="table-col is-main" data-title={title} role="cell">
+<div class="table-col" class:is-main={main} data-title={title} role="cell">
     <a role="button" tabindex="0" class="link" {href}><slot /></a>
 </div>

From eff2c3fd5c1842de520ee56f3e35675b76a825a7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 20 Jul 2022 13:36:57 +0200
Subject: [PATCH 11/75] fix: use is-main correctly

---
 src/lib/elements/table/cellText.svelte                     | 4 +++-
 .../[database]/collection/[collection]/attributes.svelte   | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/elements/table/cellText.svelte b/src/lib/elements/table/cellText.svelte
index 1c2d567ab5..ded260efa6 100644
--- a/src/lib/elements/table/cellText.svelte
+++ b/src/lib/elements/table/cellText.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
     export let title: string;
     export let showOverflow = false;
+    export let main = false;
 </script>
 
 <div
-    class="table-col is-main"
+    class="table-col"
+    class:is-main={main}
     class:u-overflow-visible={showOverflow}
     data-title={title}
     role="cell">
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index 552b71e8eb..a4efd6d2ec 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -5,7 +5,8 @@
         TableBody,
         TableRow,
         TableCellHead,
-        TableCellText
+        TableCellText,
+        TableCell
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import { DropList, DropListItem, Empty, Pagination } from '$lib/components';
@@ -53,7 +54,7 @@
             <TableBody>
                 {#each $collection.attributes as attribute, index}
                     <TableRow>
-                        <TableCellText title="Key"
+                        <TableCell main title="Key"
                             >{attribute.key}
                             {#if attribute.status !== 'available'}
                                 <Pill
@@ -66,7 +67,7 @@
                             {:else if attribute.required}
                                 <Pill>Required</Pill>
                             {/if}
-                        </TableCellText>
+                        </TableCell>
                         <TableCellText title="Type">{attribute.type}</TableCellText>
                         <TableCellText title="Default Value">
                             {attribute.default ? attribute.default : '-'}

From 194f9939617525185ed63903d0fda97ce464418e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 20 Jul 2022 14:44:48 +0200
Subject: [PATCH 12/75] style: spacing between key and pill

---
 .../collection/[collection]/attributes.svelte | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index a4efd6d2ec..f08394dea3 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -54,19 +54,21 @@
             <TableBody>
                 {#each $collection.attributes as attribute, index}
                     <TableRow>
-                        <TableCell main title="Key"
-                            >{attribute.key}
-                            {#if attribute.status !== 'available'}
-                                <Pill
-                                    warning={attribute.status === 'processing'}
-                                    danger={['deleting', 'stuck', 'failed'].includes(
-                                        attribute.status
-                                    )}>
-                                    {attribute.status}
-                                </Pill>
-                            {:else if attribute.required}
-                                <Pill>Required</Pill>
-                            {/if}
+                        <TableCell main={true} title="Key">
+                            <div class="u-flex u-main-space-between">
+                                {attribute.key}
+                                {#if attribute.status !== 'available'}
+                                    <Pill
+                                        warning={attribute.status === 'processing'}
+                                        danger={['deleting', 'stuck', 'failed'].includes(
+                                            attribute.status
+                                        )}>
+                                        {attribute.status}
+                                    </Pill>
+                                {:else if attribute.required}
+                                    <Pill>Required</Pill>
+                                {/if}
+                            </div>
                         </TableCell>
                         <TableCellText title="Type">{attribute.type}</TableCellText>
                         <TableCellText title="Default Value">

From bfcbc07ac0f5efdf7b84c94cd273ebdc9e86c3fb Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 20 Jul 2022 14:47:19 +0200
Subject: [PATCH 13/75] fix: use correct name for attribute

---
 .../collection/[collection]/_createAttribute.svelte  | 12 ++++++------
 .../collection/[collection]/attributes.svelte        |  2 +-
 .../[collection]/attributes/_boolean.svelte          |  4 ++--
 .../collection/[collection]/attributes/_email.svelte |  4 ++--
 .../collection/[collection]/attributes/_enum.svelte  |  4 ++--
 .../collection/[collection]/attributes/_float.svelte |  4 ++--
 .../[collection]/attributes/_integer.svelte          |  5 ++---
 .../collection/[collection]/attributes/_ip.svelte    |  4 ++--
 .../[collection]/attributes/_string.svelte           |  4 ++--
 .../collection/[collection]/attributes/_url.svelte   |  4 ++--
 10 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
index 99ef0dd92e..f1279afdd6 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
@@ -7,7 +7,7 @@
 
     export let showCreate = false;
 
-    let id: string = null;
+    let key: string = null;
     let selectedOption = '';
     let submitted = false;
 
@@ -26,10 +26,10 @@
         <svelte:fragment slot="header">Create Attribute</svelte:fragment>
         <FormList>
             <InputText
-                id="ID"
-                label="Attribute ID"
-                placeholder="Enter ID"
-                bind:value={id}
+                id="key"
+                label="Attribute Key"
+                placeholder="Enter Key"
+                bind:value={key}
                 autofocus
                 required />
 
@@ -50,7 +50,7 @@
             {#if selectedOption}
                 <svelte:component
                     this={$option.component}
-                    {id}
+                    {key}
                     bind:submitted
                     on:created={created}
                     on:close={() => ($option = null)} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index f08394dea3..2e9bac995a 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -46,7 +46,7 @@
     {#if $collection?.attributes.length}
         <Table>
             <TableHeader>
-                <TableCellHead>ID</TableCellHead>
+                <TableCellHead>Key</TableCellHead>
                 <TableCellHead>Type</TableCellHead>
                 <TableCellHead>Default Value</TableCellHead>
                 <TableCellHead width={30} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
index b11b22d7c9..13124ee149 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
@@ -7,7 +7,7 @@
     import type { Models } from '@aw-labs/appwrite-console';
 
     export let submitted = false;
-    export let id: string;
+    export let key: string;
     export let overview = false;
     export let selectedAttribute: Models.AttributeBoolean;
 
@@ -22,7 +22,7 @@
         try {
             const attribute = await sdkForProject.databases.createBooleanAttribute(
                 $collection.$id,
-                id,
+                key,
                 required,
                 xdefault ? xdefault : undefined,
                 array
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
index 5a0b2db268..216798a7c0 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
@@ -6,7 +6,7 @@
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
 
-    export let id: string;
+    export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeEmail;
@@ -21,7 +21,7 @@
         try {
             const attribute = await sdkForProject.databases.createEmailAttribute(
                 $collection.$id,
-                id,
+                key,
                 required,
                 xdefault ? xdefault : undefined,
                 array
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
index d68f88e45e..9f589ef8a1 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
@@ -6,7 +6,7 @@
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
 
-    export let id: string;
+    export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeEnum;
@@ -21,7 +21,7 @@
         try {
             const attribute = await sdkForProject.databases.createEnumAttribute(
                 $collection.$id,
-                id,
+                key,
                 elements,
                 required,
                 xdefault ? xdefault : undefined,
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
index 35297b9f3d..0f7e31b309 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
@@ -8,7 +8,7 @@
 
     const dispatch = createEventDispatcher();
 
-    export let id: string;
+    export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeFloat;
@@ -23,7 +23,7 @@
         try {
             const attribute = await sdkForProject.databases.createFloatAttribute(
                 $collection.$id,
-                id,
+                key,
                 required,
                 min,
                 max,
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
index 5a0fde47da..cf3b310d73 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
@@ -8,7 +8,7 @@
 
     const dispatch = createEventDispatcher();
 
-    export let id: string = null;
+    export let key: string = null;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeInteger;
@@ -23,7 +23,7 @@
         try {
             const attribute = await sdkForProject.databases.createIntegerAttribute(
                 $collection.$id,
-                id,
+                key,
                 required,
                 min,
                 max,
@@ -44,7 +44,6 @@
     }
 
     $: if (overview) {
-        //TODO: fix xdefault
         ({ required, array, min, max } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
index f30fde3160..4f31e6e9ac 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
@@ -6,7 +6,7 @@
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
 
-    export let id: string;
+    export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeIp;
@@ -20,7 +20,7 @@
         try {
             const attribute = await sdkForProject.databases.createIpAttribute(
                 $collection.$id,
-                id,
+                key,
                 required,
                 xdefault ? xdefault : undefined,
                 array
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
index 186013dd06..28a81fd3a0 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
@@ -6,7 +6,7 @@
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
 
-    export let id: string;
+    export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeString;
@@ -21,7 +21,7 @@
         try {
             const attribute = await sdkForProject.databases.createStringAttribute(
                 $collection.$id,
-                id,
+                key,
                 size,
                 required,
                 xdefault ? xdefault : undefined,
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
index 6a724f3e88..f172de05d2 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
@@ -6,7 +6,7 @@
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
 
-    export let id: string;
+    export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeUrl;
@@ -20,7 +20,7 @@
         try {
             const attribute = await sdkForProject.databases.createUrlAttribute(
                 $collection.$id,
-                id,
+                key,
                 required,
                 xdefault ? xdefault : undefined,
                 array

From 7a9a43a91995f683f801457c1d558aca32e9569a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 21 Jul 2022 17:42:36 +0200
Subject: [PATCH 14/75] feat: add placeholder to inputSelect

---
 src/lib/elements/forms/inputSelect.svelte |  4 ++++
 tests/unit/elements/inputSelect.test.ts   | 11 +++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 028c6342a8..c4aa70d960 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -5,6 +5,7 @@
     export let showLabel = true;
     export let id: string;
     export let value: string;
+    export let placeholder = '';
     export let required = false;
     export let disabled = false;
     export let options: {
@@ -17,6 +18,9 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="select">
         <select bind:value {id} {required} {disabled}>
+            {#if placeholder}
+                <option value="" disabled selected hidden>{placeholder}</option>
+            {/if}
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
                     {option.label}
diff --git a/tests/unit/elements/inputSelect.test.ts b/tests/unit/elements/inputSelect.test.ts
index c2766f180c..51853fdef4 100644
--- a/tests/unit/elements/inputSelect.test.ts
+++ b/tests/unit/elements/inputSelect.test.ts
@@ -34,6 +34,17 @@ test('shows options', () => {
     });
 });
 
+test('shows placeholder', () => {
+    const { getByText } = render(InputSelect, {
+        id: 'select',
+        label: 'select',
+        options,
+        placeholder: 'placeholder'
+    });
+
+    expect(getByText('placeholder')).toBeInTheDocument();
+});
+
 test('shows select input - required', () => {
     const { getByLabelText } = render(InputSelect, {
         id: 'select',

From fc9dba96f984afc9c21042205756da9be40a776e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 21 Jul 2022 17:43:05 +0200
Subject: [PATCH 15/75] feat: attributes and indexes pages

---
 .../[collection]/_createIndex.svelte          | 196 ++++++++++++++++++
 .../[collection]/_deleteIndex.svelte          |  41 ++++
 .../collection/[collection]/attributes.svelte |  15 +-
 .../collection/[collection]/indexes.svelte    | 176 ++++++++++++++--
 .../collection/[collection]/store.ts          |  17 +-
 5 files changed, 421 insertions(+), 24 deletions(-)
 create mode 100644 src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
 create mode 100644 src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
new file mode 100644
index 0000000000..681491f0ec
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
@@ -0,0 +1,196 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, InputText, Form, FormList, InputSelect } from '$lib/elements/forms';
+    import { collection } from './store';
+    import type { Attributes } from './store';
+    import { onMount } from 'svelte';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export let showCreateIndex = false;
+    export let externalAttribute: Attributes = null;
+
+    let key: string = null;
+    let types = [
+        { value: 'key', label: 'Key' },
+        { value: 'unique', label: 'Unique' },
+        { value: 'fulltext', label: 'FullText' }
+    ];
+    let newAttr = false;
+    let selectedType: string = '';
+    let attributeOptions = $collection.attributes.map((attribute: Attributes) => ({
+        value: attribute.key,
+        label: attribute.key
+    }));
+    $: attributeList = [];
+
+    let selectedAttribute = '';
+    let selectedOrder: string = '';
+
+    onMount(() => {
+        if (externalAttribute) {
+            attributeList = [{ value: externalAttribute.key, order: 'ASC' }];
+        }
+    });
+
+    $: if (showCreateIndex) {
+        attributeList = [];
+        selectedType = selectedOrder = selectedAttribute = '';
+        key = null;
+    }
+    const created = async () => {
+        if (selectedAttribute && selectedOrder) {
+            attributeList.push({ value: selectedAttribute, order: selectedOrder });
+            selectedAttribute = selectedOrder = '';
+        }
+        await sdkForProject.databases.createIndex(
+            $collection.$id,
+            key,
+            selectedType,
+            attributeList.map((a) => a.value),
+            attributeList.map((a) => a.order)
+        );
+
+        showCreateIndex = false;
+    };
+</script>
+
+<Form on:submit={created}>
+    <Modal size="big" bind:show={showCreateIndex}>
+        <svelte:fragment slot="header">Create Index</svelte:fragment>
+        <FormList>
+            <InputText
+                id="key"
+                label="Index Key"
+                placeholder="Enter Key"
+                bind:value={key}
+                autofocus
+                required />
+            <InputSelect
+                options={types}
+                id="type"
+                label="Index type"
+                placeholder="Select type"
+                bind:value={selectedType}
+                required />
+
+            {#if attributeList?.length}
+                {#each attributeList as index, i}
+                    <li class="form-item is-multiple">
+                        <div class="form-item-part u-stretch">
+                            <label class="label" for="attribute">Attribute</label>
+                            <div class="select">
+                                <select id="attribute" bind:value={index.value}>
+                                    <optgroup label="Internal">
+                                        <option value="$id">$id</option>
+                                        <option value="$createdAt">$createdAt</option>
+                                        <option value="$updatedAt">$updatedAt</option>
+                                    </optgroup>
+                                    <optgroup label="Attributes">
+                                        {#each attributeOptions as option}
+                                            <option
+                                                value={option.value}
+                                                selected={option.value === selectedAttribute}>
+                                                {option.label}
+                                            </option>
+                                        {/each}
+                                    </optgroup>
+                                </select>
+                                <span class="icon-cheveron-down" aria-hidden="true" />
+                            </div>
+                        </div>
+                        <div class="form-item-part u-stretch">
+                            <label class="label" for="order">Order</label>
+                            <div class="select">
+                                <select id="order" bind:value={index.order}>
+                                    <option value="ASC"> ASC </option>
+                                    <option value="DESC"> DESC </option>
+                                </select>
+                                <span class="icon-cheveron-down" aria-hidden="true" />
+                            </div>
+                        </div>
+
+                        <div class="form-item-part u-cross-child-end">
+                            <Button
+                                text
+                                disabled={externalAttribute && i === 0}
+                                on:click={() => {
+                                    if (i === 0) attributeList = [];
+                                    attributeList = attributeList.splice(i, 1);
+                                }}>
+                                <span class="icon-x" aria-hidden="true" />
+                            </Button>
+                        </div>
+                    </li>
+                {/each}
+            {/if}
+            {#if !attributeList?.length || newAttr}
+                <li class="form-item is-multiple">
+                    <div class="form-item-part u-stretch">
+                        <label class="label" for="attribute">Attribute</label>
+                        <div class="select">
+                            <select required id="attribute" bind:value={selectedAttribute}>
+                                <option value="" disabled selected hidden>Select Attribute</option>
+
+                                <optgroup label="Internal">
+                                    <option value="$id">$id</option>
+                                    <option value="$createdAt">$createdAt</option>
+                                    <option value="$updatedAt">$updatedAt</option>
+                                </optgroup>
+                                <optgroup label="Attributes">
+                                    {#each attributeOptions as option}
+                                        <option
+                                            value={option.value}
+                                            selected={option.value === selectedAttribute}>
+                                            {option.label}
+                                        </option>
+                                    {/each}
+                                </optgroup>
+                            </select>
+                            <span class="icon-cheveron-down" aria-hidden="true" />
+                        </div>
+                    </div>
+                    <div class="form-item-part u-stretch">
+                        <label class="label" for="order">Order</label>
+                        <div class="select">
+                            <select id="order" bind:value={selectedOrder}>
+                                <option value="" disabled selected hidden>Select Order</option>
+
+                                <option value="ASC"> ASC </option>
+                                <option value="DESC"> DESC </option>
+                            </select>
+                            <span class="icon-cheveron-down" aria-hidden="true" />
+                        </div>
+                    </div>
+
+                    <div class="form-item-part u-cross-child-end">
+                        <Button
+                            text
+                            disabled={false}
+                            on:click={() => {
+                                newAttr = false;
+                                selectedAttribute = selectedOrder = '';
+                            }}>
+                            <span class="icon-x" aria-hidden="true" />
+                        </Button>
+                    </div>
+                </li>
+            {/if}
+            <Button
+                text
+                on:click={() => {
+                    newAttr = true;
+                    if (selectedAttribute && selectedOrder) {
+                        attributeList.push({ value: selectedAttribute, order: selectedOrder });
+                        selectedAttribute = selectedOrder = '';
+                    }
+                }}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text"> Add attribute </span>
+            </Button>
+        </FormList>
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={() => (showCreateIndex = false)}>Cancel</Button>
+            <Button submit>Create</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte
new file mode 100644
index 0000000000..0c618483f9
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { collection } from './store';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { createEventDispatcher } from 'svelte';
+
+    export let showDelete = false;
+    export let selectedIndex: Models.Index;
+
+    const dispatch = createEventDispatcher();
+
+    const deleteElement = async () => {
+        try {
+            await sdkForProject.databases.deleteIndex($collection.$id, selectedIndex.key);
+            showDelete = false;
+            dispatch('deleted');
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteElement}>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete Index</svelte:fragment>
+
+        <p>
+            Are you sure you want to delete <b>'{selectedIndex.key}' from {$collection.name}</b>?
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index 2e9bac995a..523ceb45b1 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -17,6 +17,7 @@
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import Create from './_createAttribute.svelte';
+    import CreateIndex from './_createIndex.svelte';
     import Delete from './_deleteAttribute.svelte';
     import Overview from './_overview.svelte';
 
@@ -27,6 +28,7 @@
     let showCreate = false;
     let showDelete = false;
     let showOverview = false;
+    let showCreateIndex = false;
 
     onMount(async () => {
         await collection.load($page.params.collection);
@@ -74,7 +76,7 @@
                         <TableCellText title="Default Value">
                             {attribute.default ? attribute.default : '-'}
                         </TableCellText>
-                        <TableCellText showOverflow title="">
+                        <TableCell showOverflow>
                             <DropList
                                 bind:show={showDropdown[index]}
                                 position="bottom"
@@ -96,7 +98,13 @@
                                             selectedAttribute = attribute;
                                             showOverview = true;
                                         }}>Overview</DropListItem>
-                                    <DropListItem icon="plus">Create Index</DropListItem>
+                                    <DropListItem
+                                        icon="plus"
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedAttribute = attribute;
+                                            showCreateIndex = true;
+                                        }}>Create Index</DropListItem>
                                     <DropListItem
                                         icon="trash"
                                         on:click={(e) => {
@@ -106,7 +114,7 @@
                                         }}>Delete</DropListItem>
                                 </svelte:fragment>
                             </DropList>
-                        </TableCellText>
+                        </TableCell>
                     </TableRow>
                 {/each}
             </TableBody>
@@ -138,4 +146,5 @@
 {#if selectedAttribute}
     <Delete bind:showDelete {selectedAttribute} />
     <Overview bind:showOverview {selectedAttribute} />
+    <CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} />
 {/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
index 87fd327157..8609ddafff 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
@@ -1,50 +1,186 @@
 <script lang="ts">
-    import { Empty } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { page } from '$app/stores';
+    import { Empty, Pagination, Search, DropList, DropListItem } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
     import {
         Table,
         TableHeader,
         TableBody,
-        TableRow,
         TableCellHead,
-        TableCellText
+        TableCell,
+        TableCellText,
+        TableRow
     } from '$lib/elements/table';
+    // import Create from './_createUser.svelte';
     import { Container } from '$lib/layout';
-    import { collection } from './store';
+    import { indexList, collection } from './store';
+    import { onMount } from 'svelte';
+    import Delete from './_deleteIndex.svelte';
+    import Create from './_createIndex.svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    let showDropdown = [];
+    let selectedIndex: Models.Index = null;
+    let showCreateIndex = false;
+    let showOverview = false;
+    let showDelete = false;
+    let search = '';
+    let offset: number = null;
+
+    const limit = 5;
+    const collectionId = $page.params.collection;
+
+    const handleDelete = async () => {
+        await indexList.load(collectionId);
+    };
+
+    // $: indexes.load(search);
+    // $: if (search) offset = 0;
+    // $: {
+    //     //TODO: refactor this into something maintainable without the use of goto
+    //     if (offset !== null) {
+    //         $page.url.searchParams.set('offset', offset.toString());
+    //         goto(`?${$page.url.searchParams.toString()}`, { replaceState: true, keepfocus: true });
+    //     }
+    // }
+
+    // onMount(() => {
+    //     const queryOffset = +$page.url.searchParams.get('offset') ?? 0;
+    //     if (offset && offset !== queryOffset) {
+    //         offset = queryOffset;
+    //     }
+    // });
+
+    onMount(async () => {
+        await indexList.load(collectionId);
+    });
 </script>
 
 <Container>
-    <h1>Indexes</h1>
-
-    {#if $collection.indexes.length}
+    <Search bind:search placeholder="Search by key or type">
+        <span>
+            <Button
+                disabled={!$collection.attributes?.length}
+                on:click={() => (showCreateIndex = true)}>
+                <span class="icon-plus" aria-hidden="true" /> <span class="text">Create index</span>
+            </Button>
+        </span>
+    </Search>
+    {#if $indexList?.total}
         <Table>
             <TableHeader>
-                <TableCellHead>Status</TableCellHead>
                 <TableCellHead>Key</TableCellHead>
                 <TableCellHead>Type</TableCellHead>
                 <TableCellHead>Attributes</TableCellHead>
-                <TableCellHead />
+                <TableCellHead>Asc/Desc</TableCellHead>
+                <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each $collection.indexes as index}
+                {#each $indexList.indexes as index, i}
                     <TableRow>
-                        <TableCellText title="Status">{index.status}</TableCellText>
-                        <TableCellText title="Key">{index.key}</TableCellText>
+                        <TableCellText title="Key">
+                            {index.key}
+                        </TableCellText>
                         <TableCellText title="Type">{index.type}</TableCellText>
                         <TableCellText title="Attributes">
-                            {#each index.attributes as attribute, i}
-                                <Pill>{attribute} ({index.orders[i]})</Pill>
-                            {/each}
+                            {index.attributes}
                         </TableCellText>
-                        <TableCellText title="Action"><Pill danger>Delete</Pill></TableCellText>
+                        <TableCellText title="ASC/DESC">
+                            {index.orders}
+                        </TableCellText>
+                        <TableCell showOverflow>
+                            <DropList
+                                bind:show={showDropdown[i]}
+                                position="bottom"
+                                horizontal="left"
+                                arrow={false}>
+                                <button
+                                    class="button is-only-icon is-text"
+                                    aria-label="More options"
+                                    on:click|preventDefault={() => {
+                                        showDropdown[i] = !showDropdown[i];
+                                    }}>
+                                    <span class="icon-dots-horizontal" aria-hidden="true" />
+                                </button>
+                                <svelte:fragment slot="list">
+                                    <DropListItem
+                                        icon="eye"
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedIndex = index;
+                                            showOverview = true;
+                                        }}>Overview</DropListItem>
+
+                                    <DropListItem
+                                        icon="trash"
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedIndex = index;
+                                            showDelete = true;
+                                        }}>Delete</DropListItem>
+                                </svelte:fragment>
+                            </DropList>
+                        </TableCell>
                     </TableRow>
                 {/each}
             </TableBody>
         </Table>
-    {:else}
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {$indexList?.total}</p>
+            <Pagination {limit} bind:offset sum={$indexList?.total} />
+        </div>
+    {:else if search}
         <Empty>
-            <svelte:fragment slot="header">No Indexes Found</svelte:fragment>
-            Add your first index to get started.
+            <div class="u-flex u-flex-vertical">
+                <b>Sorry, we couldn’t find ‘{search}’</b>
+                <div class="common-section">
+                    <p>There are no indexes that match your search.</p>
+                </div>
+                <div class="common-section">
+                    <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+                </div>
+            </div>
+        </Empty>
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {$indexList?.total}</p>
+            <Pagination {limit} bind:offset sum={$indexList?.total} />
+        </div>
+    {:else if $collection.indexes?.length}
+        <Empty dashed centered>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <Button secondary round on:click={() => (showCreateIndex = true)}>
+                        <span class="icon-plus" aria-hidden="true" />
+                    </Button>
+                </div>
+                <div class="common-section">
+                    <p>Create your first attribute to get started</p>
+                </div>
+                <div class="common-section">
+                    <Button secondary href="#">Documentation</Button>
+                </div>
+            </div>
+        </Empty>
+    {:else}
+        <Empty dashed centered>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <Button secondary round on:click={() => (showCreateIndex = true)}>
+                        <span class="icon-plus" aria-hidden="true" />
+                    </Button>
+                </div>
+                <div class="common-section">
+                    <p>Create your first index to get started</p>
+                </div>
+                <div class="common-section">
+                    <Button secondary href="#">Documentation</Button>
+                </div>
+            </div>
         </Empty>
     {/if}
 </Container>
+
+<Create bind:showCreateIndex />
+{#if selectedIndex}
+    <Delete bind:showDelete {selectedIndex} on:deleted={handleDelete} />
+{/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
index cd7f28747d..b41da1f463 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
@@ -54,7 +54,7 @@ function createCollection() {
 
 function createDocumentListStore() {
     const { subscribe, set } = writable<Models.DocumentList<Models.Document>>(
-        browser ? JSON.parse(sessionStorage.getItem('documents')) : null
+        browser ? JSON.parse(sessionStorage.getItem('documentList')) : null
     );
     return {
         subscribe,
@@ -70,11 +70,26 @@ function createDocumentListStore() {
         }
     };
 }
+function createIndexListStore() {
+    const { subscribe, set } = writable<Models.IndexList>(
+        browser ? JSON.parse(sessionStorage.getItem('indexList')) : null
+    );
+    return {
+        subscribe,
+        set,
+        load: async (collectionId: string) => {
+            const response = await sdkForProject.databases.listIndexes(collectionId);
+            set(response);
+        }
+    };
+}
 
 export const collection = createCollection();
 export const documentList = createDocumentListStore();
+export const indexList = createIndexListStore();
 
 if (browser) {
     collection.subscribe((n) => sessionStorage?.setItem('collection', JSON.stringify(n ?? '')));
     documentList.subscribe((n) => sessionStorage?.setItem('documentList', JSON.stringify(n ?? '')));
+    indexList.subscribe((n) => sessionStorage?.setItem('indexList', JSON.stringify(n ?? '')));
 }

From 4ca8fbc1de20459f64eccddaf4a4ba13ab5f1e5a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 22 Jul 2022 14:07:43 +0200
Subject: [PATCH 16/75] feat: add status pill

---
 .../[database]/collection/[collection]/_createIndex.svelte    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
index 681491f0ec..a473696cc1 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
@@ -16,7 +16,7 @@
         { value: 'fulltext', label: 'FullText' }
     ];
     let newAttr = false;
-    let selectedType: string = '';
+    let selectedType = '';
     let attributeOptions = $collection.attributes.map((attribute: Attributes) => ({
         value: attribute.key,
         label: attribute.key
@@ -24,7 +24,7 @@
     $: attributeList = [];
 
     let selectedAttribute = '';
-    let selectedOrder: string = '';
+    let selectedOrder = '';
 
     onMount(() => {
         if (externalAttribute) {

From d5ce2c84f3807480744ae4b1b0f03f0fdfef2e87 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 22 Jul 2022 14:08:12 +0200
Subject: [PATCH 17/75] fix: implic type

---
 .../collection/[collection]/indexes.svelte      | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
index 8609ddafff..89d88083cb 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
@@ -2,6 +2,7 @@
     import { page } from '$app/stores';
     import { Empty, Pagination, Search, DropList, DropListItem } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { Pill } from '$lib/elements';
     import {
         Table,
         TableHeader,
@@ -11,7 +12,6 @@
         TableCellText,
         TableRow
     } from '$lib/elements/table';
-    // import Create from './_createUser.svelte';
     import { Container } from '$lib/layout';
     import { indexList, collection } from './store';
     import { onMount } from 'svelte';
@@ -79,7 +79,18 @@
                 {#each $indexList.indexes as index, i}
                     <TableRow>
                         <TableCellText title="Key">
-                            {index.key}
+                            <div class="u-flex u-main-space-between">
+                                {index.key}
+                                {#if index.status !== 'available'}
+                                    <Pill
+                                        warning={index.status === 'processing'}
+                                        danger={['deleting', 'stuck', 'failed'].includes(
+                                            index.status
+                                        )}>
+                                        {index.status}
+                                    </Pill>
+                                {/if}
+                            </div>
                         </TableCellText>
                         <TableCellText title="Type">{index.type}</TableCellText>
                         <TableCellText title="Attributes">
@@ -157,7 +168,7 @@
                     <p>Create your first attribute to get started</p>
                 </div>
                 <div class="common-section">
-                    <Button secondary href="#">Documentation</Button>
+                    <Button secondary href="#?">Documentation</Button>
                 </div>
             </div>
         </Empty>

From 5dd5898beed780011046ed023551b57f810c3758 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 25 Jul 2022 11:48:42 +0200
Subject: [PATCH 18/75] feat: create indexOverview

---
 .../[collection]/_overviewIndex.svelte        | 63 +++++++++++++++++++
 .../collection/[collection]/indexes.svelte    |  2 +
 2 files changed, 65 insertions(+)
 create mode 100644 src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overviewIndex.svelte

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overviewIndex.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overviewIndex.svelte
new file mode 100644
index 0000000000..6159bd6c05
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overviewIndex.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    export let showOverview = false;
+    export let selectedIndex: Models.Index = null;
+    //TODO: add error message when index failed
+</script>
+
+<Modal size="big" bind:show={showOverview}>
+    <svelte:fragment slot="header">Overview</svelte:fragment>
+    <FormList>
+        <InputText
+            id="key"
+            label="Index Key"
+            placeholder="Enter Key"
+            value={selectedIndex.key}
+            readonly />
+        <InputText
+            id="type"
+            label="Index type"
+            placeholder="Select type"
+            value={selectedIndex.type}
+            readonly />
+
+        {#if selectedIndex?.attributes?.length}
+            {#each selectedIndex.attributes as attribute, i}
+                <li class="form-item is-multiple">
+                    <div class="form-item-part u-stretch">
+                        <label class="label" for={`value-${attribute}`}>Attribute</label>
+                        <div class="input-text-wrapper">
+                            <input
+                                id={`value-${attribute}`}
+                                placeholder=""
+                                type="text"
+                                class="input-text"
+                                value={attribute}
+                                readonly />
+                        </div>
+                    </div>
+                    <div class="form-item-part u-stretch">
+                        <label class="label" for={`value-${selectedIndex.orders[i]}`}>Order</label>
+                        <div class="input-text-wrapper">
+                            <input
+                                id={`value-${selectedIndex.orders[i]}`}
+                                placeholder=""
+                                type="text"
+                                class="input-text"
+                                value={selectedIndex.orders[i]}
+                                readonly />
+                        </div>
+                    </div>
+                    <div class="form-item-part u-cross-child-end">
+                        <Button text disabled>
+                            <span class="icon-x" aria-hidden="true" />
+                        </Button>
+                    </div>
+                </li>
+            {/each}
+        {/if}
+    </FormList>
+</Modal>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
index 89d88083cb..b8728212fa 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
@@ -17,6 +17,7 @@
     import { onMount } from 'svelte';
     import Delete from './_deleteIndex.svelte';
     import Create from './_createIndex.svelte';
+    import Overview from './_overviewIndex.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
 
     let showDropdown = [];
@@ -194,4 +195,5 @@
 <Create bind:showCreateIndex />
 {#if selectedIndex}
     <Delete bind:showDelete {selectedIndex} on:deleted={handleDelete} />
+    <Overview bind:showOverview {selectedIndex} />
 {/if}

From dcc8ec07e2cc93757cedaf08e32c4f62c3ee37d3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 25 Jul 2022 13:23:51 +0200
Subject: [PATCH 19/75] feat: create steps component

---
 src/lib/components/index.ts     |  2 ++
 src/lib/components/step.svelte  | 12 ++++++++++++
 src/lib/components/steps.svelte |  3 +++
 3 files changed, 17 insertions(+)
 create mode 100644 src/lib/components/step.svelte
 create mode 100644 src/lib/components/steps.svelte

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index c04df5d37d..e9566eb3fb 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -26,3 +26,5 @@ export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
 export { default as Bucket } from './bucket.svelte';
+export { default as Steps } from './steps.svelte';
+export { default as Step } from './step.svelte';
diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
new file mode 100644
index 0000000000..722169ddd0
--- /dev/null
+++ b/src/lib/components/step.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    export let done = false;
+    export let current = false;
+</script>
+
+<li
+    class="steps-item"
+    class:is-done={done}
+    class:is-current={current}
+    aria-label={` ${done ? 'done' : current ? 'current' : ''} step`}>
+    <span class="text"><slot /></span>
+</li>
diff --git a/src/lib/components/steps.svelte b/src/lib/components/steps.svelte
new file mode 100644
index 0000000000..37392948c3
--- /dev/null
+++ b/src/lib/components/steps.svelte
@@ -0,0 +1,3 @@
+<ol class="steps">
+    <slot />
+</ol>

From b9fd1797ed193cb699bad55a4e98d98e6e792463 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 25 Jul 2022 13:24:49 +0200
Subject: [PATCH 20/75] feat: start implementin wizard component

---
 src/lib/layout/index.ts                       |  1 +
 src/lib/layout/wizard.svelte                  | 64 +++++++++++++++++++
 .../collection/[collection]/index.svelte      |  7 +-
 3 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/layout/wizard.svelte

diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index 43584d1bc1..d6ba706e42 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -6,3 +6,4 @@ export { default as Navigation } from './navigation.svelte';
 export { default as Notification } from './notification.svelte';
 export { default as Notifications } from './notifications.svelte';
 export { default as Shell } from './shell.svelte';
+export { default as Wizard } from './wizard.svelte';
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
new file mode 100644
index 0000000000..c9bfe453aa
--- /dev/null
+++ b/src/lib/layout/wizard.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { createEventDispatcher, onMount } from 'svelte';
+    import { fly, type FlyParams } from 'svelte/transition';
+
+    export let show = false;
+    export let title: string;
+    let browser = false;
+    //TODO: explore other solutions compatible with testing library
+    onMount(() => {
+        browser = true;
+    });
+
+    const dispatch = createEventDispatcher();
+    const transitionFly: FlyParams = {
+        duration: 150,
+        y: 50
+    };
+
+    const handleKeydown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            closeModal();
+        }
+    };
+
+    const closeModal = () => {
+        show = false;
+        dispatch('close');
+    };
+
+    $: if (browser) {
+        if (show) {
+            document.body.classList.add('u-overflow-hidden');
+        } else {
+            document.body.classList.remove('u-overflow-hidden');
+        }
+    }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if show}
+    <section class="wizard" transition:fly={transitionFly}>
+        <div class="wizard-header-strip" />
+        <div class="wizard-start-bg" />
+        <div class="wizard-end-bg" />
+
+        <header class="wizard-header">
+            <div class="body-text-1">{title}</div>
+
+            <slot name="header" />
+            <button class="x-button" aria-label="close wizard" on:click={closeModal}>
+                <span class="icon-x" aria-hidden="true" />
+            </button>
+        </header>
+
+        <aside class="wizard-side">
+            <slot name="aside" />
+        </aside>
+        <div class="wizard-main">
+            <slot />
+        </div>
+    </section>
+{/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
index 1d38f86baf..fe421a4ec7 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
@@ -59,9 +59,10 @@
                             href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}>
                             <TableCell main width={230}>
                                 <Copy value={document.$id}>
-                                    <Pill button
-                                        ><span class="icon-duplicate" aria-hidden="true" />
-                                        <span class="text">{document.$id}</span></Pill>
+                                    <Pill button>
+                                        <span class="icon-duplicate" aria-hidden="true" />
+                                        <span class="text u-trim-start">{document.$id}</span>
+                                    </Pill>
                                 </Copy>
                             </TableCell>
                             {#each columns as column}

From 974e68c826e850edd9d21bfbaf5c19ec4092562a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 25 Jul 2022 13:34:55 +0200
Subject: [PATCH 21/75] chore: bump css to 0.0.0-33

---
 package-lock.json | 28 ++++++++++++++--------------
 package.json      |  4 ++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4010ec2e38..31f29eaa2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-32",
-                "@aw-labs/ui": "0.0.0-32",
+                "@aw-labs/icons": "0.0.0-33",
+                "@aw-labs/ui": "0.0.0-33",
                 "echarts": "^5.3.3"
             },
             "devDependencies": {
@@ -69,14 +69,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-32",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-32.tgz",
-            "integrity": "sha512-U6r1A3XJkupV/2W0c5maULqXPJ9T5Deo7m4i9S2oWQbpOrXSESQDOP38AistjTY7lywqDeNCZK1eQgqLwm/0Kw=="
+            "version": "0.0.0-33",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-33.tgz",
+            "integrity": "sha512-H/hsLytvF06cn/m6Yr91TerC00lmi411ayBE5DMMmkWfhNIuLE5f3xrZCSPKZS6sjck/OPQo6Fsm2pU6nxIhmQ=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-32",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-32.tgz",
-            "integrity": "sha512-Spmae+a66e9GRTuYWMLOpG/HGWPpQgLVxPLaqXEeqhIdW8XHxw9zWUT2TUWBKl0g3fwLzaMbRRAUIyafFap5fw==",
+            "version": "0.0.0-33",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-33.tgz",
+            "integrity": "sha512-dUEfY+xi0qM+4TiyEQnUoPHx3zmf58OrPl6oqqL+tV4q47NR7MzcKUxhfr04uhjTHBlobGcX3ZKDRQXTa77yVA==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -8060,14 +8060,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-32",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-32.tgz",
-            "integrity": "sha512-U6r1A3XJkupV/2W0c5maULqXPJ9T5Deo7m4i9S2oWQbpOrXSESQDOP38AistjTY7lywqDeNCZK1eQgqLwm/0Kw=="
+            "version": "0.0.0-33",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-33.tgz",
+            "integrity": "sha512-H/hsLytvF06cn/m6Yr91TerC00lmi411ayBE5DMMmkWfhNIuLE5f3xrZCSPKZS6sjck/OPQo6Fsm2pU6nxIhmQ=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-32",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-32.tgz",
-            "integrity": "sha512-Spmae+a66e9GRTuYWMLOpG/HGWPpQgLVxPLaqXEeqhIdW8XHxw9zWUT2TUWBKl0g3fwLzaMbRRAUIyafFap5fw==",
+            "version": "0.0.0-33",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-33.tgz",
+            "integrity": "sha512-dUEfY+xi0qM+4TiyEQnUoPHx3zmf58OrPl6oqqL+tV4q47NR7MzcKUxhfr04uhjTHBlobGcX3ZKDRQXTa77yVA==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 25bc0da2c0..cecfc38a20 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-32",
-        "@aw-labs/ui": "0.0.0-32",
+        "@aw-labs/icons": "0.0.0-33",
+        "@aw-labs/ui": "0.0.0-33",
         "echarts": "^5.3.3"
     },
     "devDependencies": {

From f546ceb2b81f09941651002ee2215d22515edf1e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 25 Jul 2022 15:21:36 +0200
Subject: [PATCH 22/75] feat: more wizard implementation

---
 src/lib/components/step.svelte                |  6 ++---
 src/lib/layout/wizard.svelte                  | 10 ++++++++
 .../collection/[collection]/_create.svelte    | 24 +++++++++++++++++++
 .../collection/[collection]/index.svelte      |  8 +++++--
 4 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte

diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index 722169ddd0..07522aa8ef 100644
--- a/src/lib/components/step.svelte
+++ b/src/lib/components/step.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    export let done = false;
+    export let completed = false;
     export let current = false;
 </script>
 
 <li
     class="steps-item"
-    class:is-done={done}
+    class:is-done={completed}
     class:is-current={current}
-    aria-label={` ${done ? 'done' : current ? 'current' : ''} step`}>
+    aria-label={` ${completed ? 'done' : current ? 'current' : ''} step`}>
     <span class="text"><slot /></span>
 </li>
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index c9bfe453aa..e7b0175ebc 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -62,3 +62,13 @@
         </div>
     </section>
 {/if}
+
+<style>
+    .wizard {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+    }
+</style>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
new file mode 100644
index 0000000000..bcf9131916
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { Step, Steps } from '$lib/components';
+
+    export let showCreate = false;
+
+    let steps = [
+        { title: 'Create data', current: true, completed: false },
+        { title: 'Set permissions', current: false, completed: false }
+    ];
+</script>
+
+<Wizard title="Create document" bind:show={showCreate}>
+    <svelte:fragment slot="aside">
+        <Steps>
+            {#each steps as step}
+                <Step current={step.current} completed={step.completed}>
+                    {step.title}
+                </Step>
+            {/each}
+        </Steps>
+    </svelte:fragment>
+    test
+</Wizard>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
index fe421a4ec7..683239c649 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
@@ -15,8 +15,10 @@
     import { Button } from '$lib/elements/forms';
     import { base } from '$app/paths';
     import { onMount } from 'svelte';
+    import Create from './_create.svelte';
 
     let offset = 0;
+    let showCreate = false;
 
     const limit = 5;
     const projectId = $page.params.project;
@@ -38,7 +40,7 @@
     <div class="u-flex u-gap-12 common-section u-main-space-between">
         <h2 class="heading-level-5">Documents</h2>
 
-        <Button on:click={() => console.log('showCreate = true')}>
+        <Button on:click={() => (showCreate = true)}>
             <span class="icon-plus" aria-hidden="true" />
             <span class="text">Create document</span>
         </Button>
@@ -83,7 +85,7 @@
         <Empty dashed centered>
             <div class="u-flex u-flex-vertical u-cross-center">
                 <div class="common-section">
-                    <Button secondary round on:click={() => console.log('showCreate = true')}>
+                    <Button secondary round on:click={() => (showCreate = true)}>
                         <span class="icon-plus" aria-hidden="true" />
                     </Button>
                 </div>
@@ -97,3 +99,5 @@
         </Empty>
     {/if}
 </Container>
+
+<Create bind:showCreate />

From bf6e9a4b80d9a1146fdbc2be4485c95bc3330c1f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 25 Jul 2022 17:27:37 +0200
Subject: [PATCH 23/75] feat: dynamically show inputs

---
 src/lib/layout/wizard.svelte                  | 15 +--
 .../collection/[collection]/_create.svelte    | 91 ++++++++++++++++++-
 2 files changed, 91 insertions(+), 15 deletions(-)

diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index e7b0175ebc..a04a9376b7 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -1,14 +1,9 @@
 <script lang="ts">
-    import { createEventDispatcher, onMount } from 'svelte';
+    import { createEventDispatcher } from 'svelte';
     import { fly, type FlyParams } from 'svelte/transition';
 
     export let show = false;
     export let title: string;
-    let browser = false;
-    //TODO: explore other solutions compatible with testing library
-    onMount(() => {
-        browser = true;
-    });
 
     const dispatch = createEventDispatcher();
     const transitionFly: FlyParams = {
@@ -27,14 +22,6 @@
         show = false;
         dispatch('close');
     };
-
-    $: if (browser) {
-        if (show) {
-            document.body.classList.add('u-overflow-hidden');
-        } else {
-            document.body.classList.remove('u-overflow-hidden');
-        }
-    }
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index bcf9131916..71449be9be 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -1,6 +1,17 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
     import { Step, Steps } from '$lib/components';
+    import {
+        Form,
+        FormList,
+        InputCheckbox,
+        InputText,
+        InputEmail,
+        InputNumber,
+        Button
+    } from '$lib/elements/forms';
+    import { collection } from './store';
+    import { sdkForProject } from '$lib/stores/sdk';
 
     export let showCreate = false;
 
@@ -8,6 +19,52 @@
         { title: 'Create data', current: true, completed: false },
         { title: 'Set permissions', current: false, completed: false }
     ];
+
+    let currentStep = 0;
+
+    const comp = (type: string) => {
+        switch (type) {
+            case 'boolean':
+                return InputCheckbox;
+            case 'email':
+                return InputEmail;
+            case 'float':
+                return InputNumber;
+            case 'integer':
+                return InputNumber;
+
+            default:
+                return InputText;
+        }
+    };
+
+    let newDocument = {};
+    let read: string[];
+    let write: string[];
+
+    const create = async () => {
+        await sdkForProject.databases.createDocument(
+            $collection.$id,
+            'unique()',
+            newDocument,
+            read,
+            write
+        );
+    };
+
+    const nextStep = () => {
+        steps[currentStep].current = false;
+        steps[currentStep].completed = true;
+        currentStep++;
+        steps[currentStep].current = true;
+    };
+    const prevStep = () => {
+        steps[currentStep].current = false;
+
+        currentStep--;
+        steps[currentStep].current = true;
+        steps[currentStep].completed = false;
+    };
 </script>
 
 <Wizard title="Create document" bind:show={showCreate}>
@@ -20,5 +77,37 @@
             {/each}
         </Steps>
     </svelte:fragment>
-    test
+    <Form on:submit={create}>
+        <header class="form-header">
+            <h1 class="heading-level-6">Create document data</h1>
+            <p>Provide document data based on attributes you created earlier.</p>
+        </header>
+        <div class="form-content">
+            <FormList>
+                {#each $collection.attributes as attribute}
+                    <svelte:component
+                        this={comp(attribute.type)}
+                        label={attribute.key}
+                        id={attribute.key}
+                        required={attribute.required}
+                        bind:value={newDocument[attribute.key]} />
+                {/each}
+            </FormList>
+        </div>
+
+        <div class="form-footer">
+            <div class="u-flex u-main-end u-gap-12">
+                {#if currentStep === 0}
+                    <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+                    <Button on:click={nextStep}>Next</Button>
+                {:else if currentStep === steps.length - 1}
+                    <Button secondary on:click={prevStep}>Back</Button>
+                    <Button submit>Create</Button>
+                {:else}
+                    <Button secondary on:click={prevStep}>Back</Button>
+                    <Button on:click={nextStep}>Next</Button>
+                {/if}
+            </div>
+        </div>
+    </Form>
 </Wizard>

From 9cb2cf9aed012aeb2abbbd264e918ac9b73ef9ef Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 25 Jul 2022 17:43:38 +0200
Subject: [PATCH 24/75] feat: add wizard media

---
 src/lib/layout/wizard.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index a04a9376b7..877a1f931a 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -44,6 +44,9 @@
         <aside class="wizard-side">
             <slot name="aside" />
         </aside>
+        <div class="wizard-media">
+            <slot name="media" />
+        </div>
         <div class="wizard-main">
             <slot />
         </div>

From e644a05eeb52e7532c4ae9431f41081bf7930fa9 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 25 Jul 2022 17:43:59 +0200
Subject: [PATCH 25/75] feaet: start work on array attributes

---
 .../collection/[collection]/_create.svelte    | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index 71449be9be..d2d4bb56dc 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -85,12 +85,30 @@
         <div class="form-content">
             <FormList>
                 {#each $collection.attributes as attribute}
-                    <svelte:component
-                        this={comp(attribute.type)}
-                        label={attribute.key}
-                        id={attribute.key}
-                        required={attribute.required}
-                        bind:value={newDocument[attribute.key]} />
+                    {#if attribute.array}
+                        <li class="form-item is-multiple">
+                            <div class="form-item-part u-stretch">
+                                <svelte:component
+                                    this={comp(attribute.type)}
+                                    label={attribute.key}
+                                    id={attribute.key}
+                                    required={attribute.required}
+                                    bind:value={newDocument[attribute.key]} />
+                            </div>
+                            <div class="form-item-part u-cross-child-end">
+                                <Button text>
+                                    <span class="icon-x" aria-hidden="true" />
+                                </Button>
+                            </div>
+                        </li>
+                    {:else}
+                        <svelte:component
+                            this={comp(attribute.type)}
+                            label={attribute.key}
+                            id={attribute.key}
+                            required={attribute.required}
+                            bind:value={newDocument[attribute.key]} />
+                    {/if}
                 {/each}
             </FormList>
         </div>

From 0814de445507b486c3783a6d3a2376db3e50618e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 25 Jul 2022 17:49:06 +0200
Subject: [PATCH 26/75] chore: bump to 0.0.0-34

---
 package-lock.json | 28 ++++++++++++++--------------
 package.json      |  4 ++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 31f29eaa2a..41a58ff49c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-33",
-                "@aw-labs/ui": "0.0.0-33",
+                "@aw-labs/icons": "0.0.0-34",
+                "@aw-labs/ui": "0.0.0-34",
                 "echarts": "^5.3.3"
             },
             "devDependencies": {
@@ -69,14 +69,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-33",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-33.tgz",
-            "integrity": "sha512-H/hsLytvF06cn/m6Yr91TerC00lmi411ayBE5DMMmkWfhNIuLE5f3xrZCSPKZS6sjck/OPQo6Fsm2pU6nxIhmQ=="
+            "version": "0.0.0-34",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-34.tgz",
+            "integrity": "sha512-Qk3u6fR2ZWputxXY4GnskxcV7GbFXll9i/Wz2DvdWs3knXZ0kBIzUOdSZOisxZ9vqxtkUS6es3YjzXiVI5c13g=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-33",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-33.tgz",
-            "integrity": "sha512-dUEfY+xi0qM+4TiyEQnUoPHx3zmf58OrPl6oqqL+tV4q47NR7MzcKUxhfr04uhjTHBlobGcX3ZKDRQXTa77yVA==",
+            "version": "0.0.0-34",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-34.tgz",
+            "integrity": "sha512-ZxM1NhEmXJCNlALgZq3bquC04TqjBDKAwxKjCVNoeSMbLbWU4eSlxJ1EakY53nSZZr7MWSL3+d50oVpHBebB/g==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -8060,14 +8060,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-33",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-33.tgz",
-            "integrity": "sha512-H/hsLytvF06cn/m6Yr91TerC00lmi411ayBE5DMMmkWfhNIuLE5f3xrZCSPKZS6sjck/OPQo6Fsm2pU6nxIhmQ=="
+            "version": "0.0.0-34",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-34.tgz",
+            "integrity": "sha512-Qk3u6fR2ZWputxXY4GnskxcV7GbFXll9i/Wz2DvdWs3knXZ0kBIzUOdSZOisxZ9vqxtkUS6es3YjzXiVI5c13g=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-33",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-33.tgz",
-            "integrity": "sha512-dUEfY+xi0qM+4TiyEQnUoPHx3zmf58OrPl6oqqL+tV4q47NR7MzcKUxhfr04uhjTHBlobGcX3ZKDRQXTa77yVA==",
+            "version": "0.0.0-34",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-34.tgz",
+            "integrity": "sha512-ZxM1NhEmXJCNlALgZq3bquC04TqjBDKAwxKjCVNoeSMbLbWU4eSlxJ1EakY53nSZZr7MWSL3+d50oVpHBebB/g==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index cecfc38a20..37103cb8bd 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-33",
-        "@aw-labs/ui": "0.0.0-33",
+        "@aw-labs/icons": "0.0.0-34",
+        "@aw-labs/ui": "0.0.0-34",
         "echarts": "^5.3.3"
     },
     "devDependencies": {

From 7cbcb6ce38727675133386c6bcacb6a38eae8763 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 26 Jul 2022 14:59:10 +0200
Subject: [PATCH 27/75] more work on wizard

---
 .../collection/[collection]/_create.svelte    | 179 ++++++++++++------
 .../collection/[collection]/store.ts          |  17 ++
 2 files changed, 139 insertions(+), 57 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index d2d4bb56dc..117c87909b 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -8,10 +8,15 @@
         InputText,
         InputEmail,
         InputNumber,
+        InputSelect,
         Button
     } from '$lib/elements/forms';
-    import { collection } from './store';
+    import { attributeList, type Attributes } from './store';
     import { sdkForProject } from '$lib/stores/sdk';
+    import { page } from '$app/stores';
+    import { onMount } from 'svelte';
+
+    $: attributeList.load($page.params.collection);
 
     export let showCreate = false;
 
@@ -19,37 +24,80 @@
         { title: 'Create data', current: true, completed: false },
         { title: 'Set permissions', current: false, completed: false }
     ];
-
     let currentStep = 0;
-
-    const comp = (type: string) => {
-        switch (type) {
-            case 'boolean':
-                return InputCheckbox;
-            case 'email':
-                return InputEmail;
-            case 'float':
-                return InputNumber;
-            case 'integer':
-                return InputNumber;
-
-            default:
-                return InputText;
-        }
-    };
-
     let newDocument = {};
     let read: string[];
     let write: string[];
 
+    onMount(async () => {
+        console.log($attributeList);
+        await attributeList.load($page.params.collection);
+        $attributeList.attributes.forEach((attr) => {
+            newDocument[attr.key] = attr.default;
+        });
+    });
+
     const create = async () => {
-        await sdkForProject.databases.createDocument(
-            $collection.$id,
-            'unique()',
-            newDocument,
-            read,
-            write
-        );
+        console.log(newDocument);
+        // await sdkForProject.databases.createDocument(
+        //    $page.params.collection,
+        //     'unique()',
+        //     newDocument,
+        //     read,
+        //     write
+        // );
+    };
+
+    const comp = (attr: Attributes) => {
+        if (attr.array) {
+            if (attr.type === 'string')
+                switch (attr?.format) {
+                    case 'email':
+                        return InputEmail;
+                    case 'enum':
+                        return InputSelect;
+
+                    default:
+                        return InputText;
+                }
+            else {
+                switch (attr?.type) {
+                    case 'boolean':
+                        return InputSelect;
+                    case 'double':
+                        return InputNumber;
+                    case 'integer':
+                        return InputNumber;
+
+                    default:
+                        return InputText;
+                }
+            }
+        } else {
+            if (attr.type === 'string')
+                switch (attr?.format) {
+                    case 'email':
+                        return InputEmail;
+                    case 'enum':
+                        return InputSelect;
+
+                    default:
+                        return InputText;
+                }
+            else {
+                switch (attr?.type) {
+                    case 'boolean':
+                        return InputCheckbox;
+                    case 'double':
+                        return InputNumber;
+                    case 'integer':
+                        return InputNumber;
+
+                    default:
+                        return InputText;
+                }
+            }
+        }
     };
 
     const nextStep = () => {
@@ -60,7 +108,6 @@
     };
     const prevStep = () => {
         steps[currentStep].current = false;
-
         currentStep--;
         steps[currentStep].current = true;
         steps[currentStep].completed = false;
@@ -82,36 +129,54 @@
             <h1 class="heading-level-6">Create document data</h1>
             <p>Provide document data based on attributes you created earlier.</p>
         </header>
-        <div class="form-content">
-            <FormList>
-                {#each $collection.attributes as attribute}
-                    {#if attribute.array}
-                        <li class="form-item is-multiple">
-                            <div class="form-item-part u-stretch">
-                                <svelte:component
-                                    this={comp(attribute.type)}
-                                    label={attribute.key}
-                                    id={attribute.key}
-                                    required={attribute.required}
-                                    bind:value={newDocument[attribute.key]} />
-                            </div>
-                            <div class="form-item-part u-cross-child-end">
-                                <Button text>
-                                    <span class="icon-x" aria-hidden="true" />
-                                </Button>
-                            </div>
-                        </li>
-                    {:else}
-                        <svelte:component
-                            this={comp(attribute.type)}
-                            label={attribute.key}
-                            id={attribute.key}
-                            required={attribute.required}
-                            bind:value={newDocument[attribute.key]} />
-                    {/if}
-                {/each}
-            </FormList>
-        </div>
+        {#if $attributeList?.total}
+            <div class="form-content">
+                <FormList>
+                    {#each $attributeList.attributes as attribute}
+                        {#if attribute?.array}
+                            <li class="form-item is-multiple">
+                                <div class="form-item-part u-stretch">
+                                    <svelte:component
+                                        this={comp(attribute)}
+                                        label={attribute.key}
+                                        id={attribute.key}
+                                        required={attribute.required}
+                                        placeholder={attribute.key}
+                                        options={attribute.type === 'boolean'
+                                            ? [
+                                                  { value: true, label: 'True' },
+                                                  { value: false, label: 'False' }
+                                              ]
+                                            : attribute?.elements?.map((n) => {
+                                                  return { value: n, label: n };
+                                              })}
+                                        bind:value={newDocument[attribute.key]} />
+                                </div>
+                                <div class="form-item-part u-cross-child-end">
+                                    <Button text>
+                                        <span class="icon-x" aria-hidden="true" />
+                                    </Button>
+                                </div>
+                            </li>
+                        {:else}
+                            <svelte:component
+                                this={comp(attribute)}
+                                label={attribute.key}
+                                id={attribute.key}
+                                required={attribute.required}
+                                placeholder={attribute.key}
+                                minlength={attribute?.min}
+                                maxlength={attribute?.max}
+                                step={attribute.type === 'double' ? 0.1 : 1}
+                                bind:value={newDocument[attribute.key]}
+                                options={attribute?.elements?.map((n) => {
+                                    return { value: n, label: n };
+                                })} />
+                        {/if}
+                    {/each}
+                </FormList>
+            </div>
+        {/if}
 
         <div class="form-footer">
             <div class="u-flex u-main-end u-gap-12">
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
index b41da1f463..aa6ef6ca81 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
@@ -83,13 +83,30 @@ function createIndexListStore() {
         }
     };
 }
+function createAttributeListStore() {
+    const { subscribe, set } = writable<Models.AttributeList>(
+        browser ? JSON.parse(sessionStorage.getItem('attributeList')) : null
+    );
+    return {
+        subscribe,
+        set,
+        load: async (collectionId: string) => {
+            const response = await sdkForProject.databases.listAttributes(collectionId);
+            set(response);
+        }
+    };
+}
 
 export const collection = createCollection();
 export const documentList = createDocumentListStore();
 export const indexList = createIndexListStore();
+export const attributeList = createAttributeListStore();
 
 if (browser) {
     collection.subscribe((n) => sessionStorage?.setItem('collection', JSON.stringify(n ?? '')));
     documentList.subscribe((n) => sessionStorage?.setItem('documentList', JSON.stringify(n ?? '')));
     indexList.subscribe((n) => sessionStorage?.setItem('indexList', JSON.stringify(n ?? '')));
+    attributeList.subscribe((n) =>
+        sessionStorage?.setItem('attributeList', JSON.stringify(n ?? ''))
+    );
 }

From f6cfb6e76c731e6bfd64b5d7dcecd219005e84e1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 26 Jul 2022 17:51:02 +0200
Subject: [PATCH 28/75] feat: update layout

---
 .../[collection]/document/[document]/__layout.svelte         | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
index 426b2aeaf4..2e64d20476 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
@@ -4,6 +4,7 @@
     import { doc } from './store';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
+    import { base } from '$app/paths';
 
     const databaseId = $page.params.database;
     const collectionId = $page.params.collection;
@@ -19,7 +20,9 @@
         }
         updateLayout({
             navigate: event,
-            title: `Document - ${$doc.$id}`,
+            title: 'Document',
+            copy: { text: 'Document ID', value: $doc.$id },
+            back: `${base}/console/${$page.params.project}/databases/database/${databaseId}/collection/${collectionId}`,
             tabs: [
                 {
                     href: path,

From 82fcce06f5fbe25e6f998d9d2892931af9ee9cfa Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 26 Jul 2022 17:59:27 +0200
Subject: [PATCH 29/75] feat: document view

---
 .../document/[document]/_delete.svelte        |  44 ++++++
 .../document/[document]/_document.svelte      |  89 ++++++------
 .../[document]/attributes/_boolean.svelte     |   4 +-
 .../document/[document]/index.svelte          | 129 ++++++++++++++----
 4 files changed, 203 insertions(+), 63 deletions(-)
 create mode 100644 src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
new file mode 100644
index 0000000000..47890e106a
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
@@ -0,0 +1,44 @@
+<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 } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { collection } from '../../store';
+
+    export let showDelete = false;
+
+    const deleteElement = async () => {
+        try {
+            await sdkForProject.databases.deleteDocument(
+                $page.params.collection,
+                $page.params.document
+            );
+            showDelete = false;
+            await goto(
+                `${base}/console/${$page.params.project}/databases/database/${$page.params.database}/collection/${$page.params.collection}`
+            );
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteElement}>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete Document</svelte:fragment>
+
+        <p>
+            Are you sure you want to delete <b>the document from {$collection.name}</b>?
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
index a72aa3ddfc..a19f3feabb 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
@@ -1,44 +1,57 @@
 <script lang="ts">
-    import { Collapsible } from '$lib/components';
-    import { Button, InputTags } from '$lib/elements/forms';
+    import { Button, FormItem } from '$lib/elements/forms';
+    import { CardGrid } from '$lib/components';
     import { collection } from '../../store';
     import { doc } from './store';
     import Attribute from './_attribute.svelte';
 </script>
 
-{#each $collection.attributes.filter((a) => a.status === 'available') as attribute}
-    {#if attribute.array}
-        {#each $doc[attribute.key] as _v, index}
-            <Attribute
-                {attribute}
-                id={`${attribute.key}-${index}`}
-                label={index === 0 ? attribute.key : ''}
-                bind:value={$doc[attribute.key][index]} />
-            <Button on:click={() => doc.removeAttribute(attribute.key, index)}>X</Button>
-        {:else}
-            <p>{attribute.key}</p>
-        {/each}
-        <Button on:click={() => doc.addAttribute(attribute.key)}>Add Attribute</Button>
-    {:else}
-        <Attribute
-            {attribute}
-            id={attribute.key}
-            label={attribute.key}
-            bind:value={$doc[attribute.key]} />
-    {/if}
-{/each}
-<Collapsible>
-    <svelte:fragment slot="header">Permissions</svelte:fragment>
-    <InputTags
-        id="read"
-        label="Read Permissions"
-        bind:tags={$doc.$read}
-        helper="Add 'role:all' for wildcard access"
-        placeholder="User ID, Team ID or Role" />
-    <InputTags
-        id="write"
-        label="Write Permissions"
-        bind:tags={$doc.$write}
-        helper="Add 'role:all' for wildcard access"
-        placeholder="User ID, Team ID or Role" />
-</Collapsible>
+<CardGrid>
+    <h6 class="heading-level-7">Update Data</h6>
+    <p>Update document data based on the attributes created earlier.</p>
+    <svelte:fragment slot="aside">
+        <ul class="common-section form-list">
+            {#each $collection.attributes.filter((a) => a.status === 'available') as attribute}
+                <FormItem>
+                    {#if attribute.array}
+                        {#each $doc[attribute.key] as _v, index}
+                            <li class="form-item is-multiple">
+                                <div class="form-item-part u-stretch">
+                                    <Attribute
+                                        {attribute}
+                                        id={`${attribute.key}-${index}`}
+                                        label={index === 0 ? attribute.key : ''}
+                                        bind:value={$doc[attribute.key][index]} />
+                                </div>
+                                <div class="form-item-part u-cross-child-end">
+                                    <Button
+                                        text
+                                        on:click={() => doc.removeAttribute(attribute.key, index)}>
+                                        <span class="icon-x" aria-hidden="true" />
+                                    </Button>
+                                </div>
+                            </li>
+                        {:else}
+                            <p>{attribute.key}</p>
+                        {/each}
+
+                        <Button text on:click={() => doc.addAttribute(attribute.key)}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text"> Add Attribute</span>
+                        </Button>
+                    {:else}
+                        <Attribute
+                            {attribute}
+                            id={attribute.key}
+                            label={attribute.key}
+                            bind:value={$doc[attribute.key]} />
+                    {/if}
+                </FormItem>
+            {/each}
+        </ul>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button disabled={true} on:click={() => {}}>Update</Button>
+    </svelte:fragment>
+</CardGrid>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte
index 0a0b82bf6d..acca4928fa 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputSwitch } from '$lib/elements/forms';
+    import { InputCheckbox } from '$lib/elements/forms';
     import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
@@ -8,4 +8,4 @@
     export let attribute: Models.AttributeInteger;
 </script>
 
-<InputSwitch {id} {label} required={attribute.required} bind:value />
+<InputCheckbox {id} {label} required={attribute.required} bind:value />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
index 348460be59..a00245c7c9 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
@@ -1,26 +1,34 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Card, CopyInput } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { CardGrid, Box, Alert } from '$lib/components';
+    import { Container } from '$lib/layout';
+    import { Button, InputTags } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
-    import { collection } from '../../store';
     import { doc } from './store';
     import { addNotification } from '$lib/stores/notifications';
+    import { toLocaleDateTime } from '$lib/helpers/date';
     import Document from './_document.svelte';
+    import Delete from './_delete.svelte';
 
-    const documentId = $page.params.document;
+    let showDelete = false;
+    let fileRead = $doc?.$read;
+    let fileWrite = $doc?.$write;
+    let arePermsDisabled = true;
 
-    const updateDocument = async () => {
+    async function updatePermissions() {
         try {
-            $doc = await sdkForProject.databases.updateDocument(
-                $collection.$id,
-                documentId,
-                $doc,
-                $doc.$read,
-                $doc.$write
+            await sdkForProject.databases.updateDocument(
+                $doc.collectionId,
+                $doc.$id,
+                $doc.data,
+                fileRead,
+                fileWrite
             );
+            $doc.$read = fileRead;
+            $doc.$write = fileWrite;
+            arePermsDisabled = true;
             addNotification({
-                message: 'Document was updated!',
+                message: 'Permissions have been updated',
                 type: 'success'
             });
         } catch (error) {
@@ -29,22 +37,97 @@
                 type: 'error'
             });
         }
-    };
+    }
+
+    $: if (fileRead || fileWrite) {
+        if (fileRead) {
+            if (JSON.stringify(fileRead) !== JSON.stringify($doc.$read)) {
+                arePermsDisabled = false;
+            } else arePermsDisabled = true;
+        } else if (fileWrite) {
+            if (JSON.stringify(fileWrite) !== JSON.stringify($doc.$write)) {
+                arePermsDisabled = false;
+            } else arePermsDisabled = true;
+        }
+    }
 </script>
 
 <svelte:head>
     <title>Appwrite - Document</title>
 </svelte:head>
 
-<h1>Overview</h1>
-<Card>
+<Container>
     {#if $doc}
-        <Form on:submit={updateDocument}>
-            <CopyInput value={$doc.$id} />
-            <Document />
-            <Button submit>Update</Button>
-        </Form>
-    {:else}
-        loading
+        <CardGrid>
+            <h2 class="heading-level-7">Document</h2>
+            <svelte:fragment slot="aside">
+                <div>
+                    <p>Created: {toLocaleDateTime($doc.$createdAt)}</p>
+                    <p>Last Updated: {toLocaleDateTime($doc.$updatedAt)}</p>
+                </div>
+            </svelte:fragment>
+        </CardGrid>
+
+        <CardGrid>
+            <h6 class="heading-level-7">Update Permissions</h6>
+            <p>
+                Assign read or write permissions at the <b> Collection Level</b> or
+                <b> Document Level</b>. If collection Level permissions are assigned, permissions
+                applied to individual documents are ignored.
+            </p>
+            <svelte:fragment slot="aside">
+                <Alert type="info">
+                    <p>
+                        Tip: Add role:all for wildcard access. Check out our documentation for more
+                        on <a href="#?"> Permissions</a>
+                    </p>
+                </Alert>
+                <ul class="common-section">
+                    <InputTags
+                        id="read"
+                        label="Read Access"
+                        placeholder="User ID, Team ID, or Role"
+                        bind:tags={fileRead} />
+                    <InputTags
+                        id="write"
+                        label="Write Access"
+                        placeholder="User ID, Team ID, or Role"
+                        bind:tags={fileWrite} />
+                </ul>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={arePermsDisabled}
+                    on:click={() => {
+                        updatePermissions();
+                    }}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+        <Document />
+
+        <CardGrid>
+            <h6 class="heading-level-7">Delete document</h6>
+            <p>
+                The document will be permanently deleted, including all the data within it. This
+                action is irreversible.
+            </p>
+            <svelte:fragment slot="aside">
+                <Box>
+                    <svelte:fragment slot="title">
+                        <h6 class="u-bold">{$doc.$id}</h6>
+                    </svelte:fragment>
+                    <p>
+                        Last Updated: {toLocaleDateTime($doc.$updatedAt)}
+                    </p>
+                </Box>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+            </svelte:fragment>
+        </CardGrid>
     {/if}
-</Card>
+</Container>
+
+<Delete bind:showDelete />

From 2a01b31010525f585498fa13e3c1b9d02fa92c31 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 27 Jul 2022 17:24:24 +0200
Subject: [PATCH 30/75] chore: bump to 0.0.0-35

---
 package-lock.json | 28 ++++++++++++++--------------
 package.json      |  4 ++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 41a58ff49c..637697020f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-34",
-                "@aw-labs/ui": "0.0.0-34",
+                "@aw-labs/icons": "0.0.0-35",
+                "@aw-labs/ui": "0.0.0-35",
                 "echarts": "^5.3.3"
             },
             "devDependencies": {
@@ -69,14 +69,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-34",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-34.tgz",
-            "integrity": "sha512-Qk3u6fR2ZWputxXY4GnskxcV7GbFXll9i/Wz2DvdWs3knXZ0kBIzUOdSZOisxZ9vqxtkUS6es3YjzXiVI5c13g=="
+            "version": "0.0.0-35",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-35.tgz",
+            "integrity": "sha512-cfwf1oRGTs63ZJ8hjlM7oWJP3hnD5oje41uV8roXSvCeuB5bAgrpXNh/v95DEypz+qAUAOaifX9QBG7uFfvUVQ=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-34",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-34.tgz",
-            "integrity": "sha512-ZxM1NhEmXJCNlALgZq3bquC04TqjBDKAwxKjCVNoeSMbLbWU4eSlxJ1EakY53nSZZr7MWSL3+d50oVpHBebB/g==",
+            "version": "0.0.0-35",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-35.tgz",
+            "integrity": "sha512-5AuZHahIAaw7HGir7o+C8L4pHxtaJalUsffevwpcAMtC1/J5iIIpEzbzGu4jQumMMV0TC1SDpD42G3S//2wvFQ==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -8060,14 +8060,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-34",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-34.tgz",
-            "integrity": "sha512-Qk3u6fR2ZWputxXY4GnskxcV7GbFXll9i/Wz2DvdWs3knXZ0kBIzUOdSZOisxZ9vqxtkUS6es3YjzXiVI5c13g=="
+            "version": "0.0.0-35",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-35.tgz",
+            "integrity": "sha512-cfwf1oRGTs63ZJ8hjlM7oWJP3hnD5oje41uV8roXSvCeuB5bAgrpXNh/v95DEypz+qAUAOaifX9QBG7uFfvUVQ=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-34",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-34.tgz",
-            "integrity": "sha512-ZxM1NhEmXJCNlALgZq3bquC04TqjBDKAwxKjCVNoeSMbLbWU4eSlxJ1EakY53nSZZr7MWSL3+d50oVpHBebB/g==",
+            "version": "0.0.0-35",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-35.tgz",
+            "integrity": "sha512-5AuZHahIAaw7HGir7o+C8L4pHxtaJalUsffevwpcAMtC1/J5iIIpEzbzGu4jQumMMV0TC1SDpD42G3S//2wvFQ==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 37103cb8bd..6bd4fd6889 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-34",
-        "@aw-labs/ui": "0.0.0-34",
+        "@aw-labs/icons": "0.0.0-35",
+        "@aw-labs/ui": "0.0.0-35",
         "echarts": "^5.3.3"
     },
     "devDependencies": {

From 80bb165142a252cea2f9d57c2382371b63881648 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 27 Jul 2022 17:56:14 +0200
Subject: [PATCH 31/75] feat: document creation and update (WIP)

---
 src/lib/elements/forms/inputSelect.svelte     |   4 +-
 .../collection/[collection]/_create.svelte    | 230 +++++++++---------
 .../[collection]/_createIndex.svelte          |  26 +-
 .../document/[document]/_document.svelte      |  93 +++++--
 .../[document]/attributes/_boolean.svelte     |  20 +-
 .../[document]/attributes/_enum.svelte        |   8 +-
 .../[document]/attributes/_string.svelte      |   8 +-
 .../document/[document]/index.svelte          |  29 ++-
 8 files changed, 256 insertions(+), 162 deletions(-)

diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index c4aa70d960..a9d689fa18 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -9,7 +9,7 @@
     export let required = false;
     export let disabled = false;
     export let options: {
-        value: string;
+        value: string | boolean | number;
         label: string;
     }[];
 </script>
@@ -19,7 +19,7 @@
     <div class="select">
         <select bind:value {id} {required} {disabled}>
             {#if placeholder}
-                <option value="" disabled selected hidden>{placeholder}</option>
+                <option value={null} disabled selected hidden>{placeholder}</option>
             {/if}
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index 117c87909b..2a4304e3ad 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -1,102 +1,43 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { Step, Steps } from '$lib/components';
-    import {
-        Form,
-        FormList,
-        InputCheckbox,
-        InputText,
-        InputEmail,
-        InputNumber,
-        InputSelect,
-        Button
-    } from '$lib/elements/forms';
-    import { attributeList, type Attributes } from './store';
+    import { Step, Steps, Alert } from '$lib/components';
+    import { Form, Button, InputTags } from '$lib/elements/forms';
+    import { attributeList } from './store';
     import { sdkForProject } from '$lib/stores/sdk';
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
+    import Attribute from './document/[document]/_attribute.svelte';
+    import { addNotification } from '$lib/stores/notifications';
 
     $: attributeList.load($page.params.collection);
 
     export let showCreate = false;
 
+    let newDocument = {};
     let steps = [
         { title: 'Create data', current: true, completed: false },
         { title: 'Set permissions', current: false, completed: false }
     ];
     let currentStep = 0;
-    let newDocument = {};
     let read: string[];
     let write: string[];
 
     onMount(async () => {
-        console.log($attributeList);
         await attributeList.load($page.params.collection);
-        $attributeList.attributes.forEach((attr) => {
-            newDocument[attr.key] = attr.default;
-        });
+        $attributeList.attributes.forEach((attr) => (newDocument[attr.key] = [null]));
     });
 
     const create = async () => {
-        console.log(newDocument);
-        // await sdkForProject.databases.createDocument(
-        //    $page.params.collection,
-        //     'unique()',
-        //     newDocument,
-        //     read,
-        //     write
-        // );
-    };
-
-    const comp = (attr: Attributes) => {
-        if (attr.array) {
-            if (attr.type === 'string')
-                switch (attr?.format) {
-                    case 'email':
-                        return InputEmail;
-                    case 'enum':
-                        return InputSelect;
-
-                    default:
-                        return InputText;
-                }
-            else {
-                switch (attr?.type) {
-                    case 'boolean':
-                        return InputSelect;
-                    case 'double':
-                        return InputNumber;
-                    case 'integer':
-                        return InputNumber;
-
-                    default:
-                        return InputText;
-                }
-            }
-        } else {
-            if (attr.type === 'string')
-                switch (attr?.format) {
-                    case 'email':
-                        return InputEmail;
-                    case 'enum':
-                        return InputSelect;
-
-                    default:
-                        return InputText;
-                }
-            else {
-                switch (attr?.type) {
-                    case 'boolean':
-                        return InputCheckbox;
-                    case 'double':
-                        return InputNumber;
-                    case 'integer':
-                        return InputNumber;
-
-                    default:
-                        return InputText;
-                }
-            }
+        try {
+            // await sdkForProject.databases.createDocument(
+            //    $page.params.collection,
+            //     'unique()',
+            //     newDocument,
+            //     read,
+            //     write
+            // );
+        } catch (error) {
+            console.log('test');
         }
     };
 
@@ -125,59 +66,110 @@
         </Steps>
     </svelte:fragment>
     <Form on:submit={create}>
-        <header class="form-header">
-            <h1 class="heading-level-6">Create document data</h1>
-            <p>Provide document data based on attributes you created earlier.</p>
-        </header>
-        {#if $attributeList?.total}
-            <div class="form-content">
-                <FormList>
-                    {#each $attributeList.attributes as attribute}
-                        {#if attribute?.array}
+        {#if currentStep === 0}
+            <header class="form-header">
+                <h1 class="heading-level-6">Create document data</h1>
+                <p>Provide document data based on attributes you created earlier.</p>
+            </header>
+            {#each $attributeList?.attributes?.filter((a) => a.status === 'available') as attribute}
+                {#if attribute.array}
+                    <ul class="form-list">
+                        {#each newDocument[attribute.key] as _v, index}
                             <li class="form-item is-multiple">
                                 <div class="form-item-part u-stretch">
-                                    <svelte:component
-                                        this={comp(attribute)}
-                                        label={attribute.key}
-                                        id={attribute.key}
-                                        required={attribute.required}
-                                        placeholder={attribute.key}
-                                        options={attribute.type === 'boolean'
-                                            ? [
-                                                  { value: true, label: 'True' },
-                                                  { value: false, label: 'False' }
-                                              ]
-                                            : attribute?.elements?.map((n) => {
-                                                  return { value: n, label: n };
-                                              })}
-                                        bind:value={newDocument[attribute.key]} />
+                                    <Attribute
+                                        {attribute}
+                                        id={`${attribute.key}-${index}`}
+                                        label={index === 0 ? attribute.key : ''}
+                                        bind:value={newDocument[attribute.key][index]} />
                                 </div>
                                 <div class="form-item-part u-cross-child-end">
-                                    <Button text>
+                                    <Button
+                                        text
+                                        disabled={index === 0}
+                                        on:click={() => {
+                                            newDocument[attribute.key].splice(index, 1);
+                                            newDocument = newDocument;
+                                        }}>
                                         <span class="icon-x" aria-hidden="true" />
                                     </Button>
                                 </div>
                             </li>
                         {:else}
-                            <svelte:component
-                                this={comp(attribute)}
-                                label={attribute.key}
-                                id={attribute.key}
-                                required={attribute.required}
-                                placeholder={attribute.key}
-                                minlength={attribute?.min}
-                                maxlength={attribute?.max}
-                                step={attribute.type === 'double' ? 0.1 : 1}
-                                bind:value={newDocument[attribute.key]}
-                                options={attribute?.elements?.map((n) => {
-                                    return { value: n, label: n };
-                                })} />
-                        {/if}
-                    {/each}
-                </FormList>
-            </div>
-        {/if}
+                            <li class="form-item is-multiple">
+                                <div class="form-item-part u-stretch">
+                                    <Attribute
+                                        {attribute}
+                                        id={`${attribute.key}-0`}
+                                        label={attribute.key}
+                                        bind:value={newDocument[attribute.key][0]} />
+                                </div>
+                                <div class="form-item-part u-cross-child-end">
+                                    <Button text disabled>
+                                        <span class="icon-x" aria-hidden="true" />
+                                    </Button>
+                                </div>
+                            </li>
+                        {/each}
+                    </ul>
+
+                    <Button
+                        text
+                        on:click={() => {
+                            if (
+                                newDocument[attribute.key][
+                                    newDocument[attribute.key].length - 1
+                                ] !== null
+                            ) {
+                                newDocument[attribute.key].push(null);
+                                newDocument = newDocument;
+                            }
+                        }}>
+                        <span class="icon-plus" aria-hidden="true" />
+                        <span class="text"> Add Attribute</span>
+                    </Button>
+                {:else}
+                    <ul class="form-list">
+                        <Attribute
+                            {attribute}
+                            id={attribute.key}
+                            label={attribute.key}
+                            bind:value={newDocument[attribute.key]} />
+                    </ul>
+                {/if}
+            {/each}
+        {:else if currentStep === 1}
+            <header class="form-header">
+                <h1 class="heading-level-6">Set Permissions</h1>
+                <p>
+                    Assign read or write permissions at the <b> Collection Level</b> or
+                    <b> Document Level</b>. If collection Level permissions are assigned,
+                    permissions applied to individual documents are ignored.
+                </p>
+            </header>
+            <Alert type="info">
+                <svelte:fragment slot="title">
+                    You have Collection Level permissions enabled
+                </svelte:fragment>
+                <p>
+                    If you want to assign permissions specific to this document, you will need to
+                    update your Collection Settings to enable Document Level permissions.
+                </p>
+            </Alert>
 
+            <ul class="common-section">
+                <InputTags
+                    id="read"
+                    label="Read Access"
+                    placeholder="User ID, Team ID, or Role"
+                    bind:tags={read} />
+                <InputTags
+                    id="write"
+                    label="Write Access"
+                    placeholder="User ID, Team ID, or Role"
+                    bind:tags={write} />
+            </ul>
+        {/if}
         <div class="form-footer">
             <div class="u-flex u-main-end u-gap-12">
                 {#if currentStep === 0}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
index a473696cc1..9068bc7e25 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
@@ -5,6 +5,7 @@
     import type { Attributes } from './store';
     import { onMount } from 'svelte';
     import { sdkForProject } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
 
     export let showCreateIndex = false;
     export let externalAttribute: Attributes = null;
@@ -42,13 +43,24 @@
             attributeList.push({ value: selectedAttribute, order: selectedOrder });
             selectedAttribute = selectedOrder = '';
         }
-        await sdkForProject.databases.createIndex(
-            $collection.$id,
-            key,
-            selectedType,
-            attributeList.map((a) => a.value),
-            attributeList.map((a) => a.order)
-        );
+        try {
+            await sdkForProject.databases.createIndex(
+                $collection.$id,
+                key,
+                selectedType,
+                attributeList.map((a) => a.value),
+                attributeList.map((a) => a.order)
+            );
+            addNotification({
+                message: 'Index created!',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
 
         showCreateIndex = false;
     };
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
index a19f3feabb..8c497ed460 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
@@ -1,19 +1,62 @@
 <script lang="ts">
-    import { Button, FormItem } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { CardGrid } from '$lib/components';
     import { collection } from '../../store';
     import { doc } from './store';
     import Attribute from './_attribute.svelte';
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+
+    let currentDoc: string;
+    let updateBtnDisabled = true;
+    onMount(async () => {
+        await doc.load($collection.$id, $page.params.document);
+        currentDoc = JSON.stringify($doc);
+    });
+
+    $: if (currentDoc && $doc) {
+        if (currentDoc !== JSON.stringify($doc)) {
+            updateBtnDisabled = false;
+        } else {
+            updateBtnDisabled = true;
+        }
+    }
+
+    const updateData = async () => {
+        try {
+            await sdkForProject.databases.updateDocument(
+                $collection.$id,
+                $page.params.document,
+                $doc,
+                $doc.$read,
+                $doc.$write
+            );
+
+            currentDoc = JSON.stringify($doc);
+            updateBtnDisabled = true;
+            addNotification({
+                message: 'Document was updated!',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    };
 </script>
 
 <CardGrid>
     <h6 class="heading-level-7">Update Data</h6>
     <p>Update document data based on the attributes created earlier.</p>
     <svelte:fragment slot="aside">
-        <ul class="common-section form-list">
+        <form class="form u-grid u-gap-16">
             {#each $collection.attributes.filter((a) => a.status === 'available') as attribute}
-                <FormItem>
-                    {#if attribute.array}
+                {#if attribute.array}
+                    <ul class="form-list">
                         {#each $doc[attribute.key] as _v, index}
                             <li class="form-item is-multiple">
                                 <div class="form-item-part u-stretch">
@@ -26,32 +69,54 @@
                                 <div class="form-item-part u-cross-child-end">
                                     <Button
                                         text
+                                        disabled={index === 0}
                                         on:click={() => doc.removeAttribute(attribute.key, index)}>
                                         <span class="icon-x" aria-hidden="true" />
                                     </Button>
                                 </div>
                             </li>
                         {:else}
-                            <p>{attribute.key}</p>
+                            <li class="form-item is-multiple">
+                                <div class="form-item-part u-stretch">
+                                    <Attribute
+                                        {attribute}
+                                        id={`${attribute.key}-0`}
+                                        label={attribute.key}
+                                        bind:value={$doc[attribute.key][0]} />
+                                </div>
+                                <div class="form-item-part u-cross-child-end">
+                                    <Button text disabled>
+                                        <span class="icon-x" aria-hidden="true" />
+                                    </Button>
+                                </div>
+                            </li>
                         {/each}
+                    </ul>
 
-                        <Button text on:click={() => doc.addAttribute(attribute.key)}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text"> Add Attribute</span>
-                        </Button>
-                    {:else}
+                    <Button
+                        text
+                        on:click={() => {
+                            if ($doc[attribute.key][$doc[attribute.key].length - 1] !== null) {
+                                doc.addAttribute(attribute.key);
+                            }
+                        }}>
+                        <span class="icon-plus" aria-hidden="true" />
+                        <span class="text"> Add Attribute</span>
+                    </Button>
+                {:else}
+                    <ul class="form-list">
                         <Attribute
                             {attribute}
                             id={attribute.key}
                             label={attribute.key}
                             bind:value={$doc[attribute.key]} />
-                    {/if}
-                </FormItem>
+                    </ul>
+                {/if}
             {/each}
-        </ul>
+        </form>
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button disabled={true} on:click={() => {}}>Update</Button>
+        <Button disabled={updateBtnDisabled} on:click={() => updateData()}>Update</Button>
     </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte
index acca4928fa..2beea6cbc4 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte
@@ -1,11 +1,25 @@
 <script lang="ts">
-    import { InputCheckbox } from '$lib/elements/forms';
+    import { InputCheckbox, InputSelect } from '$lib/elements/forms';
     import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let label: string;
     export let value: boolean;
-    export let attribute: Models.AttributeInteger;
+    export let attribute: Models.AttributeBoolean;
 </script>
 
-<InputCheckbox {id} {label} required={attribute.required} bind:value />
+{#if attribute?.array}
+    <InputSelect
+        {id}
+        {label}
+        showLabel={!!label?.length}
+        placeholder="Select a value"
+        required={attribute.required}
+        options={[
+            { label: 'True', value: true },
+            { label: 'False', value: false }
+        ]}
+        bind:value />
+{:else}
+    <InputCheckbox {id} {label} required={attribute.required} bind:value />
+{/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte
index 81aeb3020b..3790fc0d88 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte
@@ -15,4 +15,10 @@
     });
 </script>
 
-<InputSelect bind:value {options} {id} {label} />
+<InputSelect
+    bind:value
+    {options}
+    {id}
+    {label}
+    placeholder="Select a value"
+    showLabel={!!label?.length} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte
index a53dd36793..ab9b93a92c 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte
@@ -8,4 +8,10 @@
     export let attribute: Models.AttributeString;
 </script>
 
-<InputText {id} {label} required={attribute.required} maxlength={attribute.size} bind:value />
+<InputText
+    {id}
+    {label}
+    showLabel={!!label?.length}
+    required={attribute.required}
+    maxlength={attribute.size}
+    bind:value />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
index a00245c7c9..6dfa8e3bde 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { page } from '$app/stores';
     import { CardGrid, Box, Alert } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputTags } from '$lib/elements/forms';
@@ -11,8 +10,8 @@
     import Delete from './_delete.svelte';
 
     let showDelete = false;
-    let fileRead = $doc?.$read;
-    let fileWrite = $doc?.$write;
+    let read = $doc?.$read;
+    let write = $doc?.$write;
     let arePermsDisabled = true;
 
     async function updatePermissions() {
@@ -21,11 +20,11 @@
                 $doc.collectionId,
                 $doc.$id,
                 $doc.data,
-                fileRead,
-                fileWrite
+                read,
+                write
             );
-            $doc.$read = fileRead;
-            $doc.$write = fileWrite;
+            $doc.$read = read;
+            $doc.$write = write;
             arePermsDisabled = true;
             addNotification({
                 message: 'Permissions have been updated',
@@ -39,13 +38,13 @@
         }
     }
 
-    $: if (fileRead || fileWrite) {
-        if (fileRead) {
-            if (JSON.stringify(fileRead) !== JSON.stringify($doc.$read)) {
+    $: if (read || write) {
+        if (read) {
+            if (JSON.stringify(read) !== JSON.stringify($doc.$read)) {
                 arePermsDisabled = false;
             } else arePermsDisabled = true;
-        } else if (fileWrite) {
-            if (JSON.stringify(fileWrite) !== JSON.stringify($doc.$write)) {
+        } else if (write) {
+            if (JSON.stringify(write) !== JSON.stringify($doc.$write)) {
                 arePermsDisabled = false;
             } else arePermsDisabled = true;
         }
@@ -67,6 +66,7 @@
                 </div>
             </svelte:fragment>
         </CardGrid>
+        <Document />
 
         <CardGrid>
             <h6 class="heading-level-7">Update Permissions</h6>
@@ -87,12 +87,12 @@
                         id="read"
                         label="Read Access"
                         placeholder="User ID, Team ID, or Role"
-                        bind:tags={fileRead} />
+                        bind:tags={read} />
                     <InputTags
                         id="write"
                         label="Write Access"
                         placeholder="User ID, Team ID, or Role"
-                        bind:tags={fileWrite} />
+                        bind:tags={write} />
                 </ul>
             </svelte:fragment>
 
@@ -104,7 +104,6 @@
                     }}>Update</Button>
             </svelte:fragment>
         </CardGrid>
-        <Document />
 
         <CardGrid>
             <h6 class="heading-level-7">Delete document</h6>

From 57f151ffc1834c68dd5936cfe7a985072e91f997 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 2 Aug 2022 11:01:00 +0200
Subject: [PATCH 32/75] feat: add empty buckets

---
 .../database/[database]/index.svelte          | 24 ++++++++-----------
 .../console/[project]/databases/index.svelte  | 24 ++++++++-----------
 2 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/index.svelte b/src/routes/console/[project]/databases/database/[database]/index.svelte
index 69bbea092d..1c5e2e374e 100644
--- a/src/routes/console/[project]/databases/database/[database]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/index.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, Bucket } from '$lib/components';
+    import { Empty, EmptyBucket, Pagination, Copy, Bucket } from '$lib/components';
     import { Pill } from '$lib/elements';
     import type { Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -56,20 +56,16 @@
                 </Bucket>
             {/each}
             {#if $collections.total % 2 !== 0}
-                <article class="card is-border-dashed">
-                    <div class="bucket">
-                        <div class="u-flex u-flex-vertical u-cross-center">
-                            <div class="common-section">
-                                <Button secondary round on:click={() => (showCreate = true)}>
-                                    <i class="icon-plus" />
-                                </Button>
-                            </div>
-                            <div class="common-section">
-                                <p>Create a new collection</p>
-                            </div>
-                        </div>
+                <EmptyBucket on:click={() => (showCreate = true)}>
+                    <div class="common-section">
+                        <Button secondary round>
+                            <i class="icon-plus" />
+                        </Button>
                     </div>
-                </article>
+                    <div class="common-section">
+                        <p>Create a new collection</p>
+                    </div>
+                </EmptyBucket>
             {/if}
         </div>
 
diff --git a/src/routes/console/[project]/databases/index.svelte b/src/routes/console/[project]/databases/index.svelte
index 283586e3bf..c6e86f1164 100644
--- a/src/routes/console/[project]/databases/index.svelte
+++ b/src/routes/console/[project]/databases/index.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, Bucket } from '$lib/components';
+    import { Empty, EmptyBucket, Pagination, Copy, Bucket } from '$lib/components';
     import { Pill } from '$lib/elements';
     import type { Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -47,20 +47,16 @@
                 </Bucket>
             {/each}
             {#if $databaseList.total % 2 !== 0}
-                <article class="card is-border-dashed">
-                    <div class="bucket">
-                        <div class="u-flex u-flex-vertical u-cross-center">
-                            <div class="common-section">
-                                <Button secondary round on:click={() => (showCreate = true)}>
-                                    <i class="icon-plus" />
-                                </Button>
-                            </div>
-                            <div class="common-section">
-                                <p>Create a new database</p>
-                            </div>
-                        </div>
+                <EmptyBucket on:click={() => (showCreate = true)}>
+                    <div class="common-section">
+                        <Button secondary round>
+                            <i class="icon-plus" />
+                        </Button>
                     </div>
-                </article>
+                    <div class="common-section">
+                        <p>Create a new database</p>
+                    </div>
+                </EmptyBucket>
             {/if}
         </div>
 

From 0d56abce17285afff5bb3e029da929b2d1e98f84 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 2 Aug 2022 18:03:55 +0200
Subject: [PATCH 33/75] fix: remove transition from wizard

---
 src/lib/layout/wizard.svelte | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 877a1f931a..ec6c659a46 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
-    import { fly, type FlyParams } from 'svelte/transition';
 
     export let show = false;
     export let title: string;
 
     const dispatch = createEventDispatcher();
-    const transitionFly: FlyParams = {
-        duration: 150,
-        y: 50
-    };
 
     const handleKeydown = (event: KeyboardEvent) => {
         if (event.key === 'Escape') {
@@ -27,7 +22,7 @@
 <svelte:window on:keydown={handleKeydown} />
 
 {#if show}
-    <section class="wizard" transition:fly={transitionFly}>
+    <section class="wizard">
         <div class="wizard-header-strip" />
         <div class="wizard-start-bg" />
         <div class="wizard-end-bg" />

From b2824bf31f0f914ae9f269e5714aee46d7fca585 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 12:34:44 +0200
Subject: [PATCH 34/75] fix: cell and tables

---
 src/lib/elements/table/cell.svelte                          | 2 --
 .../[database]/collection/[collection]/attributes.svelte    | 4 ++--
 .../[database]/collection/[collection]/index.svelte         | 2 +-
 .../[database]/collection/[collection]/indexes.svelte       | 6 +++---
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/lib/elements/table/cell.svelte b/src/lib/elements/table/cell.svelte
index e350b4a718..8d45be20a9 100644
--- a/src/lib/elements/table/cell.svelte
+++ b/src/lib/elements/table/cell.svelte
@@ -2,13 +2,11 @@
     export let title = '';
     export let onlyDesktop = false;
     export let width: number = null;
-    export let main = false;
     export let showOverflow = false;
 </script>
 
 <div
     width={width?.toString() ?? ''}
-    class:is-main={main}
     class="table-col"
     class:u-overflow-visible={showOverflow}
     class:is-only-desktop={onlyDesktop}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index 523ceb45b1..d5c81962fe 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -56,9 +56,9 @@
             <TableBody>
                 {#each $collection.attributes as attribute, index}
                     <TableRow>
-                        <TableCell main={true} title="Key">
+                        <TableCell title="Key">
                             <div class="u-flex u-main-space-between">
-                                {attribute.key}
+                                <span class="text u-trim">{attribute.key}</span>
                                 {#if attribute.status !== 'available'}
                                     <Pill
                                         warning={attribute.status === 'processing'}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
index 683239c649..ad2711895c 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
@@ -59,7 +59,7 @@
                     {#each $documentList.documents as document}
                         <TableRowLink
                             href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}>
-                            <TableCell main width={230}>
+                            <TableCell width={230}>
                                 <Copy value={document.$id}>
                                     <Pill button>
                                         <span class="icon-duplicate" aria-hidden="true" />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
index b8728212fa..732bacd4fc 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
@@ -79,9 +79,9 @@
             <TableBody>
                 {#each $indexList.indexes as index, i}
                     <TableRow>
-                        <TableCellText title="Key">
+                        <TableCell title="Key">
                             <div class="u-flex u-main-space-between">
-                                {index.key}
+                                <span class="text u-trim"> {index.key}</span>
                                 {#if index.status !== 'available'}
                                     <Pill
                                         warning={index.status === 'processing'}
@@ -92,7 +92,7 @@
                                     </Pill>
                                 {/if}
                             </div>
-                        </TableCellText>
+                        </TableCell>
                         <TableCellText title="Type">{index.type}</TableCellText>
                         <TableCellText title="Attributes">
                             {index.attributes}

From 3bb68b55e98b586f915ba205f5cb6b5cbdfd6b04 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 12:33:20 +0200
Subject: [PATCH 35/75] feat: add some logic to the steps component

---
 src/lib/components/steps.svelte               | 13 +++++-
 .../collection/[collection]/_create.svelte    | 42 ++++++-------------
 2 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/steps.svelte b/src/lib/components/steps.svelte
index 37392948c3..14577f6258 100644
--- a/src/lib/components/steps.svelte
+++ b/src/lib/components/steps.svelte
@@ -1,3 +1,14 @@
+<script lang="ts">
+    import Step from './step.svelte';
+
+    export let steps: string[];
+    export let currentStep = 0;
+</script>
+
 <ol class="steps">
-    <slot />
+    {#each steps as step, index}
+        <Step current={currentStep === index} completed={index < currentStep}>
+            {step}
+        </Step>
+    {/each}
 </ol>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index 2a4304e3ad..1dbd4d5bb2 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { Step, Steps, Alert } from '$lib/components';
+    import { Steps, Alert } from '$lib/components';
     import { Form, Button, InputTags } from '$lib/elements/forms';
     import { attributeList } from './store';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -14,10 +14,7 @@
     export let showCreate = false;
 
     let newDocument = {};
-    let steps = [
-        { title: 'Create data', current: true, completed: false },
-        { title: 'Set permissions', current: false, completed: false }
-    ];
+    let steps = ['Create data', 'Set permissions'];
     let currentStep = 0;
     let read: string[];
     let write: string[];
@@ -36,34 +33,19 @@
             //     read,
             //     write
             // );
-        } catch (error) {
             console.log('test');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     };
-
-    const nextStep = () => {
-        steps[currentStep].current = false;
-        steps[currentStep].completed = true;
-        currentStep++;
-        steps[currentStep].current = true;
-    };
-    const prevStep = () => {
-        steps[currentStep].current = false;
-        currentStep--;
-        steps[currentStep].current = true;
-        steps[currentStep].completed = false;
-    };
 </script>
 
 <Wizard title="Create document" bind:show={showCreate}>
     <svelte:fragment slot="aside">
-        <Steps>
-            {#each steps as step}
-                <Step current={step.current} completed={step.completed}>
-                    {step.title}
-                </Step>
-            {/each}
-        </Steps>
+        <Steps {steps} bind:currentStep />
     </svelte:fragment>
     <Form on:submit={create}>
         {#if currentStep === 0}
@@ -174,13 +156,13 @@
             <div class="u-flex u-main-end u-gap-12">
                 {#if currentStep === 0}
                     <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-                    <Button on:click={nextStep}>Next</Button>
+                    <Button on:click={() => currentStep++}>Next</Button>
                 {:else if currentStep === steps.length - 1}
-                    <Button secondary on:click={prevStep}>Back</Button>
+                    <Button secondary on:click={() => currentStep--}>Back</Button>
                     <Button submit>Create</Button>
                 {:else}
-                    <Button secondary on:click={prevStep}>Back</Button>
-                    <Button on:click={nextStep}>Next</Button>
+                    <Button secondary on:click={() => currentStep--}>Back</Button>
+                    <Button on:click={() => currentStep++}>Next</Button>
                 {/if}
             </div>
         </div>

From 27e1b16f4a873b2c72b0534d76d8802a1d645352 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 5 Aug 2022 11:34:39 +0200
Subject: [PATCH 36/75] feat: add substeps

---
 src/lib/components/index.ts                    |  1 +
 src/lib/components/step.svelte                 | 18 +++++++++++++++++-
 src/lib/components/steps.svelte                | 17 +++++++++++------
 src/lib/components/subStep.svelte              | 12 ++++++++++++
 .../collection/[collection]/_create.svelte     |  2 +-
 5 files changed, 42 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/components/subStep.svelte

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index e01a683a0c..fc7c80428f 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -28,4 +28,5 @@ export { default as Search } from './search.svelte';
 export { default as Bucket } from './bucket.svelte';
 export { default as Steps } from './steps.svelte';
 export { default as Step } from './step.svelte';
+export { default as SubStep } from './subStep.svelte';
 export { default as EmptyBucket } from './emptyBucket.svelte';
diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index 07522aa8ef..27ff17758a 100644
--- a/src/lib/components/step.svelte
+++ b/src/lib/components/step.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
+    import SubStep from './subStep.svelte';
+
     export let completed = false;
     export let current = false;
+    export let currentSub = 0;
+    export let step: { text: string; substeps?: { text: string }[] };
 </script>
 
 <li
@@ -8,5 +12,17 @@
     class:is-done={completed}
     class:is-current={current}
     aria-label={` ${completed ? 'done' : current ? 'current' : ''} step`}>
-    <span class="text"><slot /></span>
+    <div class="step-item-content">
+        <span class="text">{step.text}</span>
+
+        {#if step.substeps}
+            <ul class="steps-sub">
+                {#each step.substeps as step, index}
+                    <SubStep current={currentSub === index} completed={index < currentSub}>
+                        {step.text}
+                    </SubStep>
+                {/each}
+            </ul>
+        {/if}
+    </div>
 </li>
diff --git a/src/lib/components/steps.svelte b/src/lib/components/steps.svelte
index 14577f6258..c22a069d4f 100644
--- a/src/lib/components/steps.svelte
+++ b/src/lib/components/steps.svelte
@@ -1,14 +1,19 @@
 <script lang="ts">
     import Step from './step.svelte';
 
-    export let steps: string[];
+    export let steps: { text: string; substeps?: { text: string }[] }[];
     export let currentStep = 0;
+    export let currentSub = 0;
 </script>
 
 <ol class="steps">
-    {#each steps as step, index}
-        <Step current={currentStep === index} completed={index < currentStep}>
-            {step}
-        </Step>
-    {/each}
+    {#if steps}
+        {#each steps as step, index}
+            <Step
+                bind:currentSub
+                current={currentStep === index}
+                completed={index < currentStep}
+                {step} />
+        {/each}
+    {/if}
 </ol>
diff --git a/src/lib/components/subStep.svelte b/src/lib/components/subStep.svelte
new file mode 100644
index 0000000000..a579faad4b
--- /dev/null
+++ b/src/lib/components/subStep.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    export let completed = false;
+    export let current = false;
+</script>
+
+<li
+    class="steps-sub-item"
+    class:is-done={completed}
+    class:is-current={current}
+    aria-label={` ${completed ? 'done' : current ? 'current' : ''} step`}>
+    <span class="text"><slot /></span>
+</li>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index 1dbd4d5bb2..9983395d08 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -14,7 +14,7 @@
     export let showCreate = false;
 
     let newDocument = {};
-    let steps = ['Create data', 'Set permissions'];
+    let steps = [{ text: 'Create data' }, { text: 'Set permissions' }];
     let currentStep = 0;
     let read: string[];
     let write: string[];

From b0ec0820b5741b48bb78a6a86da907bbbbc5497d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 5 Aug 2022 11:35:02 +0200
Subject: [PATCH 37/75] chore: bump to 0.0.0-38

---
 package-lock.json | 28 ++++++++++++++--------------
 package.json      |  4 ++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 965d160cad..39b121b5af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-37",
-                "@aw-labs/ui": "0.0.0-37",
+                "@aw-labs/icons": "0.0.0-38",
+                "@aw-labs/ui": "0.0.0-38",
                 "echarts": "^5.3.3"
             },
             "devDependencies": {
@@ -69,14 +69,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-37",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-37.tgz",
-            "integrity": "sha512-4II+SFnVlDWuFwlzU2pMAy5y9Bq09bOEP1mEknZ+0BlPhDlvks742N5m0cNjlTQFCZwa/Y5YxzLNXgVszFqEfA=="
+            "version": "0.0.0-38",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-38.tgz",
+            "integrity": "sha512-70A7soA77g2irCqFmnpl+GfCuryxXXyf98vTUQ0PABSl/F8+mXamgsf+Mmg3MXW7MDHrNVAFyuaD/J6es67RUg=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-37",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-37.tgz",
-            "integrity": "sha512-OxAM0ZDedo6yipN3I5CcHt1Jbc7v3vZk9k+hAVWc7F6OPF5JJ7R3ZadVvyl4fxEMo2ooK+jbbkeG62/PxgwEWw==",
+            "version": "0.0.0-38",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-38.tgz",
+            "integrity": "sha512-ryBeWcC4nHLIfqTD0RgrLuBA3yb1iLFIlzE9/AtxMR+MkLPVVFyyrNGPOfIiyMX4gJVbVBcPifA4Tb9vPfMtLg==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -8060,14 +8060,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-37",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-37.tgz",
-            "integrity": "sha512-4II+SFnVlDWuFwlzU2pMAy5y9Bq09bOEP1mEknZ+0BlPhDlvks742N5m0cNjlTQFCZwa/Y5YxzLNXgVszFqEfA=="
+            "version": "0.0.0-38",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-38.tgz",
+            "integrity": "sha512-70A7soA77g2irCqFmnpl+GfCuryxXXyf98vTUQ0PABSl/F8+mXamgsf+Mmg3MXW7MDHrNVAFyuaD/J6es67RUg=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-37",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-37.tgz",
-            "integrity": "sha512-OxAM0ZDedo6yipN3I5CcHt1Jbc7v3vZk9k+hAVWc7F6OPF5JJ7R3ZadVvyl4fxEMo2ooK+jbbkeG62/PxgwEWw==",
+            "version": "0.0.0-38",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-38.tgz",
+            "integrity": "sha512-ryBeWcC4nHLIfqTD0RgrLuBA3yb1iLFIlzE9/AtxMR+MkLPVVFyyrNGPOfIiyMX4gJVbVBcPifA4Tb9vPfMtLg==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 973a854ac4..8a0ead0d6e 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-37",
-        "@aw-labs/ui": "0.0.0-37",
+        "@aw-labs/icons": "0.0.0-38",
+        "@aw-labs/ui": "0.0.0-38",
         "echarts": "^5.3.3"
     },
     "devDependencies": {

From c8275bbceb31371d75e17883c5ec508fe44df162 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 5 Aug 2022 14:03:05 +0200
Subject: [PATCH 38/75] feat: document creation

---
 .../collection/[collection]/_create.svelte    | 161 ++++++++++++------
 .../document/[document]/_document.svelte      |   7 +-
 2 files changed, 114 insertions(+), 54 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index 9983395d08..ef05e8e311 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { Steps, Alert } from '$lib/components';
-    import { Form, Button, InputTags } from '$lib/elements/forms';
+    import { Steps, Alert, InnerModal } from '$lib/components';
+    import { Form, Button, InputTags, InputText } from '$lib/elements/forms';
+    import { Pill } from '$lib/elements';
     import { attributeList } from './store';
     import { sdkForProject } from '$lib/stores/sdk';
     import { page } from '$app/stores';
@@ -14,33 +15,59 @@
     export let showCreate = false;
 
     let newDocument = {};
-    let steps = [{ text: 'Create data' }, { text: 'Set permissions' }];
-    let currentStep = 0;
     let read: string[];
     let write: string[];
+    let id: string;
+    let showCustomId = false;
+    let steps = [{ text: 'Create data' }, { text: 'Set permissions' }];
+    let currentStep = 0;
 
     onMount(async () => {
         await attributeList.load($page.params.collection);
-        $attributeList.attributes.forEach((attr) => (newDocument[attr.key] = [null]));
+        initializeDocument();
     });
 
+    const initializeDocument = () => {
+        $attributeList.attributes.forEach((attr) => {
+            if (attr.array) {
+                newDocument[attr.key] = [null];
+            } else {
+                newDocument[attr.key] = null;
+            }
+        });
+    };
+
     const create = async () => {
-        try {
-            // await sdkForProject.databases.createDocument(
-            //    $page.params.collection,
-            //     'unique()',
-            //     newDocument,
-            //     read,
-            //     write
-            // );
-            console.log('test');
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
+        if (currentStep < steps.length - 1) {
+            currentStep++;
+        } else {
+            try {
+                await sdkForProject.databases.createDocument(
+                    $page.params.collection,
+                    id ?? 'unique()',
+                    newDocument,
+                    read,
+                    write
+                );
+                addNotification({
+                    message: 'Document has been created',
+                    type: 'success'
+                });
+                showCreate = false;
+            } catch (error) {
+                addNotification({
+                    message: error.message,
+                    type: 'error'
+                });
+            }
         }
     };
+
+    $: if (!showCreate) {
+        initializeDocument();
+        currentStep = 0;
+        read = write = [];
+    }
 </script>
 
 <Wizard title="Create document" bind:show={showCreate}>
@@ -53,16 +80,17 @@
                 <h1 class="heading-level-6">Create document data</h1>
                 <p>Provide document data based on attributes you created earlier.</p>
             </header>
-            {#each $attributeList?.attributes?.filter((a) => a.status === 'available') as attribute}
-                {#if attribute.array}
-                    <ul class="form-list">
+            <ul class="form-list">
+                {#each $attributeList?.attributes?.filter((a) => a.status === 'available') as attribute}
+                    {@const label = attribute.required ? `${attribute.key}*` : attribute.key}
+                    {#if attribute.array}
                         {#each newDocument[attribute.key] as _v, index}
                             <li class="form-item is-multiple">
                                 <div class="form-item-part u-stretch">
                                     <Attribute
                                         {attribute}
                                         id={`${attribute.key}-${index}`}
-                                        label={index === 0 ? attribute.key : ''}
+                                        label={index === 0 ? label : ''}
                                         bind:value={newDocument[attribute.key][index]} />
                                 </div>
                                 <div class="form-item-part u-cross-child-end">
@@ -83,7 +111,7 @@
                                     <Attribute
                                         {attribute}
                                         id={`${attribute.key}-0`}
-                                        label={attribute.key}
+                                        {label}
                                         bind:value={newDocument[attribute.key][0]} />
                                 </div>
                                 <div class="form-item-part u-cross-child-end">
@@ -93,33 +121,66 @@
                                 </div>
                             </li>
                         {/each}
-                    </ul>
 
-                    <Button
-                        text
-                        on:click={() => {
-                            if (
-                                newDocument[attribute.key][
-                                    newDocument[attribute.key].length - 1
-                                ] !== null
-                            ) {
-                                newDocument[attribute.key].push(null);
-                                newDocument = newDocument;
-                            }
-                        }}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add Attribute</span>
-                    </Button>
+                        <Button
+                            text
+                            disabled={newDocument[attribute.key][
+                                newDocument[attribute.key].length - 1
+                            ] === null}
+                            on:click={() => {
+                                {
+                                    newDocument[attribute.key].push(null);
+                                    newDocument = newDocument;
+                                }
+                            }}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text"> Add attribute</span>
+                        </Button>
+                    {:else}
+                        <ul class="form-list">
+                            <Attribute
+                                {attribute}
+                                id={attribute.key}
+                                {label}
+                                bind:value={newDocument[attribute.key]} />
+                        </ul>
+                    {/if}
+                {/each}
+
+                {#if !showCustomId}
+                    <div>
+                        <Pill button on:click={() => (showCustomId = !showCustomId)}
+                            ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                                Document ID
+                            </span></Pill>
+                    </div>
                 {:else}
-                    <ul class="form-list">
-                        <Attribute
-                            {attribute}
-                            id={attribute.key}
-                            label={attribute.key}
-                            bind:value={newDocument[attribute.key]} />
-                    </ul>
+                    <InnerModal bind:show={showCustomId}>
+                        <svelte:fragment slot="title">User ID</svelte:fragment>
+                        Enter a custom document ID. Leave blank for a randomly generated one.
+                        <svelte:fragment slot="content">
+                            <div class="form">
+                                <InputText
+                                    id="id"
+                                    label="Custom ID"
+                                    showLabel={false}
+                                    placeholder="Enter ID"
+                                    autofocus={true}
+                                    bind:value={id} />
+
+                                <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
+                                    <span
+                                        class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
+                                        aria-hidden="true" />
+                                    <span class="text u-line-height-1-5"
+                                        >Allowed characters: alphanumeric, hyphen, non-leading
+                                        underscore, period</span>
+                                </div>
+                            </div>
+                        </svelte:fragment>
+                    </InnerModal>
                 {/if}
-            {/each}
+            </ul>
         {:else if currentStep === 1}
             <header class="form-header">
                 <h1 class="heading-level-6">Set Permissions</h1>
@@ -156,13 +217,13 @@
             <div class="u-flex u-main-end u-gap-12">
                 {#if currentStep === 0}
                     <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-                    <Button on:click={() => currentStep++}>Next</Button>
+                    <Button submit>Next</Button>
                 {:else if currentStep === steps.length - 1}
                     <Button secondary on:click={() => currentStep--}>Back</Button>
                     <Button submit>Create</Button>
                 {:else}
                     <Button secondary on:click={() => currentStep--}>Back</Button>
-                    <Button on:click={() => currentStep++}>Next</Button>
+                    <Button submit>Next</Button>
                 {/if}
             </div>
         </div>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
index 8c497ed460..8bcc87d21a 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
@@ -95,13 +95,12 @@
 
                     <Button
                         text
+                        disabled={$doc[attribute.key][$doc[attribute.key].length - 1] === null}
                         on:click={() => {
-                            if ($doc[attribute.key][$doc[attribute.key].length - 1] !== null) {
-                                doc.addAttribute(attribute.key);
-                            }
+                            doc.addAttribute(attribute.key);
                         }}>
                         <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add Attribute</span>
+                        <span class="text"> Add attribute</span>
                     </Button>
                 {:else}
                     <ul class="form-list">

From 1c249d3c360a4046034beef34011d575a00aad9d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 5 Aug 2022 14:29:27 +0200
Subject: [PATCH 39/75] chore: remove unused route

---
 .../[collection]/document/$create.svelte      | 78 -------------------
 1 file changed, 78 deletions(-)
 delete mode 100644 src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/$create.svelte

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/$create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/$create.svelte
deleted file mode 100644
index 3df7216abb..0000000000
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/$create.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Back, Card } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import { collection } from '../store';
-    import { doc } from './[document]/store';
-    import { addNotification } from '$lib/stores/notifications';
-    import Document from './[document]/_document.svelte';
-    import { goto } from '$app/navigation';
-    import InputCustomId from '$lib/elements/forms/inputCustomId.svelte';
-    import { Container, Cover } from '$lib/layout';
-    import { base } from '$app/paths';
-
-    $: projectId = $page.params.project;
-
-    onMount(() => {
-        doc.set({
-            $collection: $page.params.collection,
-            $id: null,
-            $createdAt: null,
-            $updatedAt: null,
-            $read: [],
-            $write: []
-        });
-    });
-
-    const createDocument = async () => {
-        try {
-            const created = await sdkForProject.databases.createDocument(
-                $collection.$id,
-                $doc.$id,
-                {
-                    ...$doc,
-                    $id: undefined
-                },
-                $doc.$read,
-                $doc.$write
-            );
-            addNotification({
-                message: 'Document was created!',
-                type: 'success'
-            });
-            await goto(
-                `${base}/console/${projectId}/database/collection/${created.$collection}/document/${created.$id}`
-            );
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    };
-</script>
-
-<svelte:head>
-    <title>Appwrite - Document</title>
-</svelte:head>
-{#if $doc && $collection}
-    <Cover>
-        <Back href={`${base}/console/${projectId}/database/collection/${$collection.$id}`}>
-            Collection - {$collection.name}
-        </Back>
-        <h1>Create Document</h1>
-    </Cover>
-    <Container>
-        <Card>
-            <Form on:submit={createDocument}>
-                <InputCustomId id="id" label="Document ID" bind:value={$doc.$id} />
-                <Document />
-                <Button submit>Create</Button>
-            </Form>
-        </Card>
-    </Container>
-{:else}
-    <div aria-busy="true" />
-{/if}

From 404e391c89bcb22ba568b6dbd2bc76b96bc5af9f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 5 Aug 2022 14:31:45 +0200
Subject: [PATCH 40/75] typo fixes

---
 .../database/[database]/collection/[collection]/_create.svelte  | 2 +-
 .../[collection]/document/[document]/_document.svelte           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index ef05e8e311..3e639d6e47 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -134,7 +134,7 @@
                                 }
                             }}>
                             <span class="icon-plus" aria-hidden="true" />
-                            <span class="text"> Add attribute</span>
+                            <span class="text"> Add item</span>
                         </Button>
                     {:else}
                         <ul class="form-list">
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
index 8bcc87d21a..79d3b80d1e 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
@@ -100,7 +100,7 @@
                             doc.addAttribute(attribute.key);
                         }}>
                         <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add attribute</span>
+                        <span class="text"> Add item</span>
                     </Button>
                 {:else}
                     <ul class="form-list">

From c7c503bd4bc9ca0fbc43669475b9f8db7a759df4 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 5 Aug 2022 15:55:48 +0200
Subject: [PATCH 41/75] feat: add steps to number input to support float

---
 src/lib/elements/forms/inputNumber.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 8657598bd2..31c85c1007 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -13,6 +13,7 @@
     export let autofocus = false;
     export let maxlength: number = null;
     export let minlength: number = null;
+    export let step: number | 'any' = 1;
 
     let element: HTMLInputElement;
 
@@ -34,6 +35,7 @@
             {minlength}
             {maxlength}
             {readonly}
+            {step}
             type="number"
             class="input-text"
             bind:value

From fa5209411b36dd7832e59ea95f49bdad476f1ff0 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 5 Aug 2022 15:56:21 +0200
Subject: [PATCH 42/75] feat: create & implement choice input

---
 src/lib/elements/forms/index.ts               |  1 +
 src/lib/elements/forms/inputChoice.svelte     | 31 +++++++++++++++++++
 .../[collection]/attributes/_boolean.svelte   | 19 +++++++++---
 .../[collection]/attributes/_email.svelte     | 10 +++---
 .../[collection]/attributes/_enum.svelte      | 15 ++++++---
 .../[collection]/attributes/_float.svelte     | 15 ++++++---
 .../[collection]/attributes/_integer.svelte   | 10 +++---
 .../[collection]/attributes/_ip.svelte        | 10 +++---
 .../[collection]/attributes/_string.svelte    | 10 +++---
 .../[collection]/attributes/_url.svelte       | 10 +++---
 .../[document]/attributes/_integer.svelte     |  3 +-
 11 files changed, 101 insertions(+), 33 deletions(-)
 create mode 100644 src/lib/elements/forms/inputChoice.svelte

diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index 48988a2fe6..559b59d692 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -16,4 +16,5 @@ export { default as InputRadio } from './inputRadio.svelte';
 export { default as InputSelect } from './inputSelect.svelte';
 export { default as InputCheckbox } from './inputCheckbox.svelte';
 export { default as InputPhone } from './inputPhone.svelte';
+export { default as InputChoice } from './inputChoice.svelte';
 export { default as Helper } from './helper.svelte';
diff --git a/src/lib/elements/forms/inputChoice.svelte b/src/lib/elements/forms/inputChoice.svelte
new file mode 100644
index 0000000000..4f1a1319a9
--- /dev/null
+++ b/src/lib/elements/forms/inputChoice.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { FormItem } from '.';
+
+    export let type: 'checkbox' | 'switchbox' = 'checkbox';
+    export let label: string;
+    export let showLabel = true;
+    export let id: string;
+    export let value = false;
+    export let required = false;
+    export let disabled = false;
+    export let description = '';
+</script>
+
+<FormItem>
+    <label class="choice-item" for={id}>
+        <input
+            {id}
+            {disabled}
+            {required}
+            type="checkbox"
+            class:switch={type === 'switchbox'}
+            bind:checked={value} />
+
+        <div class="choice-item-content">
+            <div class:u-hide={!showLabel} class="choice-item-title">{label}</div>
+            {#if $$slots}
+                <p class="choice-item-paragraph"><slot /></p>
+            {/if}
+        </div>
+    </label>
+</FormItem>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
index 13124ee149..5d4d3942d2 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputSwitch } from '$lib/elements/forms';
+    import { InputChoice, InputSelect } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -46,6 +46,17 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
-<InputSwitch id="default" label="Default" bind:value={xdefault} disabled={overview} />
+<InputSelect
+    id="default"
+    label="Default value"
+    placeholder="Select a value"
+    options={[
+        { label: 'True', value: true },
+        { label: 'False', value: false }
+    ]}
+    bind:value={xdefault}
+    disabled={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
index 216798a7c0..d578ad0459 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -45,6 +45,8 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
index 9f589ef8a1..72ec2e062a 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputSwitch, InputSelect, InputTags } from '$lib/elements/forms';
+    import { InputChoice, InputSelect, InputTags } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -57,6 +57,13 @@
     bind:tags={elements}
     placeholder="Add elements here"
     readonly={overview} />
-<InputSelect id="default" label="Default" bind:options bind:value={xdefault} disabled={overview} />
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputSelect
+    id="default"
+    label="Default value"
+    bind:options
+    bind:value={xdefault}
+    disabled={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
index 0f7e31b309..d8324028d0 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputNumber, InputSwitch } from '$lib/elements/forms';
+    import { InputNumber, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -52,6 +52,13 @@
 <InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
 <InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
-<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputNumber
+    id="default"
+    label="Default value"
+    bind:value={xdefault}
+    readonly={overview}
+    step="any" />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
index cf3b310d73..d75b9978b9 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputNumber, InputSwitch } from '$lib/elements/forms';
+    import { InputNumber, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -52,6 +52,8 @@
 <InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
 <InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
-<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputNumber id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
index 4f31e6e9ac..5820ff44ad 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -44,6 +44,8 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
index 28a81fd3a0..fd7e4c57d4 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputNumber, InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -47,6 +47,8 @@
 </script>
 
 <InputNumber id="size" label="Size" bind:value={size} required readonly={overview} />
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
index f172de05d2..90fc386e62 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -44,6 +44,8 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
index 1bab668ea1..505f0a3bba 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
@@ -14,4 +14,5 @@
     required={attribute.required}
     minlength={attribute.min}
     maxlength={attribute.max}
-    bind:value />
+    bind:value
+    step={attribute.type === 'double' ? 'any' : 1} />

From bb1e52fcab6dc3228cdafd67e71327c83bd801f5 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 16 Aug 2022 10:56:39 +0200
Subject: [PATCH 43/75] sync

---
 .../database/[database]/collection/[collection]/_create.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index 3e639d6e47..0960f8a661 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -7,8 +7,8 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
-    import Attribute from './document/[document]/_attribute.svelte';
     import { addNotification } from '$lib/stores/notifications';
+    import Attribute from './document/[document]/_attribute.svelte';
 
     $: attributeList.load($page.params.collection);
 

From 3eba0ab884ad2f2fb3cbfa35c458b1173672898b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 10:07:54 +0200
Subject: [PATCH 44/75] small fixes

---
 .../[database]/collection/[collection]/_create.svelte        | 5 ++++-
 .../database/[database]/collection/[collection]/index.svelte | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index 0960f8a661..2805f0ad1e 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -76,12 +76,15 @@
     </svelte:fragment>
     <Form on:submit={create}>
         {#if currentStep === 0}
+            {@const attributes =
+                $attributeList?.attributes?.filter((a) => a.status === 'available') || []}
+
             <header class="form-header">
                 <h1 class="heading-level-6">Create document data</h1>
                 <p>Provide document data based on attributes you created earlier.</p>
             </header>
             <ul class="form-list">
-                {#each $attributeList?.attributes?.filter((a) => a.status === 'available') as attribute}
+                {#each attributes as attribute}
                     {@const label = attribute.required ? `${attribute.key}*` : attribute.key}
                     {#if attribute.array}
                         {#each newDocument[attribute.key] as _v, index}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
index ad2711895c..d73aaad5a6 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
@@ -48,7 +48,7 @@
 
     {#if $documentList?.total}
         <div class="table-wrapper">
-            <Table sticky>
+            <Table sticky={true}>
                 <TableHeader>
                     <TableCellHead>Document ID</TableCellHead>
                     {#each columns as column}

From 2b3cdc564c2a093a5427dbf57b1a7f509853d85a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 11:24:40 +0200
Subject: [PATCH 45/75] chore: bump to 0.0.0-48

---
 package-lock.json | 72 +++++++++--------------------------------------
 package.json      |  4 +--
 2 files changed, 16 insertions(+), 60 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 34d98e80ba..42050215df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-44",
-                "@aw-labs/ui": "0.0.0-44",
+                "@aw-labs/icons": "0.0.0-48",
+                "@aw-labs/ui": "0.0.0-48",
                 "echarts": "^5.3.3",
                 "tippy.js": "^6.3.7"
             },
@@ -76,14 +76,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-44",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-44.tgz",
-            "integrity": "sha512-nZ/YfsgFR5EYItnHKSoMmCMMeQPOUoGCsIgtcKW8iEhMjoZK8PxU8qnoLnAZOJONDSY484G9j7/yofdeXTfL8Q=="
+            "version": "0.0.0-48",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-48.tgz",
+            "integrity": "sha512-1D+mVydwpQFu9VDq5e60Lq21Q/p1AOZvPMJ1SggHJbXwkmPFfERKwX8VsvfcSyI2jCLBVqQkntxvZ+06s5aw2Q=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-44",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-44.tgz",
-            "integrity": "sha512-po8t4/8XUMCJZCwvv6hB6HmHEQQBPDqHEoJLeimZrR+HQam8bbPJ1a7jAj/JfH6mHFiE3qk0nM4PHTnHbYo4QA==",
+            "version": "0.0.0-48",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-48.tgz",
+            "integrity": "sha512-BDUGW1jRAfY+sbPWdopu5yy7vBVb9Et4gFyJ/rPHXhQsagftWYXvUP4DCsNjVhCMy7S/r6gU6e8iIpJYXaE7BQ==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -2991,22 +2991,6 @@
                 "esbuild-windows-arm64": "0.14.49"
             }
         },
-        "node_modules/esbuild-darwin-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.49.tgz",
-            "integrity": "sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A==",
-            "cpu": [
-                "arm64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "darwin"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
         "node_modules/escalade": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -3653,20 +3637,6 @@
             "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
             "dev": true
         },
-        "node_modules/fsevents": {
-            "version": "2.3.2",
-            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-            "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-            "dev": true,
-            "hasInstallScript": true,
-            "optional": true,
-            "os": [
-                "darwin"
-            ],
-            "engines": {
-                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-            }
-        },
         "node_modules/function-bind": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -7692,14 +7662,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-44",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-44.tgz",
-            "integrity": "sha512-nZ/YfsgFR5EYItnHKSoMmCMMeQPOUoGCsIgtcKW8iEhMjoZK8PxU8qnoLnAZOJONDSY484G9j7/yofdeXTfL8Q=="
+            "version": "0.0.0-48",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-48.tgz",
+            "integrity": "sha512-1D+mVydwpQFu9VDq5e60Lq21Q/p1AOZvPMJ1SggHJbXwkmPFfERKwX8VsvfcSyI2jCLBVqQkntxvZ+06s5aw2Q=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-44",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-44.tgz",
-            "integrity": "sha512-po8t4/8XUMCJZCwvv6hB6HmHEQQBPDqHEoJLeimZrR+HQam8bbPJ1a7jAj/JfH6mHFiE3qk0nM4PHTnHbYo4QA==",
+            "version": "0.0.0-48",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-48.tgz",
+            "integrity": "sha512-BDUGW1jRAfY+sbPWdopu5yy7vBVb9Et4gFyJ/rPHXhQsagftWYXvUP4DCsNjVhCMy7S/r6gU6e8iIpJYXaE7BQ==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
@@ -9996,13 +9966,6 @@
                 "esbuild-windows-arm64": "0.14.49"
             }
         },
-        "esbuild-darwin-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.49.tgz",
-            "integrity": "sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A==",
-            "dev": true,
-            "optional": true
-        },
         "escalade": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -10495,13 +10458,6 @@
             "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
             "dev": true
         },
-        "fsevents": {
-            "version": "2.3.2",
-            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-            "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-            "dev": true,
-            "optional": true
-        },
         "function-bind": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
diff --git a/package.json b/package.json
index 3d014a749d..a6fc13c8fd 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-44",
-        "@aw-labs/ui": "0.0.0-44",
+        "@aw-labs/icons": "0.0.0-48",
+        "@aw-labs/ui": "0.0.0-48",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7"
     },

From 21a0109f438a3370449e54221e9d488fc332f4c8 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 12:18:30 +0200
Subject: [PATCH 46/75] feat: add table scroll component

---
 src/lib/elements/table/index.ts               |  1 +
 src/lib/elements/table/table.svelte           |  6 +-
 src/lib/elements/table/tableScroll.svelte     |  7 +++
 .../collection/[collection]/_create.svelte    |  4 +-
 .../collection/[collection]/index.svelte      | 63 ++++++++++---------
 5 files changed, 43 insertions(+), 38 deletions(-)
 create mode 100644 src/lib/elements/table/tableScroll.svelte

diff --git a/src/lib/elements/table/index.ts b/src/lib/elements/table/index.ts
index e67c95b549..b1f0d6082e 100644
--- a/src/lib/elements/table/index.ts
+++ b/src/lib/elements/table/index.ts
@@ -1,4 +1,5 @@
 export { default as Table } from './table.svelte';
+export { default as TableScroll } from './tableScroll.svelte';
 export { default as TableBody } from './body.svelte';
 export { default as TableHeader } from './header.svelte';
 export { default as TableFooter } from './footer.svelte';
diff --git a/src/lib/elements/table/table.svelte b/src/lib/elements/table/table.svelte
index 96354927ae..465d4c8f95 100644
--- a/src/lib/elements/table/table.svelte
+++ b/src/lib/elements/table/table.svelte
@@ -1,7 +1,3 @@
-<script>
-    export let sticky = false;
-</script>
-
-<div class:is-sticky-scroll={sticky} class="table is-vertical u-margin-block-start-32" role="table">
+<div class="table is-vertical u-margin-block-start-32" role="table">
     <slot />
 </div>
diff --git a/src/lib/elements/table/tableScroll.svelte b/src/lib/elements/table/tableScroll.svelte
new file mode 100644
index 0000000000..77f37c60ae
--- /dev/null
+++ b/src/lib/elements/table/tableScroll.svelte
@@ -0,0 +1,7 @@
+<div class="table-with-scroll u-margin-block-start-32">
+    <div class="table-wrapper">
+        <div class="table is-sticky-scroll" role="table">
+            <slot />
+        </div>
+    </div>
+</div>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index 2805f0ad1e..fc72762bd5 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -10,8 +10,6 @@
     import { addNotification } from '$lib/stores/notifications';
     import Attribute from './document/[document]/_attribute.svelte';
 
-    $: attributeList.load($page.params.collection);
-
     export let showCreate = false;
 
     let newDocument = {};
@@ -63,6 +61,8 @@
         }
     };
 
+    $: attributeList.load($page.params.collection);
+
     $: if (!showCreate) {
         initializeDocument();
         currentStep = 0;
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
index d73aaad5a6..d8de70b50a 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import {
-        Table,
+        TableScroll,
         TableRowLink,
         TableBody,
         TableHeader,
@@ -47,36 +47,35 @@
     </div>
 
     {#if $documentList?.total}
-        <div class="table-wrapper">
-            <Table sticky={true}>
-                <TableHeader>
-                    <TableCellHead>Document ID</TableCellHead>
-                    {#each columns as column}
-                        <TableCellHead>{column.title}</TableCellHead>
-                    {/each}
-                </TableHeader>
-                <TableBody>
-                    {#each $documentList.documents as document}
-                        <TableRowLink
-                            href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}>
-                            <TableCell width={230}>
-                                <Copy value={document.$id}>
-                                    <Pill button>
-                                        <span class="icon-duplicate" aria-hidden="true" />
-                                        <span class="text u-trim-start">{document.$id}</span>
-                                    </Pill>
-                                </Copy>
+        <TableScroll>
+            <TableHeader>
+                <TableCellHead>Document ID</TableCellHead>
+                {#each columns as column}
+                    <TableCellHead>{column.title}</TableCellHead>
+                {/each}
+            </TableHeader>
+            <TableBody>
+                {#each $documentList.documents as document}
+                    <TableRowLink
+                        href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}>
+                        <TableCell width={230}>
+                            <Copy value={document.$id}>
+                                <Pill button>
+                                    <span class="icon-duplicate" aria-hidden="true" />
+                                    <span class="text u-trim-start">{document.$id}</span>
+                                </Pill>
+                            </Copy>
+                        </TableCell>
+                        {#each columns as column}
+                            <TableCell>
+                                {document[column.key] ?? 'n/a'}
                             </TableCell>
-                            {#each columns as column}
-                                <TableCell>
-                                    {document[column.key] ?? 'n/a'}
-                                </TableCell>
-                            {/each}
-                        </TableRowLink>
-                    {/each}
-                </TableBody>
-            </Table>
-        </div>
+                        {/each}
+                    </TableRowLink>
+                {/each}
+            </TableBody>
+        </TableScroll>
+
         <div class="u-flex common-section u-main-space-between">
             <p class="text">Total results: {$documentList.total}</p>
             <Pagination {limit} bind:offset sum={$documentList.total} />
@@ -100,4 +99,6 @@
     {/if}
 </Container>
 
-<Create bind:showCreate />
+{#if showCreate}
+    <Create bind:showCreate />
+{/if}

From ff0d57f91dc908f6b6100b2a8f500a95e4be5b25 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 12:50:40 +0200
Subject: [PATCH 47/75] fix: racing condition for tabs

---
 .../[database]/collection/[collection]/__layout.svelte    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
index 045799037f..d053dc7ba3 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
@@ -4,7 +4,7 @@
     import { page } from '$app/stores';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
-    import { collection } from './store';
+    import { collection, documentList } from './store';
 
     const databaseId = $page.params.database;
     const collectionId = $page.params.collection;
@@ -18,7 +18,9 @@
         if ($collection?.$id !== collectionId) {
             await collection.load(collectionId);
         }
-
+        if ($collection) {
+            await documentList.load($collection.$id, [], 12, 0);
+        }
         updateLayout({
             navigate: event,
             title: $collection.name,
@@ -58,6 +60,6 @@
     <title>Appwrite - {$collection?.name ?? 'Collection'}</title>
 </svelte:head>
 
-{#if $collection}
+{#if $collection && $documentList}
     <slot />
 {/if}

From 24924e49cd530af05c819df2c8ecc8819aa70818 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 16:18:11 +0200
Subject: [PATCH 48/75] typo: capitalization

---
 .../[project]/databases/database/[database]/index.svelte        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/index.svelte b/src/routes/console/[project]/databases/database/[database]/index.svelte
index 1c5e2e374e..32697c2b9a 100644
--- a/src/routes/console/[project]/databases/database/[database]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/index.svelte
@@ -47,7 +47,7 @@
                     <svelte:fragment slot="title">{collection.name}</svelte:fragment>
                     <svelte:fragment slot="status">
                         {#if !collection.enabled}
-                            <Pill>Disabled</Pill>
+                            <Pill>disabled</Pill>
                         {/if}</svelte:fragment>
 
                     <Copy value={collection.$id}>

From 9d8b78aaa1c88f75b3665fbfe147e07a0030f496 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 1 Sep 2022 10:17:34 +0200
Subject: [PATCH 49/75] feat: small design improvement

---
 package-lock.json                             | 28 +++++++++----------
 package.json                                  |  4 +--
 src/lib/components/cardGrid.svelte            |  2 +-
 src/lib/components/emptyBucket.svelte         |  6 ++--
 .../collection/[collection]/settings.svelte   | 10 +++----
 .../database/[database]/index.svelte          |  6 ++--
 .../console/[project]/databases/index.svelte  |  6 ++--
 7 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e5f4958f1d..37dbb83b72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^1.0.0-0",
-                "@aw-labs/icons": "0.0.0-48",
-                "@aw-labs/ui": "0.0.0-48",
+                "@aw-labs/icons": "0.0.0-52",
+                "@aw-labs/ui": "0.0.0-52",
                 "echarts": "^5.3.3",
                 "tippy.js": "^6.3.7",
                 "web-vitals": "^2.1.4"
@@ -77,14 +77,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-48",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-48.tgz",
-            "integrity": "sha512-1D+mVydwpQFu9VDq5e60Lq21Q/p1AOZvPMJ1SggHJbXwkmPFfERKwX8VsvfcSyI2jCLBVqQkntxvZ+06s5aw2Q=="
+            "version": "0.0.0-52",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-52.tgz",
+            "integrity": "sha512-A2bqLMTETaWUYiXuruw8zkW292rjGOeAtII+FbgasHkoJvC8cf2Ne2av4rzqenJdx6zRDQTRmwJl8FW7hcwI8Q=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-48",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-48.tgz",
-            "integrity": "sha512-BDUGW1jRAfY+sbPWdopu5yy7vBVb9Et4gFyJ/rPHXhQsagftWYXvUP4DCsNjVhCMy7S/r6gU6e8iIpJYXaE7BQ==",
+            "version": "0.0.0-52",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-52.tgz",
+            "integrity": "sha512-4xS+rCd/UDI+p0JMceIbNO4uZ3HYz5TcfCWdgHFA5seBJ6rN0wS/bZPxjHd95BL0on5RtruME0t151gD4dFFxQ==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7668,14 +7668,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-48",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-48.tgz",
-            "integrity": "sha512-1D+mVydwpQFu9VDq5e60Lq21Q/p1AOZvPMJ1SggHJbXwkmPFfERKwX8VsvfcSyI2jCLBVqQkntxvZ+06s5aw2Q=="
+            "version": "0.0.0-52",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-52.tgz",
+            "integrity": "sha512-A2bqLMTETaWUYiXuruw8zkW292rjGOeAtII+FbgasHkoJvC8cf2Ne2av4rzqenJdx6zRDQTRmwJl8FW7hcwI8Q=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-48",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-48.tgz",
-            "integrity": "sha512-BDUGW1jRAfY+sbPWdopu5yy7vBVb9Et4gFyJ/rPHXhQsagftWYXvUP4DCsNjVhCMy7S/r6gU6e8iIpJYXaE7BQ==",
+            "version": "0.0.0-52",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-52.tgz",
+            "integrity": "sha512-4xS+rCd/UDI+p0JMceIbNO4uZ3HYz5TcfCWdgHFA5seBJ6rN0wS/bZPxjHd95BL0on5RtruME0t151gD4dFFxQ==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 842ebccfc2..73f4f7fb6c 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "0.0.0-48",
-        "@aw-labs/ui": "0.0.0-48",
+        "@aw-labs/icons": "0.0.0-52",
+        "@aw-labs/ui": "0.0.0-52",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7",
         "web-vitals": "^2.1.4"
diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
index f5712dac1e..665e642b69 100644
--- a/src/lib/components/cardGrid.svelte
+++ b/src/lib/components/cardGrid.svelte
@@ -7,7 +7,7 @@
         <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
             <slot />
         </div>
-        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-32">
+        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-24">
             <slot name="aside" />
         </div>
     </div>
diff --git a/src/lib/components/emptyBucket.svelte b/src/lib/components/emptyBucket.svelte
index b3a420871b..7678addac5 100644
--- a/src/lib/components/emptyBucket.svelte
+++ b/src/lib/components/emptyBucket.svelte
@@ -1,7 +1,5 @@
 <button on:click class="card is-border-dashed u-grid u-cross-center">
-    <div class="bucket">
-        <div class="u-flex u-flex-vertical u-cross-center">
-            <slot />
-        </div>
+    <div class="u-flex u-flex-vertical u-cross-center">
+        <slot />
     </div>
 </button>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
index a25dc89f0e..bcc38aa51c 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
@@ -176,8 +176,8 @@
                 applied to individual documents are ignored.
             </p>
             <svelte:fragment slot="aside">
-                <ul class="u-flex u-gap-12 common-section">
-                    <li>
+                <ul class="checkboxes-list">
+                    <li class="checkboxes-item">
                         <label class="label">
                             <input
                                 type="radio"
@@ -188,7 +188,7 @@
                             <span>Collection Level</span>
                         </label>
                     </li>
-                    <li>
+                    <li class="checkboxes-item">
                         <label class="label">
                             <input
                                 type="radio"
@@ -203,11 +203,11 @@
                 <Alert type="info">
                     <p>
                         Tip: Add <b>role:all</b> for wildcards access. Check out our documentation
-                        for more on <a href="/#">Permissions</a>
+                        for more on <a class="link" href="/#">Permissions</a>
                     </p>
                 </Alert>
                 {#if collectionPermissions === 'collection'}
-                    <ul class="common-section">
+                    <ul class="form-list">
                         <InputTags
                             id="read"
                             label="Read Access"
diff --git a/src/routes/console/[project]/databases/database/[database]/index.svelte b/src/routes/console/[project]/databases/database/[database]/index.svelte
index 32697c2b9a..591df28565 100644
--- a/src/routes/console/[project]/databases/database/[database]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/index.svelte
@@ -14,7 +14,7 @@
     let search = '';
     let offset = 0;
 
-    const limit = 5;
+    const limit = 6;
     const project = $page.params.project;
     const databaseId = $page.params.database;
     const handleCreate = async (event: CustomEvent<Models.Collection>) => {
@@ -39,7 +39,7 @@
     </div>
 
     {#if $collections?.total}
-        <div class="grid-box common-section" style="--grid-gap:2rem; --grid-item-size:25rem;">
+        <div class="grid-box common-section" style=" --grid-item-size:25rem;">
             {#each $collections.collections as collection}
                 <Bucket
                     href={`${base}/console/${project}/databases/database/${databaseId}/collection/${collection.$id}`}>
@@ -55,7 +55,7 @@
                     </Copy>
                 </Bucket>
             {/each}
-            {#if $collections.total % 2 !== 0}
+            {#if ($collections.total % 2 !== 0 || $collections.total % 4 !== 0) && $collections.total - offset <= limit}
                 <EmptyBucket on:click={() => (showCreate = true)}>
                     <div class="common-section">
                         <Button secondary round>
diff --git a/src/routes/console/[project]/databases/index.svelte b/src/routes/console/[project]/databases/index.svelte
index c6e86f1164..71acce4acd 100644
--- a/src/routes/console/[project]/databases/index.svelte
+++ b/src/routes/console/[project]/databases/index.svelte
@@ -14,7 +14,7 @@
     let search = '';
     let offset = 0;
 
-    const limit = 5;
+    const limit = 6;
     const project = $page.params.project;
     const handleCreate = async (event: CustomEvent<Models.Database>) => {
         showCreate = false;
@@ -35,7 +35,7 @@
     </div>
 
     {#if $databaseList?.total}
-        <div class="grid-box common-section" style="--grid-gap:2rem; --grid-item-size:25rem;">
+        <div class="grid-box common-section" style=" --grid-item-size:25rem;">
             {#each $databaseList.databases as database}
                 <Bucket href={`${base}/console/${project}/databases/database/${database.$id}`}>
                     <svelte:fragment slot="eyebrow">XX Collections</svelte:fragment>
@@ -46,7 +46,7 @@
                     </Copy>
                 </Bucket>
             {/each}
-            {#if $databaseList.total % 2 !== 0}
+            {#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 !== 0) && $databaseList.total - offset <= limit}
                 <EmptyBucket on:click={() => (showCreate = true)}>
                     <div class="common-section">
                         <Button secondary round>

From 9c347e3cdcac3a06f5d1ab1f6c02d566072a255f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 1 Sep 2022 11:03:54 +0200
Subject: [PATCH 50/75] feat: number of coll and docs, + small fixes

---
 .../databases/database/[database]/index.svelte     | 13 ++++++++++---
 .../databases/database/[database]/store.ts         |  8 ++++++++
 .../console/[project]/databases/index.svelte       | 14 +++++++++++---
 src/routes/console/[project]/databases/store.ts    |  8 ++++++++
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/index.svelte b/src/routes/console/[project]/databases/database/[database]/index.svelte
index 591df28565..43a1d65363 100644
--- a/src/routes/console/[project]/databases/database/[database]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/index.svelte
@@ -39,11 +39,18 @@
     </div>
 
     {#if $collections?.total}
-        <div class="grid-box common-section" style=" --grid-item-size:25rem;">
+        <div
+            class="grid-box common-section"
+            style={` --grid-item-size:${$collections.total > 3 ? '22rem' : '25rem'};`}>
             {#each $collections.collections as collection}
                 <Bucket
                     href={`${base}/console/${project}/databases/database/${databaseId}/collection/${collection.$id}`}>
-                    <svelte:fragment slot="eyebrow">XX Documents</svelte:fragment>
+                    <svelte:fragment slot="eyebrow">
+                        {#await collections.total(collection.$id)}
+                            N Documents
+                        {:then n}
+                            {n[collection.$id] ? n[collection.$id] : 'NO'} Documents
+                        {/await}</svelte:fragment>
                     <svelte:fragment slot="title">{collection.name}</svelte:fragment>
                     <svelte:fragment slot="status">
                         {#if !collection.enabled}
@@ -55,7 +62,7 @@
                     </Copy>
                 </Bucket>
             {/each}
-            {#if ($collections.total % 2 !== 0 || $collections.total % 4 !== 0) && $collections.total - offset <= limit}
+            {#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= limit}
                 <EmptyBucket on:click={() => (showCreate = true)}>
                     <div class="common-section">
                         <Button secondary round>
diff --git a/src/routes/console/[project]/databases/database/[database]/store.ts b/src/routes/console/[project]/databases/database/[database]/store.ts
index dc171a32b4..305e3c9841 100644
--- a/src/routes/console/[project]/databases/database/[database]/store.ts
+++ b/src/routes/console/[project]/databases/database/[database]/store.ts
@@ -13,6 +13,14 @@ function createCollectionStore() {
         load: async (search: string, limit: number, offset: number) => {
             const response = await sdkForProject.databases.listCollections(search, limit, offset);
             set(response);
+        },
+        total: async (id: string) => {
+            let total = {};
+            total = browser ? JSON.parse(sessionStorage.getItem('collectionTotal')) ?? {} : {};
+            const response = await sdkForProject.databases.listDocuments(id);
+            total[id] = response.total;
+            sessionStorage?.setItem('collectionTotal', JSON.stringify(total));
+            return total;
         }
     };
 }
diff --git a/src/routes/console/[project]/databases/index.svelte b/src/routes/console/[project]/databases/index.svelte
index 71acce4acd..ac3e1ebafa 100644
--- a/src/routes/console/[project]/databases/index.svelte
+++ b/src/routes/console/[project]/databases/index.svelte
@@ -35,10 +35,18 @@
     </div>
 
     {#if $databaseList?.total}
-        <div class="grid-box common-section" style=" --grid-item-size:25rem;">
+        <div
+            class="grid-box common-section"
+            style={` --grid-item-size:${$databaseList.total > 3 ? '22rem' : '25rem'};`}>
             {#each $databaseList.databases as database}
                 <Bucket href={`${base}/console/${project}/databases/database/${database.$id}`}>
-                    <svelte:fragment slot="eyebrow">XX Collections</svelte:fragment>
+                    <svelte:fragment slot="eyebrow">
+                        {#await databaseList.total(database.$id)}
+                            N Collections
+                        {:then n}
+                            {n[database.$id] ? n[database.$id] : 'NO'} Collections
+                        {/await}
+                    </svelte:fragment>
                     <svelte:fragment slot="title">{database.name}</svelte:fragment>
 
                     <Copy value={database.$id}>
@@ -46,7 +54,7 @@
                     </Copy>
                 </Bucket>
             {/each}
-            {#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 !== 0) && $databaseList.total - offset <= limit}
+            {#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= limit}
                 <EmptyBucket on:click={() => (showCreate = true)}>
                     <div class="common-section">
                         <Button secondary round>
diff --git a/src/routes/console/[project]/databases/store.ts b/src/routes/console/[project]/databases/store.ts
index 4545ac637c..c1bfbabef9 100644
--- a/src/routes/console/[project]/databases/store.ts
+++ b/src/routes/console/[project]/databases/store.ts
@@ -14,6 +14,14 @@ function createDatabaseListStore() {
         load: async (search: string, limit: number, offset: number) => {
             const response = await sdkForProject.databases.list(search, limit, offset);
             set(response);
+        },
+        total: async (id: string) => {
+            let total = {};
+            total = browser ? JSON.parse(sessionStorage.getItem('databaseTotal')) ?? {} : {};
+            const response = await sdkForProject.databases.listCollections(id);
+            total[id] = response.total;
+            sessionStorage?.setItem('databaseTotal', JSON.stringify(total));
+            return total;
         }
     };
 }

From f9ff29b467aae3283202de2747297c4841f5e105 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 1 Sep 2022 11:44:15 +0200
Subject: [PATCH 51/75] fix: text and removed database total

---
 .../collection/[collection]/settings.svelte   | 22 ++++++++++++++-----
 .../console/[project]/databases/index.svelte  |  8 +------
 .../console/[project]/databases/store.ts      |  8 -------
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
index bcc38aa51c..4560fb248b 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
@@ -200,13 +200,14 @@
                         </label>
                     </li>
                 </ul>
-                <Alert type="info">
-                    <p>
-                        Tip: Add <b>role:all</b> for wildcards access. Check out our documentation
-                        for more on <a class="link" href="/#">Permissions</a>
-                    </p>
-                </Alert>
+
                 {#if collectionPermissions === 'collection'}
+                    <Alert type="info">
+                        <p>
+                            Tip: Add <b>role:all</b> for wildcards access. Check out our
+                            documentation for more on <a class="link" href="/#">Permissions</a>
+                        </p>
+                    </Alert>
                     <ul class="form-list">
                         <InputTags
                             id="read"
@@ -219,6 +220,15 @@
                             placeholder="User ID, Team ID, or Role"
                             bind:tags={collectionWrite} />
                     </ul>
+                {:else}
+                    <Alert type="info">
+                        <p>
+                            Manage permissions at the <b>Document Level</b> to control access over
+                            every document in your collection. Check out our documentation for more
+                            on
+                            <a class="link" href="/#">Permissions</a>
+                        </p>
+                    </Alert>
                 {/if}
             </svelte:fragment>
             <svelte:fragment slot="actions">
diff --git a/src/routes/console/[project]/databases/index.svelte b/src/routes/console/[project]/databases/index.svelte
index ac3e1ebafa..52bd44dcbb 100644
--- a/src/routes/console/[project]/databases/index.svelte
+++ b/src/routes/console/[project]/databases/index.svelte
@@ -40,13 +40,7 @@
             style={` --grid-item-size:${$databaseList.total > 3 ? '22rem' : '25rem'};`}>
             {#each $databaseList.databases as database}
                 <Bucket href={`${base}/console/${project}/databases/database/${database.$id}`}>
-                    <svelte:fragment slot="eyebrow">
-                        {#await databaseList.total(database.$id)}
-                            N Collections
-                        {:then n}
-                            {n[database.$id] ? n[database.$id] : 'NO'} Collections
-                        {/await}
-                    </svelte:fragment>
+                    <svelte:fragment slot="eyebrow">X Collections</svelte:fragment>
                     <svelte:fragment slot="title">{database.name}</svelte:fragment>
 
                     <Copy value={database.$id}>
diff --git a/src/routes/console/[project]/databases/store.ts b/src/routes/console/[project]/databases/store.ts
index c1bfbabef9..4545ac637c 100644
--- a/src/routes/console/[project]/databases/store.ts
+++ b/src/routes/console/[project]/databases/store.ts
@@ -14,14 +14,6 @@ function createDatabaseListStore() {
         load: async (search: string, limit: number, offset: number) => {
             const response = await sdkForProject.databases.list(search, limit, offset);
             set(response);
-        },
-        total: async (id: string) => {
-            let total = {};
-            total = browser ? JSON.parse(sessionStorage.getItem('databaseTotal')) ?? {} : {};
-            const response = await sdkForProject.databases.listCollections(id);
-            total[id] = response.total;
-            sessionStorage?.setItem('databaseTotal', JSON.stringify(total));
-            return total;
         }
     };
 }

From 716e75af8e85562078958829f1f7b4e99bc4e79a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 1 Sep 2022 14:31:22 +0200
Subject: [PATCH 52/75] fix: wizard not loading

---
 .../collection/[collection]/_create.svelte    | 200 +++++++++---------
 1 file changed, 100 insertions(+), 100 deletions(-)

diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index fc72762bd5..d11dfbcfde 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -19,6 +19,7 @@
     let showCustomId = false;
     let steps = [{ text: 'Create data' }, { text: 'Set permissions' }];
     let currentStep = 0;
+    let attributes = [];
 
     onMount(async () => {
         await attributeList.load($page.params.collection);
@@ -26,6 +27,7 @@
     });
 
     const initializeDocument = () => {
+        attributes = $attributeList?.attributes?.filter((a) => a.status === 'available');
         $attributeList.attributes.forEach((attr) => {
             if (attr.array) {
                 newDocument[attr.key] = [null];
@@ -76,114 +78,112 @@
     </svelte:fragment>
     <Form on:submit={create}>
         {#if currentStep === 0}
-            {@const attributes =
-                $attributeList?.attributes?.filter((a) => a.status === 'available') || []}
-
             <header class="form-header">
                 <h1 class="heading-level-6">Create document data</h1>
                 <p>Provide document data based on attributes you created earlier.</p>
             </header>
-            <ul class="form-list">
-                {#each attributes as attribute}
-                    {@const label = attribute.required ? `${attribute.key}*` : attribute.key}
-                    {#if attribute.array}
-                        {#each newDocument[attribute.key] as _v, index}
-                            <li class="form-item is-multiple">
-                                <div class="form-item-part u-stretch">
-                                    <Attribute
-                                        {attribute}
-                                        id={`${attribute.key}-${index}`}
-                                        label={index === 0 ? label : ''}
-                                        bind:value={newDocument[attribute.key][index]} />
-                                </div>
-                                <div class="form-item-part u-cross-child-end">
-                                    <Button
-                                        text
-                                        disabled={index === 0}
-                                        on:click={() => {
-                                            newDocument[attribute.key].splice(index, 1);
-                                            newDocument = newDocument;
-                                        }}>
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </Button>
-                                </div>
-                            </li>
-                        {:else}
-                            <li class="form-item is-multiple">
-                                <div class="form-item-part u-stretch">
-                                    <Attribute
-                                        {attribute}
-                                        id={`${attribute.key}-0`}
-                                        {label}
-                                        bind:value={newDocument[attribute.key][0]} />
-                                </div>
-                                <div class="form-item-part u-cross-child-end">
-                                    <Button text disabled>
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </Button>
-                                </div>
-                            </li>
-                        {/each}
+            {#if attributes.length}
+                <ul class="form-list">
+                    {#each attributes as attribute}
+                        {@const label = attribute.required ? `${attribute.key}*` : attribute.key}
+                        {#if attribute.array}
+                            {#each newDocument[attribute.key] as _v, index}
+                                <li class="form-item is-multiple">
+                                    <div class="form-item-part u-stretch">
+                                        <Attribute
+                                            {attribute}
+                                            id={`${attribute.key}-${index}`}
+                                            label={index === 0 ? label : ''}
+                                            bind:value={newDocument[attribute.key][index]} />
+                                    </div>
+                                    <div class="form-item-part u-cross-child-end">
+                                        <Button
+                                            text
+                                            disabled={index === 0}
+                                            on:click={() => {
+                                                newDocument[attribute.key].splice(index, 1);
+                                                newDocument = newDocument;
+                                            }}>
+                                            <span class="icon-x" aria-hidden="true" />
+                                        </Button>
+                                    </div>
+                                </li>
+                            {:else}
+                                <li class="form-item is-multiple">
+                                    <div class="form-item-part u-stretch">
+                                        <Attribute
+                                            {attribute}
+                                            id={`${attribute.key}-0`}
+                                            {label}
+                                            bind:value={newDocument[attribute.key][0]} />
+                                    </div>
+                                    <div class="form-item-part u-cross-child-end">
+                                        <Button text disabled>
+                                            <span class="icon-x" aria-hidden="true" />
+                                        </Button>
+                                    </div>
+                                </li>
+                            {/each}
 
-                        <Button
-                            text
-                            disabled={newDocument[attribute.key][
-                                newDocument[attribute.key].length - 1
-                            ] === null}
-                            on:click={() => {
-                                {
-                                    newDocument[attribute.key].push(null);
-                                    newDocument = newDocument;
-                                }
-                            }}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text"> Add item</span>
-                        </Button>
+                            <Button
+                                text
+                                disabled={newDocument[attribute.key][
+                                    newDocument[attribute.key].length - 1
+                                ] === null}
+                                on:click={() => {
+                                    {
+                                        newDocument[attribute.key].push(null);
+                                        newDocument = newDocument;
+                                    }
+                                }}>
+                                <span class="icon-plus" aria-hidden="true" />
+                                <span class="text"> Add item</span>
+                            </Button>
+                        {:else}
+                            <ul class="form-list">
+                                <Attribute
+                                    {attribute}
+                                    id={attribute.key}
+                                    {label}
+                                    bind:value={newDocument[attribute.key]} />
+                            </ul>
+                        {/if}
+                    {/each}
+                    {#if !showCustomId}
+                        <div>
+                            <Pill button on:click={() => (showCustomId = !showCustomId)}
+                                ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                                    Document ID
+                                </span></Pill>
+                        </div>
                     {:else}
-                        <ul class="form-list">
-                            <Attribute
-                                {attribute}
-                                id={attribute.key}
-                                {label}
-                                bind:value={newDocument[attribute.key]} />
-                        </ul>
-                    {/if}
-                {/each}
-
-                {#if !showCustomId}
-                    <div>
-                        <Pill button on:click={() => (showCustomId = !showCustomId)}
-                            ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                                Document ID
-                            </span></Pill>
-                    </div>
-                {:else}
-                    <InnerModal bind:show={showCustomId}>
-                        <svelte:fragment slot="title">User ID</svelte:fragment>
-                        Enter a custom document ID. Leave blank for a randomly generated one.
-                        <svelte:fragment slot="content">
-                            <div class="form">
-                                <InputText
-                                    id="id"
-                                    label="Custom ID"
-                                    showLabel={false}
-                                    placeholder="Enter ID"
-                                    autofocus={true}
-                                    bind:value={id} />
+                        <InnerModal bind:show={showCustomId}>
+                            <svelte:fragment slot="title">User ID</svelte:fragment>
+                            Enter a custom document ID. Leave blank for a randomly generated one.
+                            <svelte:fragment slot="content">
+                                <div class="form">
+                                    <InputText
+                                        id="id"
+                                        label="Custom ID"
+                                        showLabel={false}
+                                        placeholder="Enter ID"
+                                        autofocus={true}
+                                        bind:value={id} />
 
-                                <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
-                                    <span
-                                        class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
-                                        aria-hidden="true" />
-                                    <span class="text u-line-height-1-5"
-                                        >Allowed characters: alphanumeric, hyphen, non-leading
-                                        underscore, period</span>
+                                    <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
+                                        <span
+                                            class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
+                                            aria-hidden="true" />
+                                        <span class="text u-line-height-1-5"
+                                            >Allowed characters: alphanumeric, hyphen, non-leading
+                                            underscore, period</span>
+                                    </div>
                                 </div>
-                            </div>
-                        </svelte:fragment>
-                    </InnerModal>
-                {/if}
-            </ul>
+                            </svelte:fragment>
+                        </InnerModal>
+                    {/if}
+                </ul>
+            {/if}
         {:else if currentStep === 1}
             <header class="form-header">
                 <h1 class="heading-level-6">Set Permissions</h1>

From fdc6d372a4c25287cd08b59100d4b469a9dedd15 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 7 Sep 2022 11:24:49 +0200
Subject: [PATCH 53/75] fix: renamed components

---
 .../databases/database/[database]/index.svelte         | 10 +++++-----
 .../console/project-[project]/databases/index.svelte   | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/index.svelte b/src/routes/console/project-[project]/databases/database/[database]/index.svelte
index 074d156c74..0b6757d104 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/index.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/index.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, EmptyBucket, Pagination, Copy, Bucket } from '$lib/components';
+    import { Empty, EmptyGridItem, Pagination, Copy, GridItem1 } from '$lib/components';
     import { Pill } from '$lib/elements';
     import type { Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -43,7 +43,7 @@
             class="grid-box common-section"
             style={` --grid-item-size:${$collections.total > 3 ? '22rem' : '25rem'};`}>
             {#each $collections.collections as collection}
-                <Bucket
+                <GridItem1
                     href={`${base}/console/project-${project}/databases/database/${databaseId}/collection/${collection.$id}`}>
                     <svelte:fragment slot="eyebrow">
                         {#await collections.total(collection.$id)}
@@ -60,10 +60,10 @@
                     <Copy value={collection.$id}>
                         <Pill button><i class="icon-duplicate" />Collection ID</Pill>
                     </Copy>
-                </Bucket>
+                </GridItem1>
             {/each}
             {#if ($collections.total % 2 !== 0 || $collections.total % 4 === 0) && $collections.total - offset <= limit}
-                <EmptyBucket on:click={() => (showCreate = true)}>
+                <EmptyGridItem on:click={() => (showCreate = true)}>
                     <div class="common-section">
                         <Button secondary round>
                             <i class="icon-plus" />
@@ -72,7 +72,7 @@
                     <div class="common-section">
                         <p>Create a new collection</p>
                     </div>
-                </EmptyBucket>
+                </EmptyGridItem>
             {/if}
         </div>
 
diff --git a/src/routes/console/project-[project]/databases/index.svelte b/src/routes/console/project-[project]/databases/index.svelte
index bcb5d2dd4e..3db26de707 100644
--- a/src/routes/console/project-[project]/databases/index.svelte
+++ b/src/routes/console/project-[project]/databases/index.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, EmptyBucket, Pagination, Copy, Bucket } from '$lib/components';
+    import { Empty, EmptyGridItem, Pagination, Copy, GridItem1 } from '$lib/components';
     import { Pill } from '$lib/elements';
     import type { Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -38,17 +38,17 @@
             class="grid-box common-section"
             style={` --grid-item-size:${$databaseList.total > 3 ? '22rem' : '25rem'};`}>
             {#each $databaseList.databases as database}
-                <Bucket href={`${base}/console/${project}/databases/database/${database.$id}`}>
+                <GridItem1 href={`${base}/console/${project}/databases/database/${database.$id}`}>
                     <svelte:fragment slot="eyebrow">X Collections</svelte:fragment>
                     <svelte:fragment slot="title">{database.name}</svelte:fragment>
 
                     <Copy value={database.$id}>
                         <Pill button><i class="icon-duplicate" />Database ID</Pill>
                     </Copy>
-                </Bucket>
+                </GridItem1>
             {/each}
             {#if ($databaseList.total % 2 !== 0 || $databaseList.total % 4 === 0) && $databaseList.total - offset <= limit}
-                <EmptyBucket on:click={() => (showCreate = true)}>
+                <EmptyGridItem on:click={() => (showCreate = true)}>
                     <div class="common-section">
                         <Button secondary round>
                             <i class="icon-plus" />
@@ -57,7 +57,7 @@
                     <div class="common-section">
                         <p>Create a new database</p>
                     </div>
-                </EmptyBucket>
+                </EmptyGridItem>
             {/if}
         </div>
 

From 16d4a60ea48e0c6ea3565f41625e03ddba7eada7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 8 Sep 2022 14:09:44 +0200
Subject: [PATCH 54/75] fix: route

---
 src/routes/console/project-[project]/databases/index.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/databases/index.svelte b/src/routes/console/project-[project]/databases/index.svelte
index 3db26de707..a45485191d 100644
--- a/src/routes/console/project-[project]/databases/index.svelte
+++ b/src/routes/console/project-[project]/databases/index.svelte
@@ -38,7 +38,8 @@
             class="grid-box common-section"
             style={` --grid-item-size:${$databaseList.total > 3 ? '22rem' : '25rem'};`}>
             {#each $databaseList.databases as database}
-                <GridItem1 href={`${base}/console/${project}/databases/database/${database.$id}`}>
+                <GridItem1
+                    href={`${base}/console/project-${project}/databases/database/${database.$id}`}>
                     <svelte:fragment slot="eyebrow">X Collections</svelte:fragment>
                     <svelte:fragment slot="title">{database.name}</svelte:fragment>
 

From 57f257a04ec410a3853689f56196b3a9f16c372c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 8 Sep 2022 14:24:30 +0200
Subject: [PATCH 55/75] refacto: remove subStep, implement svelte:self

---
 src/lib/components/index.ts                   |  1 -
 src/lib/components/step.svelte                | 35 +++++++++++--------
 src/lib/components/subStep.svelte             | 12 -------
 .../collection/[collection]/_create.svelte    |  5 ++-
 4 files changed, 24 insertions(+), 29 deletions(-)
 delete mode 100644 src/lib/components/subStep.svelte

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 759d46f57b..cc9e6ad2fc 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -27,4 +27,3 @@ export { default as GridItem1 } from './gridItem1.svelte';
 export { default as EmptyGridItem } from './emptyGridItem.svelte';
 export { default as Steps } from './steps.svelte';
 export { default as Step } from './step.svelte';
-export { default as SubStep } from './subStep.svelte';
diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index 27ff17758a..6ab29300c5 100644
--- a/src/lib/components/step.svelte
+++ b/src/lib/components/step.svelte
@@ -1,28 +1,33 @@
 <script lang="ts">
-    import SubStep from './subStep.svelte';
-
     export let completed = false;
     export let current = false;
     export let currentSub = 0;
+    export let isSub = false;
     export let step: { text: string; substeps?: { text: string }[] };
 </script>
 
 <li
-    class="steps-item"
+    class:steps-item={!isSub}
+    class:steps-sub-item={isSub}
     class:is-done={completed}
     class:is-current={current}
     aria-label={` ${completed ? 'done' : current ? 'current' : ''} step`}>
-    <div class="step-item-content">
+    {#if isSub}
         <span class="text">{step.text}</span>
-
-        {#if step.substeps}
-            <ul class="steps-sub">
-                {#each step.substeps as step, index}
-                    <SubStep current={currentSub === index} completed={index < currentSub}>
-                        {step.text}
-                    </SubStep>
-                {/each}
-            </ul>
-        {/if}
-    </div>
+    {:else}
+        <div class="step-item-content">
+            <span class="text">{step.text}</span>
+            {#if step?.substeps}
+                <ul class="steps-sub">
+                    {#each step.substeps as subStep, index}
+                        <svelte:self
+                            isSub={true}
+                            step={subStep}
+                            current={currentSub === index}
+                            completed={index < currentSub} />
+                    {/each}
+                </ul>
+            {/if}
+        </div>
+    {/if}
 </li>
diff --git a/src/lib/components/subStep.svelte b/src/lib/components/subStep.svelte
deleted file mode 100644
index a579faad4b..0000000000
--- a/src/lib/components/subStep.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-    export let completed = false;
-    export let current = false;
-</script>
-
-<li
-    class="steps-sub-item"
-    class:is-done={completed}
-    class:is-current={current}
-    aria-label={` ${completed ? 'done' : current ? 'current' : ''} step`}>
-    <span class="text"><slot /></span>
-</li>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte
index d11dfbcfde..a62057af50 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -17,7 +17,10 @@
     let write: string[];
     let id: string;
     let showCustomId = false;
-    let steps = [{ text: 'Create data' }, { text: 'Set permissions' }];
+    let steps = [
+        { text: 'Create data', substeps: [{ text: 'test' }, { text: 'text2' }] },
+        { text: 'Set permissions' }
+    ];
     let currentStep = 0;
     let attributes = [];
 

From 45abf6d2149e66780e0157c2405bb8f7c8bc8177 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 8 Sep 2022 14:24:58 +0200
Subject: [PATCH 56/75] fix: wrong data used for testing

---
 .../[database]/collection/[collection]/_create.svelte        | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte
index a62057af50..d11dfbcfde 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -17,10 +17,7 @@
     let write: string[];
     let id: string;
     let showCustomId = false;
-    let steps = [
-        { text: 'Create data', substeps: [{ text: 'test' }, { text: 'text2' }] },
-        { text: 'Set permissions' }
-    ];
+    let steps = [{ text: 'Create data' }, { text: 'Set permissions' }];
     let currentStep = 0;
     let attributes = [];
 

From 931d24a01d90fa5499bdfacd479db3470b60ef75 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Sep 2022 10:59:33 +0200
Subject: [PATCH 57/75] fix: back btn route, render condition

---
 .../databases/database/[database]/__layout.svelte               | 2 +-
 .../database/[database]/collection/[collection]/__layout.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
index 4f5097eadb..21f5a52285 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
@@ -55,6 +55,6 @@
     <title>Appwrite - Database</title>
 </svelte:head>
 
-{#if $database}
+{#if $database && $database.$id === databaseId}
     <slot />
 {/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
index 30f631cd9b..f0bb7c0f2f 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
@@ -24,7 +24,7 @@
         updateLayout({
             navigate: event,
             title: $collection.name,
-            back: `${base}/console/project-${$page.params.project}/database`,
+            back: `${base}/console/project-${$page.params.project}/databases/database/${databaseId}`,
             copy: {
                 text: 'Collection ID',
                 value: collectionId

From 451b6e906c0ec6eae455c2c17fec542f242a0605 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Sep 2022 16:48:10 +0200
Subject: [PATCH 58/75] fix: broken routes

---
 .../databases/database/[database]/__layout.svelte               | 2 +-
 .../databases/database/[database]/_delete.svelte                | 2 +-
 .../database/[database]/collection/[collection]/_delete.svelte  | 2 +-
 .../[database]/collection/[collection]/_deleteAttribute.svelte  | 2 +-
 .../collection/[collection]/document/[document]/__layout.svelte | 2 +-
 .../collection/[collection]/document/[document]/_delete.svelte  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
index 21f5a52285..154c7a68ee 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
@@ -22,7 +22,7 @@
 
         updateLayout({
             navigate: event,
-            back: `${base}/console/${$page.params.project}/databases`,
+            back: `${base}/console/project-${$page.params.project}/databases`,
             copy: {
                 text: 'Database ID',
                 value: databaseId
diff --git a/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte b/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
index 5f63cc7631..a5095e98d3 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
@@ -14,7 +14,7 @@
         try {
             await sdkForProject.databases.delete();
             showDelete = false;
-            await goto(`${base}/console/${$page.params.project}/databases`);
+            await goto(`${base}/console/project-${$page.params.project}/databases`);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte
index 0a10d193e8..c59fa3cca9 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte
@@ -15,7 +15,7 @@
             await sdkForProject.databases.deleteCollection($collection.$id);
             showDelete = false;
             await goto(
-                `${base}/console/${$page.params.project}/databases/database/${$page.params.database}`
+                `${base}/console/project-${$page.params.project}/databases/database/${$page.params.database}`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
index eb730c9718..5fdbdfd2dd 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
@@ -18,7 +18,7 @@
             collection.removeAttribute(selectedAttribute);
             showDelete = false;
             await goto(
-                `${base}/console/${$page.params.project}/databases/database/${$page.params.database}/collection/${$page.params.collection}/attributes`
+                `${base}/console/project-${$page.params.project}/databases/database/${$page.params.database}/collection/${$page.params.collection}/attributes`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
index 4026724f4e..4ccb6a246e 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
@@ -23,7 +23,7 @@
             navigate: event,
             title: 'Document',
             copy: { text: 'Document ID', value: $doc.$id },
-            back: `${base}/console/${$page.params.project}/databases/database/${databaseId}/collection/${collectionId}`,
+            back: `${base}/console/project-${$page.params.project}/databases/database/${databaseId}/collection/${collectionId}`,
             level: 6,
             breadcrumbs: {
                 title: $doc.$id,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
index 47890e106a..69f3bfa6b9 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
@@ -18,7 +18,7 @@
             );
             showDelete = false;
             await goto(
-                `${base}/console/${$page.params.project}/databases/database/${$page.params.database}/collection/${$page.params.collection}`
+                `${base}/console/project-${$page.params.project}/databases/database/${$page.params.database}/collection/${$page.params.collection}`
             );
         } catch (error) {
             addNotification({

From da76eadc399e21fbcc8ed434b6eeaa84d7191798 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Sep 2022 16:49:16 +0200
Subject: [PATCH 59/75] fix: renamed function

---
 .../databases/database/[database]/_delete.svelte              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte b/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
index a5095e98d3..e30899ebfe 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
@@ -10,7 +10,7 @@
 
     export let showDelete = false;
 
-    const deleteElement = async () => {
+    const handleDelete = async () => {
         try {
             await sdkForProject.databases.delete();
             showDelete = false;
@@ -24,7 +24,7 @@
     };
 </script>
 
-<Form on:submit={deleteElement}>
+<Form on:submit={handleDelete}>
     <Modal warning={true} bind:show={showDelete}>
         <svelte:fragment slot="header">Delete Database</svelte:fragment>
 

From 5417e5ac3bcb42228e2fc732a5b98d42213dafd9 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Sep 2022 16:50:37 +0200
Subject: [PATCH 60/75] fix: renamed function

---
 .../[database]/collection/[collection]/_deleteIndex.svelte    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte
index 0c618483f9..ac647a4312 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte
@@ -12,7 +12,7 @@
 
     const dispatch = createEventDispatcher();
 
-    const deleteElement = async () => {
+    const handleDelete = async () => {
         try {
             await sdkForProject.databases.deleteIndex($collection.$id, selectedIndex.key);
             showDelete = false;
@@ -26,7 +26,7 @@
     };
 </script>
 
-<Form on:submit={deleteElement}>
+<Form on:submit={handleDelete}>
     <Modal warning={true} bind:show={showDelete}>
         <svelte:fragment slot="header">Delete Index</svelte:fragment>
 

From 9bf03c42cb3c28942734a9c500b24665cb3a073b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Sep 2022 16:53:29 +0200
Subject: [PATCH 61/75] fix: merge problem

---
 src/lib/elements/forms/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index af1ac21e7c..7ed7d656fe 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -17,5 +17,4 @@ export { default as InputSelect } from './inputSelect.svelte';
 export { default as InputCheckbox } from './inputCheckbox.svelte';
 export { default as InputChoice } from './inputChoice.svelte';
 export { default as InputPhone } from './inputPhone.svelte';
-export { default as InputChoice } from './inputChoice.svelte';
 export { default as Helper } from './helper.svelte';

From 7de2d5334d56bc617579bdf0d44e56d3df44f862 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Sep 2022 16:54:12 +0200
Subject: [PATCH 62/75] fix: remove call not needed

---
 .../[database]/collection/[collection]/attributes.svelte    | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index d5c81962fe..01ccb74cd9 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -14,8 +14,6 @@
     import type { Attributes } from './store';
     import { Container } from '$lib/layout';
     import { Pill } from '$lib/elements';
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores';
     import Create from './_createAttribute.svelte';
     import CreateIndex from './_createIndex.svelte';
     import Delete from './_deleteAttribute.svelte';
@@ -29,10 +27,6 @@
     let showDelete = false;
     let showOverview = false;
     let showCreateIndex = false;
-
-    onMount(async () => {
-        await collection.load($page.params.collection);
-    });
 </script>
 
 <Container>

From 94076c55d2524b9f0c64a1d1f4567eae62ec5052 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Sep 2022 17:05:58 +0200
Subject: [PATCH 63/75] fix: dropListItem preventDefault by default

---
 src/lib/components/dropListItem.svelte                   | 2 +-
 .../[database]/collection/[collection]/attributes.svelte | 9 +++------
 .../collection/[collection]/attributes/_boolean.svelte   | 2 ++
 .../[database]/collection/[collection]/indexes.svelte    | 6 ++----
 .../storage/bucket/[bucket]/index.svelte                 | 3 +--
 5 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/dropListItem.svelte b/src/lib/components/dropListItem.svelte
index e652abe83c..44ae503053 100644
--- a/src/lib/components/dropListItem.svelte
+++ b/src/lib/components/dropListItem.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <li class="drop-list-item">
-    <button class="drop-button" on:click>
+    <button class="drop-button" on:click|preventDefault>
         <span class="text"><slot /></span>
         {#if icon}
             <span class={`icon-${icon}`} aria-hidden="true" />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index 01ccb74cd9..70c4360556 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -87,22 +87,19 @@
                                 <svelte:fragment slot="list">
                                     <DropListItem
                                         icon="eye"
-                                        on:click={(e) => {
-                                            e.preventDefault();
+                                        on:click={() => {
                                             selectedAttribute = attribute;
                                             showOverview = true;
                                         }}>Overview</DropListItem>
                                     <DropListItem
                                         icon="plus"
-                                        on:click={(e) => {
-                                            e.preventDefault();
+                                        on:click={() => {
                                             selectedAttribute = attribute;
                                             showCreateIndex = true;
                                         }}>Create Index</DropListItem>
                                     <DropListItem
                                         icon="trash"
-                                        on:click={(e) => {
-                                            e.preventDefault();
+                                        on:click={() => {
                                             selectedAttribute = attribute;
                                             showDelete = true;
                                         }}>Delete</DropListItem>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
index 5d4d3942d2..5044f95d77 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
@@ -44,6 +44,8 @@
         ({ required, array } = selectedAttribute);
         xdefault = selectedAttribute.default;
     }
+
+    //TODO: refactor to use context module instead of submitted
 </script>
 
 <InputSelect
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes.svelte
index 732bacd4fc..d47ec8ce21 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes.svelte
@@ -117,16 +117,14 @@
                                 <svelte:fragment slot="list">
                                     <DropListItem
                                         icon="eye"
-                                        on:click={(e) => {
-                                            e.preventDefault();
+                                        on:click={() => {
                                             selectedIndex = index;
                                             showOverview = true;
                                         }}>Overview</DropListItem>
 
                                     <DropListItem
                                         icon="trash"
-                                        on:click={(e) => {
-                                            e.preventDefault();
+                                        on:click={() => {
                                             selectedIndex = index;
                                             showDelete = true;
                                         }}>Delete</DropListItem>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/index.svelte
index 11ff83303d..ba201bce01 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/index.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/index.svelte
@@ -162,8 +162,7 @@
                                             icon="pencil">Update</DropListLink>
                                         <DropListItem
                                             icon="trash"
-                                            on:click={(e) => {
-                                                e.preventDefault();
+                                            on:click={() => {
                                                 selectedFile = file;
                                                 showDelete = true;
                                             }}>Delete</DropListItem>

From be72d81e9060bb69cd1ec33cd3c21e272f7788c4 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Sep 2022 17:07:31 +0200
Subject: [PATCH 64/75] fix: function names

---
 .../[database]/collection/[collection]/_delete.svelte         | 4 ++--
 .../collection/[collection]/_deleteAttribute.svelte           | 4 ++--
 .../[collection]/document/[document]/_delete.svelte           | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte
index c59fa3cca9..a47c37c31d 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte
@@ -10,7 +10,7 @@
 
     export let showDelete = false;
 
-    const deleteElement = async () => {
+    const handleDelete = async () => {
         try {
             await sdkForProject.databases.deleteCollection($collection.$id);
             showDelete = false;
@@ -26,7 +26,7 @@
     };
 </script>
 
-<Form on:submit={deleteElement}>
+<Form on:submit={handleDelete}>
     <Modal warning={true} bind:show={showDelete}>
         <svelte:fragment slot="header">Delete Collection</svelte:fragment>
 
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
index 5fdbdfd2dd..d167a1b3da 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
@@ -12,7 +12,7 @@
     export let showDelete = false;
     export let selectedAttribute: Attributes;
 
-    const deleteElement = async () => {
+    const handleDelete = async () => {
         try {
             await sdkForProject.databases.deleteAttribute($collection.$id, selectedAttribute.key);
             collection.removeAttribute(selectedAttribute);
@@ -29,7 +29,7 @@
     };
 </script>
 
-<Form on:submit={deleteElement}>
+<Form on:submit={handleDelete}>
     <Modal warning={true} bind:show={showDelete}>
         <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
 
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
index 69f3bfa6b9..b3b354db1c 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
@@ -10,7 +10,7 @@
 
     export let showDelete = false;
 
-    const deleteElement = async () => {
+    const handleDelete = async () => {
         try {
             await sdkForProject.databases.deleteDocument(
                 $page.params.collection,
@@ -29,7 +29,7 @@
     };
 </script>
 
-<Form on:submit={deleteElement}>
+<Form on:submit={handleDelete}>
     <Modal warning={true} bind:show={showDelete}>
         <svelte:fragment slot="header">Delete Document</svelte:fragment>
 

From 57d1d33f539bb3e05ab63127713b137a16441810 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Sep 2022 17:09:04 +0200
Subject: [PATCH 65/75] fix: variable name

---
 .../[collection]/document/[document]/_document.svelte  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
index d1aace4e37..fce031a536 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
@@ -10,7 +10,7 @@
     import Attribute from './_attribute.svelte';
 
     let currentDoc: string;
-    let updateBtnDisabled = true;
+    let disableUpdate = true;
 
     onMount(async () => {
         await doc.load($collection.$id, $page.params.document);
@@ -19,9 +19,9 @@
 
     $: if (currentDoc && $doc) {
         if (currentDoc !== JSON.stringify($doc)) {
-            updateBtnDisabled = false;
+            disableUpdate = false;
         } else {
-            updateBtnDisabled = true;
+            disableUpdate = true;
         }
     }
 
@@ -36,7 +36,7 @@
             );
 
             currentDoc = JSON.stringify($doc);
-            updateBtnDisabled = true;
+            disableUpdate = true;
             addNotification({
                 message: 'Document was updated!',
                 type: 'success'
@@ -117,6 +117,6 @@
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button disabled={updateBtnDisabled} on:click={() => updateData()}>Update</Button>
+        <Button disabled={disableUpdate} on:click={() => updateData()}>Update</Button>
     </svelte:fragment>
 </CardGrid>

From e041637285c444011f9cd11d9568a683ec9de0fa Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 9 Sep 2022 17:44:14 +0200
Subject: [PATCH 66/75] refactor: array comparison

---
 src/lib/helpers/arrayComparison.ts                  | 10 ++++++++++
 .../[collection]/document/[document]/index.svelte   | 13 ++++---------
 .../collection/[collection]/settings.svelte         | 12 ++++++------
 3 files changed, 20 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/helpers/arrayComparison.ts

diff --git a/src/lib/helpers/arrayComparison.ts b/src/lib/helpers/arrayComparison.ts
new file mode 100644
index 0000000000..1f17d9b22c
--- /dev/null
+++ b/src/lib/helpers/arrayComparison.ts
@@ -0,0 +1,10 @@
+export function intersection(arr1: any[], arr2: any[]) {
+    const set = new Set(arr2);
+    const intersection = new Set(arr1.filter((elem) => set.has(elem)));
+    return Array.from(intersection);
+}
+export function difference(arr1: any[], arr2: any[]) {
+    const set = new Set(arr2);
+    const intersection = new Set(arr1.filter((elem) => !set.has(elem)));
+    return Array.from(intersection);
+}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
index 6dfa8e3bde..2911112aa4 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
@@ -8,6 +8,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Document from './_document.svelte';
     import Delete from './_delete.svelte';
+    import { difference } from '$lib/helpers/arrayComparison';
 
     let showDelete = false;
     let read = $doc?.$read;
@@ -39,15 +40,9 @@
     }
 
     $: if (read || write) {
-        if (read) {
-            if (JSON.stringify(read) !== JSON.stringify($doc.$read)) {
-                arePermsDisabled = false;
-            } else arePermsDisabled = true;
-        } else if (write) {
-            if (JSON.stringify(write) !== JSON.stringify($doc.$write)) {
-                arePermsDisabled = false;
-            } else arePermsDisabled = true;
-        }
+        if (difference(read, $doc.$read).length || difference(write, $doc.$write).length) {
+            arePermsDisabled = false;
+        } else arePermsDisabled = true;
     }
 </script>
 
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
index 4560fb248b..6ae378d85c 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
@@ -9,6 +9,7 @@
     import Delete from './_delete.svelte';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
+    import { difference } from '$lib/helpers/arrayComparison';
 
     let showDelete = false;
     let showError: false | 'name' | 'size' = false,
@@ -34,12 +35,11 @@
     $: if (collectionPermissions || collectionRead || collectionWrite) {
         if (collectionPermissions !== $collection.permission) {
             arePermsDisabled = false;
-        } else if (collectionRead) {
-            if (JSON.stringify(collectionRead) !== JSON.stringify($collection.$read)) {
-                arePermsDisabled = false;
-            } else arePermsDisabled = true;
-        } else if (collectionWrite) {
-            if (JSON.stringify(collectionWrite) !== JSON.stringify($collection.$write)) {
+        } else if (collectionRead || collectionWrite) {
+            if (
+                difference(collectionRead, $collection.$read).length ||
+                difference(collectionWrite, $collection.$write).length
+            ) {
                 arePermsDisabled = false;
             } else arePermsDisabled = true;
         }

From 8d52891aa29f82615a0e56191b44b1e231eba0f5 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 13 Sep 2022 13:29:45 +0200
Subject: [PATCH 67/75] feat: update console package and implement changes

---
 package-lock.json                             | 14 ++--
 package.json                                  |  2 +-
 src/lib/elements/forms/inputSelect.svelte     |  2 +-
 src/lib/helpers/arrayComparison.ts            |  4 +-
 src/lib/stores/sdk.ts                         |  5 +-
 .../databases/_create.svelte                  |  5 +-
 .../database/[database]/__layout.svelte       |  4 +-
 .../database/[database]/_create.svelte        |  4 +
 .../database/[database]/_delete.svelte        |  3 +-
 .../collection/[collection]/__layout.svelte   |  4 +-
 .../collection/[collection]/_create.svelte    | 10 ++-
 .../[collection]/_createIndex.svelte          |  4 +
 .../collection/[collection]/_delete.svelte    |  4 +-
 .../[collection]/_deleteAttribute.svelte      |  9 ++-
 .../[collection]/_deleteIndex.svelte          |  8 +-
 .../[collection]/attributes/_boolean.svelte   |  4 +
 .../[collection]/attributes/_email.svelte     |  6 +-
 .../[collection]/attributes/_enum.svelte      |  7 +-
 .../[collection]/attributes/_float.svelte     |  8 +-
 .../[collection]/attributes/_integer.svelte   |  8 +-
 .../[collection]/attributes/_ip.svelte        |  7 +-
 .../[collection]/attributes/_string.svelte    |  5 ++
 .../[collection]/attributes/_url.svelte       |  7 +-
 .../[collection]/document/$create.svelte      | 78 -------------------
 .../document/[document]/__layout.svelte       |  2 +-
 .../document/[document]/_delete.svelte        |  3 +
 .../document/[document]/_document.svelte      |  4 +-
 .../document/[document]/index.svelte          |  3 +
 .../[collection]/document/[document]/store.ts |  4 +-
 .../collection/[collection]/index.svelte      |  2 +-
 .../collection/[collection]/indexes.svelte    |  5 +-
 .../collection/[collection]/settings.svelte   |  7 +-
 .../collection/[collection]/store.ts          | 24 ++++--
 .../database/[database]/index.svelte          |  4 +-
 .../database/[database]/settings.svelte       |  3 +-
 .../databases/database/[database]/store.ts    | 17 ++--
 36 files changed, 150 insertions(+), 140 deletions(-)
 delete mode 100644 src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/$create.svelte

diff --git a/package-lock.json b/package-lock.json
index 6ba4642beb..09c7a0e7e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
             "name": "@appwrite/console",
             "version": "0.0.1",
             "dependencies": {
-                "@aw-labs/appwrite-console": "^1.0.0-0",
+                "@aw-labs/appwrite-console": "^5.0.1",
                 "@aw-labs/icons": "0.0.0-54",
                 "@aw-labs/ui": "0.0.0-54",
                 "echarts": "^5.3.3",
@@ -68,9 +68,9 @@
             }
         },
         "node_modules/@aw-labs/appwrite-console": {
-            "version": "1.0.0-0",
-            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-1.0.0-0.tgz",
-            "integrity": "sha512-qvqCRBhG/LwmIv0Om3c0IWuLfvOCjVdbKel3cAcGadwbmz7vGDZkodgObqUPwi33T+8vnbzxBkhUOLncMF+DZQ==",
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-5.0.1.tgz",
+            "integrity": "sha512-sx9+riLjMYAwaUEqy1NkrgYRPwaD8UduIIpK8ZjtqYJOaFFhA8ubifysQywahvnjUf7B++S51tKgPgACAViUCA==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
@@ -7659,9 +7659,9 @@
             }
         },
         "@aw-labs/appwrite-console": {
-            "version": "1.0.0-0",
-            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-1.0.0-0.tgz",
-            "integrity": "sha512-qvqCRBhG/LwmIv0Om3c0IWuLfvOCjVdbKel3cAcGadwbmz7vGDZkodgObqUPwi33T+8vnbzxBkhUOLncMF+DZQ==",
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-5.0.1.tgz",
+            "integrity": "sha512-sx9+riLjMYAwaUEqy1NkrgYRPwaD8UduIIpK8ZjtqYJOaFFhA8ubifysQywahvnjUf7B++S51tKgPgACAViUCA==",
             "requires": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index dca4c74ed9..aa92730ffc 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/appwrite-console": "^1.0.0-0",
+        "@aw-labs/appwrite-console": "^5.0.1",
         "@aw-labs/icons": "0.0.0-54",
         "@aw-labs/ui": "0.0.0-54",
         "echarts": "^5.3.3",
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 940b5f1aab..3f4e13f780 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -4,7 +4,7 @@
     export let label: string;
     export let showLabel = true;
     export let id: string;
-    export let value: string;
+    export let value: string | number | boolean;
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
diff --git a/src/lib/helpers/arrayComparison.ts b/src/lib/helpers/arrayComparison.ts
index 1f17d9b22c..602c886ad2 100644
--- a/src/lib/helpers/arrayComparison.ts
+++ b/src/lib/helpers/arrayComparison.ts
@@ -1,9 +1,9 @@
-export function intersection(arr1: any[], arr2: any[]) {
+export function intersection(arr1: unknown[], arr2: unknown[]) {
     const set = new Set(arr2);
     const intersection = new Set(arr1.filter((elem) => set.has(elem)));
     return Array.from(intersection);
 }
-export function difference(arr1: any[], arr2: any[]) {
+export function difference(arr1: unknown[], arr2: unknown[]) {
     const set = new Set(arr2);
     const intersection = new Set(arr1.filter((elem) => !set.has(elem)));
     return Array.from(intersection);
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index 39541a4c75..b387a6d443 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -20,7 +20,6 @@ const clientProject = new Client();
 clientProject.setEndpoint(endpoint).setMode('admin');
 
 const setProject = (projectId: string): Client => clientProject.setProject(projectId);
-const setDatabase = (databaseId: string): void => sdkForProject.databases.setDatabaseId(databaseId);
 
 const sdkForConsole = {
     client: clientConsole,
@@ -38,7 +37,7 @@ const sdkForProject = {
     client: clientProject,
     account: new Account(clientProject),
     avatars: new Avatars(clientProject),
-    databases: new Databases(clientProject, null),
+    databases: new Databases(clientProject),
     functions: new Functions(clientProject),
     health: new Health(clientProject),
     locale: new Locale(clientProject),
@@ -48,4 +47,4 @@ const sdkForProject = {
     users: new Users(clientProject)
 };
 
-export { sdkForConsole, sdkForProject, setProject, setDatabase };
+export { sdkForConsole, sdkForProject, setProject };
diff --git a/src/routes/console/project-[project]/databases/_create.svelte b/src/routes/console/project-[project]/databases/_create.svelte
index 4afbbc13d2..cbbb66367a 100644
--- a/src/routes/console/project-[project]/databases/_create.svelte
+++ b/src/routes/console/project-[project]/databases/_create.svelte
@@ -3,7 +3,7 @@
     import { Pill } from '$lib/elements';
     import { Button, InputText, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject, setDatabase } from '$lib/stores/sdk';
+    import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
 
     export let showCreate = false;
@@ -16,8 +16,7 @@
 
     const create = async () => {
         try {
-            setDatabase(id ? id : 'unique()');
-            const database = await sdkForProject.databases.create(name);
+            const database = await sdkForProject.databases.create(id ? id : 'unique()', name);
             name = id = null;
             showCreate = false;
             dispatch('created', database);
diff --git a/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
index 154c7a68ee..8e276e82eb 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
@@ -3,7 +3,6 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { updateLayout } from '$lib/stores/layout';
-    import { setDatabase } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { database } from './store';
 
@@ -16,8 +15,7 @@
 
     async function handle(event = null) {
         if ($database?.$id !== databaseId) {
-            setDatabase($page.params.database);
-            await database.load();
+            await database.load(databaseId);
         }
 
         updateLayout({
diff --git a/src/routes/console/project-[project]/databases/database/[database]/_create.svelte b/src/routes/console/project-[project]/databases/database/[database]/_create.svelte
index 5e1151932a..98e3e39da0 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/_create.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/_create.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { page } from '$app/stores';
+
     import { Modal, InnerModal } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button, InputText, Form, FormList } from '$lib/elements/forms';
@@ -8,6 +10,7 @@
 
     export let showCreate = false;
 
+    const databaseId = $page.params.database;
     const dispatch = createEventDispatcher();
 
     let name = '';
@@ -17,6 +20,7 @@
     const create = async () => {
         try {
             const collection = await sdkForProject.databases.createCollection(
+                databaseId,
                 id ? id : 'unique()',
                 name,
                 'collection',
diff --git a/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte b/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
index e30899ebfe..696eda69de 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
@@ -7,12 +7,13 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { database } from './store';
+    const databaseId = $page.params.database;
 
     export let showDelete = false;
 
     const handleDelete = async () => {
         try {
-            await sdkForProject.databases.delete();
+            await sdkForProject.databases.delete(databaseId);
             showDelete = false;
             await goto(`${base}/console/project-${$page.params.project}/databases`);
         } catch (error) {
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
index f0bb7c0f2f..63d4516375 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
@@ -16,10 +16,10 @@
 
     async function handle(event = null) {
         if ($collection?.$id !== collectionId) {
-            await collection.load(collectionId);
+            await collection.load(databaseId, collectionId);
         }
         if ($collection) {
-            await documentList.load($collection.$id, [], 12, 0);
+            await documentList.load(databaseId, $collection.$id, [], 12, 0);
         }
         updateLayout({
             navigate: event,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte
index d11dfbcfde..e03a6c643d 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -12,6 +12,9 @@
 
     export let showCreate = false;
 
+    const databaseId = $page.params.database;
+    const collectionId = $page.params.collection;
+
     let newDocument = {};
     let read: string[];
     let write: string[];
@@ -22,7 +25,7 @@
     let attributes = [];
 
     onMount(async () => {
-        await attributeList.load($page.params.collection);
+        await attributeList.load(databaseId, collectionId);
         initializeDocument();
     });
 
@@ -43,7 +46,8 @@
         } else {
             try {
                 await sdkForProject.databases.createDocument(
-                    $page.params.collection,
+                    databaseId,
+                    collectionId,
                     id ?? 'unique()',
                     newDocument,
                     read,
@@ -63,7 +67,7 @@
         }
     };
 
-    $: attributeList.load($page.params.collection);
+    $: attributeList.load(databaseId, collectionId);
 
     $: if (!showCreate) {
         initializeDocument();
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
index 9068bc7e25..8d100c1caf 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_createIndex.svelte
@@ -6,10 +6,13 @@
     import { onMount } from 'svelte';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
+    import { page } from '$app/stores';
 
     export let showCreateIndex = false;
     export let externalAttribute: Attributes = null;
 
+    const databaseId = $page.params.database;
+
     let key: string = null;
     let types = [
         { value: 'key', label: 'Key' },
@@ -45,6 +48,7 @@
         }
         try {
             await sdkForProject.databases.createIndex(
+                databaseId,
                 $collection.$id,
                 key,
                 selectedType,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte
index a47c37c31d..7499bc3d8e 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_delete.svelte
@@ -10,9 +10,11 @@
 
     export let showDelete = false;
 
+    const databaseId = $page.params.database;
+
     const handleDelete = async () => {
         try {
-            await sdkForProject.databases.deleteCollection($collection.$id);
+            await sdkForProject.databases.deleteCollection(databaseId, $collection.$id);
             showDelete = false;
             await goto(
                 `${base}/console/project-${$page.params.project}/databases/database/${$page.params.database}`
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
index d167a1b3da..3387470572 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
@@ -11,14 +11,19 @@
 
     export let showDelete = false;
     export let selectedAttribute: Attributes;
+    const databaseId = $page.params.database;
 
     const handleDelete = async () => {
         try {
-            await sdkForProject.databases.deleteAttribute($collection.$id, selectedAttribute.key);
+            await sdkForProject.databases.deleteAttribute(
+                databaseId,
+                $collection.$id,
+                selectedAttribute.key
+            );
             collection.removeAttribute(selectedAttribute);
             showDelete = false;
             await goto(
-                `${base}/console/project-${$page.params.project}/databases/database/${$page.params.database}/collection/${$page.params.collection}/attributes`
+                `${base}/console/project-${$page.params.project}/databases/database/${databaseId}/collection/${$page.params.collection}/attributes`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte
index ac647a4312..3ff3d77ff8 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_deleteIndex.svelte
@@ -6,15 +6,21 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { createEventDispatcher } from 'svelte';
+    import { page } from '$app/stores';
 
     export let showDelete = false;
     export let selectedIndex: Models.Index;
+    const databaseId = $page.params.database;
 
     const dispatch = createEventDispatcher();
 
     const handleDelete = async () => {
         try {
-            await sdkForProject.databases.deleteIndex($collection.$id, selectedIndex.key);
+            await sdkForProject.databases.deleteIndex(
+                databaseId,
+                $collection.$id,
+                selectedIndex.key
+            );
             showDelete = false;
             dispatch('deleted');
         } catch (error) {
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
index 5044f95d77..5451ca12c6 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
@@ -5,12 +5,15 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { page } from '$app/stores';
 
     export let submitted = false;
     export let key: string;
     export let overview = false;
     export let selectedAttribute: Models.AttributeBoolean;
 
+    const databaseId = $page.params.database;
+
     const dispatch = createEventDispatcher();
 
     let xdefault: boolean,
@@ -21,6 +24,7 @@
         submitted = false;
         try {
             const attribute = await sdkForProject.databases.createBooleanAttribute(
+                databaseId,
                 $collection.$id,
                 key,
                 required,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
index d578ad0459..4fe15c8144 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
@@ -5,21 +5,25 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { page } from '$app/stores';
 
     export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeEmail;
 
+    const databaseId = $page.params.database;
+    const dispatch = createEventDispatcher();
+
     let xdefault: string,
         required = false,
         array = false;
 
-    const dispatch = createEventDispatcher();
     const submit = async () => {
         submitted = false;
         try {
             const attribute = await sdkForProject.databases.createEmailAttribute(
+                databaseId,
                 $collection.$id,
                 key,
                 required,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
index 72ec2e062a..0dd3354400 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
@@ -5,21 +5,26 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { page } from '$app/stores';
 
     export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeEnum;
+
+    const databaseId = $page.params.database;
+    const dispatch = createEventDispatcher();
+
     let xdefault = '',
         elements: string[],
         required = false,
         array = false;
 
-    const dispatch = createEventDispatcher();
     const submit = async () => {
         submitted = false;
         try {
             const attribute = await sdkForProject.databases.createEnumAttribute(
+                databaseId,
                 $collection.$id,
                 key,
                 elements,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
index d8324028d0..1cf87b469c 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
@@ -5,13 +5,16 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
-
-    const dispatch = createEventDispatcher();
+    import { page } from '$app/stores';
 
     export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeFloat;
+
+    const databaseId = $page.params.database;
+    const dispatch = createEventDispatcher();
+
     let min: number,
         max: number,
         xdefault: number,
@@ -22,6 +25,7 @@
         submitted = false;
         try {
             const attribute = await sdkForProject.databases.createFloatAttribute(
+                databaseId,
                 $collection.$id,
                 key,
                 required,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
index d75b9978b9..de9180c855 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
@@ -5,13 +5,16 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
-
-    const dispatch = createEventDispatcher();
+    import { page } from '$app/stores';
 
     export let key: string = null;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeInteger;
+
+    const databaseId = $page.params.database;
+    const dispatch = createEventDispatcher();
+
     let min: number,
         max: number,
         xdefault: number,
@@ -22,6 +25,7 @@
         submitted = false;
         try {
             const attribute = await sdkForProject.databases.createIntegerAttribute(
+                databaseId,
                 $collection.$id,
                 key,
                 required,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
index 5820ff44ad..ec362df50e 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
@@ -5,20 +5,25 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { page } from '$app/stores';
 
     export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeIp;
+
+    const databaseId = $page.params.database;
+    const dispatch = createEventDispatcher();
+
     let xdefault: string,
         required = false,
         array = false;
 
-    const dispatch = createEventDispatcher();
     const submit = async () => {
         submitted = false;
         try {
             const attribute = await sdkForProject.databases.createIpAttribute(
+                databaseId,
                 $collection.$id,
                 key,
                 required,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
index fd7e4c57d4..54be822fdb 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
@@ -5,11 +5,15 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { page } from '$app/stores';
 
     export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeString;
+
+    const databaseId = $page.params.database;
+
     let xdefault: string,
         size = 255,
         required = false,
@@ -20,6 +24,7 @@
         submitted = false;
         try {
             const attribute = await sdkForProject.databases.createStringAttribute(
+                databaseId,
                 $collection.$id,
                 key,
                 size,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
index 90fc386e62..97cb3e1676 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
@@ -5,20 +5,25 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { page } from '$app/stores';
 
     export let key: string;
     export let submitted = false;
     export let overview = false;
     export let selectedAttribute: Models.AttributeUrl;
+
+    const databaseId = $page.params.database;
+    const dispatch = createEventDispatcher();
+
     let xdefault: string,
         required = false,
         array = false;
 
-    const dispatch = createEventDispatcher();
     const submit = async () => {
         submitted = false;
         try {
             const attribute = await sdkForProject.databases.createUrlAttribute(
+                databaseId,
                 $collection.$id,
                 key,
                 required,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/$create.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/$create.svelte
deleted file mode 100644
index cee583c309..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/$create.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Back, Card } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import { collection } from '../store';
-    import { doc } from './[document]/store';
-    import { addNotification } from '$lib/stores/notifications';
-    import Document from './[document]/_document.svelte';
-    import { goto } from '$app/navigation';
-    import InputCustomId from '$lib/elements/forms/inputCustomId.svelte';
-    import { Container, Cover } from '$lib/layout';
-    import { base } from '$app/paths';
-
-    $: projectId = $page.params.project;
-
-    onMount(() => {
-        doc.set({
-            $collection: $page.params.collection,
-            $id: null,
-            $createdAt: null,
-            $updatedAt: null,
-            $read: [],
-            $write: []
-        });
-    });
-
-    const createDocument = async () => {
-        try {
-            const created = await sdkForProject.databases.createDocument(
-                $collection.$id,
-                $doc.$id,
-                {
-                    ...$doc,
-                    $id: undefined
-                },
-                $doc.$read,
-                $doc.$write
-            );
-            addNotification({
-                message: 'Document was created!',
-                type: 'success'
-            });
-            await goto(
-                `${base}/console/project-${projectId}/database/collection/${created.$collection}/document/${created.$id}`
-            );
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    };
-</script>
-
-<svelte:head>
-    <title>Appwrite - Document</title>
-</svelte:head>
-{#if $doc && $collection}
-    <Cover>
-        <Back href={`${base}/console/project-${projectId}/database/collection/${$collection.$id}`}>
-            Collection - {$collection.name}
-        </Back>
-        <h1>Create Document</h1>
-    </Cover>
-    <Container>
-        <Card>
-            <Form on:submit={createDocument}>
-                <InputCustomId id="id" label="Document ID" bind:value={$doc.$id} />
-                <Document />
-                <Button submit>Create</Button>
-            </Form>
-        </Card>
-    </Container>
-{:else}
-    <div aria-busy="true" />
-{/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
index 4ccb6a246e..dd58d34acb 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
@@ -16,7 +16,7 @@
 
     async function handle(event = null) {
         if ($doc?.$id !== documentId) {
-            await doc.load(collectionId, documentId);
+            await doc.load(databaseId, collectionId, documentId);
         }
 
         updateLayout({
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
index b3b354db1c..80d5708503 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
@@ -10,9 +10,12 @@
 
     export let showDelete = false;
 
+    const databaseId = $page.params.database;
+
     const handleDelete = async () => {
         try {
             await sdkForProject.databases.deleteDocument(
+                databaseId,
                 $page.params.collection,
                 $page.params.document
             );
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
index fce031a536..db4d3b2300 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
@@ -11,9 +11,10 @@
 
     let currentDoc: string;
     let disableUpdate = true;
+    const databaseId = $page.params.database;
 
     onMount(async () => {
-        await doc.load($collection.$id, $page.params.document);
+        await doc.load(databaseId, $collection.$id, $page.params.document);
         currentDoc = JSON.stringify($doc);
     });
 
@@ -28,6 +29,7 @@
     const updateData = async () => {
         try {
             await sdkForProject.databases.updateDocument(
+                databaseId,
                 $collection.$id,
                 $page.params.document,
                 $doc,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
index 2911112aa4..fb346489de 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
@@ -9,15 +9,18 @@
     import Document from './_document.svelte';
     import Delete from './_delete.svelte';
     import { difference } from '$lib/helpers/arrayComparison';
+    import { page } from '$app/stores';
 
     let showDelete = false;
     let read = $doc?.$read;
     let write = $doc?.$write;
     let arePermsDisabled = true;
+    const databaseId = $page.params.database;
 
     async function updatePermissions() {
         try {
             await sdkForProject.databases.updateDocument(
+                databaseId,
                 $doc.collectionId,
                 $doc.$id,
                 $doc.data,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
index 45398bc7a4..942194165b 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
@@ -8,8 +8,8 @@ function createDocumentStore() {
     return {
         subscribe,
         set,
-        load: async (collectionId: string, documentId: string) =>
-            set(await sdkForProject.databases.getDocument(collectionId, documentId)),
+        load: async (databaseId: string, collectionId: string, documentId: string) =>
+            set(await sdkForProject.databases.getDocument(databaseId, collectionId, documentId)),
         addAttribute: (attribute: string) =>
             update((n) => {
                 n[attribute].push(null);
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/index.svelte
index 9dc501f023..cb56e1b94f 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/index.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/index.svelte
@@ -25,7 +25,7 @@
     const databaseId = $page.params.database;
 
     onMount(async () => {
-        await documentList.load($collection.$id, [], limit, offset);
+        await documentList.load(databaseId, $collection.$id, [], limit, offset);
     });
 
     $: columns = [
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes.svelte
index d47ec8ce21..94916ddd9c 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes.svelte
@@ -30,9 +30,10 @@
 
     const limit = 5;
     const collectionId = $page.params.collection;
+    const databaseId = $page.params.database;
 
     const handleDelete = async () => {
-        await indexList.load(collectionId);
+        await indexList.load(databaseId, collectionId);
     };
 
     // $: indexes.load(search);
@@ -53,7 +54,7 @@
     // });
 
     onMount(async () => {
-        await indexList.load(collectionId);
+        await indexList.load(databaseId, collectionId);
     });
 </script>
 
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
index 6ae378d85c..cdd96d22a3 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
@@ -11,6 +11,8 @@
     import { page } from '$app/stores';
     import { difference } from '$lib/helpers/arrayComparison';
 
+    const databaseId = $page.params.database;
+
     let showDelete = false;
     let showError: false | 'name' | 'size' = false,
         errorMessage = 'Something went wrong',
@@ -23,7 +25,7 @@
         arePermsDisabled = true;
 
     onMount(async () => {
-        await collection.load($page.params.collection);
+        await collection.load(databaseId, $page.params.collection);
         enabled ??= $collection.enabled;
         collectionName ??= $collection.name;
         collectionName ??= $collection.name;
@@ -54,6 +56,7 @@
     async function togglecollection() {
         try {
             await sdkForProject.databases.updateCollection(
+                databaseId,
                 $collection.$id,
                 $collection.name,
                 $collection.permission,
@@ -76,6 +79,7 @@
     async function updateName() {
         try {
             await sdkForProject.databases.updateCollection(
+                databaseId,
                 $collection.$id,
                 $collection.name,
                 $collection.permission
@@ -93,6 +97,7 @@
     async function updatePermissions() {
         try {
             await sdkForProject.databases.updateCollection(
+                databaseId,
                 $collection.$id,
                 $collection.name,
                 collectionPermissions,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
index aa6ef6ca81..2320c99d51 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
@@ -25,9 +25,12 @@ function createCollection() {
     return {
         subscribe,
         set,
-        load: async (collectionId: string) => {
+        load: async (databaseId: string, collectionId: string) => {
             set(
-                (await sdkForProject.databases.getCollection(collectionId)) as unknown as Collection
+                (await sdkForProject.databases.getCollection(
+                    databaseId,
+                    collectionId
+                )) as unknown as Collection
             );
         },
         addAttribute: (attribute: Attributes) =>
@@ -59,8 +62,15 @@ function createDocumentListStore() {
     return {
         subscribe,
         set,
-        load: async (collectionId: string, queries: [], limit: number, offset: number) => {
+        load: async (
+            databaseId: string,
+            collectionId: string,
+            queries: [],
+            limit: number,
+            offset: number
+        ) => {
             const response = await sdkForProject.databases.listDocuments(
+                databaseId,
                 collectionId,
                 queries,
                 limit,
@@ -77,8 +87,8 @@ function createIndexListStore() {
     return {
         subscribe,
         set,
-        load: async (collectionId: string) => {
-            const response = await sdkForProject.databases.listIndexes(collectionId);
+        load: async (databaseId: string, collectionId: string) => {
+            const response = await sdkForProject.databases.listIndexes(databaseId, collectionId);
             set(response);
         }
     };
@@ -90,8 +100,8 @@ function createAttributeListStore() {
     return {
         subscribe,
         set,
-        load: async (collectionId: string) => {
-            const response = await sdkForProject.databases.listAttributes(collectionId);
+        load: async (databaseId: string, collectionId: string) => {
+            const response = await sdkForProject.databases.listAttributes(databaseId, collectionId);
             set(response);
         }
     };
diff --git a/src/routes/console/project-[project]/databases/database/[database]/index.svelte b/src/routes/console/project-[project]/databases/database/[database]/index.svelte
index 0b6757d104..6c294fda6d 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/index.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/index.svelte
@@ -24,7 +24,7 @@
         );
     };
 
-    $: collections.load(search, limit, offset ?? 0);
+    $: collections.load(databaseId, search, limit, offset ?? 0);
     $: if (search) offset = 0;
 </script>
 
@@ -46,7 +46,7 @@
                 <GridItem1
                     href={`${base}/console/project-${project}/databases/database/${databaseId}/collection/${collection.$id}`}>
                     <svelte:fragment slot="eyebrow">
-                        {#await collections.total(collection.$id)}
+                        {#await collections.total(databaseId, collection.$id)}
                             N Documents
                         {:then n}
                             {n[collection.$id] ? n[collection.$id] : 'NO'} Documents
diff --git a/src/routes/console/project-[project]/databases/database/[database]/settings.svelte b/src/routes/console/project-[project]/databases/database/[database]/settings.svelte
index b3df568140..3b0a62ae7e 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/settings.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/settings.svelte
@@ -9,6 +9,7 @@
     import Delete from './_delete.svelte';
     import { onMount } from 'svelte';
 
+    const databaseId = $page.params.database;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
 
     let showDelete = false;
@@ -18,7 +19,7 @@
     let databaseName: string = null;
 
     onMount(async () => {
-        await database.load();
+        await database.load(databaseId);
         databaseName ??= $database.name;
     });
 
diff --git a/src/routes/console/project-[project]/databases/database/[database]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/store.ts
index 305e3c9841..7a4b3fa3e5 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/store.ts
+++ b/src/routes/console/project-[project]/databases/database/[database]/store.ts
@@ -10,14 +10,19 @@ function createCollectionStore() {
     return {
         subscribe,
         set,
-        load: async (search: string, limit: number, offset: number) => {
-            const response = await sdkForProject.databases.listCollections(search, limit, offset);
+        load: async (databaseId: string, search: string, limit: number, offset: number) => {
+            const response = await sdkForProject.databases.listCollections(
+                databaseId,
+                search,
+                limit,
+                offset
+            );
             set(response);
         },
-        total: async (id: string) => {
+        total: async (databaseId: string, id: string) => {
             let total = {};
             total = browser ? JSON.parse(sessionStorage.getItem('collectionTotal')) ?? {} : {};
-            const response = await sdkForProject.databases.listDocuments(id);
+            const response = await sdkForProject.databases.listDocuments(databaseId, id);
             total[id] = response.total;
             sessionStorage?.setItem('collectionTotal', JSON.stringify(total));
             return total;
@@ -31,8 +36,8 @@ function createDatabase() {
     return {
         subscribe,
         set,
-        load: async () => {
-            set(await sdkForProject.databases.get());
+        load: async (databaseId: string) => {
+            set(await sdkForProject.databases.get(databaseId));
         }
     };
 }

From 722196c8dd9fcc6a890729f3e31af4602e346b83 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 13 Sep 2022 17:59:32 +0200
Subject: [PATCH 68/75] chore: bump console to 5.0.5

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 09c7a0e7e4..ccf80f932a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
             "name": "@appwrite/console",
             "version": "0.0.1",
             "dependencies": {
-                "@aw-labs/appwrite-console": "^5.0.1",
+                "@aw-labs/appwrite-console": "^5.0.5",
                 "@aw-labs/icons": "0.0.0-54",
                 "@aw-labs/ui": "0.0.0-54",
                 "echarts": "^5.3.3",
@@ -68,9 +68,9 @@
             }
         },
         "node_modules/@aw-labs/appwrite-console": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-5.0.1.tgz",
-            "integrity": "sha512-sx9+riLjMYAwaUEqy1NkrgYRPwaD8UduIIpK8ZjtqYJOaFFhA8ubifysQywahvnjUf7B++S51tKgPgACAViUCA==",
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-5.0.5.tgz",
+            "integrity": "sha512-xNyLAr/1KP7JagAwe6zbYRBWp7RgHEwptmCTVeJ/ASxVb0Rz6ItND8nG72dCg9D+lRVI5Qkk6Ks7Xmcj7TZpfg==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
@@ -7659,9 +7659,9 @@
             }
         },
         "@aw-labs/appwrite-console": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-5.0.1.tgz",
-            "integrity": "sha512-sx9+riLjMYAwaUEqy1NkrgYRPwaD8UduIIpK8ZjtqYJOaFFhA8ubifysQywahvnjUf7B++S51tKgPgACAViUCA==",
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-5.0.5.tgz",
+            "integrity": "sha512-xNyLAr/1KP7JagAwe6zbYRBWp7RgHEwptmCTVeJ/ASxVb0Rz6ItND8nG72dCg9D+lRVI5Qkk6Ks7Xmcj7TZpfg==",
             "requires": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index aa92730ffc..94edec28dc 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/appwrite-console": "^5.0.1",
+        "@aw-labs/appwrite-console": "^5.0.5",
         "@aw-labs/icons": "0.0.0-54",
         "@aw-labs/ui": "0.0.0-54",
         "echarts": "^5.3.3",

From cb0fc876e246922f45746d6a487d2f0e245358ef Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 13 Sep 2022 18:06:06 +0200
Subject: [PATCH 69/75] feat: upgrade stores to new caching

---
 .../collection/[collection]/store.ts          | 61 +++++++++----------
 .../databases/database/[database]/store.ts    | 43 ++++++-------
 .../project-[project]/databases/store.ts      | 26 +++-----
 3 files changed, 56 insertions(+), 74 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
index 2320c99d51..e0c17269d3 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
@@ -2,6 +2,7 @@ import { sdkForProject } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
 import { writable } from 'svelte/store';
 import { browser } from '$app/env';
+import { cachedStore } from '$lib/helpers/cache';
 
 export type Attributes =
     | Models.AttributeBoolean
@@ -55,20 +56,20 @@ function createCollection() {
     };
 }
 
-function createDocumentListStore() {
-    const { subscribe, set } = writable<Models.DocumentList<Models.Document>>(
-        browser ? JSON.parse(sessionStorage.getItem('documentList')) : null
-    );
-    return {
-        subscribe,
-        set,
-        load: async (
+export const documentList = cachedStore<
+    Models.DocumentList<Models.Document>,
+    {
+        load: (
             databaseId: string,
             collectionId: string,
             queries: [],
             limit: number,
             offset: number
-        ) => {
+        ) => Promise<void>;
+    }
+>('documentList', function ({ set }) {
+    return {
+        load: async (databaseId, collectionId, queries, limit, offset) => {
             const response = await sdkForProject.databases.listDocuments(
                 databaseId,
                 collectionId,
@@ -79,44 +80,38 @@ function createDocumentListStore() {
             set(response);
         }
     };
-}
-function createIndexListStore() {
-    const { subscribe, set } = writable<Models.IndexList>(
-        browser ? JSON.parse(sessionStorage.getItem('indexList')) : null
-    );
+});
+
+export const indexList = cachedStore<
+    Models.IndexList,
+    {
+        load: (databaseId: string, collectionId: string) => Promise<void>;
+    }
+>('indexList', function ({ set }) {
     return {
-        subscribe,
-        set,
         load: async (databaseId: string, collectionId: string) => {
             const response = await sdkForProject.databases.listIndexes(databaseId, collectionId);
             set(response);
         }
     };
-}
-function createAttributeListStore() {
-    const { subscribe, set } = writable<Models.AttributeList>(
-        browser ? JSON.parse(sessionStorage.getItem('attributeList')) : null
-    );
+});
+
+export const attributeList = cachedStore<
+    Models.AttributeList,
+    {
+        load: (databaseId: string, collectionId: string) => Promise<void>;
+    }
+>('attributeList', function ({ set }) {
     return {
-        subscribe,
-        set,
-        load: async (databaseId: string, collectionId: string) => {
+        load: async (databaseId, collectionId) => {
             const response = await sdkForProject.databases.listAttributes(databaseId, collectionId);
             set(response);
         }
     };
-}
+});
 
 export const collection = createCollection();
-export const documentList = createDocumentListStore();
-export const indexList = createIndexListStore();
-export const attributeList = createAttributeListStore();
 
 if (browser) {
     collection.subscribe((n) => sessionStorage?.setItem('collection', JSON.stringify(n ?? '')));
-    documentList.subscribe((n) => sessionStorage?.setItem('documentList', JSON.stringify(n ?? '')));
-    indexList.subscribe((n) => sessionStorage?.setItem('indexList', JSON.stringify(n ?? '')));
-    attributeList.subscribe((n) =>
-        sessionStorage?.setItem('attributeList', JSON.stringify(n ?? ''))
-    );
 }
diff --git a/src/routes/console/project-[project]/databases/database/[database]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/store.ts
index 7a4b3fa3e5..7c3b3efcbe 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/store.ts
+++ b/src/routes/console/project-[project]/databases/database/[database]/store.ts
@@ -1,16 +1,17 @@
 import { sdkForProject } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
-import { writable } from 'svelte/store';
 import { browser } from '$app/env';
+import { cachedStore } from '$lib/helpers/cache';
 
-function createCollectionStore() {
-    const { subscribe, set } = writable<Models.CollectionList>(
-        browser ? JSON.parse(sessionStorage.getItem('database')) : null
-    );
+export const collections = cachedStore<
+    Models.CollectionList,
+    {
+        load: (databaseId: string, search: string, limit: number, offset: number) => Promise<void>;
+        total: (databaseId: string, id: string) => Promise<Record<string, unknown>>;
+    }
+>('collections', function ({ set }) {
     return {
-        subscribe,
-        set,
-        load: async (databaseId: string, search: string, limit: number, offset: number) => {
+        load: async (databaseId, search, limit, offset) => {
             const response = await sdkForProject.databases.listCollections(
                 databaseId,
                 search,
@@ -19,7 +20,7 @@ function createCollectionStore() {
             );
             set(response);
         },
-        total: async (databaseId: string, id: string) => {
+        total: async (databaseId, id) => {
             let total = {};
             total = browser ? JSON.parse(sessionStorage.getItem('collectionTotal')) ?? {} : {};
             const response = await sdkForProject.databases.listDocuments(databaseId, id);
@@ -28,23 +29,17 @@ function createCollectionStore() {
             return total;
         }
     };
-}
-
-function createDatabase() {
-    const { subscribe, set } = writable<Models.Database>();
+});
 
+export const database = cachedStore<
+    Models.Database,
+    {
+        load: (databaseId: string) => Promise<void>;
+    }
+>('database', function ({ set }) {
     return {
-        subscribe,
-        set,
-        load: async (databaseId: string) => {
+        load: async (databaseId) => {
             set(await sdkForProject.databases.get(databaseId));
         }
     };
-}
-export const collections = createCollectionStore();
-export const database = createDatabase();
-
-if (browser) {
-    collections.subscribe((n) => sessionStorage?.setItem('collections', JSON.stringify(n ?? '')));
-    database.subscribe((n) => sessionStorage?.setItem('database', JSON.stringify(n ?? '')));
-}
+});
diff --git a/src/routes/console/project-[project]/databases/store.ts b/src/routes/console/project-[project]/databases/store.ts
index 4545ac637c..784aa205f0 100644
--- a/src/routes/console/project-[project]/databases/store.ts
+++ b/src/routes/console/project-[project]/databases/store.ts
@@ -1,25 +1,17 @@
 import { sdkForProject } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
-import { writable } from 'svelte/store';
-import { browser } from '$app/env';
-
-function createDatabaseListStore() {
-    const { subscribe, set } = writable<Models.DatabaseList>(
-        browser ? JSON.parse(sessionStorage.getItem('databaseList')) : null
-    );
+import { cachedStore } from '$lib/helpers/cache';
 
+export const databaseList = cachedStore<
+    Models.DatabaseList,
+    {
+        load: (search: string, limit: number, offset: number) => Promise<void>;
+    }
+>('databaseList', function ({ set }) {
     return {
-        subscribe,
-        set,
-        load: async (search: string, limit: number, offset: number) => {
+        load: async (search, limit, offset) => {
             const response = await sdkForProject.databases.list(search, limit, offset);
             set(response);
         }
     };
-}
-
-export const databaseList = createDatabaseListStore();
-
-if (browser) {
-    databaseList.subscribe((n) => sessionStorage?.setItem('databaseList', JSON.stringify(n ?? '')));
-}
+});

From fb6ad26c9a5b31033079eb37de35f5f2f1279005 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 13 Sep 2022 23:27:25 +0200
Subject: [PATCH 70/75] feat: update missing stores to abstracted caching

---
 .../[collection]/document/[document]/store.ts | 25 ++++++++-------
 .../collection/[collection]/store.ts          | 32 ++++++++-----------
 2 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
index 942194165b..7e6e18331c 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
@@ -1,28 +1,29 @@
+import { cachedStore } from '$lib/helpers/cache';
 import { sdkForProject } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
-import { writable } from 'svelte/store';
-
-function createDocumentStore() {
-    const { subscribe, set, update } = writable<Models.Document>();
 
+export const doc = cachedStore<
+    Models.Document,
+    {
+        load: (databaseId: string, collectionId: string, documentId: string) => Promise<void>;
+        addAttribute: (attribute: string) => void;
+        removeAttribute: (attribute: string, index: number) => void;
+    }
+>('doc', function ({ set, update }) {
     return {
-        subscribe,
-        set,
-        load: async (databaseId: string, collectionId: string, documentId: string) =>
+        load: async (databaseId, collectionId, documentId) =>
             set(await sdkForProject.databases.getDocument(databaseId, collectionId, documentId)),
-        addAttribute: (attribute: string) =>
+        addAttribute: (attribute) =>
             update((n) => {
                 n[attribute].push(null);
 
                 return n;
             }),
-        removeAttribute: (attribute: string, index: number) =>
+        removeAttribute: (attribute, index) =>
             update((n) => {
                 n[attribute].splice(index, 1);
 
                 return n;
             })
     };
-}
-
-export const doc = createDocumentStore();
+});
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
index e0c17269d3..4fcd05772a 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
@@ -18,15 +18,17 @@ type Collection = Omit<Models.Collection, 'attributes'> & {
     attributes: Array<Attributes>;
 };
 
-function createCollection() {
-    const { subscribe, set, update } = writable<Collection>(
-        browser ? JSON.parse(sessionStorage.getItem('collection')) : null
-    );
-
+export const collection = cachedStore<
+    Collection,
+    {
+        load: (databaseId: string, collectionId: string) => Promise<void>;
+        addAttribute: (attribute: Attributes) => void;
+        updateAttribute: (attribute: Attributes) => void;
+        removeAttribute: (attribute: Attributes) => void;
+    }
+>('collection', function ({ set, update }) {
     return {
-        subscribe,
-        set,
-        load: async (databaseId: string, collectionId: string) => {
+        load: async (databaseId, collectionId) => {
             set(
                 (await sdkForProject.databases.getCollection(
                     databaseId,
@@ -34,27 +36,27 @@ function createCollection() {
                 )) as unknown as Collection
             );
         },
-        addAttribute: (attribute: Attributes) =>
+        addAttribute: (attribute) =>
             update((n) => {
                 n.attributes.push(attribute);
 
                 return n;
             }),
-        updateAttribute: (attribute: Attributes) =>
+        updateAttribute: (attribute) =>
             update((n) => {
                 const index = n.attributes.findIndex((a) => a.key === attribute.key);
                 n.attributes[index] = attribute;
 
                 return n;
             }),
-        removeAttribute: (attribute: Attributes) =>
+        removeAttribute: (attribute) =>
             update((n) => {
                 n.attributes = n.attributes.filter((a) => a.key !== attribute.key);
 
                 return n;
             })
     };
-}
+});
 
 export const documentList = cachedStore<
     Models.DocumentList<Models.Document>,
@@ -109,9 +111,3 @@ export const attributeList = cachedStore<
         }
     };
 });
-
-export const collection = createCollection();
-
-if (browser) {
-    collection.subscribe((n) => sessionStorage?.setItem('collection', JSON.stringify(n ?? '')));
-}

From d406930742febddab9c6b77752349b36ae00676f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 13 Sep 2022 23:29:51 +0200
Subject: [PATCH 71/75] chore: remove unused dependencies

---
 .../database/[database]/collection/[collection]/store.ts        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
index 4fcd05772a..a80b52bc43 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
@@ -1,7 +1,5 @@
 import { sdkForProject } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
-import { writable } from 'svelte/store';
-import { browser } from '$app/env';
 import { cachedStore } from '$lib/helpers/cache';
 
 export type Attributes =

From 25d205d0afc4c0f76421dfeb253a2467af9b9323 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 15 Sep 2022 12:22:38 +0200
Subject: [PATCH 72/75] fix: typings for attributeList store

---
 .../[database]/collection/[collection]/store.ts | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
index a80b52bc43..6ff5963c0d 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
@@ -96,16 +96,27 @@ export const indexList = cachedStore<
     };
 });
 
+/**
+ * TODO: Mock proper types until the SKD is fixed.
+ */
+export type AttributeResponse = Omit<Models.AttributeList, 'attributes'> & {
+    attributes: Attributes[];
+};
+
 export const attributeList = cachedStore<
-    Models.AttributeList,
+    AttributeResponse,
     {
         load: (databaseId: string, collectionId: string) => Promise<void>;
     }
 >('attributeList', function ({ set }) {
     return {
         load: async (databaseId, collectionId) => {
-            const response = await sdkForProject.databases.listAttributes(databaseId, collectionId);
-            set(response);
+            const response: unknown = await sdkForProject.databases.listAttributes(
+                databaseId,
+                collectionId
+            );
+
+            set(response as AttributeResponse);
         }
     };
 });

From f157c4bd80fdead74d3a570e6bb4a1f31a8282cf Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 15 Sep 2022 12:51:04 +0200
Subject: [PATCH 73/75] fix: some minor stuff in database

---
 src/lib/helpers/{arrayComparison.ts => array.ts}         | 0
 src/lib/stores/sdk.ts                                    | 7 ++++++-
 src/routes/console/project-[project]/__layout.svelte     | 6 ++++--
 .../databases/database/[database]/__layout.svelte        | 6 ++++--
 .../[database]/collection/[collection]/__layout.svelte   | 8 +++-----
 .../[collection]/document/[document]/_document.svelte    | 9 ++++++---
 .../[collection]/document/[document]/index.svelte        | 2 +-
 .../[database]/collection/[collection]/index.svelte      | 6 +-----
 .../[database]/collection/[collection]/settings.svelte   | 2 +-
 9 files changed, 26 insertions(+), 20 deletions(-)
 rename src/lib/helpers/{arrayComparison.ts => array.ts} (100%)

diff --git a/src/lib/helpers/arrayComparison.ts b/src/lib/helpers/array.ts
similarity index 100%
rename from src/lib/helpers/arrayComparison.ts
rename to src/lib/helpers/array.ts
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index b387a6d443..26394b6313 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -19,7 +19,12 @@ clientConsole.setEndpoint(endpoint).setProject('console');
 const clientProject = new Client();
 clientProject.setEndpoint(endpoint).setMode('admin');
 
-const setProject = (projectId: string): Client => clientProject.setProject(projectId);
+const setProject = (projectId: string): Client => {
+    clientProject.setProject(projectId);
+    console.log(clientProject.config.project);
+
+    return clientProject;
+};
 
 const sdkForConsole = {
     client: clientConsole,
diff --git a/src/routes/console/project-[project]/__layout.svelte b/src/routes/console/project-[project]/__layout.svelte
index 7a3f6caa28..d05675a086 100644
--- a/src/routes/console/project-[project]/__layout.svelte
+++ b/src/routes/console/project-[project]/__layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { browser } from '$app/env';
     import { page } from '$app/stores';
-    import { sdkForConsole, setProject } from '$lib/stores/sdk';
+    import { sdkForConsole, sdkForProject, setProject } from '$lib/stores/sdk';
     import { collection } from './databases/database/[database]/collection/[collection]/store';
     import { UploadBox } from '$lib/components';
     import { project } from './store';
@@ -49,8 +49,10 @@
 
     let loaded = false;
     async function handle(event = null) {
-        if ($project?.$id !== projectId) {
+        if (sdkForProject.client.config.project !== projectId) {
             setProject(projectId);
+        }
+        if ($project?.$id !== projectId) {
             await project.load(projectId);
             if ($organization?.$id !== $project?.teamId) {
                 await organization.load($project.teamId);
diff --git a/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
index 8e276e82eb..0f3b5afa36 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
@@ -7,9 +7,10 @@
     import { database } from './store';
 
     const databaseId = $page.params.database;
-
     const path = `databases/database/${databaseId}`;
 
+    let loaded = false;
+
     onMount(handle);
     afterNavigate(handle);
 
@@ -46,6 +47,7 @@
                 }
             ]
         });
+        loaded = true;
     }
 </script>
 
@@ -53,6 +55,6 @@
     <title>Appwrite - Database</title>
 </svelte:head>
 
-{#if $database && $database.$id === databaseId}
+{#if loaded}
     <slot />
 {/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
index 63d4516375..f398300753 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
@@ -4,7 +4,7 @@
     import { page } from '$app/stores';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
-    import { collection, documentList } from './store';
+    import { collection } from './store';
 
     const databaseId = $page.params.database;
     const collectionId = $page.params.collection;
@@ -18,9 +18,7 @@
         if ($collection?.$id !== collectionId) {
             await collection.load(databaseId, collectionId);
         }
-        if ($collection) {
-            await documentList.load(databaseId, $collection.$id, [], 12, 0);
-        }
+
         updateLayout({
             navigate: event,
             title: $collection.name,
@@ -60,6 +58,6 @@
     <title>Appwrite - {$collection?.name ?? 'Collection'}</title>
 </svelte:head>
 
-{#if $collection && $documentList}
+{#if $collection}
     <slot />
 {/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
index db4d3b2300..b792ef85cf 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
@@ -11,10 +11,13 @@
 
     let currentDoc: string;
     let disableUpdate = true;
+
     const databaseId = $page.params.database;
+    const collectionId = $page.params.collection;
+    const documentId = $page.params.document;
 
     onMount(async () => {
-        await doc.load(databaseId, $collection.$id, $page.params.document);
+        await doc.load(databaseId, collectionId, documentId);
         currentDoc = JSON.stringify($doc);
     });
 
@@ -30,8 +33,8 @@
         try {
             await sdkForProject.databases.updateDocument(
                 databaseId,
-                $collection.$id,
-                $page.params.document,
+                collectionId,
+                documentId,
                 $doc,
                 $doc.$read,
                 $doc.$write
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
index fb346489de..f1a6fed61a 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
@@ -8,7 +8,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Document from './_document.svelte';
     import Delete from './_delete.svelte';
-    import { difference } from '$lib/helpers/arrayComparison';
+    import { difference } from '$lib/helpers/array';
     import { page } from '$app/stores';
 
     let showDelete = false;
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/index.svelte
index cb56e1b94f..1c66a262c7 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/index.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/index.svelte
@@ -14,7 +14,6 @@
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { base } from '$app/paths';
-    import { onMount } from 'svelte';
     import Create from './_create.svelte';
 
     let offset = 0;
@@ -24,10 +23,7 @@
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
 
-    onMount(async () => {
-        await documentList.load(databaseId, $collection.$id, [], limit, offset);
-    });
-
+    $: documentList.load(databaseId, $collection.$id, [], limit, offset);
     $: columns = [
         ...$collection.attributes.map((attribute) => ({
             key: attribute.key,
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
index cdd96d22a3..3cf5bb0fb7 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
@@ -9,7 +9,7 @@
     import Delete from './_delete.svelte';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
-    import { difference } from '$lib/helpers/arrayComparison';
+    import { difference } from '$lib/helpers/array';
 
     const databaseId = $page.params.database;
 

From 6ab5a8af3011981685f17295b029012d5cb754a9 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 15 Sep 2022 12:51:28 +0200
Subject: [PATCH 74/75] chore: remove console.log

---
 src/lib/stores/sdk.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index 26394b6313..b387a6d443 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -19,12 +19,7 @@ clientConsole.setEndpoint(endpoint).setProject('console');
 const clientProject = new Client();
 clientProject.setEndpoint(endpoint).setMode('admin');
 
-const setProject = (projectId: string): Client => {
-    clientProject.setProject(projectId);
-    console.log(clientProject.config.project);
-
-    return clientProject;
-};
+const setProject = (projectId: string): Client => clientProject.setProject(projectId);
 
 const sdkForConsole = {
     client: clientConsole,

From f94f10cfe95e0f339425695b8dd060cdcf4625f9 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 15 Sep 2022 13:04:11 +0200
Subject: [PATCH 75/75] fix: realtime for attributes

---
 src/routes/console/project-[project]/__layout.svelte      | 6 +++---
 .../[database]/collection/[collection]/__layout.svelte    | 2 +-
 .../[database]/collection/[collection]/settings.svelte    | 1 -
 .../database/[database]/collection/[collection]/store.ts  | 8 ++++++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/routes/console/project-[project]/__layout.svelte b/src/routes/console/project-[project]/__layout.svelte
index d05675a086..bb02e1641d 100644
--- a/src/routes/console/project-[project]/__layout.svelte
+++ b/src/routes/console/project-[project]/__layout.svelte
@@ -25,19 +25,19 @@
 
     if (browser) {
         sdkForConsole.client.subscribe<Attributes | Models.Index>('console', (message) => {
-            if (message.events.includes('collections.*.attributes.*.create')) {
+            if (message.events.includes('databases.*.collections.*.attributes.*.create')) {
                 collection.addAttribute(<Attributes>message.payload);
 
                 return;
             }
 
-            if (message.events.includes('collections.*.attributes.*.update')) {
+            if (message.events.includes('databases.*.collections.*.attributes.*.update')) {
                 collection.updateAttribute(<Attributes>message.payload);
 
                 return;
             }
 
-            if (message.events.includes('collections.*.attributes.*.delete')) {
+            if (message.events.includes('databases.*.collections.*.attributes.*.delete')) {
                 collection.removeAttribute(<Attributes>message.payload);
 
                 return;
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
index f398300753..9a26a885f0 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
@@ -15,7 +15,7 @@
     afterNavigate(handle);
 
     async function handle(event = null) {
-        if ($collection?.$id !== collectionId) {
+        if ($collection?.$id !== collectionId || !event) {
             await collection.load(databaseId, collectionId);
         }
 
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
index 3cf5bb0fb7..2c8e7f0c94 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
@@ -25,7 +25,6 @@
         arePermsDisabled = true;
 
     onMount(async () => {
-        await collection.load(databaseId, $page.params.collection);
         enabled ??= $collection.enabled;
         collectionName ??= $collection.name;
         collectionName ??= $collection.name;
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
index 6ff5963c0d..57a1cd7b0e 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
@@ -36,14 +36,18 @@ export const collection = cachedStore<
         },
         addAttribute: (attribute) =>
             update((n) => {
-                n.attributes.push(attribute);
+                if (!n.attributes.some((a) => a.key === attribute.key)) {
+                    n.attributes.push(attribute);
+                }
 
                 return n;
             }),
         updateAttribute: (attribute) =>
             update((n) => {
                 const index = n.attributes.findIndex((a) => a.key === attribute.key);
-                n.attributes[index] = attribute;
+                if (index !== -1) {
+                    n.attributes[index] = attribute;
+                }
 
                 return n;
             }),