From b15669f93411937ee4b9246ab29ec20ccc42461f Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 28 Sep 2022 18:35:24 +0200
Subject: [PATCH 01/10] feat: new permissions

---
 src/lib/components/permissions/custom.svelte  |  20 ++
 .../components/permissions/permissions.svelte | 209 ++++++++++++++++++
 src/lib/components/permissions/team.svelte    |  72 ++++++
 src/lib/components/permissions/user.svelte    |  72 ++++++
 src/lib/elements/forms/button.svelte          |   3 +
 .../[collection]/settings/+page.svelte        |  26 +--
 6 files changed, 388 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/components/permissions/custom.svelte
 create mode 100644 src/lib/components/permissions/permissions.svelte
 create mode 100644 src/lib/components/permissions/team.svelte
 create mode 100644 src/lib/components/permissions/user.svelte

diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
new file mode 100644
index 000000000..58454dc2c
--- /dev/null
+++ b/src/lib/components/permissions/custom.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Permission } from './permissions.svelte';
+
+    export let role: string;
+    export let permission: Permission;
+</script>
+
+<div class="u-flex u-cross-center u-gap-8">
+    <div>
+        {#if role === 'users'}
+            <div>Users</div>
+        {:else if role === 'guests'}
+            <div>Guests</div>
+        {:else if role === 'any'}
+            <div>Any</div>
+        {:else}
+            <div>{role}</div>
+        {/if}
+    </div>
+</div>
diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
new file mode 100644
index 000000000..bdcd68941
--- /dev/null
+++ b/src/lib/components/permissions/permissions.svelte
@@ -0,0 +1,209 @@
+<script context="module" lang="ts">
+    export type Permission = {
+        create: boolean;
+        read: boolean;
+        update: boolean;
+        delete: boolean;
+    };
+
+    export type PermissionsTypes = 'create' | 'read' | 'update' | 'delete';
+</script>
+
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { difference } from '$lib/helpers/array';
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
+    import { DropList, DropListItem } from '..';
+    import Custom from './custom.svelte';
+    import Team from './team.svelte';
+    import User from './user.svelte';
+
+    export let withCreate = false;
+    export let permissions: string[] = [];
+
+    let showUser = false;
+    let showTeam = false;
+    let showDropdown = false;
+
+    const groups = writable<Map<string, Permission>>(new Map());
+
+    onMount(() => {
+        permissions.forEach(fromPermissionString);
+        groups.subscribe(() => {
+            const a = exportRoles();
+            if (difference(a, permissions).length || difference(permissions, a).length) {
+                permissions = a;
+            }
+        });
+    });
+
+    function create(event: CustomEvent<string[]>) {
+        groups.update((n) => {
+            for (const role of event.detail) {
+                if (n.has(role)) {
+                    return n;
+                }
+
+                n.set(role, {
+                    create: false,
+                    read: false,
+                    update: false,
+                    delete: false
+                });
+            }
+
+            return n;
+        });
+
+        showTeam = showUser = false;
+    }
+
+    function fromPermissionString(permission: string): void {
+        const type = permission.slice(0, permission.indexOf('('));
+        const role = permission.slice(permission.indexOf('("') + 2, permission.indexOf('")'));
+
+        groups.update((n) => {
+            if (!n.has(role)) {
+                n.set(role, {
+                    create: false,
+                    read: false,
+                    update: false,
+                    delete: false
+                });
+            }
+            n.get(role)[type] = true;
+
+            return n;
+        });
+    }
+
+    function togglePermission(role: string, permission: PermissionsTypes): void {
+        groups.update((n) => {
+            n.get(role)[permission] = !n.get(role)[permission];
+
+            return n;
+        });
+    }
+
+    function deleteRole(role: string): void {
+        groups.update((n) => {
+            n.delete(role);
+
+            return n;
+        });
+    }
+
+    function exportRoles() {
+        return [...$groups].reduce((prev, [role, permission]) => {
+            ['create', 'read', 'update', 'delete'].forEach((type) => {
+                if (permission[type] === true) {
+                    prev.push(`${type}("${role}")`);
+                }
+            });
+
+            return prev;
+        }, []);
+    }
+</script>
+
+<div class="table-with-scroll">
+    <div class="table-wrapper">
+        <table class="table is-table-layout-auto is-remove-outer-styles">
+            <thead class="table-thead">
+                <tr class="table-row">
+                    <th class="table-thead-col">
+                        <span class="eyebrow-heading-3">Role</span>
+                    </th>
+                    {#if withCreate}
+                        <th class="table-thead-col" style="--p-col-width:70">
+                            <span class="eyebrow-heading-3">Create</span>
+                        </th>
+                    {/if}
+                    <th class="table-thead-col" style="--p-col-width:70">
+                        <span class="eyebrow-heading-3">Read</span>
+                    </th>
+                    <th class="table-thead-col" style="--p-col-width:70">
+                        <span class="eyebrow-heading-3">Update</span>
+                    </th>
+                    <th class="table-thead-col" style="--p-col-width:70">
+                        <span class="eyebrow-heading-3">Delete</span>
+                    </th>
+                    <th class="table-thead-col" style="--p-col-width:40" />
+                </tr>
+            </thead>
+            <tbody class="table-tbody">
+                {#each [...$groups] as [role, permission]}
+                    <tr class="table-row">
+                        <td class="table-col" data-title="Role">
+                            <Custom {role} {permission} />
+                        </td>
+                        {#if withCreate}
+                            <td class="table-col" data-title="Create">
+                                <input
+                                    type="checkbox"
+                                    class="icon-check"
+                                    aria-label="Create"
+                                    checked={permission.create}
+                                    on:change={() => togglePermission(role, 'create')} />
+                            </td>
+                        {/if}
+                        <td class="table-col" data-title="Read">
+                            <input
+                                type="checkbox"
+                                class="icon-check"
+                                aria-label="Read"
+                                checked={permission.read}
+                                on:change={() => togglePermission(role, 'read')} />
+                        </td>
+                        <td class="table-col" data-title="Update">
+                            <input
+                                type="checkbox"
+                                class="icon-check"
+                                aria-label="Update"
+                                checked={permission.update}
+                                on:change={() => togglePermission(role, 'update')} />
+                        </td>
+                        <td class="table-col" data-title="Delete">
+                            <input
+                                type="checkbox"
+                                class="icon-check"
+                                aria-label="Delete"
+                                checked={permission.delete}
+                                on:change={() => togglePermission(role, 'delete')} />
+                        </td>
+                        <td class="table-col u-overflow-visible">
+                            <div class="u-flex">
+                                <button
+                                    class="button is-text is-only-icon"
+                                    type="button"
+                                    aria-label="delete"
+                                    on:click={() => deleteRole(role)}>
+                                    <span class="icon-x" aria-hidden="true" />
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
+</div>
+<DropList
+    bind:show={showDropdown}
+    position="bottom"
+    horizontal="right"
+    arrow={true}
+    arrowPosition="start">
+    <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
+        <span class="icon-plus" aria-hidden="true" />
+        <span class="text">Add role</span>
+    </Button>
+    <svelte:fragment slot="list">
+        <DropListItem on:click={() => (showUser = true)}>Select users</DropListItem>
+        <DropListItem on:click={() => (showTeam = true)}>Select teams</DropListItem>
+    </svelte:fragment>
+</DropList>
+
+<User bind:show={showUser} on:create={create} {groups} />
+<Team bind:show={showTeam} on:create={create} {groups} />
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
new file mode 100644
index 000000000..8b3c6f5c0
--- /dev/null
+++ b/src/lib/components/permissions/team.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { Button, Form } from '$lib/elements/forms';
+    import { createEventDispatcher, onMount } from 'svelte';
+    import { Modal } from '..';
+    import type { Writable } from 'svelte/store';
+    import type { Permission } from './permissions.svelte';
+    import InputSearch from '$lib/elements/forms/inputSearch.svelte';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export let show: boolean;
+    export let groups: Writable<Map<string, Permission>>;
+
+    const dispatch = createEventDispatcher();
+
+    let search = '';
+    let results = [];
+    let selected: Set<string> = new Set();
+
+    onMount(request);
+
+    function create() {
+        dispatch('create', Array.from(selected));
+    }
+
+    async function request() {
+        results = (await sdkForProject.teams.list([], search)).teams;
+    }
+
+    $: if (search !== null) {
+        request();
+    }
+</script>
+
+<Form on:submit={create}>
+    <Modal bind:show>
+        <svelte:fragment slot="header">Select team</svelte:fragment>
+        <InputSearch bind:value={search} />
+        <div class="table-wrapper">
+            <table class="table is-table-layout-auto is-remove-outer-styles">
+                <tbody class="table-tbody">
+                    {#each results as team (team.$id)}
+                        {@const role = `team:${team.$id}`}
+                        <tr class="table-row">
+                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                <input
+                                    type="checkbox"
+                                    class="icon-check"
+                                    aria-label="Create"
+                                    checked={selected.has(role)}
+                                    on:change={() => selected.add(role)} />
+                            </td>
+                            <td class="table-col" data-title="Team">
+                                <div class="u-flex u-cross-center u-gap-8">
+                                    <div class="avatar is-size-small is-color-orange">
+                                        <span class="text" aria-hidden="true">ch</span>
+                                    </div>
+                                    <div class="u-line-height-1-5">
+                                        <div class="body-text-2">{team.name}</div>
+                                        <div class="u-x-small">{team.$id}</div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+        <svelte:fragment slot="footer">
+            <Button submit>Create</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
new file mode 100644
index 000000000..ead290e07
--- /dev/null
+++ b/src/lib/components/permissions/user.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { Button, Form } from '$lib/elements/forms';
+    import { createEventDispatcher, onMount } from 'svelte';
+    import { Modal } from '..';
+    import type { Writable } from 'svelte/store';
+    import type { Permission } from './permissions.svelte';
+    import InputSearch from '$lib/elements/forms/inputSearch.svelte';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export let show: boolean;
+    export let groups: Writable<Map<string, Permission>>;
+
+    const dispatch = createEventDispatcher();
+
+    let search = '';
+    let results = [];
+    let selected: Set<string> = new Set();
+
+    onMount(request);
+
+    function create() {
+        dispatch('create', Array.from(selected));
+    }
+
+    async function request() {
+        results = (await sdkForProject.users.list([], search)).users;
+    }
+
+    $: if (search !== null) {
+        request();
+    }
+</script>
+
+<Form on:submit={create}>
+    <Modal bind:show>
+        <svelte:fragment slot="header">Select team</svelte:fragment>
+        <InputSearch bind:value={search} />
+        <div class="table-wrapper">
+            <table class="table is-table-layout-auto is-remove-outer-styles">
+                <tbody class="table-tbody">
+                    {#each results as user (user.$id)}
+                        {@const role = `user:${user.$id}`}
+                        <tr class="table-row">
+                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                <input
+                                    type="checkbox"
+                                    class="icon-check"
+                                    aria-label="Create"
+                                    checked={selected.has(role)}
+                                    on:change={() => selected.add(role)} />
+                            </td>
+                            <td class="table-col" data-title="User">
+                                <div class="u-flex u-cross-center u-gap-8">
+                                    <div class="avatar is-size-small is-color-orange">
+                                        <span class="text" aria-hidden="true">ch</span>
+                                    </div>
+                                    <div class="u-line-height-1-5">
+                                        <div class="body-text-2">{user.name}</div>
+                                        <div class="u-x-small">{user.$id}</div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+        <svelte:fragment slot="footer">
+            <Button submit>Create</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index c89eb1148..1dd056919 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -9,6 +9,7 @@
     export let href: string = null;
     export let fullWidth = false;
     export let ariaLabel: string = null;
+    export let noMargin = false;
     //TODO: add option to add aria-label to buttons that are only icons
 </script>
 
@@ -24,6 +25,7 @@
         class:is-text={text}
         class:is-danger={danger}
         class:is-full-width={fullWidth}
+        class:u-padding-inline-0={noMargin}
         aria-label={ariaLabel}>
         <slot />
     </a>
@@ -37,6 +39,7 @@
         class:is-danger={danger}
         class:is-text={text}
         class:is-full-width={fullWidth}
+        class:u-padding-inline-0={noMargin}
         type={submit ? 'submit' : 'button'}
         aria-label={ariaLabel}>
         <slot />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
index f1b507d8f..ce5bedff3 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Alert, CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
-    import { Button, InputText, InputTags, InputSwitch, Helper } from '$lib/elements/forms';
+    import { Button, InputText, InputSwitch, Helper } from '$lib/elements/forms';
     import { collection } from '../store';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -10,6 +10,7 @@
     import { page } from '$app/stores';
     import { difference } from '$lib/helpers/array';
     import Delete from './deleteCollection.svelte';
+    import Permissions from '$lib/components/permissions/permissions.svelte';
 
     const databaseId = $page.params.database;
 
@@ -20,10 +21,10 @@
     let enabled: boolean = null,
         collectionName: string = null,
         collectionDocumentSecurity: boolean = null,
-        collectionPermissions: string[] = [],
+        collectionPermissions: string[] = null,
         arePermsDisabled = true;
 
-    onMount(async () => {
+    onMount(() => {
         enabled ??= $collection.enabled;
         collectionName ??= $collection.name;
         collectionPermissions ??= $collection.$permissions;
@@ -129,8 +130,9 @@
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
-                <Button disabled={enabled === $collection.enabled} on:click={togglecollection}
-                    >Update</Button>
+                <Button disabled={enabled === $collection.enabled} on:click={togglecollection}>
+                    Update
+                </Button>
             </svelte:fragment>
         </CardGrid>
 
@@ -173,7 +175,7 @@
                                 class="is-small"
                                 name="level"
                                 bind:group={collectionDocumentSecurity}
-                                value={true} />
+                                value={false} />
                             <span>Collection Level</span>
                         </label>
                     </li>
@@ -184,7 +186,7 @@
                                 class="is-small"
                                 name="level"
                                 bind:group={collectionDocumentSecurity}
-                                value={false} />
+                                value={true} />
                             <span>Document Level</span>
                         </label>
                     </li>
@@ -206,13 +208,9 @@
                             documentation for more on <a class="link" href="/#">Permissions</a>
                         </p>
                     </Alert>
-                    <ul class="form-list">
-                        <InputTags
-                            id="permissions"
-                            label="Permissions"
-                            placeholder="User ID, Team ID, or Role"
-                            bind:tags={collectionPermissions} />
-                    </ul>
+                    {#if collectionPermissions}
+                        <Permissions permissions={collectionPermissions} withCreate />
+                    {/if}
                 {/if}
             </svelte:fragment>
             <svelte:fragment slot="actions">

From 4debbd90232c8b574d89b47a029443acef6f3ddc Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 30 Sep 2022 11:09:15 +0200
Subject: [PATCH 02/10] fix: team and users

---
 src/lib/components/dropListItem.svelte        |   3 +-
 src/lib/components/modal.svelte               |   2 +-
 src/lib/components/pagination.svelte          |  68 +++++-----
 src/lib/components/permissions/custom.svelte  |  56 ++++++---
 .../components/permissions/permissions.svelte |  47 ++++---
 src/lib/components/permissions/row.svelte     |  20 +++
 src/lib/components/permissions/team.svelte    | 119 ++++++++++++------
 src/lib/components/permissions/user.svelte    | 119 ++++++++++++------
 src/lib/elements/forms/inputSearch.svelte     |   8 ++
 src/lib/layout/header.svelte                  |   6 +-
 10 files changed, 304 insertions(+), 144 deletions(-)
 create mode 100644 src/lib/components/permissions/row.svelte

diff --git a/src/lib/components/dropListItem.svelte b/src/lib/components/dropListItem.svelte
index 44ae50305..111f3f7f2 100644
--- a/src/lib/components/dropListItem.svelte
+++ b/src/lib/components/dropListItem.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+    export let disabled = false;
     export let icon: string = null;
 </script>
 
 <li class="drop-list-item">
-    <button class="drop-button" on:click|preventDefault>
+    <button class="drop-button" on:click|preventDefault {disabled}>
         <span class="text"><slot /></span>
         {#if icon}
             <span class={`icon-${icon}`} aria-hidden="true" />
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 19f6d33ff..0d3eb143c 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -34,8 +34,8 @@
     };
     const closeModal = () => {
         if (closable) {
-            show = false;
             dispatch('close');
+            show = false;
         }
     };
 
diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index f11366e28..f3b8218d6 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+
     export let sum: number;
     export let limit: number;
     export let offset: number;
+    export let hidePages = false;
 
     const dispatch = createEventDispatcher();
+
     $: totalPages = Math.ceil(sum / limit);
     $: currentPage = Math.floor(offset / limit + 1);
     $: pages = pagination(currentPage, totalPages);
@@ -50,6 +53,7 @@
 {#if totalPages > 1}
     <nav class="pagination">
         <button
+            type="button"
             on:click={() => handleButtonPage('prev')}
             class:is-disabled={currentPage <= 1}
             class="button is-text"
@@ -57,30 +61,34 @@
             <span class="icon-cheveron-left" aria-hidden="true" />
             <span class="text">Prev</span>
         </button>
-        <ol class="pagination-list is-only-desktop">
-            {#each pages as page}
-                {#if typeof page === 'number'}
-                    <li class="pagination-item">
-                        <button
-                            class="button"
-                            on:click={() => handleOptionClick(page)}
-                            class:is-disabled={currentPage === page}
-                            class:is-text={currentPage !== page}
-                            aria-label="page">
-                            <span class="text">{page}</span>
-                        </button>
-                    </li>
-                {:else}
-                    <li class="li is-text">
-                        <span class="icon">...</span>
-                    </li>
-                {/if}
-            {/each}
-        </ol>
+        {#if !hidePages}
+            <ol class="pagination-list is-only-desktop">
+                {#each pages as page}
+                    {#if typeof page === 'number'}
+                        <li class="pagination-item">
+                            <button
+                                type="button"
+                                class="button"
+                                on:click={() => handleOptionClick(page)}
+                                class:is-disabled={currentPage === page}
+                                class:is-text={currentPage !== page}
+                                aria-label="page">
+                                <span class="text">{page}</span>
+                            </button>
+                        </li>
+                    {:else}
+                        <li class="li is-text">
+                            <span class="icon">...</span>
+                        </li>
+                    {/if}
+                {/each}
+            </ol>
+        {/if}
         <button
             on:click={() => handleButtonPage('next')}
             class:is-disabled={currentPage === totalPages}
             class="button is-text"
+            type="button"
             aria-label="next page">
             <span class="text">Next</span>
             <span class="icon-cheveron-right" aria-hidden="true" />
@@ -88,18 +96,20 @@
     </nav>
 {:else}
     <nav class="pagination">
-        <button class="button is-text is-disabled" aria-label="prev page">
+        <button type="button" class="button is-text is-disabled" aria-label="prev page">
             <span class="icon-cheveron-left" aria-hidden="true" />
             <span class="text">Prev</span>
         </button>
-        <ol class="pagination-list is-only-desktop">
-            <li class="pagination-item">
-                <button class="button is-disabled" aria-label="page">
-                    <span class="text">1</span>
-                </button>
-            </li>
-        </ol>
-        <button class="button is-text is-disabled" aria-label="next page">
+        {#if !hidePages}
+            <ol class="pagination-list is-only-desktop">
+                <li class="pagination-item">
+                    <button type="button" class="button is-disabled" aria-label="page">
+                        <span class="text">1</span>
+                    </button>
+                </li>
+            </ol>
+        {/if}
+        <button type="button" class="button is-text is-disabled" aria-label="next page">
             <span class="text">Next</span>
             <span class="icon-cheveron-right" aria-hidden="true" />
         </button>
diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index 58454dc2c..680c1018b 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -1,20 +1,46 @@
 <script lang="ts">
+    import { Button, Form, FormList, Helper } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import { Modal } from '..';
+    import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
+    import InputText from '$lib/elements/forms/inputText.svelte';
 
-    export let role: string;
-    export let permission: Permission;
+    export let show: boolean;
+    export let groups: Writable<Map<string, Permission>>;
+
+    const dispatch = createEventDispatcher();
+
+    let value = '';
+
+    function reset() {
+        value = '';
+    }
+
+    function create() {
+        dispatch('create', [value]);
+        reset();
+    }
 </script>
 
-<div class="u-flex u-cross-center u-gap-8">
-    <div>
-        {#if role === 'users'}
-            <div>Users</div>
-        {:else if role === 'guests'}
-            <div>Guests</div>
-        {:else if role === 'any'}
-            <div>Any</div>
-        {:else}
-            <div>{role}</div>
-        {/if}
-    </div>
-</div>
+<Form on:submit={create}>
+    <Modal bind:show on:close={reset}>
+        <svelte:fragment slot="header">Custom permission</svelte:fragment>
+
+        <FormList>
+            <InputText
+                showLabel={false}
+                id="custom-permission"
+                label="Custom permission"
+                placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
+                {value} />
+            <Helper type="neutral">
+                A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
+            </Helper>
+        </FormList>
+
+        <svelte:fragment slot="footer">
+            <Button submit disabled={!value}>Create</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index bdcd68941..13f71dffa 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -16,6 +16,7 @@
     import { writable } from 'svelte/store';
     import { DropList, DropListItem } from '..';
     import Custom from './custom.svelte';
+    import Row from './row.svelte';
     import Team from './team.svelte';
     import User from './user.svelte';
 
@@ -24,6 +25,7 @@
 
     let showUser = false;
     let showTeam = false;
+    let showCustom = false;
     let showDropdown = false;
 
     const groups = writable<Map<string, Permission>>(new Map());
@@ -39,24 +41,28 @@
     });
 
     function create(event: CustomEvent<string[]>) {
-        groups.update((n) => {
-            for (const role of event.detail) {
-                if (n.has(role)) {
-                    return n;
-                }
+        for (const role of event.detail) {
+            addRole(role);
+        }
 
-                n.set(role, {
-                    create: false,
-                    read: false,
-                    update: false,
-                    delete: false
-                });
-            }
+        showTeam = showUser = false;
+    }
+
+    function addRole(role: string) {
+        if ($groups.has(role)) {
+            return;
+        }
+
+        groups.update((n) => {
+            n.set(role, {
+                create: false,
+                read: false,
+                update: false,
+                delete: false
+            });
 
             return n;
         });
-
-        showTeam = showUser = false;
     }
 
     function fromPermissionString(permission: string): void {
@@ -136,7 +142,7 @@
                 {#each [...$groups] as [role, permission]}
                     <tr class="table-row">
                         <td class="table-col" data-title="Role">
-                            <Custom {role} {permission} />
+                            <Row {role} {permission} />
                         </td>
                         {#if withCreate}
                             <td class="table-col" data-title="Create">
@@ -200,10 +206,21 @@
         <span class="text">Add role</span>
     </Button>
     <svelte:fragment slot="list">
+        <DropListItem disabled={$groups.has('any')} on:click={() => addRole('any')}>
+            Any
+        </DropListItem>
+        <DropListItem disabled={$groups.has('guests')} on:click={() => addRole('guests')}>
+            All guests
+        </DropListItem>
+        <DropListItem disabled={$groups.has('users')} on:click={() => addRole('users')}>
+            All users
+        </DropListItem>
         <DropListItem on:click={() => (showUser = true)}>Select users</DropListItem>
         <DropListItem on:click={() => (showTeam = true)}>Select teams</DropListItem>
+        <DropListItem on:click={() => (showCustom = true)}>Custom permission</DropListItem>
     </svelte:fragment>
 </DropList>
 
 <User bind:show={showUser} on:create={create} {groups} />
 <Team bind:show={showTeam} on:create={create} {groups} />
+<Custom bind:show={showCustom} on:create={create} {groups} />
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
new file mode 100644
index 000000000..58454dc2c
--- /dev/null
+++ b/src/lib/components/permissions/row.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Permission } from './permissions.svelte';
+
+    export let role: string;
+    export let permission: Permission;
+</script>
+
+<div class="u-flex u-cross-center u-gap-8">
+    <div>
+        {#if role === 'users'}
+            <div>Users</div>
+        {:else if role === 'guests'}
+            <div>Guests</div>
+        {:else if role === 'any'}
+            <div>Any</div>
+        {:else}
+            <div>{role}</div>
+        {/if}
+    </div>
+</div>
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 8b3c6f5c0..b9bf837b0 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { Button, Form } from '$lib/elements/forms';
-    import { createEventDispatcher, onMount } from 'svelte';
-    import { Modal } from '..';
+    import { Button, Form, InputSearch } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { Query, type Models } from '@aw-labs/appwrite-console';
+    import { Avatar, Modal, Pagination } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
-    import InputSearch from '$lib/elements/forms/inputSearch.svelte';
-    import { sdkForProject } from '$lib/stores/sdk';
 
     export let show: boolean;
     export let groups: Writable<Map<string, Permission>>;
@@ -13,60 +13,99 @@
     const dispatch = createEventDispatcher();
 
     let search = '';
-    let results = [];
+    let offset = 0;
+    let results: Models.TeamList;
     let selected: Set<string> = new Set();
+    let hasSelection = false;
 
-    onMount(request);
+    function reset() {
+        offset = 0;
+        search = '';
+        selected.clear();
+    }
 
     function create() {
         dispatch('create', Array.from(selected));
+        reset();
     }
 
     async function request() {
-        results = (await sdkForProject.teams.list([], search)).teams;
+        if (!show) return;
+        results = await sdkForProject.teams.list([Query.limit(5), Query.offset(offset)], search);
     }
 
+    function onSelection(event: Event, role: string) {
+        const { checked } = event.currentTarget as HTMLInputElement;
+
+        if (checked) {
+            selected.add(role);
+        } else {
+            selected.delete(role);
+        }
+
+        hasSelection = selected.size > 0;
+    }
+
+    $: if (show) {
+        request();
+    }
+    $: if (offset !== null) {
+        request();
+    }
     $: if (search !== null) {
+        offset = 0;
         request();
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show>
-        <svelte:fragment slot="header">Select team</svelte:fragment>
+    <Modal bind:show on:close={reset}>
+        <svelte:fragment slot="header">Select teams</svelte:fragment>
         <InputSearch bind:value={search} />
-        <div class="table-wrapper">
-            <table class="table is-table-layout-auto is-remove-outer-styles">
-                <tbody class="table-tbody">
-                    {#each results as team (team.$id)}
-                        {@const role = `team:${team.$id}`}
-                        <tr class="table-row">
-                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
-                                <input
-                                    type="checkbox"
-                                    class="icon-check"
-                                    aria-label="Create"
-                                    checked={selected.has(role)}
-                                    on:change={() => selected.add(role)} />
-                            </td>
-                            <td class="table-col" data-title="Team">
-                                <div class="u-flex u-cross-center u-gap-8">
-                                    <div class="avatar is-size-small is-color-orange">
-                                        <span class="text" aria-hidden="true">ch</span>
-                                    </div>
-                                    <div class="u-line-height-1-5">
-                                        <div class="body-text-2">{team.name}</div>
-                                        <div class="u-x-small">{team.$id}</div>
-                                    </div>
-                                </div>
-                            </td>
-                        </tr>
-                    {/each}
-                </tbody>
-            </table>
+        {#if results?.teams}
+            <div class="table-wrapper">
+                <table class="table is-table-layout-auto is-remove-outer-styles">
+                    <tbody class="table-tbody">
+                        {#each results.teams as team (team.$id)}
+                            {@const role = `team:${team.$id}`}
+                            {@const exists = $groups.has(role)}
+                            <tr class="table-row">
+                                <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                    <input
+                                        id={team.$id}
+                                        type="checkbox"
+                                        class="icon-check"
+                                        aria-label="Create"
+                                        checked={exists || selected.has(role)}
+                                        disabled={exists}
+                                        on:change={(event) => onSelection(event, role)} />
+                                </td>
+                                <td class="table-col" data-title="Team">
+                                    <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
+                                        <Avatar
+                                            src={sdkForProject.avatars
+                                                .getInitials(team.name, 64, 64)
+                                                .toString()}
+                                            size={32}
+                                            name={team.name} />
+                                        <div class="u-line-height-1-5">
+                                            <div class="body-text-2">{team.name}</div>
+                                            <div class="u-x-small">{team.$id}</div>
+                                        </div>
+                                    </label>
+                                </td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+        {/if}
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {results?.total}</p>
+            <Pagination limit={5} bind:offset sum={results?.total} hidePages />
         </div>
         <svelte:fragment slot="footer">
-            <Button submit>Create</Button>
+            <Button submit disabled={!hasSelection}>Create</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index ead290e07..806760bea 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { Button, Form } from '$lib/elements/forms';
-    import { createEventDispatcher, onMount } from 'svelte';
-    import { Modal } from '..';
+    import { Button, Form, InputSearch } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import { Avatar, Modal, Pagination } from '..';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { Query, type Models } from '@aw-labs/appwrite-console';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
-    import InputSearch from '$lib/elements/forms/inputSearch.svelte';
-    import { sdkForProject } from '$lib/stores/sdk';
 
     export let show: boolean;
     export let groups: Writable<Map<string, Permission>>;
@@ -13,60 +13,99 @@
     const dispatch = createEventDispatcher();
 
     let search = '';
-    let results = [];
+    let offset = 0;
+    let results: Models.UserList<Record<string, unknown>>;
     let selected: Set<string> = new Set();
+    let hasSelection = false;
 
-    onMount(request);
+    function reset() {
+        offset = 0;
+        search = '';
+        selected.clear();
+    }
 
     function create() {
         dispatch('create', Array.from(selected));
+        reset();
     }
 
     async function request() {
-        results = (await sdkForProject.users.list([], search)).users;
+        if (!show) return;
+        results = await sdkForProject.users.list([Query.limit(5), Query.offset(offset)], search);
     }
 
+    function onSelection(event: Event, role: string) {
+        const { checked } = event.currentTarget as HTMLInputElement;
+
+        if (checked) {
+            selected.add(role);
+        } else {
+            selected.delete(role);
+        }
+
+        hasSelection = selected.size > 0;
+    }
+
+    $: if (show) {
+        request();
+    }
+    $: if (offset !== null) {
+        request();
+    }
     $: if (search !== null) {
+        offset = 0;
         request();
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show>
-        <svelte:fragment slot="header">Select team</svelte:fragment>
+    <Modal bind:show on:close={reset}>
+        <svelte:fragment slot="header">Select users</svelte:fragment>
         <InputSearch bind:value={search} />
-        <div class="table-wrapper">
-            <table class="table is-table-layout-auto is-remove-outer-styles">
-                <tbody class="table-tbody">
-                    {#each results as user (user.$id)}
-                        {@const role = `user:${user.$id}`}
-                        <tr class="table-row">
-                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
-                                <input
-                                    type="checkbox"
-                                    class="icon-check"
-                                    aria-label="Create"
-                                    checked={selected.has(role)}
-                                    on:change={() => selected.add(role)} />
-                            </td>
-                            <td class="table-col" data-title="User">
-                                <div class="u-flex u-cross-center u-gap-8">
-                                    <div class="avatar is-size-small is-color-orange">
-                                        <span class="text" aria-hidden="true">ch</span>
-                                    </div>
-                                    <div class="u-line-height-1-5">
-                                        <div class="body-text-2">{user.name}</div>
-                                        <div class="u-x-small">{user.$id}</div>
-                                    </div>
-                                </div>
-                            </td>
-                        </tr>
-                    {/each}
-                </tbody>
-            </table>
+        {#if results?.users}
+            <div class="table-wrapper">
+                <table class="table is-table-layout-auto is-remove-outer-styles">
+                    <tbody class="table-tbody">
+                        {#each results.users as user (user.$id)}
+                            {@const role = `user:${user.$id}`}
+                            {@const exists = $groups.has(role)}
+                            <tr class="table-row">
+                                <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                    <input
+                                        id={user.$id}
+                                        type="checkbox"
+                                        class="icon-check"
+                                        aria-label="Create"
+                                        checked={exists || selected.has(role)}
+                                        disabled={exists}
+                                        on:change={(event) => onSelection(event, role)} />
+                                </td>
+                                <td class="table-col" data-title="User">
+                                    <label class="u-flex u-cross-center u-gap-8" for={user.$id}>
+                                        <Avatar
+                                            src={sdkForProject.avatars
+                                                .getInitials(user.name, 64, 64)
+                                                .toString()}
+                                            size={32}
+                                            name={user.name} />
+                                        <div class="u-line-height-1-5">
+                                            <div class="body-text-2">{user.name}</div>
+                                            <div class="u-x-small">{user.$id}</div>
+                                        </div>
+                                    </label>
+                                </td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
+        {/if}
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {results?.total}</p>
+            <Pagination limit={5} bind:offset sum={results?.total} hidePages />
         </div>
         <svelte:fragment slot="footer">
-            <Button submit>Create</Button>
+            <Button submit disabled={!hasSelection}>Create</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
index e1806d3d7..8149a5652 100644
--- a/src/lib/elements/forms/inputSearch.svelte
+++ b/src/lib/elements/forms/inputSearch.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
+    import { onDestroy } from 'svelte';
 
     export let value = '';
     export let placeholder = '';
@@ -18,6 +19,13 @@
         }
     });
 
+    onDestroy(() => {
+        value = '';
+        if (timer) {
+            clearTimeout(timer);
+        }
+    });
+
     const valueChange = (event: Event) => {
         clearTimeout(timer);
         timer = setTimeout(() => {
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index b4d0dabff..10e026c8f 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -37,9 +37,9 @@
             href="https://appwrite.io/support"
             target="_blank"
             rel="noopener noreferrer"
-            class="button is-small is-text u-margin-inline-end-16"
-            ><span class="text">Support</span></a>
-        <button class="button is-small is-secondary"><span class="text">Upgrade</span></button>
+            class="button is-small is-text">
+            <span class="text">Support</span>
+        </a>
     </nav>
     <nav class="user-profile">
         {#if $user}

From 0a631b8621debda2bdfdb084ae093b7b6ea988d5 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 30 Sep 2022 13:03:53 +0200
Subject: [PATCH 03/10] fix: modal size for permissions

---
 src/lib/components/permissions/team.svelte | 2 +-
 src/lib/components/permissions/user.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index b9bf837b0..732877aab 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -59,7 +59,7 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show on:close={reset}>
+    <Modal bind:show on:close={reset} size="big">
         <svelte:fragment slot="header">Select teams</svelte:fragment>
         <InputSearch bind:value={search} />
         {#if results?.teams}
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index 806760bea..584b5f647 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -59,7 +59,7 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show on:close={reset}>
+    <Modal bind:show on:close={reset} size="big">
         <svelte:fragment slot="header">Select users</svelte:fragment>
         <InputSearch bind:value={search} />
         {#if results?.users}

From e6acaca22f31836a71db19876bd305a052205938 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 4 Oct 2022 12:46:45 +0200
Subject: [PATCH 04/10] fix: custom permissions

---
 src/lib/components/permissions/custom.svelte  |  7 +++--
 .../components/permissions/permissions.svelte | 27 ++++++++++++++++---
 .../[collection]/settings/+page.svelte        |  6 ++---
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index 680c1018b..ea8c6b76d 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -15,12 +15,15 @@
 
     function reset() {
         value = '';
+        show = false;
     }
 
     function create() {
         dispatch('create', [value]);
         reset();
     }
+
+    $: disabled = !value || $groups.has(value);
 </script>
 
 <Form on:submit={create}>
@@ -33,14 +36,14 @@
                 id="custom-permission"
                 label="Custom permission"
                 placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
-                {value} />
+                bind:value />
             <Helper type="neutral">
                 A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
             </Helper>
         </FormList>
 
         <svelte:fragment slot="footer">
-            <Button submit disabled={!value}>Create</Button>
+            <Button submit {disabled}>Create</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index 13f71dffa..714561ae2 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -33,9 +33,12 @@
     onMount(() => {
         permissions.forEach(fromPermissionString);
         groups.subscribe(() => {
-            const a = exportRoles();
-            if (difference(a, permissions).length || difference(permissions, a).length) {
-                permissions = a;
+            const current = exportRoles();
+            if (
+                difference(current, permissions).length ||
+                difference(permissions, current).length
+            ) {
+                permissions = current;
             }
         });
     });
@@ -63,6 +66,8 @@
 
             return n;
         });
+
+        showDropdown = false;
     }
 
     function fromPermissionString(permission: string): void {
@@ -111,6 +116,20 @@
             return prev;
         }, []);
     }
+
+    function sortRoles([a]: [string, Permission], [b]: [string, Permission]) {
+        if ((a === 'any') !== (b === 'any')) {
+            return a === 'any' ? -1 : 1;
+        }
+        if ((a === 'users') !== (b === 'users')) {
+            return a === 'users' ? -1 : 1;
+        }
+        if ((a === 'guests') !== (b === 'guests')) {
+            return a === 'guests' ? -1 : 1;
+        }
+
+        return a.localeCompare(b);
+    }
 </script>
 
 <div class="table-with-scroll">
@@ -139,7 +158,7 @@
                 </tr>
             </thead>
             <tbody class="table-tbody">
-                {#each [...$groups] as [role, permission]}
+                {#each [...$groups].sort(sortRoles) as [role, permission]}
                     <tr class="table-row">
                         <td class="table-col" data-title="Role">
                             <Row {role} {permission} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
index ce5bedff3..4c10657c8 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
@@ -93,7 +93,7 @@
                 databaseId,
                 $collection.$id,
                 $collection.name,
-                collectionDocumentSecurity ? collectionPermissions : $collection.$permissions
+                collectionDocumentSecurity ? $collection.$permissions : collectionPermissions
             );
             $collection.$permissions = collectionPermissions;
             $collection.documentSecurity = collectionDocumentSecurity;
@@ -208,8 +208,8 @@
                             documentation for more on <a class="link" href="/#">Permissions</a>
                         </p>
                     </Alert>
-                    {#if collectionPermissions}
-                        <Permissions permissions={collectionPermissions} withCreate />
+                    {#if collectionPermissions !== null}
+                        <Permissions bind:permissions={collectionPermissions} withCreate />
                     {/if}
                 {/if}
             </svelte:fragment>

From e058211c0fd4d4a3959e562f6727b8ad2d0f3415 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 4 Oct 2022 13:22:32 +0200
Subject: [PATCH 05/10] fix: permissions

---
 src/lib/components/permissions/permissions.svelte   | 13 ++++++++++---
 .../collection/[collection]/settings/+page.svelte   | 13 ++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index 714561ae2..47f5f9f3c 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -12,8 +12,8 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import { difference } from '$lib/helpers/array';
-    import { onMount } from 'svelte';
-    import { writable } from 'svelte/store';
+    import { onDestroy, onMount } from 'svelte';
+    import { writable, type Unsubscriber } from 'svelte/store';
     import { DropList, DropListItem } from '..';
     import Custom from './custom.svelte';
     import Row from './row.svelte';
@@ -27,12 +27,13 @@
     let showTeam = false;
     let showCustom = false;
     let showDropdown = false;
+    let unsubscribe: Unsubscriber;
 
     const groups = writable<Map<string, Permission>>(new Map());
 
     onMount(() => {
         permissions.forEach(fromPermissionString);
-        groups.subscribe(() => {
+        unsubscribe = groups.subscribe(() => {
             const current = exportRoles();
             if (
                 difference(current, permissions).length ||
@@ -43,6 +44,12 @@
         });
     });
 
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
+
     function create(event: CustomEvent<string[]>) {
         for (const role of event.detail) {
             addRole(role);
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
index 4c10657c8..955cf1f14 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
@@ -35,7 +35,10 @@
         if (collectionDocumentSecurity !== $collection.documentSecurity) {
             arePermsDisabled = false;
         } else if (collectionPermissions) {
-            if (difference(collectionPermissions, $collection.$permissions).length) {
+            if (
+                difference(collectionPermissions, $collection.$permissions).length ||
+                difference($collection.$permissions, collectionPermissions).length
+            ) {
                 arePermsDisabled = false;
             } else arePermsDisabled = true;
         }
@@ -119,8 +122,8 @@
             <svelte:fragment slot="aside">
                 <ul>
                     <InputSwitch
-                        label={enabled ? 'Enabled' : 'Disabled'}
                         id="toggle"
+                        label={enabled ? 'Enabled' : 'Disabled'}
                         bind:value={enabled} />
                 </ul>
                 <div>
@@ -214,11 +217,7 @@
                 {/if}
             </svelte:fragment>
             <svelte:fragment slot="actions">
-                <Button
-                    disabled={arePermsDisabled}
-                    on:click={() => {
-                        updatePermissions();
-                    }}>Update</Button>
+                <Button disabled={arePermsDisabled} on:click={updatePermissions}>Update</Button>
             </svelte:fragment>
         </CardGrid>
 

From 9eefc58133c0e7c3bf7feaeac81ff5e8ce9913a6 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 4 Oct 2022 16:18:15 +0200
Subject: [PATCH 06/10] fix: remove permissions info from databases

---
 .../collection/[collection]/settings/+page.svelte    | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
index 955cf1f14..5036390d6 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
@@ -204,16 +204,8 @@
                             <a class="link" href="/#">Permissions</a>
                         </p>
                     </Alert>
-                {:else}
-                    <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 !== null}
-                        <Permissions bind:permissions={collectionPermissions} withCreate />
-                    {/if}
+                {:else if collectionPermissions !== null}
+                    <Permissions bind:permissions={collectionPermissions} withCreate />
                 {/if}
             </svelte:fragment>
             <svelte:fragment slot="actions">

From 5560e7f2ce9c0d7a50b28ebfcd076e3a304f10b8 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 4 Oct 2022 16:34:01 +0200
Subject: [PATCH 07/10] feat: use permissions everywhere

---
 src/lib/components/permissions/custom.svelte  |  2 +-
 src/lib/components/permissions/index.ts       |  1 +
 src/lib/components/permissions/row.svelte     |  3 ---
 src/lib/components/permissions/team.svelte    |  2 +-
 src/lib/components/permissions/user.svelte    |  2 +-
 src/lib/elements/forms/form.svelte            |  6 ++++-
 .../document/[document]/+page.svelte          | 27 ++++++-------------
 .../[collection]/settings/+page.svelte        |  2 +-
 .../[collection]/wizard/step2.svelte          | 23 +++-------------
 .../storage/bucket/[bucket]/_create.svelte    | 19 +++----------
 .../bucket/[bucket]/file/[file]/+page.svelte  | 23 +++-------------
 .../bucket/[bucket]/settings/+page.svelte     | 17 +++---------
 12 files changed, 33 insertions(+), 94 deletions(-)
 create mode 100644 src/lib/components/permissions/index.ts

diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index ea8c6b76d..67e5afbd6 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -26,7 +26,7 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Form on:submit={create}>
+<Form on:submit={create} noMargin>
     <Modal bind:show on:close={reset}>
         <svelte:fragment slot="header">Custom permission</svelte:fragment>
 
diff --git a/src/lib/components/permissions/index.ts b/src/lib/components/permissions/index.ts
new file mode 100644
index 000000000..865f2d75c
--- /dev/null
+++ b/src/lib/components/permissions/index.ts
@@ -0,0 +1 @@
+export { default as Permissions } from './permissions.svelte';
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index 58454dc2c..2f23de52b 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-    import type { Permission } from './permissions.svelte';
-
     export let role: string;
-    export let permission: Permission;
 </script>
 
 <div class="u-flex u-cross-center u-gap-8">
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 732877aab..7aa0ca1ad 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Form on:submit={create}>
+<Form on:submit={create} noMargin>
     <Modal bind:show on:close={reset} size="big">
         <svelte:fragment slot="header">Select teams</svelte:fragment>
         <InputSearch bind:value={search} />
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index 584b5f647..20741b686 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Form on:submit={create}>
+<Form on:submit={create} noMargin>
     <Modal bind:show on:close={reset} size="big">
         <svelte:fragment slot="header">Select users</svelte:fragment>
         <InputSearch bind:value={search} />
diff --git a/src/lib/elements/forms/form.svelte b/src/lib/elements/forms/form.svelte
index dcc806372..ce34663f5 100644
--- a/src/lib/elements/forms/form.svelte
+++ b/src/lib/elements/forms/form.svelte
@@ -1,4 +1,8 @@
+<script lang="ts">
+    export let noMargin = false;
+</script>
+
 <!-- svelte-ignore a11y-no-redundant-roles -->
-<form role="form" class="form common-section" on:submit|preventDefault>
+<form role="form" class="form" class:common-section={!noMargin} on:submit|preventDefault>
     <slot />
 </form>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
index 3006a378d..d6021ba89 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { CardGrid, Box, Alert } from '$lib/components';
+    import { CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
-    import { Button, InputTags } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
     import { doc } from './store';
     import { addNotification } from '$lib/stores/notifications';
@@ -9,18 +9,18 @@
     import Document from './_document.svelte';
     import Delete from './_delete.svelte';
     import { difference } from '$lib/helpers/array';
-    import { page } from '$app/stores';
+    import { Permissions } from '$lib/components/permissions';
 
     let showDelete = false;
     let permissions = $doc?.$permissions;
     let arePermsDisabled = true;
-    const databaseId = $page.params.database;
 
     async function updatePermissions() {
+        console.log($doc);
         try {
             await sdkForProject.databases.updateDocument(
-                databaseId,
-                $doc.collectionId,
+                $doc.$databaseId,
+                $doc.$collectionId,
                 $doc.$id,
                 $doc.data,
                 permissions
@@ -70,20 +70,9 @@
                 <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="permissions"
-                        label="Permissions"
-                        placeholder="User ID, Team ID, or Role"
-                        bind:tags={permissions} />
-                </ul>
+                <Permissions bind:permissions />
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
index 5036390d6..e7991b3a0 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
@@ -2,6 +2,7 @@
     import { Alert, CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, InputSwitch, Helper } from '$lib/elements/forms';
+    import { Permissions } from '$lib/components/permissions';
     import { collection } from '../store';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -10,7 +11,6 @@
     import { page } from '$app/stores';
     import { difference } from '$lib/helpers/array';
     import Delete from './deleteCollection.svelte';
-    import Permissions from '$lib/components/permissions/permissions.svelte';
 
     const databaseId = $page.params.database;
 
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step2.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step2.svelte
index 153c03ef1..e987e8254 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step2.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { Alert } from '$lib/components';
-    import { InputTags } from '$lib/elements/forms';
+    import { Permissions } from '$lib/components/permissions';
     import { WizardStep } from '$lib/layout';
     import { createDocument } from './store';
 </script>
@@ -12,21 +11,7 @@
         <b> Document Level</b>. If collection Level permissions are assigned, permissions applied to
         individual documents are ignored.
     </svelte:fragment>
-    <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="permissions"
-            label="Permissions"
-            placeholder="User ID, Team ID, or Role"
-            bind:tags={$createDocument.permissions} />
-    </ul>
+    <div class="common-section">
+        <Permissions bind:permissions={$createDocument.permissions} />
+    </div>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
index fe94f6e7f..fc6c21eb5 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-    import { InputTags, InputText, Button, Form, FormList } from '$lib/elements/forms';
+    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { Modal, Alert, InnerModal } from '$lib/components';
+    import { Modal, InnerModal } from '$lib/components';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { page } from '$app/stores';
     import { uploader } from '$lib/stores/uploader';
     import { bucket } from './store';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
+    import { Permissions } from '$lib/components/permissions';
 
     export let showCreate = false;
 
@@ -148,19 +149,7 @@
                 </InnerModal>
             {/if}
             <p class="heading-level-7">Permissions</p>
-            <Alert type="info">
-                <p>
-                    Tip: Add role:all for wildcard access. Check out our documentation for more on <a
-                        class="link"
-                        href="#?">
-                        Permissions</a>
-                </p>
-            </Alert>
-            <InputTags
-                id="permissions"
-                label="Permissions"
-                bind:tags={permissions}
-                placeholder="User ID, Team ID or Role" />
+            <Permissions bind:permissions />
         </FormList>
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
index 38ec20e02..152ab8451 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { Alert, CardGrid, Box, Copy } from '$lib/components';
+    import { CardGrid, Box, Copy } from '$lib/components';
     import { Container } from '$lib/layout';
-    import { Button, InputTags } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import { file } from './store';
     import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
@@ -12,6 +12,7 @@
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
     import { difference } from '$lib/helpers/array';
+    import { Permissions } from '$lib/components/permissions';
 
     onMount(async () => {
         let bucketId = $page.params.bucket;
@@ -113,23 +114,7 @@
                 permissions are enabled, file permissions will be ignored.
             </p>
             <svelte:fragment slot="aside">
-                <Alert type="info">
-                    <svelte:fragment slot="title">
-                        You have Bucket Level permissions enabled
-                    </svelte:fragment>
-                    <p>
-                        If you want to assign permissions specific to this file, you will need to
-                        update your <a class="link" href="#/"> Bucket Settings</a> to enable File Level
-                        permissions.
-                    </p>
-                </Alert>
-                <ul class="common-section">
-                    <InputTags
-                        id="permissions"
-                        label="Permissions"
-                        placeholder="User ID, Team ID, or Role"
-                        bind:tags={filePermissions} />
-                </ul>
+                <Permissions bind:permissions={filePermissions} />
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
index 178c05534..36432a67a 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, CardGrid, Box } from '$lib/components';
+    import { CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
     import {
         Form,
@@ -20,6 +20,7 @@
     import { page } from '$app/stores';
     import Pill from '$lib/elements/pill.svelte';
     import { difference } from '$lib/helpers/array';
+    import { Permissions } from '$lib/components/permissions';
 
     let showDelete = false;
 
@@ -281,20 +282,8 @@
                             </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 bucketFileSecurity}
-                        <ul class="common-section">
-                            <InputTags
-                                id="permissions"
-                                label="Permissions"
-                                placeholder="User ID, Team ID, or Role"
-                                bind:tags={bucketPermissions} />
-                        </ul>
+                        <Permissions bind:permissions={bucketPermissions} />
                     {/if}
                 </svelte:fragment>
                 <svelte:fragment slot="actions">

From 276cd561743e4ab2a21052f9109b06de6d86b64b Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 4 Oct 2022 16:37:36 +0200
Subject: [PATCH 08/10] fix: unused row property

---
 src/lib/components/permissions/permissions.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index 47f5f9f3c..1d7c9b0ec 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -168,7 +168,7 @@
                 {#each [...$groups].sort(sortRoles) as [role, permission]}
                     <tr class="table-row">
                         <td class="table-col" data-title="Role">
-                            <Row {role} {permission} />
+                            <Row {role} />
                         </td>
                         {#if withCreate}
                             <td class="table-col" data-title="Create">

From efa512124e46dceeb5c8216f8d74ebfb70c7b16e Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 4 Oct 2022 16:40:17 +0200
Subject: [PATCH 09/10] chore: remove console logs

---
 .../collection/[collection]/document/[document]/+page.svelte  | 1 -
 .../overview/keys/[key]/+page@project-[project].svelte        | 1 -
 .../project-[project]/storage/bucket/[bucket]/+page.svelte    | 4 +---
 .../storage/bucket/[bucket]/settings/+page.svelte             | 1 -
 4 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
index d6021ba89..4f788fcc2 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
@@ -16,7 +16,6 @@
     let arePermsDisabled = true;
 
     async function updatePermissions() {
-        console.log($doc);
         try {
             await sdkForProject.databases.updateDocument(
                 $doc.$databaseId,
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index 113856d38..a36510ad3 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -116,7 +116,6 @@
     }
 
     async function updateScopes() {
-        console.log(scopes.filter((scope) => activeScopes[scope]));
         try {
             await sdkForConsole.projects.updateKey(
                 $project.$id,
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
index 1ec1df410..97f7973a8 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
@@ -112,9 +112,7 @@
                                     <button
                                         class="button is-only-icon is-text"
                                         aria-label="Delete item"
-                                        on:click|preventDefault={() => {
-                                            console.log('Feel refreshed?');
-                                        }}>
+                                        on:click|preventDefault>
                                         <span class="icon-refresh" aria-hidden="true" />
                                     </button>
                                     <button
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
index 36432a67a..1b5488f96 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
@@ -157,7 +157,6 @@
     }
     async function updateMaxSize() {
         let size = sizeToBytes(maxSize, byteUnit);
-        console.log(size);
         try {
             await sdkForProject.storage.updateBucket(
                 $bucket.$id,

From ae3ca0ff189c2839aa07073b537c65b13467c322 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 5 Oct 2022 12:24:30 +0200
Subject: [PATCH 10/10] fix: import for custom permissions

---
 src/lib/components/permissions/custom.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index 67e5afbd6..7f42bd48b 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-    import { Button, Form, FormList, Helper } from '$lib/elements/forms';
+    import { Button, Form, FormList, Helper, InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { Modal } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
-    import InputText from '$lib/elements/forms/inputText.svelte';
 
     export let show: boolean;
     export let groups: Writable<Map<string, Permission>>;