From 62d998b4f82b0bc65bbed21117637b2dc8bc2698 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 29 Jul 2022 15:06:01 +0200
Subject: [PATCH 001/118] feat: poc for email native error handling

---
 src/lib/elements/forms/form.svelte            |  2 +-
 src/lib/elements/forms/inputEmail.svelte      | 19 +++-
 .../[project]/users/user/[user]/index.svelte  | 91 ++++++++-----------
 3 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/src/lib/elements/forms/form.svelte b/src/lib/elements/forms/form.svelte
index aae39a36e..4abbd5d98 100644
--- a/src/lib/elements/forms/form.svelte
+++ b/src/lib/elements/forms/form.svelte
@@ -1,3 +1,3 @@
-<form class="form" on:submit|preventDefault>
+<form class="form common-section" on:invalid={(e) => console.log(e)} on:submit|preventDefault>
     <slot />
 </form>
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index c5bbd4f73..f8370ebcc 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -11,6 +11,10 @@
     export let disabled = false;
     export let autofocus = false;
     export let autocomplete = false;
+    export let errorMessage = 'Your email should be formatted as: name@example.com';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -19,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -35,4 +49,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index c7cf5a401..27082a32e 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -5,11 +5,11 @@
     import { Pill } from '$lib/elements';
     import {
         Button,
+        Form,
         InputText,
         InputEmail,
         InputPassword,
-        InputPhone,
-        Helper
+        InputPhone
     } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -25,10 +25,8 @@
             arePrefsDisabled = false;
         }
     }
+
     let showDelete = false;
-    let showError: false | 'name' | 'email' | 'phone' | 'password' = false;
-    let errorMessage = 'Something went wrong';
-    let errorType: 'error' | 'warning' | 'success' = 'error';
     let userName: string = null,
         userEmail: string = null,
         userPhone: string = null,
@@ -50,12 +48,6 @@
 
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
 
-    function addError(location: typeof showError, message: string, type: typeof errorType) {
-        showError = location;
-        errorMessage = message;
-        errorType = type;
-    }
-
     async function updateVerificationEmail() {
         try {
             await sdkForProject.users.updateEmailVerification($user.$id, !$user.emailVerification);
@@ -109,52 +101,60 @@
         try {
             await sdkForProject.users.updateName($user.$id, userName);
             $user.name = userName;
-            showError = false;
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
             });
         } catch (error) {
-            addError('name', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
     async function updateEmail() {
         try {
             await sdkForProject.users.updateEmail($user.$id, userEmail);
             $user.email = userEmail;
-            showError = false;
             addNotification({
                 message: 'Email has been updated',
                 type: 'success'
             });
         } catch (error) {
-            addError('email', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
     async function updatePhone() {
         try {
             await sdkForProject.users.updatePhone($user.$id, userPhone);
             $user.phone = userPhone;
-            showError = false;
             addNotification({
                 message: 'Phone has been updated',
                 type: 'success'
             });
         } catch (error) {
-            addError('phone', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
     async function updatePassword() {
         try {
             await sdkForProject.users.updatePassword($user.$id, newPassword);
             newPassword = null;
-            showError = false;
             addNotification({
                 message: 'Password has been updated',
                 type: 'success'
             });
         } catch (error) {
-            addError('password', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
 
@@ -283,9 +283,6 @@
                         placeholder="Enter name"
                         autocomplete={false}
                         bind:value={userName} />
-                    {#if showError === 'name'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
                 </ul>
             </svelte:fragment>
 
@@ -297,30 +294,28 @@
                     }}>Update</Button>
             </svelte:fragment>
         </CardGrid>
-        <CardGrid>
-            <h6 class="heading-level-7">Update Email</h6>
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputEmail
-                        id="email"
-                        label="Email"
-                        placeholder="Enter email"
-                        autocomplete={false}
-                        bind:value={userEmail} />
-                    {#if showError === 'email'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
-                </ul>
-            </svelte:fragment>
 
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={userEmail === $user.email || !userEmail}
-                    on:click={() => {
-                        updateEmail();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
+        <Form on:submit={updateEmail}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Email</h6>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputEmail
+                            id="email"
+                            label="Email"
+                            placeholder="Enter email"
+                            autocomplete={false}
+                            bind:value={userEmail} />
+                    </ul>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={userEmail === $user.email || !userEmail} submit
+                        >Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
         <CardGrid>
             <h6 class="heading-level-7">Update Phone</h6>
             <svelte:fragment slot="aside">
@@ -331,9 +326,6 @@
                         placeholder="Enter phone number"
                         autocomplete={false}
                         bind:value={userPhone} />
-                    {#if showError === 'phone'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
                 </ul>
             </svelte:fragment>
 
@@ -363,9 +355,6 @@
                         meter={false}
                         showPasswordButton={true}
                         bind:value={newPassword} />
-                    {#if showError === 'password'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
                 </ul>
             </svelte:fragment>
 

From 3ed1463a42b8a11db5df5efcfc0b92c5eea7ffcf Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 10:42:36 +0200
Subject: [PATCH 002/118] feat: add helpers to inputs

---
 src/lib/elements/forms/helper.svelte        | 12 +++++++++---
 src/lib/elements/forms/inputEmail.svelte    |  1 -
 src/lib/elements/forms/inputNumber.svelte   | 18 +++++++++++++++++-
 src/lib/elements/forms/inputPassword.svelte | 18 +++++++++++++++++-
 src/lib/elements/forms/inputPhone.svelte    | 18 +++++++++++++++++-
 src/lib/elements/forms/inputText.svelte     | 18 +++++++++++++++++-
 src/lib/elements/forms/inputTextarea.svelte | 18 +++++++++++++++++-
 7 files changed, 94 insertions(+), 9 deletions(-)

diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index b79019a53..c60baab65 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
-    export let type: false | 'success' | 'warning' | 'error' = 'warning';
+    export let type: false | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
 
     let icon = '';
     switch (type) {
+        case 'neutral':
+            icon = 'info';
+            break;
+        case 'info':
+            icon = 'info';
+            break;
         case 'success':
             icon = 'check-circle';
             break;
@@ -20,11 +26,11 @@
     }
 </script>
 
-<li class={`helper u-${type} u-margin-block-start-8"`}>
+<p class={`helper u-${type} u-margin-block-start-12"`}>
     {#if icon !== ''}
         <span class={`icon-${icon}`} aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />
     </span>
-</li>
+</p>
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index f8370ebcc..b935ecc76 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -13,7 +13,6 @@
     export let autocomplete = false;
     export let errorMessage = 'Your email should be formatted as: name@example.com';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-
     export let showHelper = false;
 
     let element: HTMLInputElement;
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 589296360..f6d3691b9 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -12,6 +12,9 @@
     export let autofocus = false;
     export let maxlength: number = null;
     export let minlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -20,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -37,4 +50,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 5140ca435..7a69e54e4 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let id: string;
     export let label: string;
@@ -13,6 +13,9 @@
     export let meter = true;
     export let autocomplete = false;
     export let showPasswordButton = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
     let showInPlainText = false;
@@ -23,6 +26,14 @@
         }
     });
 
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
     $: strength = value ? value.length * 10 : 0;
 </script>
 
@@ -31,6 +42,7 @@
     <div class="input-text-wrapper">
         {#if showInPlainText}
             <input
+                on:invalid={handleInvalid}
                 type="text"
                 {id}
                 name={id}
@@ -43,6 +55,7 @@
                 bind:this={element} />
         {:else}
             <input
+                on:invalid={handleInvalid}
                 {id}
                 {placeholder}
                 {disabled}
@@ -77,4 +90,7 @@
             </button>
         {/if}
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index e0b2dfaf1..d8a0665cc 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -12,6 +12,9 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -20,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -37,4 +50,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index f106c6a91..826d02a92 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -12,6 +12,9 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -20,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -37,4 +50,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 7c892d234..6d084346e 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -11,6 +11,9 @@
     export let disabled = false;
     export let autofocus = false;
     export let maxlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLTextAreaElement;
 
@@ -19,12 +22,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <textarea
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -34,4 +47,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>

From cd9d4ade86fda01b2c4be619afb8a2255b64fae5 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 11:36:57 +0200
Subject: [PATCH 003/118] feat: moved functions to on:submit in user screen

---
 src/lib/elements/forms/inputPhone.svelte      |   2 +-
 .../[project]/users/user/[user]/index.svelte  | 277 +++++++++---------
 2 files changed, 140 insertions(+), 139 deletions(-)

diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index d8a0665cc..dca033d6a 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -12,7 +12,7 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
-    export let errorMessage = 'An error occurred';
+    export let errorMessage = 'Allowed characters: leading ‘+’ and maximum of 15 digits';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index be7c115a3..2d685b872 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -263,28 +263,27 @@
                 {/if}
             </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={userName} />
-                </ul>
-            </svelte:fragment>
+        <Form on:submit={updateName}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Name</h6>
 
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={userName === $user.name || !userName}
-                    on:click={() => {
-                        updateName();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputText
+                            id="name"
+                            label="Name"
+                            placeholder="Enter name"
+                            autocomplete={false}
+                            bind:value={userName} />
+                    </ul>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={userName === $user.name || !userName} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
 
         <Form on:submit={updateEmail}>
             <CardGrid>
@@ -307,126 +306,128 @@
             </CardGrid>
         </Form>
 
-        <CardGrid>
-            <h6 class="heading-level-7">Update Phone</h6>
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputPhone
-                        id="phone"
-                        label="Phone"
-                        placeholder="Enter phone number"
-                        autocomplete={false}
-                        bind:value={userPhone} />
-                </ul>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={userPhone === $user.phone || !userPhone}
-                    on:click={() => {
-                        updatePhone();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-        <CardGrid>
-            <div>
-                <h6 class="heading-level-7">Update Password</h6>
-            </div>
-
-            <p>
-                Enter a new password. A password must contain <b> at least 8 characters.</b>
-            </p>
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputPassword
-                        id="newPassword"
-                        label="New Password"
-                        placeholder="Enter new password"
-                        autocomplete={false}
-                        meter={false}
-                        showPasswordButton={true}
-                        bind:value={newPassword} />
-                </ul>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={!newPassword}
-                    on:click={() => {
-                        updatePassword();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-        <CardGrid>
-            <h6 class="heading-level-7">User Preferences</h6>
-            <p>
-                You can update your user preferences by storing information on the user's objects so
-                they can easily be shared across devices and sessions.
-            </p>
-            <svelte:fragment slot="aside">
-                <form class="form u-grid u-gap-16">
-                    <ul class="form-list">
-                        {#if prefs}
-                            {#each prefs as [key, value], index}
-                                <li class="form-item is-multiple">
-                                    <div class="form-item-part u-stretch">
-                                        <label class="label" for={`key-${index}`}>Key</label>
-                                        <div class="input-text-wrapper">
-                                            <input
-                                                id={`key-${key}`}
-                                                placeholder="Enter key"
-                                                type="text"
-                                                class="input-text"
-                                                bind:value={key} />
-                                        </div>
-                                    </div>
-                                    <div class="form-item-part u-stretch">
-                                        <label class="label" for={`value-${index}`}>Value</label>
-                                        <div class="input-text-wrapper">
-                                            <input
-                                                id={`value-${value}`}
-                                                placeholder="Enter value"
-                                                type="text"
-                                                class="input-text"
-                                                bind:value />
-                                        </div>
-                                    </div>
-                                    <div class="form-item-part u-cross-child-end">
-                                        <Button
-                                            text
-                                            disabled={(!key || !value) && index === 0}
-                                            on:click={() => {
-                                                if (index === 0) {
-                                                    prefs = [['', '']];
-                                                } else {
-                                                    prefs.splice(index, 1);
-                                                    prefs = prefs;
-                                                }
-                                            }}>
-                                            <span class="icon-x" aria-hidden="true" />
-                                        </Button>
-                                    </div>
-                                </li>
-                            {/each}
-                        {/if}
+        <Form on:submit={updatePhone}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Phone</h6>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputPhone
+                            id="phone"
+                            label="Phone"
+                            placeholder="Enter phone number"
+                            autocomplete={false}
+                            bind:value={userPhone} />
                     </ul>
-                    <Button
-                        text
-                        on:click={() => {
-                            if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
-                                prefs.push(['', '']);
-                                prefs = prefs;
-                            }
-                        }}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add Preference </span></Button>
-                </form>
-            </svelte:fragment>
+                </svelte:fragment>
 
-            <svelte:fragment slot="actions">
-                <Button disabled={arePrefsDisabled} on:click={() => updatePrefs()}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
+                <svelte:fragment slot="actions">
+                    <Button disabled={userPhone === $user.phone || !userPhone} submit
+                        >Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
+        <Form on:submit={updatePassword}>
+            <CardGrid>
+                <div>
+                    <h6 class="heading-level-7">Update Password</h6>
+                </div>
+
+                <p>
+                    Enter a new password. A password must contain <b> at least 8 characters.</b>
+                </p>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputPassword
+                            id="newPassword"
+                            label="New Password"
+                            placeholder="Enter new password"
+                            autocomplete={false}
+                            meter={false}
+                            showPasswordButton={true}
+                            bind:value={newPassword} />
+                    </ul>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={!newPassword} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
+        <Form on:submit={updatePrefs}>
+            <CardGrid>
+                <h6 class="heading-level-7">User Preferences</h6>
+                <p>
+                    You can update your user preferences by storing information on the user's
+                    objects so they can easily be shared across devices and sessions.
+                </p>
+                <svelte:fragment slot="aside">
+                    <form class="form u-grid u-gap-16">
+                        <ul class="form-list">
+                            {#if prefs}
+                                {#each prefs as [key, value], index}
+                                    <li class="form-item is-multiple">
+                                        <div class="form-item-part u-stretch">
+                                            <label class="label" for={`key-${index}`}>Key</label>
+                                            <div class="input-text-wrapper">
+                                                <input
+                                                    id={`key-${key}`}
+                                                    placeholder="Enter key"
+                                                    type="text"
+                                                    class="input-text"
+                                                    bind:value={key} />
+                                            </div>
+                                        </div>
+                                        <div class="form-item-part u-stretch">
+                                            <label class="label" for={`value-${index}`}
+                                                >Value</label>
+                                            <div class="input-text-wrapper">
+                                                <input
+                                                    id={`value-${value}`}
+                                                    placeholder="Enter value"
+                                                    type="text"
+                                                    class="input-text"
+                                                    bind:value />
+                                            </div>
+                                        </div>
+                                        <div class="form-item-part u-cross-child-end">
+                                            <Button
+                                                text
+                                                disabled={(!key || !value) && index === 0}
+                                                on:click={() => {
+                                                    if (index === 0) {
+                                                        prefs = [['', '']];
+                                                    } else {
+                                                        prefs.splice(index, 1);
+                                                        prefs = prefs;
+                                                    }
+                                                }}>
+                                                <span class="icon-x" aria-hidden="true" />
+                                            </Button>
+                                        </div>
+                                    </li>
+                                {/each}
+                            {/if}
+                        </ul>
+                        <Button
+                            text
+                            on:click={() => {
+                                if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
+                                    prefs.push(['', '']);
+                                    prefs = prefs;
+                                }
+                            }}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text"> Add Preference </span></Button>
+                    </form>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={arePrefsDisabled} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
 
         <CardGrid>
             <div>

From 07e8e635e6b1fec1248b58ba2be9783bef6d58da Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 14:29:56 +0200
Subject: [PATCH 004/118] feat: function works on:submit

---
 .../[project]/users/teams/[team]/index.svelte | 61 ++++++++-----------
 1 file changed, 27 insertions(+), 34 deletions(-)

diff --git a/src/routes/console/[project]/users/teams/[team]/index.svelte b/src/routes/console/[project]/users/teams/[team]/index.svelte
index 57b1a3dc4..83ac0a25c 100644
--- a/src/routes/console/[project]/users/teams/[team]/index.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/index.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Avatar, CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
-    import { Button, InputText, Helper } from '$lib/elements/forms';
+    import { Button, InputText, Form } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
@@ -14,9 +14,6 @@
     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 teamName: string = null;
 
     onMount(async () => {
@@ -24,12 +21,6 @@
         teamName ??= $team.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, teamName);
@@ -40,7 +31,10 @@
                 type: 'success'
             });
         } catch (error) {
-            addError('name', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
 </script>
@@ -62,31 +56,30 @@
             </svelte:fragment>
         </CardGrid>
 
-        <CardGrid>
-            <h6 class="heading-level-7">Update Name</h6>
+        <Form on:submit={updateName}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Name</h6>
 
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputText
-                        id="name"
-                        label="Name"
-                        placeholder="Enter team name"
-                        autocomplete={false}
-                        bind:value={teamName} />
-                    {#if showError === 'name'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
-                </ul>
-            </svelte:fragment>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputText
+                            id="name"
+                            label="Name"
+                            placeholder="Enter team name"
+                            autocomplete={false}
+                            bind:value={teamName} />
+                    </ul>
+                </svelte:fragment>
 
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={teamName === $team.name || !teamName}
-                    on:click={() => {
-                        updateName();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
+                <svelte:fragment slot="actions">
+                    <Button
+                        disabled={teamName === $team.name || !teamName}
+                        on:click={() => {
+                            updateName();
+                        }}>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
 
         <CardGrid>
             <div>

From 66e2153be651eee5eb85255588f7a3de89639dcc Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 14:31:17 +0200
Subject: [PATCH 005/118] refactor: notification for better control & fix error
 color

---
 src/lib/layout/notification.svelte | 36 ++++++++++++------------------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index 7b77e5d51..a5f8cbe35 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -6,37 +6,29 @@
     export let title: Notification['title'];
     export let buttons: Notification['buttons'];
 
-    let icon: string;
-    switch (type) {
-        case 'success':
-            icon = 'check-circle';
-            break;
-        case 'warning':
-            icon = 'exclamation';
-            break;
+    let icon = {
+        success: 'icon-check-circle',
+        warning: 'icon-exclamation',
+        error: 'icon-exclamation-circle',
+        info: 'icon-info'
+    };
 
-        case 'error':
-            icon = 'exclamation-circle';
-            break;
-
-        case 'info':
-            icon = 'info';
-            break;
-
-        default:
-            icon = '';
-            break;
-    }
+    let typeClass = {
+        success: 'is-success',
+        warning: 'is-warning',
+        error: 'is-danger',
+        info: 'is-info'
+    };
 
     const dispatch = createEventDispatcher();
 </script>
 
-<li class={`alert-sticky is-${type}`}>
+<li class={`alert-sticky ${type ? typeClass[type] : ''}`}>
     <button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
         <span class="icon-x" aria-hidden="true" />
     </button>
     <div class="alert-sticky-image">
-        <span class={`icon-${icon}`} aria-hidden="true" />
+        <span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
     </div>
     <div class="alert-sticky-content">
         {#if title}

From ddb54372184b3c2e7e4b8363c05fe69b8f0e7411 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 15:05:39 +0200
Subject: [PATCH 006/118] refactor: switch statment

---
 src/lib/elements/forms/helper.svelte | 34 ++++++++--------------------
 1 file changed, 9 insertions(+), 25 deletions(-)

diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index c60baab65..f8c99c523 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -1,34 +1,18 @@
 <script lang="ts">
     export let type: false | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
 
-    let icon = '';
-    switch (type) {
-        case 'neutral':
-            icon = 'info';
-            break;
-        case 'info':
-            icon = 'info';
-            break;
-        case 'success':
-            icon = 'check-circle';
-            break;
-        case 'warning':
-            icon = 'exclamation';
-            break;
-
-        case 'error':
-            icon = 'exclamation-circle';
-            break;
-
-        default:
-            icon = '';
-            break;
-    }
+    let icon = {
+        info: 'icon-info',
+        success: 'icon-check-circle',
+        warning: 'icon-exclamation',
+        error: 'icon-exclamation-circle',
+        neutral: 'icon-info'
+    };
 </script>
 
 <p class={`helper u-${type} u-margin-block-start-12"`}>
-    {#if icon !== ''}
-        <span class={`icon-${icon}`} aria-hidden="true" />
+    {#if type}
+        <span class={type ? icon[type] : ''} aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />

From 1d5e7272ded7857ef7ef59c33707eebec0d9b54c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 16:00:19 +0200
Subject: [PATCH 007/118] chore: remove console log

---
 src/lib/elements/forms/form.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/elements/forms/form.svelte b/src/lib/elements/forms/form.svelte
index 4abbd5d98..020eabd08 100644
--- a/src/lib/elements/forms/form.svelte
+++ b/src/lib/elements/forms/form.svelte
@@ -1,3 +1,3 @@
-<form class="form common-section" on:invalid={(e) => console.log(e)} on:submit|preventDefault>
+<form class="form common-section" on:submit|preventDefault>
     <slot />
 </form>

From 27d2b9fb4c3899f8e6b3893e7b8cb6c91935c5ae Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 16:00:40 +0200
Subject: [PATCH 008/118] feat: add helper to remaining inputs

---
 src/lib/elements/forms/inputCheckbox.svelte | 25 +++++++++++++++++--
 src/lib/elements/forms/inputRadio.svelte    | 27 +++++++++++++++++++--
 src/lib/elements/forms/inputSwitch.svelte   | 18 +++++++++++++-
 src/lib/elements/forms/inputTags.svelte     | 19 ++++++++++++---
 4 files changed, 81 insertions(+), 8 deletions(-)

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index a132668de..fcc884faa 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -7,11 +7,32 @@
     export let value = false;
     export let required = false;
     export let disabled = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
-        <input {id} {disabled} {required} type="checkbox" bind:checked={value} />
+        <input
+            on:invalid={handleInvalid}
+            {id}
+            {disabled}
+            {required}
+            type="checkbox"
+            bind:checked={value} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 2fa330bb5..54c174374 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -9,11 +9,34 @@
     export let name: string;
     export let required = false;
     export let disabled = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <div class="input-text-wrapper">
-        <input {id} {name} {disabled} {required} {value} type="radio" bind:group />
+        <input
+            on:invalid={handleInvalid}
+            {id}
+            {name}
+            {disabled}
+            {required}
+            {value}
+            type="radio"
+            bind:group />
         <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index 38a6f2a40..aa181e333 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -1,17 +1,30 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let id: string;
     export let value = false;
     export let required = false;
     export let disabled = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class="choice-item" for={id}>
         <div class="input-text-wrapper">
             <input
+                on:invalid={handleInvalid}
                 {id}
                 {disabled}
                 {required}
@@ -25,4 +38,7 @@
             <div class="choice-item-title">{label}</div>
         </div>
     </label>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index c3d208cd6..bee1b47e6 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let id: string;
     export let label: string;
@@ -9,6 +9,9 @@
     export let placeholder = '';
     export let helper = '';
     export let autofocus = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let value = '';
     let element: HTMLInputElement;
@@ -48,6 +51,15 @@
     const removeValue = (value: string) => {
         tags = tags.filter((tag) => tag !== value);
     };
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
@@ -73,6 +85,7 @@
                 </ul>
             </div>
             <input
+                on:invalid={handleInvalid}
                 type="text"
                 class="tags-input-text"
                 {id}
@@ -83,7 +96,7 @@
                 bind:this={element} />
         </div>
     </div>
-    {#if helper}
-        <p class="helper u-margin-block-start-12">{helper}</p>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
     {/if}
 </FormItem>

From 4f8e12ee55ea50852a0b682a528996460ecfd3a0 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 17:14:23 +0200
Subject: [PATCH 009/118] feat: native error displayed, can overwrite native
 message

---
 src/lib/elements/forms/inputCheckbox.svelte |  5 ++++
 src/lib/elements/forms/inputEmail.svelte    |  7 ++++-
 src/lib/elements/forms/inputNumber.svelte   |  2 ++
 src/lib/elements/forms/inputPassword.svelte |  2 ++
 src/lib/elements/forms/inputPhone.svelte    |  2 ++
 src/lib/elements/forms/inputRadio.svelte    |  5 ++++
 src/lib/elements/forms/inputSelect.svelte   | 32 +++++++++++++++++++--
 src/lib/elements/forms/inputSwitch.svelte   |  5 ++++
 src/lib/elements/forms/inputTags.svelte     |  2 ++
 src/lib/elements/forms/inputText.svelte     |  2 ++
 src/lib/elements/forms/inputTextarea.svelte |  2 ++
 11 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index fcc884faa..44c373698 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -11,7 +11,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -26,6 +30,7 @@
     <div class="input-text-wrapper">
         <input
             on:invalid={handleInvalid}
+            bind:this={element}
             {id}
             {disabled}
             {required}
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index b935ecc76..1710d97df 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -11,7 +11,7 @@
     export let disabled = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let errorMessage = 'Your email should be formatted as: name@example.com';
+    export let errorMessage = 'An error occurred';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
@@ -24,6 +24,11 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
+        if (element.validity.typeMismatch) {
+            errorMessage = 'Your email should be formatted as: name@example.com';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index f6d3691b9..37d6ac0cd 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 8bd134359..8553aebe1 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -27,6 +27,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index dca033d6a..78c66d3e2 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 54c174374..cf36a123a 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -13,7 +13,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -27,6 +31,7 @@
     <div class="input-text-wrapper">
         <input
             on:invalid={handleInvalid}
+            bind:this={element}
             {id}
             {name}
             {disabled}
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 028c6342a..cd0113cf8 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -11,12 +11,37 @@
         value: string;
         label: string;
     }[];
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
+
+    let element: HTMLSelectElement;
+
+    const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
+        if (element.validity.typeMismatch) {
+            errorMessage = 'Your email should be formatted as: name@example.com';
+        }
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="select">
-        <select bind:value {id} {required} {disabled}>
+        <select
+            on:invalid={handleInvalid}
+            bind:this={element}
+            bind:value
+            {id}
+            {required}
+            {disabled}>
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
                     {option.label}
@@ -25,4 +50,7 @@
         </select>
         <span class="icon-cheveron-down" aria-hidden="true" />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index aa181e333..14595503b 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -10,7 +10,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -31,6 +35,7 @@
                 type="checkbox"
                 class="switch"
                 role="switch"
+                bind:this={element}
                 bind:checked={value}
                 on:change />
         </div>
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index bee1b47e6..43c90ce71 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -53,6 +53,8 @@
     };
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 826d02a92..b53058b03 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 6d084346e..da0a15f81 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -24,6 +24,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };

From 73c63e8740f1c95d6b9946d60b64e6d5673b04b7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 13:49:56 +0200
Subject: [PATCH 010/118] feat: breadcrumbs update on name change

---
 .../[project]/users/teams/[team]/index.svelte   |  5 ++++-
 .../[project]/users/user/[user]/index.svelte    | 17 +++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/routes/console/[project]/users/teams/[team]/index.svelte b/src/routes/console/[project]/users/teams/[team]/index.svelte
index 57b1a3dc4..5fc5e0a63 100644
--- a/src/routes/console/[project]/users/teams/[team]/index.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/index.svelte
@@ -7,7 +7,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { team } from './store';
-    import { title } from '$lib/stores/layout';
+    import { title, breadcrumbs } from '$lib/stores/layout';
     import DeleteTeam from './_deleteTeam.svelte';
     import { onMount } from 'svelte';
 
@@ -35,6 +35,9 @@
             await sdkForProject.teams.update($page.params.team, teamName);
             $team.name = teamName;
             title.set(teamName);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size - 1);
+            breadcrumb.title = teamName;
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size - 1, breadcrumb);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index da8f82ec3..63a3b772c 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -17,7 +17,7 @@
     import DeleteUser from './_deleteUser.svelte';
     import { user } from './store';
     import { onMount } from 'svelte';
-    import { title } from '$lib/stores/layout';
+    import { title, breadcrumbs } from '$lib/stores/layout';
 
     $: if (prefs) {
         if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($user.prefs))) {
@@ -113,6 +113,10 @@
             await sdkForProject.users.updateName($user.$id, userName);
             $user.name = userName;
             title.set(userName);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size - 1);
+            breadcrumb.title = userName;
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size - 1, breadcrumb);
+
             showError = false;
             addNotification({
                 message: 'Name has been updated',
@@ -423,14 +427,15 @@
                     </ul>
                     <Button
                         text
+                        disabled={prefs?.length
+                            ? !prefs[prefs.length - 1][0] || !prefs[prefs.length - 1][1]
+                            : true}
                         on:click={() => {
-                            if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
-                                prefs.push(['', '']);
-                                prefs = prefs;
-                            }
+                            prefs.push(['', '']);
+                            prefs = prefs;
                         }}>
                         <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add Preference </span></Button>
+                        <span class="text"> Add preference </span></Button>
                 </form>
             </svelte:fragment>
 

From d66ce9232e15b2ef9fa83bf0cdd4b0e196500dbf Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 13:50:29 +0200
Subject: [PATCH 011/118] disabled not implemented section

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

diff --git a/src/routes/console/[project]/users/security.svelte b/src/routes/console/[project]/users/security.svelte
index d65672589..cfa9dec9a 100644
--- a/src/routes/console/[project]/users/security.svelte
+++ b/src/routes/console/[project]/users/security.svelte
@@ -143,8 +143,9 @@
         <svelte:fragment slot="aside">
             <form class="form u-grid u-gap-16">
                 <ul class="form-list is-multiple">
-                    <InputNumber id="length" label="Length" value={1} />
+                    <InputNumber disabled id="length" label="Length" value={1} />
                     <InputSelect
+                        disabled
                         id="period"
                         {options}
                         label="Time Period"

From cfc6e7003914d15b1d57584a2eab4b366ec9b7e5 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 13:57:57 +0200
Subject: [PATCH 012/118] chore: renamed route `users` to `authentication`

---
 README.md                                              |  2 +-
 src/lib/layout/navigation.svelte                       |  8 +++++---
 src/lib/stores/oauth-providers.ts                      | 10 +++++-----
 .../{users => authentication}/__layout.svelte          |  0
 .../{users => authentication}/_appleOAuth.svelte       |  0
 .../{users => authentication}/_auth0OAuth.svelte       |  0
 .../{users => authentication}/_createTeam.svelte       |  0
 .../{users => authentication}/_createUser.svelte       |  0
 .../{users => authentication}/_mainOAuth.svelte        |  0
 .../{users => authentication}/_microsoftOAuth.svelte   |  0
 .../{users => authentication}/_oktaOAuth.svelte        |  0
 .../{users => authentication}/authentication.svelte    |  0
 .../[project]/{users => authentication}/index.svelte   |  5 +++--
 .../{users => authentication}/security.svelte          |  0
 .../[project]/{users => authentication}/store.ts       |  0
 .../[project]/{users => authentication}/teams.svelte   |  5 +++--
 .../teams/[team]/__layout.svelte                       |  2 +-
 .../teams/[team]/_createMembership.svelte              |  2 +-
 .../teams/[team]/_deleteMembership.svelte              |  2 +-
 .../teams/[team]/_deleteTeam.svelte                    |  2 +-
 .../teams/[team]/activity.svelte                       |  0
 .../teams/[team]/index.svelte                          |  0
 .../teams/[team]/members.svelte                        |  6 ++++--
 .../{users => authentication}/teams/[team]/store.ts    |  0
 .../[project]/{users => authentication}/usage.svelte   |  0
 .../user/[user]/__layout.svelte                        |  2 +-
 .../user/[user]/_deleteAllMemberships.svelte           |  4 +++-
 .../user/[user]/_deleteAllSessions.svelte              |  0
 .../user/[user]/_deleteMembership.svelte               |  2 +-
 .../user/[user]/_deleteSession.svelte                  |  0
 .../user/[user]/_deleteUser.svelte                     |  2 +-
 .../user/[user]/activity.svelte                        |  2 +-
 .../{users => authentication}/user/[user]/index.svelte |  0
 .../user/[user]/memberships.svelte                     |  4 ++--
 .../user/[user]/sessions.svelte                        |  2 +-
 .../{users => authentication}/user/[user]/store.ts     |  0
 36 files changed, 35 insertions(+), 27 deletions(-)
 rename src/routes/console/[project]/{users => authentication}/__layout.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_appleOAuth.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_auth0OAuth.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_createTeam.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_createUser.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_mainOAuth.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_microsoftOAuth.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/_oktaOAuth.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/authentication.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/index.svelte (96%)
 rename src/routes/console/[project]/{users => authentication}/security.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/store.ts (100%)
 rename src/routes/console/[project]/{users => authentication}/teams.svelte (95%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/__layout.svelte (94%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/_createMembership.svelte (97%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/_deleteMembership.svelte (93%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/_deleteTeam.svelte (98%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/activity.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/index.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/members.svelte (96%)
 rename src/routes/console/[project]/{users => authentication}/teams/[team]/store.ts (100%)
 rename src/routes/console/[project]/{users => authentication}/usage.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/__layout.svelte (95%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/_deleteAllMemberships.svelte (90%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/_deleteAllSessions.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/_deleteMembership.svelte (93%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/_deleteSession.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/_deleteUser.svelte (98%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/activity.svelte (98%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/index.svelte (100%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/memberships.svelte (96%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/sessions.svelte (98%)
 rename src/routes/console/[project]/{users => authentication}/user/[user]/store.ts (100%)

diff --git a/README.md b/README.md
index f4e2dbffb..76f82ba16 100644
--- a/README.md
+++ b/README.md
@@ -147,7 +147,7 @@ Adding a new dependency should have vital value on the product with minimum poss
 │       │   │   │   ├── _create.svelte  // Component to Create collections
 │       │   │   │   └── index.svelte    // Entrypoint for "/console/[PROJECT_ID]/database"
 │       │   │   ├── storage             // Storage Service "/console/[PROJECT]/storage"
-│       │   │   └── users               // Users Service "/console/[PROJECT]/users"
+│       │   │   └── authentication      // Users Service "/console/[PROJECT]/authentication"
 │       │   └──...
 │       ├── login.svelte                // Component for Login "/console/login"
 │       └── register.svelte             // Component for Register "/console/register"
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 6c2f519f5..4e7018963 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -41,10 +41,12 @@
                     <li class="drop-list-item">
                         <a
                             class="drop-button"
-                            class:is-selected={$page.url.pathname.startsWith(`${path}/users`)}
-                            href={`${path}/users`}>
+                            class:is-selected={$page.url.pathname.startsWith(
+                                `${path}/authentication`
+                            )}
+                            href={`${path}/authentication`}>
                             <span class="icon-user-group" aria-hidden="true" />
-                            <span class="text">Users</span>
+                            <span class="text">Authentication</span>
                         </a>
                     </li>
                     <li class="drop-list-item">
diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 45512bc7c..68baf0ff4 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -1,11 +1,11 @@
 import { writable } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
 import type { SvelteComponent } from 'svelte';
-import Apple from '../../routes/console/[project]/users/_appleOAuth.svelte';
-import Microsoft from '../../routes/console/[project]/users/_microsoftOAuth.svelte';
-import Okta from '../../routes/console/[project]/users/_oktaOAuth.svelte';
-import Auth0 from '../../routes/console/[project]/users/_auth0OAuth.svelte';
-import Main from '../../routes/console/[project]/users/_mainOAuth.svelte';
+import Apple from '../../routes/console/[project]/authentication/_appleOAuth.svelte';
+import Microsoft from '../../routes/console/[project]/authentication/_microsoftOAuth.svelte';
+import Okta from '../../routes/console/[project]/authentication/_oktaOAuth.svelte';
+import Auth0 from '../../routes/console/[project]/authentication/_auth0OAuth.svelte';
+import Main from '../../routes/console/[project]/authentication/_mainOAuth.svelte';
 
 export type Provider = {
     name: string;
diff --git a/src/routes/console/[project]/users/__layout.svelte b/src/routes/console/[project]/authentication/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/users/__layout.svelte
rename to src/routes/console/[project]/authentication/__layout.svelte
diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/authentication/_appleOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_appleOAuth.svelte
rename to src/routes/console/[project]/authentication/_appleOAuth.svelte
diff --git a/src/routes/console/[project]/users/_auth0OAuth.svelte b/src/routes/console/[project]/authentication/_auth0OAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_auth0OAuth.svelte
rename to src/routes/console/[project]/authentication/_auth0OAuth.svelte
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/authentication/_createTeam.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_createTeam.svelte
rename to src/routes/console/[project]/authentication/_createTeam.svelte
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/authentication/_createUser.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_createUser.svelte
rename to src/routes/console/[project]/authentication/_createUser.svelte
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/authentication/_mainOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_mainOAuth.svelte
rename to src/routes/console/[project]/authentication/_mainOAuth.svelte
diff --git a/src/routes/console/[project]/users/_microsoftOAuth.svelte b/src/routes/console/[project]/authentication/_microsoftOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_microsoftOAuth.svelte
rename to src/routes/console/[project]/authentication/_microsoftOAuth.svelte
diff --git a/src/routes/console/[project]/users/_oktaOAuth.svelte b/src/routes/console/[project]/authentication/_oktaOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/users/_oktaOAuth.svelte
rename to src/routes/console/[project]/authentication/_oktaOAuth.svelte
diff --git a/src/routes/console/[project]/users/authentication.svelte b/src/routes/console/[project]/authentication/authentication.svelte
similarity index 100%
rename from src/routes/console/[project]/users/authentication.svelte
rename to src/routes/console/[project]/authentication/authentication.svelte
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/authentication/index.svelte
similarity index 96%
rename from src/routes/console/[project]/users/index.svelte
rename to src/routes/console/[project]/authentication/index.svelte
index b581e6ab3..78f43d7b2 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/authentication/index.svelte
@@ -31,7 +31,7 @@
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const userCreated = async (event: CustomEvent<Models.User<Record<string, unknown>>>) => {
-        await goto(`${base}/console/${project}/users/user/${event.detail.$id}`);
+        await goto(`${base}/console/${project}/authentication/user/${event.detail.$id}`);
     };
 
     $: usersList.load(search, limit, offset ?? 0);
@@ -78,7 +78,8 @@
             </TableHeader>
             <TableBody>
                 {#each $usersList.users as user}
-                    <TableRowLink href={`${base}/console/${project}/users/user/${user.$id}`}>
+                    <TableRowLink
+                        href={`${base}/console/${project}/authentication/user/${user.$id}`}>
                         <TableCell title="Name">
                             <div class="u-flex u-gap-12 u-cross-center">
                                 <Avatar size={32} src={getAvatar(user.name)} name={user.name} />
diff --git a/src/routes/console/[project]/users/security.svelte b/src/routes/console/[project]/authentication/security.svelte
similarity index 100%
rename from src/routes/console/[project]/users/security.svelte
rename to src/routes/console/[project]/authentication/security.svelte
diff --git a/src/routes/console/[project]/users/store.ts b/src/routes/console/[project]/authentication/store.ts
similarity index 100%
rename from src/routes/console/[project]/users/store.ts
rename to src/routes/console/[project]/authentication/store.ts
diff --git a/src/routes/console/[project]/users/teams.svelte b/src/routes/console/[project]/authentication/teams.svelte
similarity index 95%
rename from src/routes/console/[project]/users/teams.svelte
rename to src/routes/console/[project]/authentication/teams.svelte
index 376f3578c..0638f36c1 100644
--- a/src/routes/console/[project]/users/teams.svelte
+++ b/src/routes/console/[project]/authentication/teams.svelte
@@ -30,7 +30,7 @@
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const teamCreated = async (event: CustomEvent<Models.Team>) => {
-        await goto(`${base}/console/${project}/users/teams/${event.detail.$id}`);
+        await goto(`${base}/console/${project}/authentication/teams/${event.detail.$id}`);
     };
     $: teamsList.load(search, limit, offset);
     $: if (search) offset = 0;
@@ -71,7 +71,8 @@
             </TableHeader>
             <TableBody>
                 {#each $teamsList.teams as team}
-                    <TableRowLink href={`${base}/console/${project}/users/teams/${team.$id}`}>
+                    <TableRowLink
+                        href={`${base}/console/${project}/authentication/teams/${team.$id}`}>
                         <TableCell title="ID">
                             <div class="u-flex u-gap-12">
                                 <Avatar size={32} name={team.name} src={getAvatar(team.name)} />
diff --git a/src/routes/console/[project]/users/teams/[team]/__layout.svelte b/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
similarity index 94%
rename from src/routes/console/[project]/users/teams/[team]/__layout.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
index e756409f8..3e9540e70 100644
--- a/src/routes/console/[project]/users/teams/[team]/__layout.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
@@ -21,7 +21,7 @@
             navigate: event,
             level: 4,
             title: $team.name,
-            back: `${base}/console/${$page.params.project}/users/teams`,
+            back: `${base}/console/${$page.params.project}/authentication/teams`,
             breadcrumbs: {
                 title: $team.name,
                 href: `teams/${teamId}`
diff --git a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte b/src/routes/console/[project]/authentication/teams/[team]/_createMembership.svelte
similarity index 97%
rename from src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/_createMembership.svelte
index b58a92960..03438bb2f 100644
--- a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/_createMembership.svelte
@@ -14,7 +14,7 @@
     let name: string, email: string, roles: [];
 
     const create = async () => {
-        const url = `${$page.url.origin}/console/${$page.params.project}/users/teams/${$page.params.team}/members`;
+        const url = `${$page.url.origin}/console/${$page.params.project}/authentication/teams/${$page.params.team}/members`;
 
         try {
             const user = await sdkForProject.teams.createMembership(
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte b/src/routes/console/[project]/authentication/teams/[team]/_deleteMembership.svelte
similarity index 93%
rename from src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/_deleteMembership.svelte
index 22c68152f..0ea4aa7e0 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/_deleteMembership.svelte
@@ -23,7 +23,7 @@
             showDelete = false;
             dispatch('deleted');
             await goto(
-                `${base}/console/${$page.params.project}/users/teams/${selectedMembership.teamId}/members`
+                `${base}/console/${$page.params.project}/authentication/teams/${selectedMembership.teamId}/members`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte b/src/routes/console/[project]/authentication/teams/[team]/_deleteTeam.svelte
similarity index 98%
rename from src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/_deleteTeam.svelte
index 1b1a18398..d192856a7 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/_deleteTeam.svelte
@@ -15,7 +15,7 @@
         try {
             await sdkForProject.teams.delete(team.$id);
             showDelete = false;
-            await goto(`${base}/console/${$page.params.project}/users/teams`);
+            await goto(`${base}/console/${$page.params.project}/authentication/teams`);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/users/teams/[team]/activity.svelte b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
similarity index 100%
rename from src/routes/console/[project]/users/teams/[team]/activity.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/activity.svelte
diff --git a/src/routes/console/[project]/users/teams/[team]/index.svelte b/src/routes/console/[project]/authentication/teams/[team]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/users/teams/[team]/index.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/index.svelte
diff --git a/src/routes/console/[project]/users/teams/[team]/members.svelte b/src/routes/console/[project]/authentication/teams/[team]/members.svelte
similarity index 96%
rename from src/routes/console/[project]/users/teams/[team]/members.svelte
rename to src/routes/console/[project]/authentication/teams/[team]/members.svelte
index bc3bdc60e..d2bc1506c 100644
--- a/src/routes/console/[project]/users/teams/[team]/members.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/members.svelte
@@ -38,7 +38,9 @@
 
     const memberCreated = async (event: CustomEvent<Models.Membership>) => {
         memberships.load($page.params.team, search, limit, offset ?? 0);
-        await goto(`${base}/console/${project}/users/teams/${event.detail.teamId}/members`);
+        await goto(
+            `${base}/console/${project}/authentication/teams/${event.detail.teamId}/members`
+        );
     };
 </script>
 
@@ -60,7 +62,7 @@
             <TableBody>
                 {#each $memberships.memberships as membership}
                     <TableRowLink
-                        href={`${base}/console/${project}/users/user/${membership.userId}`}>
+                        href={`${base}/console/${project}/authentication/user/${membership.userId}`}>
                         <TableCellText title="Name">
                             <div class="u-flex u-gap-12">
                                 <Avatar
diff --git a/src/routes/console/[project]/users/teams/[team]/store.ts b/src/routes/console/[project]/authentication/teams/[team]/store.ts
similarity index 100%
rename from src/routes/console/[project]/users/teams/[team]/store.ts
rename to src/routes/console/[project]/authentication/teams/[team]/store.ts
diff --git a/src/routes/console/[project]/users/usage.svelte b/src/routes/console/[project]/authentication/usage.svelte
similarity index 100%
rename from src/routes/console/[project]/users/usage.svelte
rename to src/routes/console/[project]/authentication/usage.svelte
diff --git a/src/routes/console/[project]/users/user/[user]/__layout.svelte b/src/routes/console/[project]/authentication/user/[user]/__layout.svelte
similarity index 95%
rename from src/routes/console/[project]/users/user/[user]/__layout.svelte
rename to src/routes/console/[project]/authentication/user/[user]/__layout.svelte
index 88f449418..c3361abe4 100644
--- a/src/routes/console/[project]/users/user/[user]/__layout.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/__layout.svelte
@@ -25,7 +25,7 @@
                 title: $user.name,
                 href: `user/${userId}`
             },
-            back: `${base}/console/${$page.params.project}/users`,
+            back: `${base}/console/${$page.params.project}/authentication`,
             copy: {
                 text: 'User ID',
                 value: userId
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte b/src/routes/console/[project]/authentication/user/[user]/_deleteAllMemberships.svelte
similarity index 90%
rename from src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
rename to src/routes/console/[project]/authentication/user/[user]/_deleteAllMemberships.svelte
index f5c76479c..a94217241 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/_deleteAllMemberships.svelte
@@ -14,7 +14,9 @@
         try {
             await sdkForProject.teams.deleteMembership('tmpstring', 'tmpstring2');
             showDeleteAll = false;
-            await goto(`${base}/console/${$page.params.project}/users/${$user.$id}/membeships`);
+            await goto(
+                `${base}/console/${$page.params.project}/authentication/${$user.$id}/membeships`
+            );
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte b/src/routes/console/[project]/authentication/user/[user]/_deleteAllSessions.svelte
similarity index 100%
rename from src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
rename to src/routes/console/[project]/authentication/user/[user]/_deleteAllSessions.svelte
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte b/src/routes/console/[project]/authentication/user/[user]/_deleteMembership.svelte
similarity index 93%
rename from src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
rename to src/routes/console/[project]/authentication/user/[user]/_deleteMembership.svelte
index 4d5cf77f8..09268f061 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/_deleteMembership.svelte
@@ -23,7 +23,7 @@
             showDelete = false;
             dispatch('deleted');
             await goto(
-                `${base}/console/${$page.params.project}/users/user/${selectedMembership.userId}/memberships`
+                `${base}/console/${$page.params.project}/authentication/user/${selectedMembership.userId}/memberships`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte b/src/routes/console/[project]/authentication/user/[user]/_deleteSession.svelte
similarity index 100%
rename from src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
rename to src/routes/console/[project]/authentication/user/[user]/_deleteSession.svelte
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte b/src/routes/console/[project]/authentication/user/[user]/_deleteUser.svelte
similarity index 98%
rename from src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
rename to src/routes/console/[project]/authentication/user/[user]/_deleteUser.svelte
index 2b2d31892..e33c24137 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/_deleteUser.svelte
@@ -19,7 +19,7 @@
                 type: 'success',
                 message: `${$user.name} has been deleted`
             });
-            await goto(`${base}/console/${$page.params.project}/users`);
+            await goto(`${base}/console/${$page.params.project}/authentication`);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/users/user/[user]/activity.svelte b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
similarity index 98%
rename from src/routes/console/[project]/users/user/[user]/activity.svelte
rename to src/routes/console/[project]/authentication/user/[user]/activity.svelte
index 54bb14966..a4695372d 100644
--- a/src/routes/console/[project]/users/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
@@ -89,7 +89,7 @@
                         <Button
                             external
                             secondary
-                            href="https://appwrite.io/docs/server/users?sdk=nodejs-default#usersGetLogs"
+                            href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetLogs"
                             >Documentation</Button>
                     </div>
                 </div>
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/authentication/user/[user]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/users/user/[user]/index.svelte
rename to src/routes/console/[project]/authentication/user/[user]/index.svelte
diff --git a/src/routes/console/[project]/users/user/[user]/memberships.svelte b/src/routes/console/[project]/authentication/user/[user]/memberships.svelte
similarity index 96%
rename from src/routes/console/[project]/users/user/[user]/memberships.svelte
rename to src/routes/console/[project]/authentication/user/[user]/memberships.svelte
index db1ec6dea..0e87bf573 100644
--- a/src/routes/console/[project]/users/user/[user]/memberships.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/memberships.svelte
@@ -51,7 +51,7 @@
                 <TableBody>
                     {#each response.memberships as membership}
                         <TableRowLink
-                            href={`${base}/console/${project}/users/user/${membership.userId}`}>
+                            href={`${base}/console/${project}/authentication/user/${membership.userId}`}>
                             <TableCellText title="Name">
                                 <div class="u-flex u-gap-12">
                                     <Avatar
@@ -87,7 +87,7 @@
                         <Button
                             external
                             secondary
-                            href="https://appwrite.io/docs/server/users?sdk=nodejs-default#usersGetMemberships"
+                            href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetMemberships"
                             >Documentation</Button>
                     </div>
                 </div>
diff --git a/src/routes/console/[project]/users/user/[user]/sessions.svelte b/src/routes/console/[project]/authentication/user/[user]/sessions.svelte
similarity index 98%
rename from src/routes/console/[project]/users/user/[user]/sessions.svelte
rename to src/routes/console/[project]/authentication/user/[user]/sessions.svelte
index ca1057375..c0a39a3ba 100644
--- a/src/routes/console/[project]/users/user/[user]/sessions.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/sessions.svelte
@@ -94,7 +94,7 @@
                         <Button
                             external
                             secondary
-                            href="https://appwrite.io/docs/server/users?sdk=nodejs-default#usersGetSessions"
+                            href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetSessions"
                             >Documentation</Button>
                     </div>
                 </div>
diff --git a/src/routes/console/[project]/users/user/[user]/store.ts b/src/routes/console/[project]/authentication/user/[user]/store.ts
similarity index 100%
rename from src/routes/console/[project]/users/user/[user]/store.ts
rename to src/routes/console/[project]/authentication/user/[user]/store.ts

From ffe28a4b27f4be1286d115af8eb4b514149f00d7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 14:03:26 +0200
Subject: [PATCH 013/118] fix: users tabs

---
 .../console/[project]/authentication/__layout.svelte   | 10 +++++-----
 .../{authentication.svelte => settings.svelte}         |  0
 .../authentication/teams/[team]/__layout.svelte        |  2 +-
 .../authentication/user/[user]/__layout.svelte         |  2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)
 rename src/routes/console/[project]/authentication/{authentication.svelte => settings.svelte} (100%)

diff --git a/src/routes/console/[project]/authentication/__layout.svelte b/src/routes/console/[project]/authentication/__layout.svelte
index a5ccdc10f..1cd29c7c1 100644
--- a/src/routes/console/[project]/authentication/__layout.svelte
+++ b/src/routes/console/[project]/authentication/__layout.svelte
@@ -3,7 +3,7 @@
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
 
-    const path = 'users';
+    const path = 'authentication';
 
     onMount(handle);
     afterNavigate(handle);
@@ -28,10 +28,6 @@
                     href: `${path}/teams`,
                     title: 'Teams'
                 },
-                {
-                    href: `${path}/authentication`,
-                    title: 'Authentication'
-                },
                 {
                     href: `${path}/usage`,
                     title: 'Usage'
@@ -39,6 +35,10 @@
                 {
                     href: `${path}/security`,
                     title: 'Security'
+                },
+                {
+                    href: `${path}/settings`,
+                    title: 'Settings'
                 }
             ]
         });
diff --git a/src/routes/console/[project]/authentication/authentication.svelte b/src/routes/console/[project]/authentication/settings.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/authentication.svelte
rename to src/routes/console/[project]/authentication/settings.svelte
diff --git a/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte b/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
index 3e9540e70..d9ca9bb49 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
@@ -7,7 +7,7 @@
     import { onMount } from 'svelte';
 
     const teamId = $page.params.team;
-    const path = `users/teams/${teamId}`;
+    const path = `authentication/teams/${teamId}`;
 
     onMount(handle);
     afterNavigate(handle);
diff --git a/src/routes/console/[project]/authentication/user/[user]/__layout.svelte b/src/routes/console/[project]/authentication/user/[user]/__layout.svelte
index c3361abe4..dd75f563e 100644
--- a/src/routes/console/[project]/authentication/user/[user]/__layout.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/__layout.svelte
@@ -7,7 +7,7 @@
     import { user } from './store';
 
     const userId = $page.params.user;
-    const path = `users/user/${userId}`;
+    const path = `authentication/user/${userId}`;
 
     onMount(handle);
     afterNavigate(handle);

From 9d7eefe3707fe9753138467e79fc74bfd4c41426 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 4 Aug 2022 14:04:53 +0200
Subject: [PATCH 014/118] chore: remove old unused component

---
 src/lib/components/index.ts                   |  2 -
 src/lib/components/switchBox.svelte           | 48 ------------
 src/lib/components/switchBoxes.svelte         | 13 ----
 .../unit/components/switchBox.test.ignore.ts  | 74 -------------------
 4 files changed, 137 deletions(-)
 delete mode 100644 src/lib/components/switchBox.svelte
 delete mode 100644 src/lib/components/switchBoxes.svelte
 delete mode 100644 tests/unit/components/switchBox.test.ignore.ts

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 19350c38f..cf6f6b43b 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -20,8 +20,6 @@ export { default as DropTabs } from './dropTabs.svelte';
 export { default as DropTabsItem } from './dropTabsItem.svelte';
 export { default as Tooltip } from './tooltip.svelte';
 export { default as Avatar } from './avatar.svelte';
-export { default as SwitchBox } from './switchBox.svelte';
-export { default as SwitchBoxes } from './switchBoxes.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
diff --git a/src/lib/components/switchBox.svelte b/src/lib/components/switchBox.svelte
deleted file mode 100644
index 53ef2a1a7..000000000
--- a/src/lib/components/switchBox.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher } from 'svelte';
-
-    type SwitchBox = {
-        label: string;
-        id: string;
-        src: string;
-        alt: string;
-        href: string;
-        linkText: string;
-        value: boolean;
-        required: boolean;
-        disabled: boolean;
-        wip: boolean;
-    };
-
-    export let box: SwitchBox;
-
-    let { label, id, src, alt, href, linkText, disabled, required, value, wip } = box;
-
-    const dispatch = createEventDispatcher();
-
-    //TODO: move SwitchBox type outside  component
-</script>
-
-<li class="card">
-    <label class="switch-box" for={id}>
-        <div class="switch-box-image">
-            <img height="50" width="50" src={src || 'https://via.placeholder.com/50'} {alt} />
-        </div>
-        <span class="switch-box-title">{label}</span>
-        {#if !wip}
-            <a {href} class="link" target="_blank">
-                <span class="text">{linkText || 'Docs'} </span>
-                <span class="icon-link-ext" aria-hidden="true" />
-            </a>
-            <input
-                {id}
-                {disabled}
-                {required}
-                type="checkbox"
-                class="switch"
-                role="switch"
-                bind:checked={value}
-                on:change={() => dispatch('updated', { value, id })} />
-        {/if}
-    </label>
-</li>
diff --git a/src/lib/components/switchBoxes.svelte b/src/lib/components/switchBoxes.svelte
deleted file mode 100644
index 9bbec18f9..000000000
--- a/src/lib/components/switchBoxes.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-    import SwitchBox from './switchBox.svelte';
-    import { createEventDispatcher } from 'svelte';
-    const dispatch = createEventDispatcher();
-
-    export let boxes;
-</script>
-
-<ul class="grid-box">
-    {#each boxes as box}
-        <SwitchBox {box} on:updated={(e) => dispatch('updated', e.detail)} />
-    {/each}
-</ul>
diff --git a/tests/unit/components/switchBox.test.ignore.ts b/tests/unit/components/switchBox.test.ignore.ts
deleted file mode 100644
index a2f4c538d..000000000
--- a/tests/unit/components/switchBox.test.ignore.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, fireEvent } from '@testing-library/svelte';
-import { SwitchBox } from '../../../src/lib/components';
-
-const box = {
-    id: 'input',
-    src: 'https://via.placeholder.com/50',
-    label: 'Bool',
-    alt: 'image',
-    required: false,
-    disabled: false,
-    value: false
-};
-
-test('shows boolean input', () => {
-    const { getByText, getByRole, getByAltText } = render(SwitchBox, {
-        box
-    });
-    const checkbox = getByRole('switch');
-    const img = getByAltText('image');
-
-    expect(getByText('Bool')).toBeInTheDocument();
-    expect(img).toBeInTheDocument();
-    expect(checkbox).toBeInTheDocument();
-    expect(checkbox).toHaveAttribute('type', 'checkbox');
-});
-
-test('shows boolean input - required', () => {
-    box.required = true;
-    const { getByRole } = render(SwitchBox, { box });
-
-    expect(getByRole('switch')).toBeRequired();
-});
-
-test('shows boolean input - disabled', () => {
-    box.disabled = true;
-    const { getByRole } = render(SwitchBox, { box });
-
-    expect(getByRole('switch')).toBeDisabled();
-});
-
-test('state', async () => {
-    const { getByRole, component } = render(SwitchBox, { box });
-    const checkbox = getByRole('switch');
-
-    setTimeout(() => {
-        expect(checkbox).not.toBeChecked();
-        expect(component.box.value).toStrictEqual(false);
-    }, 1);
-
-    await fireEvent.click(checkbox);
-    setTimeout(() => {
-        expect(checkbox).toBeChecked();
-        expect(component.box.value).toStrictEqual(true);
-    }, 1);
-
-    await fireEvent.click(checkbox);
-    setTimeout(() => {
-        expect(checkbox).not.toBeChecked();
-        expect(component.box.value).toStrictEqual(false);
-    }, 1);
-
-    component.box.value = true;
-    setTimeout(() => {
-        expect(checkbox).toBeChecked();
-        expect(component.box.value).toStrictEqual(true);
-    }, 1);
-
-    component.box.value = false;
-    setTimeout(() => {
-        expect(checkbox).not.toBeChecked();
-        expect(component.box.value).toStrictEqual(false);
-    }, 1);
-});

From c6f3bad7ee75aa302c8d71a8284fc25a70bd0637 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 12:02:25 +0200
Subject: [PATCH 015/118] style: update activity page

---
 .../teams/[team]/activity.svelte               |  4 ++--
 .../authentication/user/[user]/activity.svelte | 18 +++++++-----------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
index dabae43a0..3f2881bd7 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
@@ -39,7 +39,7 @@
                         <TableRow>
                             <TableCellText title="Client">
                                 <div class="u-flex u-cross-center u-gap-12">
-                                    <div class="image-item">
+                                    <div class="avatar is-small">
                                         <img
                                             height="20"
                                             width="20"
@@ -48,7 +48,7 @@
                                             }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
                                             alt={log.clientName} />
                                     </div>
-                                    <p class="u-line-height-1-5">
+                                    <p class="text u-trim">
                                         {log.clientName}
                                         {log.clientVersion}
                                         on {log.osName}
diff --git a/src/routes/console/[project]/authentication/user/[user]/activity.svelte b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
index a4695372d..8100cd430 100644
--- a/src/routes/console/[project]/authentication/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
@@ -39,7 +39,7 @@
                         <TableRow>
                             <TableCellText title="Client">
                                 <div class="u-flex u-cross-center u-gap-12">
-                                    <div class="image-item">
+                                    <div class="avatar is-small">
                                         <img
                                             height="20"
                                             width="20"
@@ -48,16 +48,12 @@
                                             }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
                                             alt={log.clientName} />
                                     </div>
-                                    <span class="u-line-height-1-5">
-                                        <p>
-                                            {log.clientName}
-                                            {log.clientVersion}
-                                        </p>
-                                        <span class="u-small">
-                                            on {log.osName}
-                                            {log.osVersion}
-                                        </span>
-                                    </span>
+                                    <p class="text u-trim">
+                                        {log.clientName}
+                                        {log.clientVersion}
+                                        on {log.osName}
+                                        {log.osVersion}
+                                    </p>
                                 </div>
                             </TableCellText>
                             <TableCellText title="Event">{log.event}</TableCellText>

From 02d28678bb697834716ff491e9e38763eb5112ec Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 12:37:33 +0200
Subject: [PATCH 016/118] chore: update css

---
 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 965d160ca..1ae439b95 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-39",
+                "@aw-labs/ui": "0.0.0-39",
                 "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-39",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-39.tgz",
+            "integrity": "sha512-NU4zzLVQMHM6Gcv/ZC64q1Kgp8n/UmWvLSSUcZ8KgfUtgMOExoVk3nWoP5ALjZZAYlBE8NQG5cFMoo8S5re2Mg=="
         },
         "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-39",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-39.tgz",
+            "integrity": "sha512-LnP9t7G48eJB1tcFRjlibMus9hYxhKJp9J1gHsUjVz0KsrAKTnJzbnttkvoAXwu3EmBmdFhnOjPc5s23m/kkaQ==",
             "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-39",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-39.tgz",
+            "integrity": "sha512-NU4zzLVQMHM6Gcv/ZC64q1Kgp8n/UmWvLSSUcZ8KgfUtgMOExoVk3nWoP5ALjZZAYlBE8NQG5cFMoo8S5re2Mg=="
         },
         "@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-39",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-39.tgz",
+            "integrity": "sha512-LnP9t7G48eJB1tcFRjlibMus9hYxhKJp9J1gHsUjVz0KsrAKTnJzbnttkvoAXwu3EmBmdFhnOjPc5s23m/kkaQ==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 973a854ac..397458ba9 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-39",
+        "@aw-labs/ui": "0.0.0-39",
         "echarts": "^5.3.3"
     },
     "devDependencies": {

From a224a5d2bd35cdf350c8862d33d2bb96b2718d03 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 12:37:59 +0200
Subject: [PATCH 017/118] feat: move tag to top right

---
 .../authentication/user/[user]/index.svelte   | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/routes/console/[project]/authentication/user/[user]/index.svelte b/src/routes/console/[project]/authentication/user/[user]/index.svelte
index 63a3b772c..eff6a55a1 100644
--- a/src/routes/console/[project]/authentication/user/[user]/index.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/index.svelte
@@ -193,37 +193,39 @@
             <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
                 <Avatar size={48} name={$user.name} src={getAvatar($user.name)} />
                 <h6 class="heading-level-7">{$user.name}</h6>
-                {#if !$user.status}
-                    <Pill danger>blocked</Pill>
-                {:else if $user.email && $user.phone}
-                    <Pill success={$user.emailVerification || $user.phoneVerification}>
-                        {$user.emailVerification && $user.phoneVerification
-                            ? 'verified'
-                            : $user.emailVerification
-                            ? 'verified email'
-                            : $user.phoneVerification
-                            ? 'verified phone'
-                            : 'unverified'}
-                    </Pill>
-                {:else}
-                    <Pill success={$user.emailVerification || $user.phoneVerification}>
-                        {$user.emailVerification
-                            ? 'verified '
-                            : $user.phoneVerification
-                            ? 'verified '
-                            : 'unverified'}
-                    </Pill>
-                {/if}
             </div>
             <svelte:fragment slot="aside">
-                <div>
-                    {#if $user.email}
-                        <p class="title">{$user.email}</p>
+                <div class="u-flex u-main-space-between">
+                    <div>
+                        {#if $user.email}
+                            <p class="title">{$user.email}</p>
+                        {/if}
+                        {#if $user.phone}
+                            <p class="title">{$user.phone}</p>
+                        {/if}
+                        <p>Joined: {toLocaleDateTime($user.registration)}</p>
+                    </div>
+                    {#if !$user.status}
+                        <Pill danger>blocked</Pill>
+                    {:else if $user.email && $user.phone}
+                        <Pill success={$user.emailVerification || $user.phoneVerification}>
+                            {$user.emailVerification && $user.phoneVerification
+                                ? 'verified'
+                                : $user.emailVerification
+                                ? 'verified email'
+                                : $user.phoneVerification
+                                ? 'verified phone'
+                                : 'unverified'}
+                        </Pill>
+                    {:else}
+                        <Pill success={$user.emailVerification || $user.phoneVerification}>
+                            {$user.emailVerification
+                                ? 'verified '
+                                : $user.phoneVerification
+                                ? 'verified '
+                                : 'unverified'}
+                        </Pill>
                     {/if}
-                    {#if $user.phone}
-                        <p class="title">{$user.phone}</p>
-                    {/if}
-                    <p>Joined: {toLocaleDateTime($user.registration)}</p>
                 </div>
             </svelte:fragment>
 

From a68b3339a741ace19d8f64550e8c131537eb2315 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 13:10:52 +0200
Subject: [PATCH 018/118] typo: auth methods label

---
 src/lib/stores/auth-methods.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/stores/auth-methods.ts b/src/lib/stores/auth-methods.ts
index 82b7ecb6d..8ca530178 100644
--- a/src/lib/stores/auth-methods.ts
+++ b/src/lib/stores/auth-methods.ts
@@ -5,7 +5,7 @@ function createAuthMethods() {
     const { subscribe, set } = writable({
         list: [
             {
-                label: 'Password',
+                label: 'Email/Password',
                 method: 'email-password',
                 value: null
             },
@@ -43,7 +43,7 @@ function createAuthMethods() {
         load: (project: Models.Project) => {
             const list = [
                 {
-                    label: 'Password',
+                    label: 'Email/Password',
                     method: 'email-password',
                     value: project.authEmailPassword
                 },

From f82b8410f5023ee7f104a1092574f91d459a29f3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 16:55:24 +0200
Subject: [PATCH 019/118] chore: add missing browser icons

---
 static/icons/dark/color/firefox.svg           | 106 ++++++++++++++++++
 static/icons/dark/color/microsoft_edge.svg    |  41 +++++++
 static/icons/dark/color/opera.svg             |  17 +++
 static/icons/dark/color/safari.svg            |  42 +++++++
 static/icons/dark/grayscale/firefox.svg       |   3 +
 .../icons/dark/grayscale/microsoft_edge.svg   |   3 +
 static/icons/dark/grayscale/opera.svg         |   3 +
 static/icons/dark/grayscale/safari.svg        |   3 +
 static/icons/light/color/firefox.svg          | 106 ++++++++++++++++++
 static/icons/light/color/microsoft_edge.svg   |  41 +++++++
 static/icons/light/color/opera.svg            |  17 +++
 static/icons/light/color/safari.svg           |  42 +++++++
 static/icons/light/grayscale/firefox.svg      |   3 +
 .../icons/light/grayscale/microsoft_edge.svg  |   3 +
 static/icons/light/grayscale/opera.svg        |   3 +
 static/icons/light/grayscale/safari.svg       |   3 +
 16 files changed, 436 insertions(+)
 create mode 100644 static/icons/dark/color/firefox.svg
 create mode 100644 static/icons/dark/color/microsoft_edge.svg
 create mode 100644 static/icons/dark/color/opera.svg
 create mode 100644 static/icons/dark/color/safari.svg
 create mode 100644 static/icons/dark/grayscale/firefox.svg
 create mode 100644 static/icons/dark/grayscale/microsoft_edge.svg
 create mode 100644 static/icons/dark/grayscale/opera.svg
 create mode 100644 static/icons/dark/grayscale/safari.svg
 create mode 100644 static/icons/light/color/firefox.svg
 create mode 100644 static/icons/light/color/microsoft_edge.svg
 create mode 100644 static/icons/light/color/opera.svg
 create mode 100644 static/icons/light/color/safari.svg
 create mode 100644 static/icons/light/grayscale/firefox.svg
 create mode 100644 static/icons/light/grayscale/microsoft_edge.svg
 create mode 100644 static/icons/light/grayscale/opera.svg
 create mode 100644 static/icons/light/grayscale/safari.svg

diff --git a/static/icons/dark/color/firefox.svg b/static/icons/dark/color/firefox.svg
new file mode 100644
index 000000000..2c2d6095e
--- /dev/null
+++ b/static/icons/dark/color/firefox.svg
@@ -0,0 +1,106 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.6185 9.33929C20.2208 8.38252 19.4142 7.34949 18.7826 7.02293C19.233 7.89514 19.5457 8.83184 19.7094 9.79973L19.7111 9.81507C18.6764 7.23662 16.9225 6.19533 15.4892 3.93092C15.4167 3.8164 15.3442 3.70164 15.2736 3.58051C15.2332 3.51133 15.2009 3.44899 15.1728 3.39161C15.1134 3.27652 15.0676 3.15488 15.0363 3.02917C15.0364 3.02337 15.0343 3.01775 15.0304 3.0134C15.0266 3.00904 15.0213 3.00625 15.0155 3.00555C15.0099 3.00401 15.0039 3.00401 14.9983 3.00555C14.9971 3.00555 14.9952 3.00768 14.9938 3.00815C14.9924 3.00862 14.9893 3.01075 14.9872 3.01169L14.9907 3.00555C12.6921 4.35145 11.9117 6.84254 11.8409 8.08926C10.9226 8.15222 10.0446 8.49049 9.32146 9.05996C9.24604 8.99608 9.16721 8.93633 9.08533 8.88098C8.87683 8.15111 8.86795 7.37867 9.0596 6.64419C8.21543 7.05311 7.46534 7.63282 6.85681 8.34663H6.85256C6.48988 7.8869 6.51538 6.371 6.53616 6.05436C6.42887 6.09748 6.32645 6.15186 6.23062 6.21658C5.91045 6.44508 5.61113 6.70149 5.33619 6.98279C5.02288 7.30045 4.73672 7.64379 4.48072 8.00921V8.01063V8.00898C3.89243 8.84287 3.47512 9.78502 3.25289 10.781L3.24061 10.8415C3.22337 10.922 3.16127 11.3253 3.15065 11.4129C3.15065 11.4198 3.14923 11.4261 3.14852 11.433C3.06842 11.8493 3.01878 12.271 3 12.6946V12.7418C3.00404 15.0318 3.86647 17.2372 5.41703 18.9224C6.96759 20.6077 9.0936 21.6504 11.3754 21.8447C13.6572 22.0391 15.9289 21.3709 17.7421 19.9722C19.5553 18.5734 20.7783 16.5457 21.1696 14.2893C21.1849 14.1713 21.1974 14.0544 21.2111 13.9352C21.3996 12.3772 21.1956 10.7968 20.6175 9.33787L20.6185 9.33929ZM10.0709 16.5032C10.1136 16.5238 10.1538 16.546 10.1977 16.5656L10.2041 16.5696C10.1597 16.5483 10.1153 16.5262 10.0709 16.5032ZM19.7113 9.81767V9.80893L19.7129 9.81862L19.7113 9.81767Z" fill="url(#paint0_linear_4475_59607)"/>
+<path d="M20.6184 9.3393C20.2208 8.38254 19.4142 7.34951 18.7826 7.02295C19.233 7.89516 19.5456 8.83186 19.7093 9.79974V9.80848L19.711 9.81816C20.4165 11.8368 20.3145 14.05 19.4262 15.9951C18.3774 18.2456 15.8395 20.5523 11.8656 20.4389C7.57291 20.3173 3.79024 17.1309 3.08424 12.9586C2.95555 12.3005 3.08424 11.9669 3.14893 11.4321C3.06068 11.8475 3.01144 12.2702 3.00183 12.6948V12.7421C3.00588 15.0321 3.8683 17.2374 5.41886 18.9227C6.96942 20.6079 9.09543 21.6506 11.3772 21.845C13.659 22.0393 15.9307 21.3712 17.7439 19.9724C19.5572 18.5737 20.7801 16.546 21.1714 14.2896C21.1868 14.1715 21.1993 14.0547 21.213 13.9354C21.4015 12.3775 21.1974 10.7971 20.6194 9.33812L20.6184 9.3393Z" fill="url(#paint1_radial_4475_59607)"/>
+<path d="M20.6184 9.3393C20.2208 8.38254 19.4142 7.34951 18.7826 7.02295C19.233 7.89516 19.5456 8.83186 19.7093 9.79974V9.80848L19.711 9.81816C20.4165 11.8368 20.3145 14.05 19.4262 15.9951C18.3774 18.2456 15.8395 20.5523 11.8656 20.4389C7.57291 20.3173 3.79024 17.1309 3.08424 12.9586C2.95555 12.3005 3.08424 11.9669 3.14893 11.4321C3.06068 11.8475 3.01144 12.2702 3.00183 12.6948V12.7421C3.00588 15.0321 3.8683 17.2374 5.41886 18.9227C6.96942 20.6079 9.09543 21.6506 11.3772 21.845C13.659 22.0393 15.9307 21.3712 17.7439 19.9724C19.5572 18.5737 20.7801 16.546 21.1714 14.2896C21.1868 14.1715 21.1993 14.0547 21.213 13.9354C21.4015 12.3775 21.1974 10.7971 20.6194 9.33812L20.6184 9.3393Z" fill="url(#paint2_radial_4475_59607)"/>
+<path d="M16.1699 10.4137C16.1898 10.4276 16.2082 10.4415 16.2268 10.4554C15.997 10.0478 15.7108 9.67463 15.3768 9.34686C12.5315 6.50159 14.6314 3.17935 14.9853 3.00935L14.9889 3.00415C12.6902 4.35005 11.9098 6.84113 11.839 8.08785C11.9457 8.08053 12.0515 8.07156 12.1606 8.07156C12.9761 8.07314 13.7767 8.29063 14.4809 8.70192C15.1851 9.11322 15.7679 9.70365 16.1699 10.4132V10.4137Z" fill="url(#paint3_radial_4475_59607)"/>
+<path d="M12.1653 10.9829C12.1502 11.2105 11.346 11.9956 11.0648 11.9956C8.4627 11.9956 8.04004 13.5699 8.04004 13.5699C8.15527 14.8954 9.07898 15.9877 10.1956 16.5639C10.2466 16.5903 10.2983 16.6142 10.35 16.6376C10.4396 16.6772 10.5292 16.7139 10.6187 16.7476C11.0019 16.8832 11.4033 16.9606 11.8095 16.9773C16.3714 17.1913 17.2545 11.5229 13.9627 9.87715C14.7392 9.77611 15.5255 9.96704 16.1692 10.4129C15.7672 9.70337 15.1844 9.11294 14.4802 8.70165C13.776 8.29036 12.9754 8.07287 12.1599 8.07129C12.0513 8.07129 11.945 8.08026 11.8383 8.08758C10.92 8.15054 10.042 8.48882 9.31887 9.05828C9.45842 9.17634 9.61592 9.33407 9.94767 9.6611C10.5687 10.2729 12.1613 10.9066 12.1649 10.981L12.1653 10.9829Z" fill="url(#paint4_radial_4475_59607)"/>
+<path d="M12.1653 10.9829C12.1502 11.2105 11.346 11.9956 11.0648 11.9956C8.4627 11.9956 8.04004 13.5699 8.04004 13.5699C8.15527 14.8954 9.07898 15.9877 10.1956 16.5639C10.2466 16.5903 10.2983 16.6142 10.35 16.6376C10.4396 16.6772 10.5292 16.7139 10.6187 16.7476C11.0019 16.8832 11.4033 16.9606 11.8095 16.9773C16.3714 17.1913 17.2545 11.5229 13.9627 9.87715C14.7392 9.77611 15.5255 9.96704 16.1692 10.4129C15.7672 9.70337 15.1844 9.11294 14.4802 8.70165C13.776 8.29036 12.9754 8.07287 12.1599 8.07129C12.0513 8.07129 11.945 8.08026 11.8383 8.08758C10.92 8.15054 10.042 8.48882 9.31887 9.05828C9.45842 9.17634 9.61592 9.33407 9.94767 9.6611C10.5687 10.2729 12.1613 10.9066 12.1649 10.981L12.1653 10.9829Z" fill="url(#paint5_radial_4475_59607)"/>
+<path d="M8.89265 8.75618C8.96679 8.8034 9.02795 8.84449 9.08155 8.88156C8.87305 8.15169 8.86416 7.37925 9.05581 6.64478C8.21164 7.05369 7.46155 7.6334 6.85303 8.34721C6.89765 8.34603 8.22513 8.32219 8.89265 8.75618Z" fill="url(#paint6_radial_4475_59607)"/>
+<path d="M3.08267 12.9592C3.78891 17.1315 7.57135 20.3192 11.864 20.4396C15.838 20.552 18.3763 18.2451 19.4247 15.9958C20.3129 14.0506 20.4149 11.8374 19.7094 9.81882V9.81008C19.7094 9.80323 19.708 9.79922 19.7094 9.80135L19.7111 9.81669C20.0357 11.9364 18.9576 13.989 17.2719 15.3797L17.2667 15.3915C13.9823 18.0668 10.8395 17.0052 10.2043 16.5721C10.1599 16.5509 10.1156 16.5288 10.0712 16.5058C8.15646 15.5906 7.36521 13.8471 7.53522 12.35C7.08071 12.3568 6.63401 12.2315 6.24924 11.9895C5.86447 11.7475 5.55815 11.399 5.36738 10.9864C5.87004 10.6785 6.44317 10.5045 7.03217 10.4808C7.62116 10.4572 8.2064 10.5847 8.73212 10.8514C9.81575 11.3433 11.0488 11.3917 12.1677 10.9864C12.1642 10.9121 10.5715 10.2781 9.95051 9.66652C9.61876 9.33949 9.46127 9.182 9.32172 9.0637C9.2463 8.99982 9.16748 8.94007 9.0856 8.88472C9.03129 8.84765 8.97013 8.80751 8.8967 8.75934C8.22918 8.32535 6.9017 8.3492 6.85779 8.35038H6.85354C6.49085 7.89065 6.51635 6.37474 6.53713 6.05811C6.42984 6.10123 6.32742 6.1556 6.23159 6.22032C5.91142 6.44883 5.6121 6.70523 5.33716 6.98654C5.02273 7.3033 4.73538 7.64585 4.47815 8.0106V8.01201V8.01036C3.88986 8.84425 3.47255 9.7864 3.25032 10.7824C3.24583 10.8011 2.92069 12.2225 3.08102 12.9597L3.08267 12.9592Z" fill="url(#paint7_radial_4475_59607)"/>
+<path d="M15.3766 9.34646C15.7107 9.6746 15.9969 10.0482 16.2267 10.4562C16.2769 10.4943 16.3239 10.532 16.3638 10.5686C18.4386 12.4812 17.3515 15.1848 17.2705 15.3761C18.956 13.9874 20.0332 11.9334 19.7097 9.81304C18.6745 7.23223 16.9187 6.19093 15.4878 3.92652C15.4153 3.812 15.3428 3.69725 15.2722 3.57612C15.2319 3.50693 15.1995 3.4446 15.1714 3.38722C15.112 3.27212 15.0662 3.15048 15.0349 3.02477C15.035 3.01897 15.0329 3.01336 15.0291 3.009C15.0252 3.00465 15.0199 3.00186 15.0142 3.00116C15.0085 2.99961 15.0026 2.99961 14.9969 3.00116C14.9957 3.00116 14.9939 3.00329 14.9924 3.00376C14.991 3.00423 14.988 3.00636 14.9858 3.0073C14.6319 3.17518 12.5325 6.49954 15.3778 9.34245L15.3766 9.34646Z" fill="url(#paint8_radial_4475_59607)"/>
+<path d="M16.3635 10.5695C16.3236 10.5329 16.2766 10.4951 16.2264 10.4571C16.2077 10.4432 16.1893 10.4293 16.1694 10.4153C15.5257 9.96946 14.7394 9.77853 13.9629 9.87957C17.2544 11.5253 16.3713 17.1923 11.8097 16.9798C11.4035 16.9631 11.0022 16.8856 10.6189 16.75C10.5294 16.7165 10.4398 16.6798 10.3502 16.64C10.2985 16.6164 10.2468 16.5927 10.1958 16.5663L10.2022 16.5703C10.8383 17.0045 13.9801 18.0654 17.2646 15.3897L17.2698 15.3779C17.3517 15.1866 18.4388 12.483 16.3631 10.5705L16.3635 10.5695Z" fill="url(#paint9_radial_4475_59607)"/>
+<path d="M8.04026 13.5683C8.04026 13.5683 8.46268 11.994 11.065 11.994C11.3462 11.994 12.1511 11.2089 12.1655 10.9813C11.0466 11.3866 9.8136 11.3381 8.72997 10.8462C8.20425 10.5796 7.61901 10.452 7.03002 10.4757C6.44102 10.4993 5.86789 10.6734 5.36523 10.9813C5.556 11.3939 5.86232 11.7423 6.24709 11.9843C6.63186 12.2264 7.07856 12.3516 7.53307 12.3449C7.36353 13.8412 8.15454 15.5845 10.069 16.5007C10.1118 16.5212 10.1519 16.5434 10.1958 16.563C9.07825 15.9857 8.15549 14.8938 8.04026 13.569V13.5683Z" fill="url(#paint10_radial_4475_59607)"/>
+<path d="M20.6184 9.33929C20.2207 8.38252 19.4141 7.34949 18.7825 7.02293C19.2329 7.89514 19.5456 8.83184 19.7093 9.79973L19.7109 9.81507C18.6763 7.23662 16.9223 6.19533 15.4891 3.93092C15.4166 3.8164 15.3441 3.70164 15.2735 3.58051C15.2331 3.51133 15.2008 3.44899 15.1727 3.39161C15.1133 3.27652 15.0674 3.15488 15.0362 3.02917C15.0362 3.02337 15.0342 3.01775 15.0303 3.0134C15.0265 3.00904 15.0212 3.00625 15.0154 3.00555C15.0098 3.00401 15.0038 3.00401 14.9982 3.00555C14.997 3.00555 14.9951 3.00768 14.9937 3.00815C14.9923 3.00862 14.9892 3.01075 14.9871 3.01169L14.9906 3.00555C12.692 4.35145 11.9116 6.84254 11.8408 8.08926C11.9475 8.08194 12.0533 8.07297 12.1624 8.07297C12.9779 8.07454 13.7785 8.29204 14.4827 8.70333C15.1869 9.11462 15.7697 9.70505 16.1717 10.4146C15.528 9.96872 14.7417 9.77779 13.9652 9.87883C17.2567 11.5246 16.3736 17.1915 11.812 16.979C11.4058 16.9623 11.0044 16.8849 10.6212 16.7493C10.5316 16.7157 10.4421 16.6791 10.3525 16.6392C10.3008 16.6156 10.2491 16.592 10.1981 16.5656L10.2044 16.5696C10.1601 16.5483 10.1157 16.5262 10.0713 16.5032C10.114 16.5238 10.1542 16.546 10.1981 16.5656C9.0805 15.988 8.15774 14.8962 8.04251 13.5715C8.04251 13.5715 8.46493 11.9973 11.0672 11.9973C11.3485 11.9973 12.1534 11.2122 12.1678 10.9846C12.1643 10.9102 10.5716 10.2762 9.95061 9.66466C9.61886 9.33764 9.46137 9.18014 9.32182 9.06184C9.2464 8.99796 9.16758 8.93822 9.0857 8.88286C8.8772 8.15299 8.86831 7.38056 9.05996 6.64608C8.21579 7.055 7.46571 7.63471 6.85718 8.34852H6.85293C6.49025 7.88879 6.51575 6.37289 6.53653 6.05625C6.42923 6.09937 6.32681 6.15375 6.23099 6.21847C5.91081 6.44697 5.6115 6.70338 5.33656 6.98468C5.02324 7.30234 4.73709 7.64568 4.48109 8.0111V8.01252V8.01087C3.8928 8.84476 3.47549 9.78691 3.25325 10.7829L3.24097 10.8434C3.22374 10.9239 3.14653 11.3329 3.13543 11.4207C3.0648 11.8429 3.0197 12.2689 3.00037 12.6965V12.7437C3.00441 15.0337 3.86684 17.239 5.41739 18.9243C6.96795 20.6095 9.09396 21.6523 11.3757 21.8466C13.6575 22.0409 15.9293 21.3728 17.7425 19.974C19.5557 18.5753 20.7787 16.5476 21.1699 14.2912C21.1853 14.1732 21.1978 14.0563 21.2115 13.9371C21.4 12.3791 21.1959 10.7987 20.6179 9.33976L20.6184 9.33929ZM19.7105 9.80941L19.7121 9.81909L19.7105 9.80941Z" fill="url(#paint11_linear_4475_59607)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59607" x1="19.4072" y1="5.92872" x2="4.21438" y2="20.5872" gradientUnits="userSpaceOnUse">
+<stop offset="0.048" stop-color="#FFF44F"/>
+<stop offset="0.111" stop-color="#FFE847"/>
+<stop offset="0.225" stop-color="#FFC830"/>
+<stop offset="0.368" stop-color="#FF980E"/>
+<stop offset="0.401" stop-color="#FF8B16"/>
+<stop offset="0.462" stop-color="#FF672A"/>
+<stop offset="0.534" stop-color="#FF3647"/>
+<stop offset="0.705" stop-color="#E31587"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.8192 5.12925) scale(19.0786)">
+<stop offset="0.129" stop-color="#FFBD4F"/>
+<stop offset="0.186" stop-color="#FFAC31"/>
+<stop offset="0.247" stop-color="#FF9D17"/>
+<stop offset="0.283" stop-color="#FF980E"/>
+<stop offset="0.403" stop-color="#FF563B"/>
+<stop offset="0.467" stop-color="#FF3750"/>
+<stop offset="0.71" stop-color="#F5156C"/>
+<stop offset="0.782" stop-color="#EB0878"/>
+<stop offset="0.86" stop-color="#E50080"/>
+</radialGradient>
+<radialGradient id="paint2_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.7355 12.9213) scale(19.0786)">
+<stop offset="0.3" stop-color="#960E18"/>
+<stop offset="0.351" stop-color="#B11927" stop-opacity="0.74"/>
+<stop offset="0.435" stop-color="#DB293D" stop-opacity="0.343"/>
+<stop offset="0.497" stop-color="#F5334B" stop-opacity="0.094"/>
+<stop offset="0.53" stop-color="#FF3750" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.0968 0.879053) scale(13.8202)">
+<stop offset="0.132" stop-color="#FFF44F"/>
+<stop offset="0.252" stop-color="#FFDC3E"/>
+<stop offset="0.506" stop-color="#FF9D12"/>
+<stop offset="0.526" stop-color="#FF980E"/>
+</radialGradient>
+<radialGradient id="paint4_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.61049 17.88) scale(9.08361)">
+<stop offset="0.353" stop-color="#3A8EE6"/>
+<stop offset="0.472" stop-color="#5C79F0"/>
+<stop offset="0.669" stop-color="#9059FF"/>
+<stop offset="1" stop-color="#C139E6"/>
+</radialGradient>
+<radialGradient id="paint5_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.6583 11.2837) rotate(-13.5916) scale(4.81691 5.6394)">
+<stop offset="0.206" stop-color="#9059FF" stop-opacity="0"/>
+<stop offset="0.278" stop-color="#8C4FF3" stop-opacity="0.064"/>
+<stop offset="0.747" stop-color="#7716A8" stop-opacity="0.45"/>
+<stop offset="0.975" stop-color="#6E008B" stop-opacity="0.6"/>
+</radialGradient>
+<radialGradient id="paint6_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4994 4.42098) scale(6.53585 6.53585)">
+<stop stop-color="#FFE226"/>
+<stop offset="0.121" stop-color="#FFDB27"/>
+<stop offset="0.295" stop-color="#FFC82A"/>
+<stop offset="0.502" stop-color="#FFA930"/>
+<stop offset="0.732" stop-color="#FF7E37"/>
+<stop offset="0.792" stop-color="#FF7139"/>
+</radialGradient>
+<radialGradient id="paint7_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.6942 0.170877) scale(27.886 27.886)">
+<stop offset="0.113" stop-color="#FFF44F"/>
+<stop offset="0.456" stop-color="#FF980E"/>
+<stop offset="0.622" stop-color="#FF5634"/>
+<stop offset="0.716" stop-color="#FF3647"/>
+<stop offset="0.904" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint8_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.3764 1.71689) rotate(83.976) scale(20.4353 13.4115)">
+<stop stop-color="#FFF44F"/>
+<stop offset="0.06" stop-color="#FFE847"/>
+<stop offset="0.168" stop-color="#FFC830"/>
+<stop offset="0.304" stop-color="#FF980E"/>
+<stop offset="0.356" stop-color="#FF8B16"/>
+<stop offset="0.455" stop-color="#FF672A"/>
+<stop offset="0.57" stop-color="#FF3647"/>
+<stop offset="0.737" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint9_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4994 6.78212) scale(17.4069)">
+<stop offset="0.137" stop-color="#FFF44F"/>
+<stop offset="0.48" stop-color="#FF980E"/>
+<stop offset="0.592" stop-color="#FF5634"/>
+<stop offset="0.655" stop-color="#FF3647"/>
+<stop offset="0.904" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint10_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.9858 7.7266) scale(19.0527)">
+<stop offset="0.094" stop-color="#FFF44F"/>
+<stop offset="0.231" stop-color="#FFE141"/>
+<stop offset="0.509" stop-color="#FFAF1E"/>
+<stop offset="0.626" stop-color="#FF980E"/>
+</radialGradient>
+<linearGradient id="paint11_linear_4475_59607" x1="19.2229" y1="5.8508" x2="6.29757" y2="18.7785" gradientUnits="userSpaceOnUse">
+<stop offset="0.167" stop-color="#FFF44F" stop-opacity="0.8"/>
+<stop offset="0.266" stop-color="#FFF44F" stop-opacity="0.634"/>
+<stop offset="0.489" stop-color="#FFF44F" stop-opacity="0.217"/>
+<stop offset="0.6" stop-color="#FFF44F" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/dark/color/microsoft_edge.svg b/static/icons/dark/color/microsoft_edge.svg
new file mode 100644
index 000000000..07a4e636c
--- /dev/null
+++ b/static/icons/dark/color/microsoft_edge.svg
@@ -0,0 +1,41 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2717 16.4131C19.03 16.5387 18.7808 16.6493 18.5254 16.744C17.7168 17.045 16.8605 17.1977 15.9977 17.1947C12.6673 17.1947 9.76639 14.9063 9.76639 11.9632C9.77072 11.5691 9.87998 11.1833 10.0829 10.8454C10.2859 10.5076 10.5752 10.2299 10.9211 10.041C7.90757 10.1678 7.13306 13.308 7.13306 15.1457C7.13306 20.3561 11.928 20.8771 12.963 20.8771C13.5192 20.8771 14.3571 20.7152 14.8641 20.5532L14.9556 20.5251C16.8957 19.8546 18.5496 18.5434 19.6449 16.8074C19.6767 16.7547 19.6904 16.6929 19.6838 16.6317C19.6772 16.5704 19.6507 16.513 19.6083 16.4683C19.566 16.4235 19.5101 16.3939 19.4493 16.384C19.3885 16.374 19.3262 16.3842 19.2717 16.4131Z" fill="url(#paint0_linear_4475_59727)"/>
+<path opacity="0.35" d="M19.2717 16.4131C19.03 16.5387 18.7808 16.6493 18.5254 16.744C17.7168 17.045 16.8605 17.1977 15.9977 17.1947C12.6673 17.1947 9.76639 14.9063 9.76639 11.9632C9.77072 11.5691 9.87998 11.1833 10.0829 10.8454C10.2859 10.5076 10.5752 10.2299 10.9211 10.041C7.90757 10.1678 7.13306 13.308 7.13306 15.1457C7.13306 20.3561 11.928 20.8771 12.963 20.8771C13.5192 20.8771 14.3571 20.7152 14.8641 20.5532L14.9556 20.5251C16.8957 19.8546 18.5496 18.5434 19.6449 16.8074C19.6767 16.7547 19.6904 16.6929 19.6838 16.6317C19.6772 16.5704 19.6507 16.513 19.6083 16.4683C19.566 16.4235 19.5101 16.3939 19.4493 16.384C19.3885 16.374 19.3262 16.3842 19.2717 16.4131Z" fill="url(#paint1_radial_4475_59727)"/>
+<path d="M10.4424 19.9899C9.81565 19.6007 9.27239 19.0909 8.84408 18.4902C8.35497 17.8207 8.01829 17.0523 7.85767 16.2389C7.69705 15.4255 7.71638 14.5869 7.91431 13.7817C8.11224 12.9766 8.48397 12.2245 9.00341 11.5783C9.52285 10.9321 10.1774 10.4074 10.9212 10.041C11.1465 9.93538 11.5197 9.75232 12.0196 9.75936C12.3713 9.76208 12.7177 9.84612 13.0316 10.0049C13.3455 10.1637 13.6185 10.3929 13.8291 10.6747C14.1124 11.0557 14.2677 11.5166 14.2727 11.9914C14.2727 11.9773 15.9977 6.38672 8.63989 6.38672C5.54889 6.38672 3.00709 9.31577 3.00709 11.8928C2.99479 13.2541 3.28583 14.601 3.85905 15.8357C4.79781 17.8347 6.43784 19.4194 8.46783 20.289C10.4978 21.1586 12.7764 21.2527 14.8712 20.5532C14.1373 20.785 13.3618 20.8547 12.5984 20.7574C11.835 20.6602 11.1018 20.3983 10.4494 19.9899H10.4424Z" fill="url(#paint2_linear_4475_59727)"/>
+<path opacity="0.41" d="M10.4424 19.9899C9.81565 19.6007 9.27239 19.0909 8.84408 18.4902C8.35497 17.8207 8.01829 17.0523 7.85767 16.2389C7.69705 15.4255 7.71638 14.5869 7.91431 13.7817C8.11224 12.9766 8.48397 12.2245 9.00341 11.5783C9.52285 10.9321 10.1774 10.4074 10.9212 10.041C11.1465 9.93538 11.5197 9.75232 12.0196 9.75936C12.3713 9.76208 12.7177 9.84612 13.0316 10.0049C13.3455 10.1637 13.6185 10.3929 13.8291 10.6747C14.1124 11.0557 14.2677 11.5166 14.2727 11.9914C14.2727 11.9773 15.9977 6.38672 8.63989 6.38672C5.54889 6.38672 3.00709 9.31577 3.00709 11.8928C2.99479 13.2541 3.28583 14.601 3.85905 15.8357C4.79781 17.8347 6.43784 19.4194 8.46783 20.289C10.4978 21.1586 12.7764 21.2527 14.8712 20.5532C14.1373 20.785 13.3618 20.8547 12.5984 20.7574C11.835 20.6602 11.1018 20.3983 10.4494 19.9899H10.4424Z" fill="url(#paint3_radial_4475_59727)"/>
+<path d="M13.7305 13.477C13.6671 13.5474 13.4911 13.653 13.4911 13.8713C13.4911 14.0544 13.6108 14.2374 13.8291 14.3853C14.8359 15.0894 16.744 14.9908 16.7511 14.9908C17.5017 14.9903 18.2384 14.7885 18.8845 14.4064C19.5349 14.026 20.0747 13.4821 20.4501 12.8288C20.8256 12.1754 21.0237 11.4353 21.025 10.6817C21.0461 9.10455 20.4617 8.05544 20.2293 7.59073C18.7296 4.67576 15.5119 3 12.0125 3C9.64402 2.99977 7.37066 3.93188 5.68409 5.59473C3.99752 7.25758 3.03331 9.51751 3 11.8857C3.0352 9.31578 5.59109 7.23868 8.6328 7.23868C8.87923 7.23868 10.2874 7.2598 11.59 7.94278C12.5051 8.39753 13.263 9.11611 13.7657 10.0058C14.1952 10.7521 14.2726 11.7027 14.2726 12.0829C14.2726 12.4631 14.0825 13.0193 13.7234 13.484L13.7305 13.477Z" fill="url(#paint4_radial_4475_59727)"/>
+<path d="M13.7305 13.477C13.6671 13.5474 13.4911 13.653 13.4911 13.8713C13.4911 14.0544 13.6108 14.2374 13.8291 14.3853C14.8359 15.0894 16.744 14.9908 16.7511 14.9908C17.5017 14.9903 18.2384 14.7885 18.8845 14.4064C19.5349 14.026 20.0747 13.4821 20.4501 12.8288C20.8256 12.1754 21.0237 11.4353 21.025 10.6817C21.0461 9.10455 20.4617 8.05544 20.2293 7.59073C18.7296 4.67576 15.5119 3 12.0125 3C9.64402 2.99977 7.37066 3.93188 5.68409 5.59473C3.99752 7.25758 3.03331 9.51751 3 11.8857C3.0352 9.31578 5.59109 7.23868 8.6328 7.23868C8.87923 7.23868 10.2874 7.2598 11.59 7.94278C12.5051 8.39753 13.263 9.11611 13.7657 10.0058C14.1952 10.7521 14.2726 11.7027 14.2726 12.0829C14.2726 12.4631 14.0825 13.0193 13.7234 13.484L13.7305 13.477Z" fill="url(#paint5_radial_4475_59727)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59727" x1="7.13306" y1="15.4626" x2="19.6942" y2="15.4626" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0C59A4"/>
+<stop offset="1" stop-color="#114A8B"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.0684 15.5573) scale(6.71711 6.38126)">
+<stop offset="0.7" stop-opacity="0"/>
+<stop offset="0.9" stop-opacity="0.5"/>
+<stop offset="1"/>
+</radialGradient>
+<linearGradient id="paint2_linear_4475_59727" x1="13.7517" y1="10.0128" x2="5.91502" y2="18.5536" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B9DE2"/>
+<stop offset="0.2" stop-color="#1595DF"/>
+<stop offset="0.7" stop-color="#0680D7"/>
+<stop offset="1" stop-color="#0078D4"/>
+</linearGradient>
+<radialGradient id="paint3_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.96782 17.0071) rotate(-81.3844) scale(10.0958 8.1564)">
+<stop offset="0.8" stop-opacity="0"/>
+<stop offset="0.9" stop-opacity="0.5"/>
+<stop offset="1"/>
+</radialGradient>
+<radialGradient id="paint4_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4.82291 6.33152) rotate(92.2906) scale(14.2624 30.3759)">
+<stop stop-color="#35C1F1"/>
+<stop offset="0.1" stop-color="#34C1ED"/>
+<stop offset="0.2" stop-color="#2FC2DF"/>
+<stop offset="0.3" stop-color="#2BC3D2"/>
+<stop offset="0.7" stop-color="#36C752"/>
+</radialGradient>
+<radialGradient id="paint5_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.9026 8.44269) rotate(73.7398) scale(6.85089 5.57115)">
+<stop stop-color="#66EB6E"/>
+<stop offset="1" stop-color="#66EB6E" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/static/icons/dark/color/opera.svg b/static/icons/dark/color/opera.svg
new file mode 100644
index 000000000..0efa1752f
--- /dev/null
+++ b/static/icons/dark/color/opera.svg
@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2051 2.58969C7.1213 2.58969 3 6.71099 3 11.7948C3 16.7315 6.88651 20.7606 11.7667 20.9892C11.9124 20.9961 12.0582 21 12.2053 21C14.562 21 16.7114 20.1138 18.34 18.6574C17.2609 19.373 15.9994 19.7848 14.6512 19.7848C12.4591 19.7848 10.4958 18.6973 9.17542 16.9823C8.15755 15.7808 7.49829 14.0047 7.45338 12.0115V11.578C7.49826 9.58484 8.15752 7.8084 9.17516 6.60718C10.4958 4.89225 12.459 3.80476 14.651 3.80476C15.9995 3.80476 17.2612 4.2165 18.3404 4.93255C16.7198 3.48281 14.5834 2.59844 12.2398 2.58974C12.2281 2.58974 12.2166 2.58928 12.2049 2.58928L12.2051 2.58969Z" fill="url(#paint0_linear_4475_59675)"/>
+<path d="M9.17529 6.6077C10.02 5.61045 11.111 5.00909 12.3029 5.00909C14.9828 5.00909 17.1549 8.04738 17.1549 11.7952C17.1549 15.5431 14.9826 18.5814 12.3029 18.5814C11.111 18.5814 10.02 17.9803 9.17552 16.983C10.4959 18.6979 12.459 19.7854 14.6513 19.7854C15.9996 19.7854 17.2611 19.3737 18.3401 18.6581C20.2242 16.9725 21.4106 14.5225 21.4106 11.7953C21.4106 9.06843 20.2244 6.61858 18.3407 4.93317C17.2615 4.21711 15.9997 3.80537 14.6513 3.80537C12.4592 3.80537 10.496 4.89287 9.17555 6.6078" fill="url(#paint1_linear_4475_59675)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59675" x1="10.6704" y1="2.88975" x2="10.6704" y2="20.7324" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF1B2D"/>
+<stop offset="0.3" stop-color="#FF1B2D"/>
+<stop offset="0.614" stop-color="#FF1B2D"/>
+<stop offset="1" stop-color="#A70014"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4475_59675" x1="15.2928" y1="3.94157" x2="15.2928" y2="19.7224" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9C0000"/>
+<stop offset="0.7" stop-color="#FF4B4B"/>
+<stop offset="1" stop-color="#FF4B4B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/dark/color/safari.svg b/static/icons/dark/color/safari.svg
new file mode 100644
index 000000000..3b7c36e91
--- /dev/null
+++ b/static/icons/dark/color/safari.svg
@@ -0,0 +1,42 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4475_59705)">
+<g opacity="0.53" filter="url(#filter0_f_4475_59705)">
+<path d="M20.6716 12.7379C20.6716 13.8343 20.4473 14.92 20.0116 15.933C19.5758 16.946 18.9371 17.8664 18.132 18.6417C17.3268 19.417 16.371 20.032 15.319 20.4516C14.267 20.8712 13.1395 21.0872 12.0009 21.0872C10.8622 21.0872 9.73473 20.8712 8.68276 20.4516C7.63078 20.032 6.67493 19.417 5.86979 18.6417C5.06464 17.8664 4.42596 16.946 3.99022 15.933C3.55447 14.92 3.3302 13.8343 3.3302 12.7379C3.3302 10.5235 4.24372 8.39981 5.86979 6.83401C7.49585 5.26821 9.70128 4.38855 12.0009 4.38855C13.1395 4.38855 14.267 4.60451 15.319 5.0241C16.371 5.4437 17.3268 6.0587 18.132 6.83401C18.9371 7.60931 19.5758 8.52973 20.0116 9.54272C20.4473 10.5557 20.6716 11.6414 20.6716 12.7379Z" fill="black" fill-opacity="0.5"/>
+</g>
+<path d="M21.0018 12.0009C21.0018 13.1829 20.769 14.3533 20.3166 15.4454C19.8643 16.5374 19.2013 17.5297 18.3655 18.3655C17.5297 19.2013 16.5374 19.8643 15.4454 20.3166C14.3533 20.769 13.1829 21.0018 12.0009 21.0018C9.6137 21.0018 7.32429 20.0535 5.6363 18.3655C3.9483 16.6775 3 14.3881 3 12.0009C3 9.6137 3.9483 7.32429 5.6363 5.6363C7.32429 3.94831 9.6137 3 12.0009 3C13.1829 3 14.3533 3.23282 15.4454 3.68515C16.5374 4.13749 17.5297 4.80049 18.3655 5.6363C19.2013 6.47211 19.8643 7.46436 20.3166 8.5564C20.769 9.64843 21.0018 10.8189 21.0018 12.0009Z" fill="url(#paint0_linear_4475_59705)" stroke="#CDCDCD" stroke-width="0.351543" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.2964 12.0009C20.2964 14.201 19.4224 16.311 17.8666 17.8668C16.3109 19.4225 14.2009 20.2965 12.0008 20.2965C9.80066 20.2965 7.69064 19.4225 6.13492 17.8668C4.5792 16.311 3.7052 14.201 3.7052 12.0009C3.7052 9.80078 4.5792 7.69077 6.13492 6.13504C7.69064 4.57932 9.80066 3.70532 12.0008 3.70532C14.2009 3.70532 16.3109 4.57932 17.8666 6.13504C19.4224 7.69077 20.2964 9.80078 20.2964 12.0009Z" fill="url(#paint1_radial_4475_59705)"/>
+<path d="M12.0009 4.13794C11.9339 4.13794 11.8799 4.19188 11.8799 4.25888V5.65396C11.8799 5.72096 11.9339 5.7749 12.0009 5.7749C12.0679 5.7749 12.1218 5.72096 12.1218 5.65396V4.25888C12.1218 4.19188 12.0679 4.13794 12.0009 4.13794ZM11.2097 4.18795C11.2016 4.18709 11.1934 4.18709 11.1851 4.18805C11.1184 4.195 11.0704 4.25425 11.0773 4.32089L11.1383 4.90453C11.1452 4.97117 11.2045 5.01923 11.2711 5.01227C11.3378 5.00532 11.3858 4.94607 11.3789 4.87942L11.318 4.29579C11.3119 4.23748 11.2657 4.19339 11.2096 4.18795H11.2097ZM12.7976 4.18852C12.7416 4.19392 12.6954 4.238 12.6893 4.29631L12.6279 4.8799C12.6209 4.94654 12.6689 5.00584 12.7356 5.01285C12.8022 5.01986 12.8615 4.97185 12.8685 4.90521L12.9299 4.32158C12.9369 4.25494 12.8888 4.19568 12.8222 4.18868C12.8138 4.18781 12.8057 4.18781 12.7976 4.18853V4.18852ZM10.3969 4.30581C10.3888 4.30587 10.3806 4.30667 10.3724 4.3084C10.3069 4.32228 10.2653 4.38624 10.2792 4.45179L10.5681 5.81658C10.582 5.88214 10.6459 5.92374 10.7115 5.90987C10.777 5.89599 10.8186 5.83208 10.8047 5.76653L10.5158 4.40168C10.5037 4.34432 10.4532 4.3053 10.3969 4.30574L10.3969 4.30581ZM13.6104 4.30696C13.554 4.30639 13.5036 4.34545 13.4914 4.4028L13.2015 5.76743C13.1875 5.83298 13.2291 5.89695 13.2946 5.91088C13.3602 5.92481 13.4242 5.88324 13.4381 5.8177L13.728 4.45306C13.7419 4.38752 13.7003 4.32354 13.6348 4.30962C13.6266 4.3079 13.6184 4.30703 13.6104 4.30703L13.6104 4.30696ZM9.62118 4.52452C9.60552 4.52309 9.58935 4.52481 9.57341 4.5301C9.50969 4.55082 9.47504 4.61874 9.49575 4.68247L9.67709 5.24058C9.6978 5.30431 9.76578 5.33896 9.82951 5.31825C9.89324 5.29753 9.92784 5.22956 9.90713 5.16583L9.72579 4.60772C9.71027 4.55993 9.66815 4.52851 9.62118 4.52451V4.52452ZM14.3817 4.52481C14.3347 4.52881 14.2926 4.56022 14.2771 4.60801L14.0956 5.16608C14.0749 5.2298 14.1095 5.29778 14.1732 5.3185C14.237 5.33921 14.305 5.30459 14.3257 5.24088L14.5071 4.68276C14.5278 4.61904 14.4932 4.55106 14.4295 4.53034C14.4136 4.52517 14.3973 4.52348 14.3817 4.5248V4.52481ZM8.85412 4.80523C8.8384 4.80551 8.8225 4.80896 8.80719 4.81577C8.746 4.84298 8.71859 4.91416 8.7458 4.97539L9.31243 6.2502C9.33964 6.31142 9.41082 6.3388 9.47205 6.31158C9.53324 6.28437 9.56071 6.21319 9.53349 6.15196L8.96681 4.87716C8.94641 4.83123 8.90125 4.80431 8.85412 4.80523ZM15.1574 4.8095C15.1103 4.80864 15.0651 4.83539 15.0446 4.88128L14.4763 6.1553C14.449 6.21649 14.4762 6.28773 14.5374 6.31503C14.5986 6.34233 14.6699 6.31504 14.6972 6.25385L15.2655 4.97983C15.2928 4.91864 15.2655 4.8474 15.2043 4.8201C15.189 4.81329 15.1731 4.80985 15.1574 4.8095V4.8095ZM8.14212 5.18195C8.1189 5.18022 8.09498 5.18539 8.07322 5.19798C8.01519 5.23148 7.99545 5.30516 8.02895 5.36319L8.32236 5.8714C8.35587 5.92943 8.42955 5.94917 8.48758 5.91566C8.54561 5.88216 8.56534 5.80848 8.53184 5.75045L8.23843 5.24225C8.21748 5.20598 8.18083 5.18466 8.14212 5.18195V5.18195ZM15.8596 5.18195C15.8209 5.18453 15.7843 5.20597 15.7634 5.24224L15.4699 5.75044C15.4364 5.80847 15.4562 5.88215 15.5142 5.91565C15.5723 5.94916 15.6459 5.92942 15.6794 5.87139L15.9729 5.36318C16.0064 5.30515 15.9866 5.23147 15.9286 5.19797C15.9068 5.18541 15.8829 5.18033 15.8596 5.18194V5.18195ZM7.45074 5.61316C7.42747 5.61402 7.40417 5.62149 7.38383 5.63623C7.32959 5.67558 7.3176 5.75091 7.35696 5.80515L8.17612 6.93437C8.21546 6.98861 8.29085 7.0006 8.34508 6.96127C8.39932 6.92192 8.41131 6.84659 8.37195 6.79235L7.55274 5.66313C7.52815 5.62923 7.48951 5.61185 7.45074 5.61317V5.61316ZM16.5597 5.61931C16.5209 5.61787 16.4823 5.63526 16.4576 5.66911L15.6369 6.79723C15.5975 6.85141 15.6094 6.92678 15.6636 6.9662C15.7178 7.00562 15.7931 6.99376 15.8325 6.93959L16.6532 5.81147C16.6926 5.75728 16.6807 5.68192 16.6266 5.6425C16.6062 5.62773 16.5829 5.62014 16.5597 5.61931ZM6.83276 6.13143C6.80189 6.12971 6.77038 6.14002 6.74548 6.16244C6.69568 6.20727 6.69168 6.28344 6.73652 6.33324L7.12916 6.76941C7.17399 6.81921 7.25015 6.82322 7.29995 6.77837C7.34976 6.73354 7.35377 6.65733 7.30892 6.60753L6.91634 6.1714C6.89392 6.14649 6.86364 6.13304 6.83276 6.13142V6.13143ZM17.1699 6.1323C17.139 6.13402 17.1087 6.14738 17.0863 6.17228L16.6937 6.60835C16.6488 6.65815 16.6528 6.73436 16.7026 6.7792C16.7524 6.82403 16.8286 6.82001 16.8734 6.77023L17.2661 6.33416C17.3109 6.28436 17.3069 6.20815 17.2571 6.16332C17.2322 6.1409 17.2008 6.13069 17.1699 6.13231L17.1699 6.1323ZM6.24046 6.70038C6.20959 6.7021 6.17935 6.71546 6.15694 6.74036C6.11211 6.79016 6.11612 6.86633 6.16591 6.91116L7.20273 7.84452C7.25254 7.88936 7.3287 7.88535 7.37352 7.83556C7.41836 7.78576 7.4144 7.70959 7.36459 7.66476L6.32771 6.7314C6.3028 6.70898 6.27131 6.69877 6.24043 6.70039L6.24046 6.70038ZM17.7651 6.70445C17.7342 6.70273 17.7026 6.71302 17.6777 6.73541L16.6403 7.66805C16.5904 7.71284 16.5863 7.78901 16.6311 7.83885C16.6759 7.88868 16.7522 7.89272 16.802 7.84793L17.8395 6.91529C17.8893 6.87049 17.8934 6.79432 17.8486 6.74449C17.8262 6.71958 17.7959 6.7061 17.7651 6.70445H17.7651ZM5.74791 7.33372C5.70913 7.33228 5.67048 7.34975 5.64586 7.38362C5.60648 7.43783 5.61842 7.51315 5.67264 7.55253L6.14739 7.89747C6.2016 7.93685 6.27692 7.92496 6.3163 7.87074C6.35569 7.81653 6.34377 7.74116 6.28958 7.70178L5.81483 7.35685C5.79452 7.34208 5.77118 7.33455 5.74791 7.33371L5.74791 7.33372ZM18.2571 7.33811C18.2339 7.33898 18.2106 7.34642 18.1902 7.36119L17.7153 7.70581C17.661 7.74516 17.649 7.82054 17.6884 7.87478C17.7277 7.92901 17.803 7.94095 17.8573 7.90161L18.3323 7.55699C18.3865 7.51765 18.3985 7.44231 18.3591 7.38808C18.3345 7.35418 18.2959 7.3368 18.2571 7.33812V7.33811ZM5.28762 8.00929C5.24892 8.01188 5.21231 8.03331 5.19137 8.06958C5.15786 8.12761 5.1776 8.20129 5.23563 8.23479L6.44377 8.93232C6.5018 8.96583 6.57548 8.94609 6.60899 8.88806C6.64249 8.83003 6.62275 8.75635 6.56472 8.72285L5.35657 8.02531C5.33482 8.01275 5.31084 8.00767 5.28762 8.00928V8.00929ZM18.7141 8.00929C18.6909 8.00757 18.6669 8.01274 18.6452 8.02532L17.437 8.72286C17.379 8.75636 17.3593 8.83004 17.3928 8.88807C17.4263 8.9461 17.5 8.96584 17.558 8.93233L18.7662 8.2348C18.8242 8.2013 18.8439 8.12762 18.8104 8.06959C18.7895 8.03332 18.7528 8.01201 18.7141 8.0093V8.00929ZM4.9396 8.72937C4.89247 8.72822 4.84727 8.75521 4.8268 8.80109C4.7995 8.86229 4.82679 8.93353 4.88798 8.96082L5.42396 9.1999C5.48516 9.22719 5.5564 9.19991 5.58369 9.13872C5.61099 9.07752 5.58365 9.00629 5.52246 8.97899L4.98654 8.73992C4.97125 8.73308 4.95531 8.72969 4.9396 8.72937ZM19.0645 8.73434C19.0488 8.73463 19.0328 8.73808 19.0175 8.74489L18.4814 8.98354C18.4202 9.01081 18.3928 9.082 18.4201 9.14322C18.4474 9.20443 18.5186 9.23181 18.5798 9.20456L19.1159 8.96585C19.1771 8.93861 19.2045 8.86738 19.1772 8.80617C19.1568 8.76026 19.1116 8.73341 19.0645 8.73434ZM4.62944 9.48199C4.58247 9.48593 4.54035 9.51731 4.52479 9.56509C4.50404 9.6288 4.53857 9.69681 4.60229 9.71757L5.92873 10.1498C5.99243 10.1705 6.06044 10.136 6.0812 10.0723C6.10195 10.0085 6.06741 9.94054 6.00368 9.91979L4.67726 9.48757C4.66134 9.48237 4.6451 9.48068 4.62944 9.482V9.48199ZM19.3741 9.48717C19.3584 9.48573 19.3423 9.48745 19.3263 9.49274L17.9996 9.92401C17.9359 9.94472 17.9013 10.0127 17.922 10.0764C17.9427 10.1402 18.0107 10.1748 18.0744 10.154L19.4011 9.72278C19.4648 9.70206 19.4995 9.63408 19.4788 9.57036C19.4632 9.52257 19.4211 9.49114 19.3741 9.48716V9.48717ZM4.4362 10.272C4.37986 10.2715 4.32932 10.3106 4.31713 10.3679C4.3032 10.4335 4.34478 10.4974 4.41031 10.5114L4.98434 10.6334C5.04988 10.6473 5.11385 10.6057 5.12778 10.5402C5.14172 10.4746 5.10015 10.4107 5.03461 10.3967L4.46063 10.2747C4.45244 10.273 4.44425 10.2722 4.4362 10.2722V10.272ZM19.5658 10.2732C19.5578 10.2732 19.5496 10.2743 19.5415 10.2758L18.9674 10.3977C18.9019 10.4116 18.8603 10.4756 18.8742 10.5411C18.8882 10.6066 18.9521 10.6482 19.0177 10.6343L19.5917 10.5124C19.6572 10.4985 19.6988 10.4345 19.6849 10.3689C19.6727 10.3116 19.6222 10.2726 19.5658 10.2731L19.5658 10.2732ZM4.28994 11.0667C4.23385 11.0721 4.18768 11.1161 4.18152 11.1744C4.17448 11.241 4.22242 11.3004 4.28905 11.3074L5.6764 11.4541C5.74303 11.4611 5.80236 11.4131 5.8094 11.3465C5.81644 11.2799 5.76845 11.2205 5.70182 11.2135L4.31447 11.0668C4.30614 11.066 4.29796 11.066 4.28994 11.0667V11.0667ZM19.7131 11.0771C19.7051 11.0763 19.6969 11.0763 19.6885 11.0772L18.301 11.222C18.2344 11.229 18.1863 11.2882 18.1933 11.3549C18.2002 11.4215 18.2595 11.4696 18.3261 11.4626L19.7136 11.3178C19.7803 11.3109 19.8283 11.2516 19.8214 11.185C19.8153 11.1267 19.7692 11.0826 19.7131 11.0771L19.7131 11.0771ZM4.26645 11.8802C4.19944 11.8802 4.14551 11.9341 4.14551 12.0011C4.14551 12.0681 4.19944 12.1221 4.26645 12.1221H4.85328C4.92028 12.1221 4.97427 12.0681 4.97427 12.0011C4.97427 11.9341 4.92028 11.8802 4.85328 11.8802H4.26645ZM19.1485 11.8802C19.0815 11.8802 19.0275 11.9341 19.0275 12.0011C19.0275 12.0681 19.0815 12.1221 19.1485 12.1221H19.7353C19.8023 12.1221 19.8563 12.0681 19.8563 12.0011C19.8563 11.9341 19.8023 11.8802 19.7353 11.8802H19.1485ZM5.7002 12.5395C5.69219 12.5386 5.68399 12.5386 5.67566 12.5396L4.28811 12.6844C4.22146 12.6913 4.17342 12.7506 4.18037 12.8172C4.18733 12.8839 4.24657 12.9319 4.31321 12.925L5.70077 12.7802C5.76742 12.7732 5.81546 12.714 5.80851 12.6473C5.80242 12.589 5.75628 12.5449 5.70019 12.5395H5.7002ZM18.3008 12.5481C18.2447 12.5534 18.1986 12.5974 18.1924 12.6557C18.1854 12.7224 18.2333 12.7817 18.2999 12.7887L19.6873 12.9354C19.7539 12.9425 19.8132 12.8945 19.8203 12.8278C19.8273 12.7612 19.7793 12.7019 19.7127 12.6948L18.3254 12.5482C18.3171 12.5473 18.3088 12.5473 18.3008 12.5481L18.3008 12.5481ZM5.00856 13.3651C5.00052 13.3652 4.99233 13.366 4.98414 13.3677L4.41011 13.4897C4.34456 13.5036 4.30301 13.5676 4.31693 13.6331C4.33087 13.6986 4.39483 13.7402 4.46038 13.7263L5.03441 13.6044C5.09995 13.5905 5.1415 13.5265 5.12758 13.4609C5.1154 13.4036 5.06492 13.3646 5.00857 13.3651L5.00856 13.3651ZM18.993 13.3663C18.9367 13.3657 18.8862 13.4048 18.874 13.4621C18.8601 13.5277 18.9016 13.5916 18.9672 13.6056L19.5412 13.7275C19.6067 13.7415 19.6707 13.7 19.6846 13.6344C19.6986 13.5689 19.657 13.5049 19.5915 13.4909L19.0175 13.3689C19.0093 13.3672 19.0011 13.3664 18.993 13.3664L18.993 13.3663ZM5.97519 13.8426C5.95953 13.8412 5.94335 13.8429 5.92742 13.8482L4.60068 14.2795C4.53695 14.3002 4.50234 14.3682 4.52306 14.4319C4.54378 14.4956 4.61175 14.5302 4.67548 14.5095L6.00218 14.0783C6.0659 14.0575 6.10056 13.9896 6.07984 13.9258C6.0643 13.878 6.02216 13.8466 5.97519 13.8426V13.8426ZM18.0253 13.8469C17.9783 13.8509 17.9362 13.8822 17.9206 13.93C17.8999 13.9937 17.9344 14.0617 17.9981 14.0825L19.3246 14.5147C19.3883 14.5355 19.4563 14.5009 19.477 14.4372C19.4978 14.3735 19.4632 14.3055 19.3995 14.2847L18.0731 13.8525C18.0572 13.8473 18.0409 13.8456 18.0253 13.8469V13.8469ZM5.46891 14.7872C5.45319 14.7875 5.43728 14.7909 5.42198 14.7977L4.88584 15.0364C4.82463 15.0637 4.79731 15.1349 4.82456 15.1961C4.85183 15.2573 4.92303 15.2846 4.98424 15.2574L5.52037 15.0187C5.58158 14.9915 5.60891 14.9203 5.58166 14.8591C5.56123 14.8132 5.51604 14.7863 5.46891 14.7872V14.7872ZM18.5309 14.7918C18.4838 14.7907 18.4386 14.8177 18.4181 14.8636C18.3908 14.9248 18.4181 14.996 18.4793 15.0233L19.0152 15.2624C19.0764 15.2897 19.1477 15.2624 19.175 15.2012C19.2023 15.14 19.175 15.0688 19.1138 15.0415L18.5779 14.8024C18.5626 14.7955 18.5466 14.7922 18.5309 14.7918V14.7918ZM6.51273 15.0539C6.48952 15.0522 6.46554 15.0574 6.44377 15.07L5.23563 15.7675C5.1776 15.801 5.15786 15.8747 5.19137 15.9327C5.22487 15.9907 5.29854 16.0105 5.35657 15.977L6.56472 15.2795C6.62275 15.246 6.64249 15.1723 6.60899 15.1142C6.58804 15.078 6.55143 15.0566 6.51273 15.0539V15.0539ZM17.4891 15.0539C17.4504 15.0565 17.4137 15.078 17.3928 15.1142C17.3593 15.1722 17.379 15.246 17.437 15.2795L18.6452 15.977C18.7032 16.0105 18.7769 15.9907 18.8104 15.9327C18.8439 15.8747 18.8242 15.801 18.7662 15.7675L17.558 15.07C17.5362 15.0574 17.5123 15.0523 17.4891 15.0539V15.0539ZM6.21138 16.0776C6.18811 16.0784 6.16481 16.0859 6.14447 16.1007L5.6695 16.4453C5.61527 16.4846 5.60327 16.56 5.64261 16.6142C5.68196 16.6685 5.7573 16.6804 5.81153 16.6411L6.28654 16.2965C6.34078 16.2571 6.35277 16.1818 6.31343 16.1276C6.28884 16.0937 6.25016 16.0762 6.21138 16.0775V16.0776ZM17.7875 16.0816C17.7487 16.0802 17.7101 16.0977 17.6855 16.1315C17.6461 16.1857 17.658 16.2611 17.7122 16.3005L18.187 16.6454C18.2412 16.6848 18.3165 16.6729 18.3559 16.6187C18.3953 16.5644 18.3834 16.4891 18.3292 16.4497L17.8544 16.1048C17.8341 16.09 17.8108 16.0824 17.7875 16.0816L17.7875 16.0816ZM7.2871 16.1234C7.25623 16.1217 7.22474 16.132 7.19982 16.1543L6.16232 17.087C6.11249 17.1318 6.10844 17.2079 6.15324 17.2578C6.19803 17.3076 6.2742 17.3117 6.32404 17.2669L7.36154 16.3342C7.41137 16.2894 7.41542 16.2133 7.37062 16.1634C7.34824 16.1385 7.31797 16.125 7.2871 16.1234ZM16.7118 16.1267C16.6809 16.1284 16.6506 16.1418 16.6282 16.1667C16.5834 16.2165 16.5874 16.2927 16.6372 16.3375L17.674 17.2709C17.7238 17.3157 17.8 17.3117 17.8449 17.2619C17.8897 17.2121 17.8857 17.1359 17.8359 17.0911L16.799 16.1577C16.7741 16.1353 16.7427 16.1251 16.7118 16.1267V16.1267ZM8.27136 17.0128C8.23259 17.0113 8.1939 17.0287 8.16926 17.0625L7.34859 18.1907C7.30917 18.2449 7.32104 18.3202 7.3752 18.3596C7.42938 18.3991 7.50475 18.3872 7.54417 18.333L8.36484 17.2049C8.40426 17.1507 8.3924 17.0753 8.33824 17.0359C8.31792 17.0211 8.29463 17.0136 8.27136 17.0128ZM15.7237 17.0178C15.7004 17.0187 15.6771 17.0261 15.6567 17.0409C15.6025 17.0802 15.5905 17.1556 15.6298 17.2098L16.449 18.339C16.4883 18.3933 16.5637 18.4052 16.6179 18.3659C16.6722 18.3266 16.6841 18.2512 16.6448 18.197L15.8257 17.0678C15.8011 17.0339 15.7624 17.0165 15.7237 17.0178V17.0178ZM7.21193 17.192C7.18106 17.1938 7.15078 17.2071 7.12837 17.232L6.73572 17.6681C6.69088 17.7179 6.69485 17.7941 6.74466 17.839C6.79445 17.8838 6.87062 17.8798 6.91545 17.83L7.30814 17.3939C7.35299 17.3441 7.34897 17.2679 7.29918 17.223C7.27427 17.2006 7.24283 17.1904 7.21195 17.192L7.21193 17.192ZM16.7891 17.1926C16.7582 17.1909 16.7268 17.2012 16.7019 17.2236C16.6521 17.2685 16.6481 17.3446 16.6929 17.3944L17.0855 17.8306C17.1303 17.8804 17.2065 17.8844 17.2563 17.8396C17.3061 17.7947 17.3101 17.7185 17.2652 17.6687L16.8726 17.2326C16.8502 17.2077 16.8199 17.1942 16.7891 17.1926L16.7891 17.1926ZM9.4174 17.6764C9.37027 17.6753 9.32512 17.7022 9.30465 17.7481L8.73625 19.0221C8.70896 19.0833 8.73624 19.1546 8.79743 19.1819C8.85862 19.2092 8.92986 19.1819 8.95716 19.1207L9.52555 17.8467C9.55285 17.7855 9.52557 17.7142 9.46437 17.6869C9.44909 17.6801 9.43311 17.6767 9.4174 17.6764ZM14.5767 17.6799C14.561 17.6802 14.545 17.6836 14.5297 17.6904C14.4685 17.7176 14.4411 17.7888 14.4683 17.85L15.0349 19.1248C15.0622 19.186 15.1334 19.2134 15.1946 19.1862C15.2558 19.159 15.2832 19.0878 15.256 19.0266L14.6894 17.7518C14.669 17.7059 14.6238 17.679 14.5767 17.6799ZM8.41862 18.0703C8.37992 18.0729 8.3433 18.0943 8.32236 18.1306L8.02895 18.6388C7.99545 18.6968 8.01519 18.7705 8.07322 18.804C8.13124 18.8375 8.20493 18.8178 8.23843 18.7597L8.53184 18.2515C8.56534 18.1935 8.54561 18.1198 8.48758 18.0863C8.46583 18.0738 8.44184 18.0687 8.41862 18.0703V18.0703ZM15.5831 18.0703C15.5599 18.0686 15.536 18.0738 15.5142 18.0863C15.4562 18.1198 15.4365 18.1935 15.47 18.2515L15.7634 18.7598C15.7969 18.8178 15.8706 18.8375 15.9286 18.804C15.9866 18.7705 16.0064 18.6968 15.9729 18.6388L15.6794 18.1306C15.6585 18.0943 15.6218 18.073 15.5831 18.0703V18.0703ZM10.6827 18.0885C10.6264 18.0879 10.5759 18.127 10.5637 18.1844L10.2738 19.549C10.2599 19.6145 10.3015 19.6785 10.367 19.6924C10.4325 19.7064 10.4965 19.6648 10.5104 19.5993L10.8004 18.2346C10.8143 18.1691 10.7727 18.1051 10.7072 18.0912C10.699 18.0895 10.6908 18.0886 10.6828 18.0886L10.6827 18.0885ZM13.3147 18.0894C13.3067 18.0894 13.2986 18.0902 13.2904 18.092C13.2248 18.1058 13.1832 18.1698 13.1971 18.2353L13.486 19.6002C13.4999 19.6657 13.5638 19.7073 13.6294 19.6934C13.6949 19.6796 13.7365 19.6156 13.7227 19.55L13.4337 18.1853C13.4215 18.1279 13.3711 18.0889 13.3147 18.0893L13.3147 18.0894ZM12.0009 18.227C11.9339 18.227 11.8799 18.281 11.8799 18.348V19.743C11.8799 19.8101 11.9339 19.864 12.0009 19.864C12.0679 19.864 12.1218 19.8101 12.1218 19.743V18.348C12.1218 18.281 12.0679 18.227 12.0009 18.227ZM9.78075 18.6778C9.73378 18.6818 9.69163 18.7132 9.6761 18.761L9.4947 19.3191C9.47399 19.3829 9.50861 19.4508 9.57233 19.4716C9.63605 19.4923 9.70403 19.4576 9.72475 19.3939L9.90614 18.8358C9.92685 18.7721 9.89223 18.7041 9.82852 18.6834C9.8126 18.6782 9.79641 18.6765 9.78075 18.6778V18.6778ZM14.2201 18.6781C14.2044 18.6767 14.1882 18.6784 14.1723 18.6837C14.1086 18.7044 14.0739 18.7724 14.0946 18.8361L14.276 19.3942C14.2967 19.4579 14.3647 19.4925 14.4284 19.4718C14.4921 19.4511 14.5268 19.3832 14.5061 19.3194L14.3247 18.7613C14.3091 18.7135 14.267 18.6821 14.2201 18.6781V18.6781ZM11.2417 18.989C11.1856 18.9944 11.1394 19.0384 11.1333 19.0967L11.0719 19.6803C11.0649 19.747 11.1129 19.8062 11.1796 19.8132C11.2462 19.8202 11.3055 19.7722 11.3125 19.7056L11.3739 19.122C11.3809 19.0554 11.3329 18.9961 11.2662 18.9891C11.2579 18.9882 11.2497 18.9882 11.2417 18.989L11.2417 18.989ZM12.7552 18.9895C12.7472 18.9887 12.7389 18.9887 12.7306 18.9896C12.664 18.9966 12.6159 19.0558 12.6229 19.1225L12.6838 19.7062C12.6908 19.7728 12.75 19.8208 12.8167 19.8139C12.8833 19.8069 12.9314 19.7476 12.9244 19.681L12.8635 19.0974C12.8574 19.0391 12.8113 18.995 12.7552 18.9895L12.7552 18.9895Z" fill="#F4F2F3"/>
+<g opacity="0.409" filter="url(#filter1_f_4475_59705)">
+<path d="M17.6697 7.16309L11.0525 11.0077L6.86865 17.5943L12.9893 13.0608L17.6697 7.16309Z" fill="black"/>
+</g>
+<path d="M12.9491 12.9939L11.0524 11.0077L17.7807 6.48153L12.9491 12.9939Z" fill="#FF5150"/>
+<path d="M12.9492 12.994L11.0525 11.0077L6.22085 17.5201L12.9492 12.994Z" fill="#F1F1F1"/>
+<path opacity="0.243" d="M6.22095 17.5201L12.9493 12.994L17.7809 6.48157L6.22095 17.5201Z" fill="black"/>
+</g>
+<defs>
+<filter id="filter0_f_4475_59705" x="-0.6698" y="0.38855" width="25.3414" height="24.6986" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_4475_59705"/>
+</filter>
+<filter id="filter1_f_4475_59705" x="4.3238" y="4.61823" width="15.8907" height="15.5209" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.27243" result="effect1_foregroundBlur_4475_59705"/>
+</filter>
+<linearGradient id="paint0_linear_4475_59705" x1="12.0009" y1="21.0018" x2="12.0009" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BDBDBD"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59705" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.0385 10.7914) scale(9.00093 9.00092)">
+<stop stop-color="#06C2E7"/>
+<stop offset="0.25" stop-color="#0DB8EC"/>
+<stop offset="0.5" stop-color="#12AEF1"/>
+<stop offset="0.75" stop-color="#1F86F9"/>
+<stop offset="1" stop-color="#107DDD"/>
+</radialGradient>
+<clipPath id="clip0_4475_59705">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/icons/dark/grayscale/firefox.svg b/static/icons/dark/grayscale/firefox.svg
new file mode 100644
index 000000000..d73dc97f5
--- /dev/null
+++ b/static/icons/dark/grayscale/firefox.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3467 9.03797C19.9351 8.12658 19.1707 7.15823 18.5238 6.81646C19.0531 7.78481 19.3471 8.75316 19.4647 9.49367C18.465 7.0443 16.701 6.01899 15.2897 3.85443C15.2309 3.74051 15.1721 3.62658 15.0545 3.51266C14.9957 3.4557 14.9957 3.39873 14.9369 3.34177C14.8781 3.22785 14.8193 3.11392 14.8193 3C12.82 4.13924 11.9968 6.13291 11.7616 7.38608C11.1147 7.44304 10.5267 7.55696 9.99749 7.84177C9.87988 7.89873 9.82108 8.01266 9.87988 8.12658C9.93869 8.24051 10.0563 8.29747 10.1739 8.24051C10.6443 8.01266 11.1735 7.89873 11.7616 7.84177H11.8204C11.8792 7.84177 11.9968 7.84177 12.0556 7.84177C12.4672 7.84177 12.9376 7.89873 13.3492 8.01266H13.408C13.4668 8.01266 13.5256 8.06962 13.6432 8.06962C13.702 8.06962 13.7608 8.12658 13.8196 8.12658C13.8784 8.12658 13.8784 8.18354 13.9372 8.18354C13.9961 8.18354 14.0549 8.24051 14.1137 8.29747L14.1725 8.35443C14.2313 8.41139 14.2901 8.41139 14.3489 8.46835C14.4077 8.46835 14.4077 8.52532 14.4665 8.52532C15.1133 8.92405 15.6425 9.43671 16.0541 10.1203C15.5837 9.77848 14.7017 9.49367 13.8784 9.60759C17.1126 11.2025 16.2305 16.6139 11.7616 16.3861C11.3499 16.3861 10.9383 16.2722 10.5855 16.1582C10.4679 16.1013 10.4091 16.1013 10.2915 16.0443C10.2327 16.0443 10.1739 15.9873 10.1151 15.9873C8.99785 15.4177 8.11581 14.3924 7.99821 13.1392C7.99821 13.1392 8.40982 11.6582 10.9971 11.6582C11.2911 11.6582 12.0556 10.9177 12.0556 10.6899C12.0556 10.6329 10.4679 10.0063 9.87988 9.43671C9.52707 9.1519 9.40946 8.98101 9.23306 8.86709C9.17425 8.81013 9.05665 8.75316 8.99785 8.6962C8.82144 8.01266 8.76264 7.27215 8.99785 6.53165C8.05701 6.87342 7.29258 7.5 6.76336 8.06962C6.41054 7.61392 6.46934 6.18987 6.46934 5.90506C6.46934 5.90506 6.17533 6.01899 6.17533 6.07595C5.88132 6.24684 5.5285 6.53165 5.29329 6.75949C4.99928 7.0443 4.70527 7.38608 4.47006 7.72785C3.88204 8.52532 3.47042 9.43671 3.23521 10.3481C3.23521 10.3481 3.17641 10.6899 3.1176 11.1456C3.1176 11.2025 3.1176 11.2595 3.0588 11.3734C3.0588 11.5443 3 11.7152 3 11.8861C3 12 3 12.057 3 12.1709V12.2278C3 17.1266 6.99856 21 11.9968 21C16.4658 21 20.1703 17.8671 20.8759 13.7089C20.8759 13.5949 20.8759 13.481 20.9347 13.3671C21.1111 11.943 20.9347 10.3481 20.3467 9.03797Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/microsoft_edge.svg b/static/icons/dark/grayscale/microsoft_edge.svg
new file mode 100644
index 000000000..1a54e0f1f
--- /dev/null
+++ b/static/icons/dark/grayscale/microsoft_edge.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9915 15.0939C10.3709 14.3974 9.94825 13.5653 9.81334 12.6338C9.54354 13.0498 9.3187 13.502 9.15681 13.9904C8.32941 16.4777 9.76837 19.58 12.2146 20.4845C14.3191 21.1899 16.6844 19.9327 18.2403 18.558C18.4741 18.2414 20.3178 16.6043 19.4005 16.4234C16.6844 17.8253 13.087 17.4274 10.9915 15.0939ZM11.5311 9.83897C12.4664 9.82993 11.5671 9.45006 11.1804 9.16063C10.245 8.64509 9.14782 8.39184 8.08658 8.39184C4.62406 8.42802 2.11936 10.6078 3.29302 14.2166C4.13841 17.7259 7.16924 20.5478 10.7487 21C8.90499 19.8332 7.78979 17.6445 7.78979 15.4647C7.86174 13.1764 9.26474 10.4902 11.5311 9.83897ZM3.72471 8.64509C6.45875 6.6191 10.8116 6.7819 13.1679 9.33248C14.0853 10.3364 14.7148 12.0459 13.8784 13.285C12.3135 14.9853 16.6484 15.2115 17.5748 14.9582C20.9384 14.307 21.8287 10.3726 20.2279 7.65923C18.699 4.58407 15.3084 2.97413 11.9808 3.00126C8.32941 2.93795 5.04676 5.26241 3.72471 8.64509Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/opera.svg b/static/icons/dark/grayscale/opera.svg
new file mode 100644
index 000000000..57a6f9113
--- /dev/null
+++ b/static/icons/dark/grayscale/opera.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.039 6.92844C8.0418 8.10292 7.3983 9.84079 7.3533 11.7884V12.2114C7.3992 14.1598 8.0427 15.895 9.0381 17.0713C10.3287 18.7471 12.2475 19.8108 14.3931 19.8108C15.6773 19.8079 16.9318 19.4239 17.9976 18.7075C16.241 20.2863 13.9314 21.1064 11.5725 20.9889C9.26213 20.8795 7.08262 19.8846 5.48637 18.2108C3.89012 16.537 2.99972 14.3128 3 11.9999C3 7.02834 7.0302 3 12 3H12.0333C14.2355 3.00591 16.3587 3.82145 17.9985 5.29136C16.9312 4.57592 15.6762 4.19203 14.3913 4.18798C12.2475 4.18798 10.3287 5.25266 9.0363 6.92844H9.0381H9.039ZM21 11.9999C21.0016 13.2666 20.735 14.5193 20.2177 15.6755C19.7003 16.8318 18.944 17.8654 17.9985 18.7084C15.69 19.8333 13.539 19.0467 12.8262 18.5554C15.0942 18.0568 16.8069 15.3154 16.8069 11.9999C16.8069 8.68341 15.0942 5.94295 12.8262 5.44526C13.5381 4.95477 15.69 4.16728 17.9985 5.29136C18.9441 6.13424 19.7005 7.16784 20.2178 8.32411C20.7352 9.48039 21.0017 10.7331 21 11.9999Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/safari.svg b/static/icons/dark/grayscale/safari.svg
new file mode 100644
index 000000000..4c38e6ebb
--- /dev/null
+++ b/static/icons/dark/grayscale/safari.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02846 3 3 7.02846 3 12C3 16.9715 7.02846 21 12 21C16.9715 21 21 16.9715 21 12C21 7.02846 16.9715 3 12 3ZM13.3985 4.24771L13.6739 4.30317L13.3444 5.95782L13.069 5.90267L13.3985 4.24771ZM10.6015 19.7493L10.3261 19.6938L10.6556 18.0392L10.931 18.0943L10.6015 19.7493ZM14.1509 4.42211L14.4197 4.50415L14.1745 5.31204L13.9058 5.23L14.1509 4.42211ZM9.84906 19.5769L9.58032 19.4948L9.82546 18.6869L10.0942 18.769L9.84906 19.5769ZM15.1445 4.7775L14.4984 6.33681L14.2386 6.22886L14.8844 4.66956L15.1445 4.77753V4.7775ZM8.85782 19.2215L9.50357 17.6625L9.76336 17.7705L9.11761 19.3295L8.85782 19.2215V19.2215ZM15.588 4.98816L15.8351 5.12068L15.4381 5.86448L15.1906 5.73158L15.588 4.98816ZM8.41201 19.0112L8.16485 18.8783L8.56315 18.1349L8.81065 18.2674L8.41201 19.0112ZM19.0125 8.4117L18.2694 8.80967L18.1368 8.56217L18.8793 8.1642C18.7995 8.02075 18.7151 7.87993 18.6262 7.74199L17.2237 8.68043L17.0695 8.44525L18.4723 7.50681C18.378 7.37293 18.28 7.24372 18.1777 7.11317L17.5276 7.64766L17.3486 7.42941L17.9986 6.89492C17.8927 6.77134 17.7804 6.65175 17.6678 6.53284L17.2276 6.97299L13.1251 13.1255L6.97232 17.2284L6.52949 17.6685C6.64874 17.7811 6.76934 17.8934 6.89492 17.999L7.42941 17.3489L7.64766 17.528L7.11317 18.1781C7.24038 18.2794 7.37293 18.3751 7.50681 18.4694L8.43859 17.0666L8.67377 17.2207L7.73535 18.6232C8.72293 19.26 9.85769 19.6816 11.0822 19.8224L11.1632 18.9823L11.4442 19.0102L11.3632 19.8503C11.5283 19.8649 11.6904 19.8716 11.8558 19.8752V18.1874H12.1372V19.8752C12.3026 19.8716 12.4681 19.8639 12.6302 19.8503L12.5461 19.0102L12.8272 18.9823L12.9112 19.8224C13.0763 19.8031 13.2381 19.7782 13.4002 19.7493L13.071 18.0963L13.3467 18.0412L13.6756 19.6949C13.837 19.66 13.9945 19.6188 14.1519 19.5739L13.9064 18.7667L14.1752 18.6847L14.4207 19.4926L14.1579 19.5729C14.4054 19.5025 14.6466 19.4198 14.8834 19.3271L14.2386 17.7705L14.4984 17.6625L15.1435 19.2195C15.294 19.1544 15.4402 19.0843 15.5856 19.0099L15.188 18.2674L15.4355 18.1349L15.8335 18.878C15.9776 18.7979 16.1201 18.7155 16.258 18.6262L15.3196 17.2237L15.5547 17.0696L16.4932 18.4724C16.6271 18.378 16.7563 18.2801 16.8868 18.1777L16.3523 17.5276L16.5706 17.3486L17.1051 18.002C17.2273 17.8964 17.3482 17.7841 17.4672 17.6712L16.2759 16.4799L16.4759 16.2796L17.6675 17.4712C17.7801 17.3516 17.8924 17.2327 17.9983 17.1054L17.3482 16.5709L17.5273 16.3527L18.1774 16.8872L18.1781 16.8869C18.2794 16.7563 18.3784 16.6271 18.4694 16.4999L17.0666 15.5614L17.2207 15.3262L18.6232 16.2646C18.8524 15.9095 19.0514 15.5338 19.2221 15.1432L17.6632 14.4977L17.7711 14.238L19.3304 14.8837C19.5749 14.2629 19.7433 13.6052 19.8224 12.9179L18.9823 12.8368L19.0102 12.5558L19.8503 12.6368C19.8649 12.4717 19.8715 12.3096 19.8752 12.1442L18.1874 12.1439V11.8628H19.8752C19.8715 11.6974 19.8639 11.532 19.8503 11.3699L19.0102 11.4539L18.9823 11.1729L19.8224 11.0888C19.7155 10.155 19.4411 9.24818 19.0125 8.4117H19.0125ZM4.99277 15.588L5.73521 15.1904L5.86777 15.4379L5.12498 15.8358C5.20402 15.98 5.28642 16.1205 5.37577 16.258L6.77862 15.3196L6.93376 15.5548L5.53091 16.4932V16.4922C5.62524 16.6261 5.71991 16.7589 5.82226 16.8858L6.47234 16.3514L6.65138 16.5696L6.0013 17.1041C6.10725 17.2267 6.21955 17.3473 6.33217 17.4665L6.77232 17.0264L10.8748 10.8736L17.0276 6.77103L17.4774 6.33087C17.3578 6.21826 17.2389 6.10598 17.1117 6.00001L16.5772 6.65012L16.3589 6.47107L16.8935 5.82094C16.7679 5.71997 16.6337 5.62429 16.4998 5.52962L15.5614 6.93244L15.3262 6.77733L16.2646 5.37448C15.277 4.73801 14.1423 4.31614 12.9178 4.1756L12.8367 5.01569L12.5557 4.98748L12.6368 4.14739C12.4717 4.1331 12.3096 4.12612 12.1441 4.12281V5.81031H11.8618V4.12281C11.6963 4.12612 11.5309 4.13377 11.3688 4.14739L11.4532 4.98748L11.1721 5.01572L11.0878 4.17562C9.86497 4.31614 8.72892 4.73469 7.74128 5.3715L8.67973 6.77432L8.44455 6.92946L7.5061 5.52664C7.37223 5.62229 7.24268 5.72028 7.11247 5.8226L7.64662 6.47271L7.4287 6.65175L6.89422 5.99832C6.7703 6.1043 6.65105 6.21657 6.5318 6.32918L7.72337 7.52042L7.52306 7.72073L6.33149 6.52949C6.21888 6.64874 6.1066 6.76934 6.00097 6.89492L6.65105 7.42941L6.472 7.64766L5.82189 7.11317C5.72059 7.24038 5.62491 7.37293 5.53057 7.50681L6.93674 8.43859L6.7816 8.6738L5.37876 7.73535C5.28817 7.87589 5.2022 8.01936 5.12099 8.16552L5.86442 8.56183L5.73156 8.81065L4.98844 8.41333C4.91442 8.55856 4.84485 8.70601 4.77983 8.85548L6.3388 9.5016L6.23083 9.76136L4.6722 9.11561C4.61173 9.26839 4.55694 9.42386 4.50578 9.58133L5.31199 9.82647L5.22995 10.0952L4.42504 9.85072C4.38054 10.0075 4.34201 10.166 4.3068 10.3268L5.95678 10.6556L5.90129 10.931L4.25131 10.6025C4.22206 10.7606 4.19849 10.9214 4.17956 11.0822L5.01999 11.1632L4.99176 11.4442L4.15166 11.3632C4.13704 11.5283 4.1304 11.6904 4.12708 11.8558L5.81458 11.8562V12.1372H4.12708C4.1304 12.3026 4.13805 12.4681 4.15166 12.6302L4.99176 12.5461L5.01999 12.8272L4.17956 12.9112C4.19849 13.0753 4.22408 13.2367 4.25232 13.3975L5.90264 13.069L5.95777 13.3443L4.3068 13.6732C4.34168 13.835 4.38352 13.9938 4.42802 14.1516L5.23093 13.9077L5.313 14.1765L4.50877 14.4207C4.55915 14.5767 4.61443 14.7312 4.67453 14.8837L6.22883 14.24L6.33681 14.4997L4.78183 15.1438C4.84694 15.295 4.91801 15.4421 4.99277 15.588ZM19.2214 8.85785L19.3294 9.11761L17.7704 9.76339L17.6625 9.50362L19.2214 8.85785ZM19.5759 9.8501L18.768 10.0956L18.6859 9.82684L19.4938 9.58136L19.5759 9.8501ZM19.7493 10.6015L18.0943 10.931L18.0392 10.6557L19.6938 10.3261L19.7493 10.6015ZM19.6951 13.6739L18.0405 13.3444L18.0956 13.069L19.7506 13.3985L19.6951 13.6739V13.6739ZM19.4938 14.4197L18.6859 14.1745L18.768 13.9058L19.5759 14.151L19.4938 14.4197ZM4.68187 9.09072L4.77888 8.85785C4.7454 8.93499 4.71306 9.01262 4.68187 9.09072ZM18.8773 15.8351L18.1322 15.4382L18.2647 15.1907L19.0098 15.588L18.8773 15.8351ZM8.16122 5.12074L8.40872 4.98818L8.80733 5.73164L8.55983 5.8645L8.16122 5.12074ZM9.11761 4.67161L9.76336 6.23092L9.5036 6.33886L8.85785 4.77989L9.11761 4.67161ZM9.84908 4.42214L10.0942 5.23003L9.82549 5.31207L9.58032 4.50418L9.84908 4.42214ZM10.6028 4.25007L10.9323 5.90469L10.6569 5.96018L10.3274 4.3052L10.6028 4.25007H10.6028ZM19.847 11.3118L19.829 11.1251C19.8327 11.1878 19.8393 11.2473 19.847 11.3118ZM18.6162 7.72511L18.489 7.5351C18.5305 7.59788 18.573 7.66099 18.6162 7.72511ZM18.1279 7.05343L18.0502 6.95873C18.0781 6.99029 18.103 7.02185 18.1279 7.05343ZM17.0376 5.94657L16.9433 5.86883C16.9782 5.89673 17.0064 5.92132 17.0376 5.94657ZM16.465 5.50973L16.2749 5.38385C16.3377 5.42702 16.4022 5.46822 16.465 5.50973ZM12.875 4.17464L12.685 4.15672C12.7477 4.16038 12.8122 4.16702 12.875 4.17467V4.17464ZM11.3117 4.15307L11.1217 4.17101C11.1845 4.16736 11.2472 4.16072 11.3117 4.15307ZM7.72503 5.38382L7.53502 5.50973C7.59782 5.46687 7.66093 5.4257 7.72503 5.38385V5.38382ZM7.05335 5.87215L6.96233 5.94657C6.99355 5.92199 7.02179 5.89707 7.05335 5.87215ZM5.94649 6.96239L5.86875 7.05675C5.89668 7.02519 5.92126 6.99364 5.94649 6.96239ZM5.50968 7.5351L5.38376 7.72511C5.42696 7.66231 5.46814 7.5992 5.50968 7.5351ZM4.17461 11.125L4.1567 11.315C4.16035 11.2522 4.16699 11.1891 4.17461 11.125ZM4.15304 12.6896L4.17098 12.8796C4.16733 12.8169 4.16066 12.7528 4.15304 12.6896ZM5.38379 16.2716L5.50971 16.4616C5.46684 16.4022 5.42564 16.3391 5.38379 16.2716ZM5.94652 17.0377C5.92193 17.0064 5.89702 16.9782 5.87212 16.9467L5.94652 17.0377ZM6.96236 18.0535L7.05337 18.1279C7.02182 18.1033 6.99358 18.0787 6.96236 18.0535ZM7.53504 18.4867L7.72506 18.6139C7.66228 18.5757 7.59917 18.5328 7.53504 18.4867ZM11.125 19.8254L11.315 19.8433C11.2522 19.8397 11.1891 19.833 11.125 19.8254V19.8254ZM12.6896 19.847L12.8763 19.829C12.8135 19.8327 12.7537 19.8393 12.6896 19.847H12.6896ZM16.2749 18.6162L16.465 18.489C16.4022 18.5305 16.3377 18.573 16.2749 18.6162ZM16.9466 18.1279L17.0413 18.0502C17.0097 18.0781 16.9782 18.103 16.9466 18.1279ZM17.5622 17.5755L17.5755 17.5622L17.5622 17.5755ZM18.0535 17.0377L18.1312 16.9433C18.1033 16.9749 18.0787 17.0064 18.0535 17.0377ZM19.847 12.685C19.8403 12.7478 19.8367 12.8122 19.829 12.875L19.847 12.685ZM18.6162 16.2749C18.5744 16.3377 18.5318 16.4022 18.489 16.465L18.6162 16.2749Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/light/color/firefox.svg b/static/icons/light/color/firefox.svg
new file mode 100644
index 000000000..2c2d6095e
--- /dev/null
+++ b/static/icons/light/color/firefox.svg
@@ -0,0 +1,106 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.6185 9.33929C20.2208 8.38252 19.4142 7.34949 18.7826 7.02293C19.233 7.89514 19.5457 8.83184 19.7094 9.79973L19.7111 9.81507C18.6764 7.23662 16.9225 6.19533 15.4892 3.93092C15.4167 3.8164 15.3442 3.70164 15.2736 3.58051C15.2332 3.51133 15.2009 3.44899 15.1728 3.39161C15.1134 3.27652 15.0676 3.15488 15.0363 3.02917C15.0364 3.02337 15.0343 3.01775 15.0304 3.0134C15.0266 3.00904 15.0213 3.00625 15.0155 3.00555C15.0099 3.00401 15.0039 3.00401 14.9983 3.00555C14.9971 3.00555 14.9952 3.00768 14.9938 3.00815C14.9924 3.00862 14.9893 3.01075 14.9872 3.01169L14.9907 3.00555C12.6921 4.35145 11.9117 6.84254 11.8409 8.08926C10.9226 8.15222 10.0446 8.49049 9.32146 9.05996C9.24604 8.99608 9.16721 8.93633 9.08533 8.88098C8.87683 8.15111 8.86795 7.37867 9.0596 6.64419C8.21543 7.05311 7.46534 7.63282 6.85681 8.34663H6.85256C6.48988 7.8869 6.51538 6.371 6.53616 6.05436C6.42887 6.09748 6.32645 6.15186 6.23062 6.21658C5.91045 6.44508 5.61113 6.70149 5.33619 6.98279C5.02288 7.30045 4.73672 7.64379 4.48072 8.00921V8.01063V8.00898C3.89243 8.84287 3.47512 9.78502 3.25289 10.781L3.24061 10.8415C3.22337 10.922 3.16127 11.3253 3.15065 11.4129C3.15065 11.4198 3.14923 11.4261 3.14852 11.433C3.06842 11.8493 3.01878 12.271 3 12.6946V12.7418C3.00404 15.0318 3.86647 17.2372 5.41703 18.9224C6.96759 20.6077 9.0936 21.6504 11.3754 21.8447C13.6572 22.0391 15.9289 21.3709 17.7421 19.9722C19.5553 18.5734 20.7783 16.5457 21.1696 14.2893C21.1849 14.1713 21.1974 14.0544 21.2111 13.9352C21.3996 12.3772 21.1956 10.7968 20.6175 9.33787L20.6185 9.33929ZM10.0709 16.5032C10.1136 16.5238 10.1538 16.546 10.1977 16.5656L10.2041 16.5696C10.1597 16.5483 10.1153 16.5262 10.0709 16.5032ZM19.7113 9.81767V9.80893L19.7129 9.81862L19.7113 9.81767Z" fill="url(#paint0_linear_4475_59607)"/>
+<path d="M20.6184 9.3393C20.2208 8.38254 19.4142 7.34951 18.7826 7.02295C19.233 7.89516 19.5456 8.83186 19.7093 9.79974V9.80848L19.711 9.81816C20.4165 11.8368 20.3145 14.05 19.4262 15.9951C18.3774 18.2456 15.8395 20.5523 11.8656 20.4389C7.57291 20.3173 3.79024 17.1309 3.08424 12.9586C2.95555 12.3005 3.08424 11.9669 3.14893 11.4321C3.06068 11.8475 3.01144 12.2702 3.00183 12.6948V12.7421C3.00588 15.0321 3.8683 17.2374 5.41886 18.9227C6.96942 20.6079 9.09543 21.6506 11.3772 21.845C13.659 22.0393 15.9307 21.3712 17.7439 19.9724C19.5572 18.5737 20.7801 16.546 21.1714 14.2896C21.1868 14.1715 21.1993 14.0547 21.213 13.9354C21.4015 12.3775 21.1974 10.7971 20.6194 9.33812L20.6184 9.3393Z" fill="url(#paint1_radial_4475_59607)"/>
+<path d="M20.6184 9.3393C20.2208 8.38254 19.4142 7.34951 18.7826 7.02295C19.233 7.89516 19.5456 8.83186 19.7093 9.79974V9.80848L19.711 9.81816C20.4165 11.8368 20.3145 14.05 19.4262 15.9951C18.3774 18.2456 15.8395 20.5523 11.8656 20.4389C7.57291 20.3173 3.79024 17.1309 3.08424 12.9586C2.95555 12.3005 3.08424 11.9669 3.14893 11.4321C3.06068 11.8475 3.01144 12.2702 3.00183 12.6948V12.7421C3.00588 15.0321 3.8683 17.2374 5.41886 18.9227C6.96942 20.6079 9.09543 21.6506 11.3772 21.845C13.659 22.0393 15.9307 21.3712 17.7439 19.9724C19.5572 18.5737 20.7801 16.546 21.1714 14.2896C21.1868 14.1715 21.1993 14.0547 21.213 13.9354C21.4015 12.3775 21.1974 10.7971 20.6194 9.33812L20.6184 9.3393Z" fill="url(#paint2_radial_4475_59607)"/>
+<path d="M16.1699 10.4137C16.1898 10.4276 16.2082 10.4415 16.2268 10.4554C15.997 10.0478 15.7108 9.67463 15.3768 9.34686C12.5315 6.50159 14.6314 3.17935 14.9853 3.00935L14.9889 3.00415C12.6902 4.35005 11.9098 6.84113 11.839 8.08785C11.9457 8.08053 12.0515 8.07156 12.1606 8.07156C12.9761 8.07314 13.7767 8.29063 14.4809 8.70192C15.1851 9.11322 15.7679 9.70365 16.1699 10.4132V10.4137Z" fill="url(#paint3_radial_4475_59607)"/>
+<path d="M12.1653 10.9829C12.1502 11.2105 11.346 11.9956 11.0648 11.9956C8.4627 11.9956 8.04004 13.5699 8.04004 13.5699C8.15527 14.8954 9.07898 15.9877 10.1956 16.5639C10.2466 16.5903 10.2983 16.6142 10.35 16.6376C10.4396 16.6772 10.5292 16.7139 10.6187 16.7476C11.0019 16.8832 11.4033 16.9606 11.8095 16.9773C16.3714 17.1913 17.2545 11.5229 13.9627 9.87715C14.7392 9.77611 15.5255 9.96704 16.1692 10.4129C15.7672 9.70337 15.1844 9.11294 14.4802 8.70165C13.776 8.29036 12.9754 8.07287 12.1599 8.07129C12.0513 8.07129 11.945 8.08026 11.8383 8.08758C10.92 8.15054 10.042 8.48882 9.31887 9.05828C9.45842 9.17634 9.61592 9.33407 9.94767 9.6611C10.5687 10.2729 12.1613 10.9066 12.1649 10.981L12.1653 10.9829Z" fill="url(#paint4_radial_4475_59607)"/>
+<path d="M12.1653 10.9829C12.1502 11.2105 11.346 11.9956 11.0648 11.9956C8.4627 11.9956 8.04004 13.5699 8.04004 13.5699C8.15527 14.8954 9.07898 15.9877 10.1956 16.5639C10.2466 16.5903 10.2983 16.6142 10.35 16.6376C10.4396 16.6772 10.5292 16.7139 10.6187 16.7476C11.0019 16.8832 11.4033 16.9606 11.8095 16.9773C16.3714 17.1913 17.2545 11.5229 13.9627 9.87715C14.7392 9.77611 15.5255 9.96704 16.1692 10.4129C15.7672 9.70337 15.1844 9.11294 14.4802 8.70165C13.776 8.29036 12.9754 8.07287 12.1599 8.07129C12.0513 8.07129 11.945 8.08026 11.8383 8.08758C10.92 8.15054 10.042 8.48882 9.31887 9.05828C9.45842 9.17634 9.61592 9.33407 9.94767 9.6611C10.5687 10.2729 12.1613 10.9066 12.1649 10.981L12.1653 10.9829Z" fill="url(#paint5_radial_4475_59607)"/>
+<path d="M8.89265 8.75618C8.96679 8.8034 9.02795 8.84449 9.08155 8.88156C8.87305 8.15169 8.86416 7.37925 9.05581 6.64478C8.21164 7.05369 7.46155 7.6334 6.85303 8.34721C6.89765 8.34603 8.22513 8.32219 8.89265 8.75618Z" fill="url(#paint6_radial_4475_59607)"/>
+<path d="M3.08267 12.9592C3.78891 17.1315 7.57135 20.3192 11.864 20.4396C15.838 20.552 18.3763 18.2451 19.4247 15.9958C20.3129 14.0506 20.4149 11.8374 19.7094 9.81882V9.81008C19.7094 9.80323 19.708 9.79922 19.7094 9.80135L19.7111 9.81669C20.0357 11.9364 18.9576 13.989 17.2719 15.3797L17.2667 15.3915C13.9823 18.0668 10.8395 17.0052 10.2043 16.5721C10.1599 16.5509 10.1156 16.5288 10.0712 16.5058C8.15646 15.5906 7.36521 13.8471 7.53522 12.35C7.08071 12.3568 6.63401 12.2315 6.24924 11.9895C5.86447 11.7475 5.55815 11.399 5.36738 10.9864C5.87004 10.6785 6.44317 10.5045 7.03217 10.4808C7.62116 10.4572 8.2064 10.5847 8.73212 10.8514C9.81575 11.3433 11.0488 11.3917 12.1677 10.9864C12.1642 10.9121 10.5715 10.2781 9.95051 9.66652C9.61876 9.33949 9.46127 9.182 9.32172 9.0637C9.2463 8.99982 9.16748 8.94007 9.0856 8.88472C9.03129 8.84765 8.97013 8.80751 8.8967 8.75934C8.22918 8.32535 6.9017 8.3492 6.85779 8.35038H6.85354C6.49085 7.89065 6.51635 6.37474 6.53713 6.05811C6.42984 6.10123 6.32742 6.1556 6.23159 6.22032C5.91142 6.44883 5.6121 6.70523 5.33716 6.98654C5.02273 7.3033 4.73538 7.64585 4.47815 8.0106V8.01201V8.01036C3.88986 8.84425 3.47255 9.7864 3.25032 10.7824C3.24583 10.8011 2.92069 12.2225 3.08102 12.9597L3.08267 12.9592Z" fill="url(#paint7_radial_4475_59607)"/>
+<path d="M15.3766 9.34646C15.7107 9.6746 15.9969 10.0482 16.2267 10.4562C16.2769 10.4943 16.3239 10.532 16.3638 10.5686C18.4386 12.4812 17.3515 15.1848 17.2705 15.3761C18.956 13.9874 20.0332 11.9334 19.7097 9.81304C18.6745 7.23223 16.9187 6.19093 15.4878 3.92652C15.4153 3.812 15.3428 3.69725 15.2722 3.57612C15.2319 3.50693 15.1995 3.4446 15.1714 3.38722C15.112 3.27212 15.0662 3.15048 15.0349 3.02477C15.035 3.01897 15.0329 3.01336 15.0291 3.009C15.0252 3.00465 15.0199 3.00186 15.0142 3.00116C15.0085 2.99961 15.0026 2.99961 14.9969 3.00116C14.9957 3.00116 14.9939 3.00329 14.9924 3.00376C14.991 3.00423 14.988 3.00636 14.9858 3.0073C14.6319 3.17518 12.5325 6.49954 15.3778 9.34245L15.3766 9.34646Z" fill="url(#paint8_radial_4475_59607)"/>
+<path d="M16.3635 10.5695C16.3236 10.5329 16.2766 10.4951 16.2264 10.4571C16.2077 10.4432 16.1893 10.4293 16.1694 10.4153C15.5257 9.96946 14.7394 9.77853 13.9629 9.87957C17.2544 11.5253 16.3713 17.1923 11.8097 16.9798C11.4035 16.9631 11.0022 16.8856 10.6189 16.75C10.5294 16.7165 10.4398 16.6798 10.3502 16.64C10.2985 16.6164 10.2468 16.5927 10.1958 16.5663L10.2022 16.5703C10.8383 17.0045 13.9801 18.0654 17.2646 15.3897L17.2698 15.3779C17.3517 15.1866 18.4388 12.483 16.3631 10.5705L16.3635 10.5695Z" fill="url(#paint9_radial_4475_59607)"/>
+<path d="M8.04026 13.5683C8.04026 13.5683 8.46268 11.994 11.065 11.994C11.3462 11.994 12.1511 11.2089 12.1655 10.9813C11.0466 11.3866 9.8136 11.3381 8.72997 10.8462C8.20425 10.5796 7.61901 10.452 7.03002 10.4757C6.44102 10.4993 5.86789 10.6734 5.36523 10.9813C5.556 11.3939 5.86232 11.7423 6.24709 11.9843C6.63186 12.2264 7.07856 12.3516 7.53307 12.3449C7.36353 13.8412 8.15454 15.5845 10.069 16.5007C10.1118 16.5212 10.1519 16.5434 10.1958 16.563C9.07825 15.9857 8.15549 14.8938 8.04026 13.569V13.5683Z" fill="url(#paint10_radial_4475_59607)"/>
+<path d="M20.6184 9.33929C20.2207 8.38252 19.4141 7.34949 18.7825 7.02293C19.2329 7.89514 19.5456 8.83184 19.7093 9.79973L19.7109 9.81507C18.6763 7.23662 16.9223 6.19533 15.4891 3.93092C15.4166 3.8164 15.3441 3.70164 15.2735 3.58051C15.2331 3.51133 15.2008 3.44899 15.1727 3.39161C15.1133 3.27652 15.0674 3.15488 15.0362 3.02917C15.0362 3.02337 15.0342 3.01775 15.0303 3.0134C15.0265 3.00904 15.0212 3.00625 15.0154 3.00555C15.0098 3.00401 15.0038 3.00401 14.9982 3.00555C14.997 3.00555 14.9951 3.00768 14.9937 3.00815C14.9923 3.00862 14.9892 3.01075 14.9871 3.01169L14.9906 3.00555C12.692 4.35145 11.9116 6.84254 11.8408 8.08926C11.9475 8.08194 12.0533 8.07297 12.1624 8.07297C12.9779 8.07454 13.7785 8.29204 14.4827 8.70333C15.1869 9.11462 15.7697 9.70505 16.1717 10.4146C15.528 9.96872 14.7417 9.77779 13.9652 9.87883C17.2567 11.5246 16.3736 17.1915 11.812 16.979C11.4058 16.9623 11.0044 16.8849 10.6212 16.7493C10.5316 16.7157 10.4421 16.6791 10.3525 16.6392C10.3008 16.6156 10.2491 16.592 10.1981 16.5656L10.2044 16.5696C10.1601 16.5483 10.1157 16.5262 10.0713 16.5032C10.114 16.5238 10.1542 16.546 10.1981 16.5656C9.0805 15.988 8.15774 14.8962 8.04251 13.5715C8.04251 13.5715 8.46493 11.9973 11.0672 11.9973C11.3485 11.9973 12.1534 11.2122 12.1678 10.9846C12.1643 10.9102 10.5716 10.2762 9.95061 9.66466C9.61886 9.33764 9.46137 9.18014 9.32182 9.06184C9.2464 8.99796 9.16758 8.93822 9.0857 8.88286C8.8772 8.15299 8.86831 7.38056 9.05996 6.64608C8.21579 7.055 7.46571 7.63471 6.85718 8.34852H6.85293C6.49025 7.88879 6.51575 6.37289 6.53653 6.05625C6.42923 6.09937 6.32681 6.15375 6.23099 6.21847C5.91081 6.44697 5.6115 6.70338 5.33656 6.98468C5.02324 7.30234 4.73709 7.64568 4.48109 8.0111V8.01252V8.01087C3.8928 8.84476 3.47549 9.78691 3.25325 10.7829L3.24097 10.8434C3.22374 10.9239 3.14653 11.3329 3.13543 11.4207C3.0648 11.8429 3.0197 12.2689 3.00037 12.6965V12.7437C3.00441 15.0337 3.86684 17.239 5.41739 18.9243C6.96795 20.6095 9.09396 21.6523 11.3757 21.8466C13.6575 22.0409 15.9293 21.3728 17.7425 19.974C19.5557 18.5753 20.7787 16.5476 21.1699 14.2912C21.1853 14.1732 21.1978 14.0563 21.2115 13.9371C21.4 12.3791 21.1959 10.7987 20.6179 9.33976L20.6184 9.33929ZM19.7105 9.80941L19.7121 9.81909L19.7105 9.80941Z" fill="url(#paint11_linear_4475_59607)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59607" x1="19.4072" y1="5.92872" x2="4.21438" y2="20.5872" gradientUnits="userSpaceOnUse">
+<stop offset="0.048" stop-color="#FFF44F"/>
+<stop offset="0.111" stop-color="#FFE847"/>
+<stop offset="0.225" stop-color="#FFC830"/>
+<stop offset="0.368" stop-color="#FF980E"/>
+<stop offset="0.401" stop-color="#FF8B16"/>
+<stop offset="0.462" stop-color="#FF672A"/>
+<stop offset="0.534" stop-color="#FF3647"/>
+<stop offset="0.705" stop-color="#E31587"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.8192 5.12925) scale(19.0786)">
+<stop offset="0.129" stop-color="#FFBD4F"/>
+<stop offset="0.186" stop-color="#FFAC31"/>
+<stop offset="0.247" stop-color="#FF9D17"/>
+<stop offset="0.283" stop-color="#FF980E"/>
+<stop offset="0.403" stop-color="#FF563B"/>
+<stop offset="0.467" stop-color="#FF3750"/>
+<stop offset="0.71" stop-color="#F5156C"/>
+<stop offset="0.782" stop-color="#EB0878"/>
+<stop offset="0.86" stop-color="#E50080"/>
+</radialGradient>
+<radialGradient id="paint2_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.7355 12.9213) scale(19.0786)">
+<stop offset="0.3" stop-color="#960E18"/>
+<stop offset="0.351" stop-color="#B11927" stop-opacity="0.74"/>
+<stop offset="0.435" stop-color="#DB293D" stop-opacity="0.343"/>
+<stop offset="0.497" stop-color="#F5334B" stop-opacity="0.094"/>
+<stop offset="0.53" stop-color="#FF3750" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.0968 0.879053) scale(13.8202)">
+<stop offset="0.132" stop-color="#FFF44F"/>
+<stop offset="0.252" stop-color="#FFDC3E"/>
+<stop offset="0.506" stop-color="#FF9D12"/>
+<stop offset="0.526" stop-color="#FF980E"/>
+</radialGradient>
+<radialGradient id="paint4_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.61049 17.88) scale(9.08361)">
+<stop offset="0.353" stop-color="#3A8EE6"/>
+<stop offset="0.472" stop-color="#5C79F0"/>
+<stop offset="0.669" stop-color="#9059FF"/>
+<stop offset="1" stop-color="#C139E6"/>
+</radialGradient>
+<radialGradient id="paint5_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.6583 11.2837) rotate(-13.5916) scale(4.81691 5.6394)">
+<stop offset="0.206" stop-color="#9059FF" stop-opacity="0"/>
+<stop offset="0.278" stop-color="#8C4FF3" stop-opacity="0.064"/>
+<stop offset="0.747" stop-color="#7716A8" stop-opacity="0.45"/>
+<stop offset="0.975" stop-color="#6E008B" stop-opacity="0.6"/>
+</radialGradient>
+<radialGradient id="paint6_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4994 4.42098) scale(6.53585 6.53585)">
+<stop stop-color="#FFE226"/>
+<stop offset="0.121" stop-color="#FFDB27"/>
+<stop offset="0.295" stop-color="#FFC82A"/>
+<stop offset="0.502" stop-color="#FFA930"/>
+<stop offset="0.732" stop-color="#FF7E37"/>
+<stop offset="0.792" stop-color="#FF7139"/>
+</radialGradient>
+<radialGradient id="paint7_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.6942 0.170877) scale(27.886 27.886)">
+<stop offset="0.113" stop-color="#FFF44F"/>
+<stop offset="0.456" stop-color="#FF980E"/>
+<stop offset="0.622" stop-color="#FF5634"/>
+<stop offset="0.716" stop-color="#FF3647"/>
+<stop offset="0.904" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint8_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.3764 1.71689) rotate(83.976) scale(20.4353 13.4115)">
+<stop stop-color="#FFF44F"/>
+<stop offset="0.06" stop-color="#FFE847"/>
+<stop offset="0.168" stop-color="#FFC830"/>
+<stop offset="0.304" stop-color="#FF980E"/>
+<stop offset="0.356" stop-color="#FF8B16"/>
+<stop offset="0.455" stop-color="#FF672A"/>
+<stop offset="0.57" stop-color="#FF3647"/>
+<stop offset="0.737" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint9_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4994 6.78212) scale(17.4069)">
+<stop offset="0.137" stop-color="#FFF44F"/>
+<stop offset="0.48" stop-color="#FF980E"/>
+<stop offset="0.592" stop-color="#FF5634"/>
+<stop offset="0.655" stop-color="#FF3647"/>
+<stop offset="0.904" stop-color="#E31587"/>
+</radialGradient>
+<radialGradient id="paint10_radial_4475_59607" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.9858 7.7266) scale(19.0527)">
+<stop offset="0.094" stop-color="#FFF44F"/>
+<stop offset="0.231" stop-color="#FFE141"/>
+<stop offset="0.509" stop-color="#FFAF1E"/>
+<stop offset="0.626" stop-color="#FF980E"/>
+</radialGradient>
+<linearGradient id="paint11_linear_4475_59607" x1="19.2229" y1="5.8508" x2="6.29757" y2="18.7785" gradientUnits="userSpaceOnUse">
+<stop offset="0.167" stop-color="#FFF44F" stop-opacity="0.8"/>
+<stop offset="0.266" stop-color="#FFF44F" stop-opacity="0.634"/>
+<stop offset="0.489" stop-color="#FFF44F" stop-opacity="0.217"/>
+<stop offset="0.6" stop-color="#FFF44F" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/color/microsoft_edge.svg b/static/icons/light/color/microsoft_edge.svg
new file mode 100644
index 000000000..07a4e636c
--- /dev/null
+++ b/static/icons/light/color/microsoft_edge.svg
@@ -0,0 +1,41 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2717 16.4131C19.03 16.5387 18.7808 16.6493 18.5254 16.744C17.7168 17.045 16.8605 17.1977 15.9977 17.1947C12.6673 17.1947 9.76639 14.9063 9.76639 11.9632C9.77072 11.5691 9.87998 11.1833 10.0829 10.8454C10.2859 10.5076 10.5752 10.2299 10.9211 10.041C7.90757 10.1678 7.13306 13.308 7.13306 15.1457C7.13306 20.3561 11.928 20.8771 12.963 20.8771C13.5192 20.8771 14.3571 20.7152 14.8641 20.5532L14.9556 20.5251C16.8957 19.8546 18.5496 18.5434 19.6449 16.8074C19.6767 16.7547 19.6904 16.6929 19.6838 16.6317C19.6772 16.5704 19.6507 16.513 19.6083 16.4683C19.566 16.4235 19.5101 16.3939 19.4493 16.384C19.3885 16.374 19.3262 16.3842 19.2717 16.4131Z" fill="url(#paint0_linear_4475_59727)"/>
+<path opacity="0.35" d="M19.2717 16.4131C19.03 16.5387 18.7808 16.6493 18.5254 16.744C17.7168 17.045 16.8605 17.1977 15.9977 17.1947C12.6673 17.1947 9.76639 14.9063 9.76639 11.9632C9.77072 11.5691 9.87998 11.1833 10.0829 10.8454C10.2859 10.5076 10.5752 10.2299 10.9211 10.041C7.90757 10.1678 7.13306 13.308 7.13306 15.1457C7.13306 20.3561 11.928 20.8771 12.963 20.8771C13.5192 20.8771 14.3571 20.7152 14.8641 20.5532L14.9556 20.5251C16.8957 19.8546 18.5496 18.5434 19.6449 16.8074C19.6767 16.7547 19.6904 16.6929 19.6838 16.6317C19.6772 16.5704 19.6507 16.513 19.6083 16.4683C19.566 16.4235 19.5101 16.3939 19.4493 16.384C19.3885 16.374 19.3262 16.3842 19.2717 16.4131Z" fill="url(#paint1_radial_4475_59727)"/>
+<path d="M10.4424 19.9899C9.81565 19.6007 9.27239 19.0909 8.84408 18.4902C8.35497 17.8207 8.01829 17.0523 7.85767 16.2389C7.69705 15.4255 7.71638 14.5869 7.91431 13.7817C8.11224 12.9766 8.48397 12.2245 9.00341 11.5783C9.52285 10.9321 10.1774 10.4074 10.9212 10.041C11.1465 9.93538 11.5197 9.75232 12.0196 9.75936C12.3713 9.76208 12.7177 9.84612 13.0316 10.0049C13.3455 10.1637 13.6185 10.3929 13.8291 10.6747C14.1124 11.0557 14.2677 11.5166 14.2727 11.9914C14.2727 11.9773 15.9977 6.38672 8.63989 6.38672C5.54889 6.38672 3.00709 9.31577 3.00709 11.8928C2.99479 13.2541 3.28583 14.601 3.85905 15.8357C4.79781 17.8347 6.43784 19.4194 8.46783 20.289C10.4978 21.1586 12.7764 21.2527 14.8712 20.5532C14.1373 20.785 13.3618 20.8547 12.5984 20.7574C11.835 20.6602 11.1018 20.3983 10.4494 19.9899H10.4424Z" fill="url(#paint2_linear_4475_59727)"/>
+<path opacity="0.41" d="M10.4424 19.9899C9.81565 19.6007 9.27239 19.0909 8.84408 18.4902C8.35497 17.8207 8.01829 17.0523 7.85767 16.2389C7.69705 15.4255 7.71638 14.5869 7.91431 13.7817C8.11224 12.9766 8.48397 12.2245 9.00341 11.5783C9.52285 10.9321 10.1774 10.4074 10.9212 10.041C11.1465 9.93538 11.5197 9.75232 12.0196 9.75936C12.3713 9.76208 12.7177 9.84612 13.0316 10.0049C13.3455 10.1637 13.6185 10.3929 13.8291 10.6747C14.1124 11.0557 14.2677 11.5166 14.2727 11.9914C14.2727 11.9773 15.9977 6.38672 8.63989 6.38672C5.54889 6.38672 3.00709 9.31577 3.00709 11.8928C2.99479 13.2541 3.28583 14.601 3.85905 15.8357C4.79781 17.8347 6.43784 19.4194 8.46783 20.289C10.4978 21.1586 12.7764 21.2527 14.8712 20.5532C14.1373 20.785 13.3618 20.8547 12.5984 20.7574C11.835 20.6602 11.1018 20.3983 10.4494 19.9899H10.4424Z" fill="url(#paint3_radial_4475_59727)"/>
+<path d="M13.7305 13.477C13.6671 13.5474 13.4911 13.653 13.4911 13.8713C13.4911 14.0544 13.6108 14.2374 13.8291 14.3853C14.8359 15.0894 16.744 14.9908 16.7511 14.9908C17.5017 14.9903 18.2384 14.7885 18.8845 14.4064C19.5349 14.026 20.0747 13.4821 20.4501 12.8288C20.8256 12.1754 21.0237 11.4353 21.025 10.6817C21.0461 9.10455 20.4617 8.05544 20.2293 7.59073C18.7296 4.67576 15.5119 3 12.0125 3C9.64402 2.99977 7.37066 3.93188 5.68409 5.59473C3.99752 7.25758 3.03331 9.51751 3 11.8857C3.0352 9.31578 5.59109 7.23868 8.6328 7.23868C8.87923 7.23868 10.2874 7.2598 11.59 7.94278C12.5051 8.39753 13.263 9.11611 13.7657 10.0058C14.1952 10.7521 14.2726 11.7027 14.2726 12.0829C14.2726 12.4631 14.0825 13.0193 13.7234 13.484L13.7305 13.477Z" fill="url(#paint4_radial_4475_59727)"/>
+<path d="M13.7305 13.477C13.6671 13.5474 13.4911 13.653 13.4911 13.8713C13.4911 14.0544 13.6108 14.2374 13.8291 14.3853C14.8359 15.0894 16.744 14.9908 16.7511 14.9908C17.5017 14.9903 18.2384 14.7885 18.8845 14.4064C19.5349 14.026 20.0747 13.4821 20.4501 12.8288C20.8256 12.1754 21.0237 11.4353 21.025 10.6817C21.0461 9.10455 20.4617 8.05544 20.2293 7.59073C18.7296 4.67576 15.5119 3 12.0125 3C9.64402 2.99977 7.37066 3.93188 5.68409 5.59473C3.99752 7.25758 3.03331 9.51751 3 11.8857C3.0352 9.31578 5.59109 7.23868 8.6328 7.23868C8.87923 7.23868 10.2874 7.2598 11.59 7.94278C12.5051 8.39753 13.263 9.11611 13.7657 10.0058C14.1952 10.7521 14.2726 11.7027 14.2726 12.0829C14.2726 12.4631 14.0825 13.0193 13.7234 13.484L13.7305 13.477Z" fill="url(#paint5_radial_4475_59727)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59727" x1="7.13306" y1="15.4626" x2="19.6942" y2="15.4626" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0C59A4"/>
+<stop offset="1" stop-color="#114A8B"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.0684 15.5573) scale(6.71711 6.38126)">
+<stop offset="0.7" stop-opacity="0"/>
+<stop offset="0.9" stop-opacity="0.5"/>
+<stop offset="1"/>
+</radialGradient>
+<linearGradient id="paint2_linear_4475_59727" x1="13.7517" y1="10.0128" x2="5.91502" y2="18.5536" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B9DE2"/>
+<stop offset="0.2" stop-color="#1595DF"/>
+<stop offset="0.7" stop-color="#0680D7"/>
+<stop offset="1" stop-color="#0078D4"/>
+</linearGradient>
+<radialGradient id="paint3_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.96782 17.0071) rotate(-81.3844) scale(10.0958 8.1564)">
+<stop offset="0.8" stop-opacity="0"/>
+<stop offset="0.9" stop-opacity="0.5"/>
+<stop offset="1"/>
+</radialGradient>
+<radialGradient id="paint4_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4.82291 6.33152) rotate(92.2906) scale(14.2624 30.3759)">
+<stop stop-color="#35C1F1"/>
+<stop offset="0.1" stop-color="#34C1ED"/>
+<stop offset="0.2" stop-color="#2FC2DF"/>
+<stop offset="0.3" stop-color="#2BC3D2"/>
+<stop offset="0.7" stop-color="#36C752"/>
+</radialGradient>
+<radialGradient id="paint5_radial_4475_59727" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.9026 8.44269) rotate(73.7398) scale(6.85089 5.57115)">
+<stop stop-color="#66EB6E"/>
+<stop offset="1" stop-color="#66EB6E" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/color/opera.svg b/static/icons/light/color/opera.svg
new file mode 100644
index 000000000..0efa1752f
--- /dev/null
+++ b/static/icons/light/color/opera.svg
@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2051 2.58969C7.1213 2.58969 3 6.71099 3 11.7948C3 16.7315 6.88651 20.7606 11.7667 20.9892C11.9124 20.9961 12.0582 21 12.2053 21C14.562 21 16.7114 20.1138 18.34 18.6574C17.2609 19.373 15.9994 19.7848 14.6512 19.7848C12.4591 19.7848 10.4958 18.6973 9.17542 16.9823C8.15755 15.7808 7.49829 14.0047 7.45338 12.0115V11.578C7.49826 9.58484 8.15752 7.8084 9.17516 6.60718C10.4958 4.89225 12.459 3.80476 14.651 3.80476C15.9995 3.80476 17.2612 4.2165 18.3404 4.93255C16.7198 3.48281 14.5834 2.59844 12.2398 2.58974C12.2281 2.58974 12.2166 2.58928 12.2049 2.58928L12.2051 2.58969Z" fill="url(#paint0_linear_4475_59675)"/>
+<path d="M9.17529 6.6077C10.02 5.61045 11.111 5.00909 12.3029 5.00909C14.9828 5.00909 17.1549 8.04738 17.1549 11.7952C17.1549 15.5431 14.9826 18.5814 12.3029 18.5814C11.111 18.5814 10.02 17.9803 9.17552 16.983C10.4959 18.6979 12.459 19.7854 14.6513 19.7854C15.9996 19.7854 17.2611 19.3737 18.3401 18.6581C20.2242 16.9725 21.4106 14.5225 21.4106 11.7953C21.4106 9.06843 20.2244 6.61858 18.3407 4.93317C17.2615 4.21711 15.9997 3.80537 14.6513 3.80537C12.4592 3.80537 10.496 4.89287 9.17555 6.6078" fill="url(#paint1_linear_4475_59675)"/>
+<defs>
+<linearGradient id="paint0_linear_4475_59675" x1="10.6704" y1="2.88975" x2="10.6704" y2="20.7324" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF1B2D"/>
+<stop offset="0.3" stop-color="#FF1B2D"/>
+<stop offset="0.614" stop-color="#FF1B2D"/>
+<stop offset="1" stop-color="#A70014"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4475_59675" x1="15.2928" y1="3.94157" x2="15.2928" y2="19.7224" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9C0000"/>
+<stop offset="0.7" stop-color="#FF4B4B"/>
+<stop offset="1" stop-color="#FF4B4B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/color/safari.svg b/static/icons/light/color/safari.svg
new file mode 100644
index 000000000..3b7c36e91
--- /dev/null
+++ b/static/icons/light/color/safari.svg
@@ -0,0 +1,42 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4475_59705)">
+<g opacity="0.53" filter="url(#filter0_f_4475_59705)">
+<path d="M20.6716 12.7379C20.6716 13.8343 20.4473 14.92 20.0116 15.933C19.5758 16.946 18.9371 17.8664 18.132 18.6417C17.3268 19.417 16.371 20.032 15.319 20.4516C14.267 20.8712 13.1395 21.0872 12.0009 21.0872C10.8622 21.0872 9.73473 20.8712 8.68276 20.4516C7.63078 20.032 6.67493 19.417 5.86979 18.6417C5.06464 17.8664 4.42596 16.946 3.99022 15.933C3.55447 14.92 3.3302 13.8343 3.3302 12.7379C3.3302 10.5235 4.24372 8.39981 5.86979 6.83401C7.49585 5.26821 9.70128 4.38855 12.0009 4.38855C13.1395 4.38855 14.267 4.60451 15.319 5.0241C16.371 5.4437 17.3268 6.0587 18.132 6.83401C18.9371 7.60931 19.5758 8.52973 20.0116 9.54272C20.4473 10.5557 20.6716 11.6414 20.6716 12.7379Z" fill="black" fill-opacity="0.5"/>
+</g>
+<path d="M21.0018 12.0009C21.0018 13.1829 20.769 14.3533 20.3166 15.4454C19.8643 16.5374 19.2013 17.5297 18.3655 18.3655C17.5297 19.2013 16.5374 19.8643 15.4454 20.3166C14.3533 20.769 13.1829 21.0018 12.0009 21.0018C9.6137 21.0018 7.32429 20.0535 5.6363 18.3655C3.9483 16.6775 3 14.3881 3 12.0009C3 9.6137 3.9483 7.32429 5.6363 5.6363C7.32429 3.94831 9.6137 3 12.0009 3C13.1829 3 14.3533 3.23282 15.4454 3.68515C16.5374 4.13749 17.5297 4.80049 18.3655 5.6363C19.2013 6.47211 19.8643 7.46436 20.3166 8.5564C20.769 9.64843 21.0018 10.8189 21.0018 12.0009Z" fill="url(#paint0_linear_4475_59705)" stroke="#CDCDCD" stroke-width="0.351543" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.2964 12.0009C20.2964 14.201 19.4224 16.311 17.8666 17.8668C16.3109 19.4225 14.2009 20.2965 12.0008 20.2965C9.80066 20.2965 7.69064 19.4225 6.13492 17.8668C4.5792 16.311 3.7052 14.201 3.7052 12.0009C3.7052 9.80078 4.5792 7.69077 6.13492 6.13504C7.69064 4.57932 9.80066 3.70532 12.0008 3.70532C14.2009 3.70532 16.3109 4.57932 17.8666 6.13504C19.4224 7.69077 20.2964 9.80078 20.2964 12.0009Z" fill="url(#paint1_radial_4475_59705)"/>
+<path d="M12.0009 4.13794C11.9339 4.13794 11.8799 4.19188 11.8799 4.25888V5.65396C11.8799 5.72096 11.9339 5.7749 12.0009 5.7749C12.0679 5.7749 12.1218 5.72096 12.1218 5.65396V4.25888C12.1218 4.19188 12.0679 4.13794 12.0009 4.13794ZM11.2097 4.18795C11.2016 4.18709 11.1934 4.18709 11.1851 4.18805C11.1184 4.195 11.0704 4.25425 11.0773 4.32089L11.1383 4.90453C11.1452 4.97117 11.2045 5.01923 11.2711 5.01227C11.3378 5.00532 11.3858 4.94607 11.3789 4.87942L11.318 4.29579C11.3119 4.23748 11.2657 4.19339 11.2096 4.18795H11.2097ZM12.7976 4.18852C12.7416 4.19392 12.6954 4.238 12.6893 4.29631L12.6279 4.8799C12.6209 4.94654 12.6689 5.00584 12.7356 5.01285C12.8022 5.01986 12.8615 4.97185 12.8685 4.90521L12.9299 4.32158C12.9369 4.25494 12.8888 4.19568 12.8222 4.18868C12.8138 4.18781 12.8057 4.18781 12.7976 4.18853V4.18852ZM10.3969 4.30581C10.3888 4.30587 10.3806 4.30667 10.3724 4.3084C10.3069 4.32228 10.2653 4.38624 10.2792 4.45179L10.5681 5.81658C10.582 5.88214 10.6459 5.92374 10.7115 5.90987C10.777 5.89599 10.8186 5.83208 10.8047 5.76653L10.5158 4.40168C10.5037 4.34432 10.4532 4.3053 10.3969 4.30574L10.3969 4.30581ZM13.6104 4.30696C13.554 4.30639 13.5036 4.34545 13.4914 4.4028L13.2015 5.76743C13.1875 5.83298 13.2291 5.89695 13.2946 5.91088C13.3602 5.92481 13.4242 5.88324 13.4381 5.8177L13.728 4.45306C13.7419 4.38752 13.7003 4.32354 13.6348 4.30962C13.6266 4.3079 13.6184 4.30703 13.6104 4.30703L13.6104 4.30696ZM9.62118 4.52452C9.60552 4.52309 9.58935 4.52481 9.57341 4.5301C9.50969 4.55082 9.47504 4.61874 9.49575 4.68247L9.67709 5.24058C9.6978 5.30431 9.76578 5.33896 9.82951 5.31825C9.89324 5.29753 9.92784 5.22956 9.90713 5.16583L9.72579 4.60772C9.71027 4.55993 9.66815 4.52851 9.62118 4.52451V4.52452ZM14.3817 4.52481C14.3347 4.52881 14.2926 4.56022 14.2771 4.60801L14.0956 5.16608C14.0749 5.2298 14.1095 5.29778 14.1732 5.3185C14.237 5.33921 14.305 5.30459 14.3257 5.24088L14.5071 4.68276C14.5278 4.61904 14.4932 4.55106 14.4295 4.53034C14.4136 4.52517 14.3973 4.52348 14.3817 4.5248V4.52481ZM8.85412 4.80523C8.8384 4.80551 8.8225 4.80896 8.80719 4.81577C8.746 4.84298 8.71859 4.91416 8.7458 4.97539L9.31243 6.2502C9.33964 6.31142 9.41082 6.3388 9.47205 6.31158C9.53324 6.28437 9.56071 6.21319 9.53349 6.15196L8.96681 4.87716C8.94641 4.83123 8.90125 4.80431 8.85412 4.80523ZM15.1574 4.8095C15.1103 4.80864 15.0651 4.83539 15.0446 4.88128L14.4763 6.1553C14.449 6.21649 14.4762 6.28773 14.5374 6.31503C14.5986 6.34233 14.6699 6.31504 14.6972 6.25385L15.2655 4.97983C15.2928 4.91864 15.2655 4.8474 15.2043 4.8201C15.189 4.81329 15.1731 4.80985 15.1574 4.8095V4.8095ZM8.14212 5.18195C8.1189 5.18022 8.09498 5.18539 8.07322 5.19798C8.01519 5.23148 7.99545 5.30516 8.02895 5.36319L8.32236 5.8714C8.35587 5.92943 8.42955 5.94917 8.48758 5.91566C8.54561 5.88216 8.56534 5.80848 8.53184 5.75045L8.23843 5.24225C8.21748 5.20598 8.18083 5.18466 8.14212 5.18195V5.18195ZM15.8596 5.18195C15.8209 5.18453 15.7843 5.20597 15.7634 5.24224L15.4699 5.75044C15.4364 5.80847 15.4562 5.88215 15.5142 5.91565C15.5723 5.94916 15.6459 5.92942 15.6794 5.87139L15.9729 5.36318C16.0064 5.30515 15.9866 5.23147 15.9286 5.19797C15.9068 5.18541 15.8829 5.18033 15.8596 5.18194V5.18195ZM7.45074 5.61316C7.42747 5.61402 7.40417 5.62149 7.38383 5.63623C7.32959 5.67558 7.3176 5.75091 7.35696 5.80515L8.17612 6.93437C8.21546 6.98861 8.29085 7.0006 8.34508 6.96127C8.39932 6.92192 8.41131 6.84659 8.37195 6.79235L7.55274 5.66313C7.52815 5.62923 7.48951 5.61185 7.45074 5.61317V5.61316ZM16.5597 5.61931C16.5209 5.61787 16.4823 5.63526 16.4576 5.66911L15.6369 6.79723C15.5975 6.85141 15.6094 6.92678 15.6636 6.9662C15.7178 7.00562 15.7931 6.99376 15.8325 6.93959L16.6532 5.81147C16.6926 5.75728 16.6807 5.68192 16.6266 5.6425C16.6062 5.62773 16.5829 5.62014 16.5597 5.61931ZM6.83276 6.13143C6.80189 6.12971 6.77038 6.14002 6.74548 6.16244C6.69568 6.20727 6.69168 6.28344 6.73652 6.33324L7.12916 6.76941C7.17399 6.81921 7.25015 6.82322 7.29995 6.77837C7.34976 6.73354 7.35377 6.65733 7.30892 6.60753L6.91634 6.1714C6.89392 6.14649 6.86364 6.13304 6.83276 6.13142V6.13143ZM17.1699 6.1323C17.139 6.13402 17.1087 6.14738 17.0863 6.17228L16.6937 6.60835C16.6488 6.65815 16.6528 6.73436 16.7026 6.7792C16.7524 6.82403 16.8286 6.82001 16.8734 6.77023L17.2661 6.33416C17.3109 6.28436 17.3069 6.20815 17.2571 6.16332C17.2322 6.1409 17.2008 6.13069 17.1699 6.13231L17.1699 6.1323ZM6.24046 6.70038C6.20959 6.7021 6.17935 6.71546 6.15694 6.74036C6.11211 6.79016 6.11612 6.86633 6.16591 6.91116L7.20273 7.84452C7.25254 7.88936 7.3287 7.88535 7.37352 7.83556C7.41836 7.78576 7.4144 7.70959 7.36459 7.66476L6.32771 6.7314C6.3028 6.70898 6.27131 6.69877 6.24043 6.70039L6.24046 6.70038ZM17.7651 6.70445C17.7342 6.70273 17.7026 6.71302 17.6777 6.73541L16.6403 7.66805C16.5904 7.71284 16.5863 7.78901 16.6311 7.83885C16.6759 7.88868 16.7522 7.89272 16.802 7.84793L17.8395 6.91529C17.8893 6.87049 17.8934 6.79432 17.8486 6.74449C17.8262 6.71958 17.7959 6.7061 17.7651 6.70445H17.7651ZM5.74791 7.33372C5.70913 7.33228 5.67048 7.34975 5.64586 7.38362C5.60648 7.43783 5.61842 7.51315 5.67264 7.55253L6.14739 7.89747C6.2016 7.93685 6.27692 7.92496 6.3163 7.87074C6.35569 7.81653 6.34377 7.74116 6.28958 7.70178L5.81483 7.35685C5.79452 7.34208 5.77118 7.33455 5.74791 7.33371L5.74791 7.33372ZM18.2571 7.33811C18.2339 7.33898 18.2106 7.34642 18.1902 7.36119L17.7153 7.70581C17.661 7.74516 17.649 7.82054 17.6884 7.87478C17.7277 7.92901 17.803 7.94095 17.8573 7.90161L18.3323 7.55699C18.3865 7.51765 18.3985 7.44231 18.3591 7.38808C18.3345 7.35418 18.2959 7.3368 18.2571 7.33812V7.33811ZM5.28762 8.00929C5.24892 8.01188 5.21231 8.03331 5.19137 8.06958C5.15786 8.12761 5.1776 8.20129 5.23563 8.23479L6.44377 8.93232C6.5018 8.96583 6.57548 8.94609 6.60899 8.88806C6.64249 8.83003 6.62275 8.75635 6.56472 8.72285L5.35657 8.02531C5.33482 8.01275 5.31084 8.00767 5.28762 8.00928V8.00929ZM18.7141 8.00929C18.6909 8.00757 18.6669 8.01274 18.6452 8.02532L17.437 8.72286C17.379 8.75636 17.3593 8.83004 17.3928 8.88807C17.4263 8.9461 17.5 8.96584 17.558 8.93233L18.7662 8.2348C18.8242 8.2013 18.8439 8.12762 18.8104 8.06959C18.7895 8.03332 18.7528 8.01201 18.7141 8.0093V8.00929ZM4.9396 8.72937C4.89247 8.72822 4.84727 8.75521 4.8268 8.80109C4.7995 8.86229 4.82679 8.93353 4.88798 8.96082L5.42396 9.1999C5.48516 9.22719 5.5564 9.19991 5.58369 9.13872C5.61099 9.07752 5.58365 9.00629 5.52246 8.97899L4.98654 8.73992C4.97125 8.73308 4.95531 8.72969 4.9396 8.72937ZM19.0645 8.73434C19.0488 8.73463 19.0328 8.73808 19.0175 8.74489L18.4814 8.98354C18.4202 9.01081 18.3928 9.082 18.4201 9.14322C18.4474 9.20443 18.5186 9.23181 18.5798 9.20456L19.1159 8.96585C19.1771 8.93861 19.2045 8.86738 19.1772 8.80617C19.1568 8.76026 19.1116 8.73341 19.0645 8.73434ZM4.62944 9.48199C4.58247 9.48593 4.54035 9.51731 4.52479 9.56509C4.50404 9.6288 4.53857 9.69681 4.60229 9.71757L5.92873 10.1498C5.99243 10.1705 6.06044 10.136 6.0812 10.0723C6.10195 10.0085 6.06741 9.94054 6.00368 9.91979L4.67726 9.48757C4.66134 9.48237 4.6451 9.48068 4.62944 9.482V9.48199ZM19.3741 9.48717C19.3584 9.48573 19.3423 9.48745 19.3263 9.49274L17.9996 9.92401C17.9359 9.94472 17.9013 10.0127 17.922 10.0764C17.9427 10.1402 18.0107 10.1748 18.0744 10.154L19.4011 9.72278C19.4648 9.70206 19.4995 9.63408 19.4788 9.57036C19.4632 9.52257 19.4211 9.49114 19.3741 9.48716V9.48717ZM4.4362 10.272C4.37986 10.2715 4.32932 10.3106 4.31713 10.3679C4.3032 10.4335 4.34478 10.4974 4.41031 10.5114L4.98434 10.6334C5.04988 10.6473 5.11385 10.6057 5.12778 10.5402C5.14172 10.4746 5.10015 10.4107 5.03461 10.3967L4.46063 10.2747C4.45244 10.273 4.44425 10.2722 4.4362 10.2722V10.272ZM19.5658 10.2732C19.5578 10.2732 19.5496 10.2743 19.5415 10.2758L18.9674 10.3977C18.9019 10.4116 18.8603 10.4756 18.8742 10.5411C18.8882 10.6066 18.9521 10.6482 19.0177 10.6343L19.5917 10.5124C19.6572 10.4985 19.6988 10.4345 19.6849 10.3689C19.6727 10.3116 19.6222 10.2726 19.5658 10.2731L19.5658 10.2732ZM4.28994 11.0667C4.23385 11.0721 4.18768 11.1161 4.18152 11.1744C4.17448 11.241 4.22242 11.3004 4.28905 11.3074L5.6764 11.4541C5.74303 11.4611 5.80236 11.4131 5.8094 11.3465C5.81644 11.2799 5.76845 11.2205 5.70182 11.2135L4.31447 11.0668C4.30614 11.066 4.29796 11.066 4.28994 11.0667V11.0667ZM19.7131 11.0771C19.7051 11.0763 19.6969 11.0763 19.6885 11.0772L18.301 11.222C18.2344 11.229 18.1863 11.2882 18.1933 11.3549C18.2002 11.4215 18.2595 11.4696 18.3261 11.4626L19.7136 11.3178C19.7803 11.3109 19.8283 11.2516 19.8214 11.185C19.8153 11.1267 19.7692 11.0826 19.7131 11.0771L19.7131 11.0771ZM4.26645 11.8802C4.19944 11.8802 4.14551 11.9341 4.14551 12.0011C4.14551 12.0681 4.19944 12.1221 4.26645 12.1221H4.85328C4.92028 12.1221 4.97427 12.0681 4.97427 12.0011C4.97427 11.9341 4.92028 11.8802 4.85328 11.8802H4.26645ZM19.1485 11.8802C19.0815 11.8802 19.0275 11.9341 19.0275 12.0011C19.0275 12.0681 19.0815 12.1221 19.1485 12.1221H19.7353C19.8023 12.1221 19.8563 12.0681 19.8563 12.0011C19.8563 11.9341 19.8023 11.8802 19.7353 11.8802H19.1485ZM5.7002 12.5395C5.69219 12.5386 5.68399 12.5386 5.67566 12.5396L4.28811 12.6844C4.22146 12.6913 4.17342 12.7506 4.18037 12.8172C4.18733 12.8839 4.24657 12.9319 4.31321 12.925L5.70077 12.7802C5.76742 12.7732 5.81546 12.714 5.80851 12.6473C5.80242 12.589 5.75628 12.5449 5.70019 12.5395H5.7002ZM18.3008 12.5481C18.2447 12.5534 18.1986 12.5974 18.1924 12.6557C18.1854 12.7224 18.2333 12.7817 18.2999 12.7887L19.6873 12.9354C19.7539 12.9425 19.8132 12.8945 19.8203 12.8278C19.8273 12.7612 19.7793 12.7019 19.7127 12.6948L18.3254 12.5482C18.3171 12.5473 18.3088 12.5473 18.3008 12.5481L18.3008 12.5481ZM5.00856 13.3651C5.00052 13.3652 4.99233 13.366 4.98414 13.3677L4.41011 13.4897C4.34456 13.5036 4.30301 13.5676 4.31693 13.6331C4.33087 13.6986 4.39483 13.7402 4.46038 13.7263L5.03441 13.6044C5.09995 13.5905 5.1415 13.5265 5.12758 13.4609C5.1154 13.4036 5.06492 13.3646 5.00857 13.3651L5.00856 13.3651ZM18.993 13.3663C18.9367 13.3657 18.8862 13.4048 18.874 13.4621C18.8601 13.5277 18.9016 13.5916 18.9672 13.6056L19.5412 13.7275C19.6067 13.7415 19.6707 13.7 19.6846 13.6344C19.6986 13.5689 19.657 13.5049 19.5915 13.4909L19.0175 13.3689C19.0093 13.3672 19.0011 13.3664 18.993 13.3664L18.993 13.3663ZM5.97519 13.8426C5.95953 13.8412 5.94335 13.8429 5.92742 13.8482L4.60068 14.2795C4.53695 14.3002 4.50234 14.3682 4.52306 14.4319C4.54378 14.4956 4.61175 14.5302 4.67548 14.5095L6.00218 14.0783C6.0659 14.0575 6.10056 13.9896 6.07984 13.9258C6.0643 13.878 6.02216 13.8466 5.97519 13.8426V13.8426ZM18.0253 13.8469C17.9783 13.8509 17.9362 13.8822 17.9206 13.93C17.8999 13.9937 17.9344 14.0617 17.9981 14.0825L19.3246 14.5147C19.3883 14.5355 19.4563 14.5009 19.477 14.4372C19.4978 14.3735 19.4632 14.3055 19.3995 14.2847L18.0731 13.8525C18.0572 13.8473 18.0409 13.8456 18.0253 13.8469V13.8469ZM5.46891 14.7872C5.45319 14.7875 5.43728 14.7909 5.42198 14.7977L4.88584 15.0364C4.82463 15.0637 4.79731 15.1349 4.82456 15.1961C4.85183 15.2573 4.92303 15.2846 4.98424 15.2574L5.52037 15.0187C5.58158 14.9915 5.60891 14.9203 5.58166 14.8591C5.56123 14.8132 5.51604 14.7863 5.46891 14.7872V14.7872ZM18.5309 14.7918C18.4838 14.7907 18.4386 14.8177 18.4181 14.8636C18.3908 14.9248 18.4181 14.996 18.4793 15.0233L19.0152 15.2624C19.0764 15.2897 19.1477 15.2624 19.175 15.2012C19.2023 15.14 19.175 15.0688 19.1138 15.0415L18.5779 14.8024C18.5626 14.7955 18.5466 14.7922 18.5309 14.7918V14.7918ZM6.51273 15.0539C6.48952 15.0522 6.46554 15.0574 6.44377 15.07L5.23563 15.7675C5.1776 15.801 5.15786 15.8747 5.19137 15.9327C5.22487 15.9907 5.29854 16.0105 5.35657 15.977L6.56472 15.2795C6.62275 15.246 6.64249 15.1723 6.60899 15.1142C6.58804 15.078 6.55143 15.0566 6.51273 15.0539V15.0539ZM17.4891 15.0539C17.4504 15.0565 17.4137 15.078 17.3928 15.1142C17.3593 15.1722 17.379 15.246 17.437 15.2795L18.6452 15.977C18.7032 16.0105 18.7769 15.9907 18.8104 15.9327C18.8439 15.8747 18.8242 15.801 18.7662 15.7675L17.558 15.07C17.5362 15.0574 17.5123 15.0523 17.4891 15.0539V15.0539ZM6.21138 16.0776C6.18811 16.0784 6.16481 16.0859 6.14447 16.1007L5.6695 16.4453C5.61527 16.4846 5.60327 16.56 5.64261 16.6142C5.68196 16.6685 5.7573 16.6804 5.81153 16.6411L6.28654 16.2965C6.34078 16.2571 6.35277 16.1818 6.31343 16.1276C6.28884 16.0937 6.25016 16.0762 6.21138 16.0775V16.0776ZM17.7875 16.0816C17.7487 16.0802 17.7101 16.0977 17.6855 16.1315C17.6461 16.1857 17.658 16.2611 17.7122 16.3005L18.187 16.6454C18.2412 16.6848 18.3165 16.6729 18.3559 16.6187C18.3953 16.5644 18.3834 16.4891 18.3292 16.4497L17.8544 16.1048C17.8341 16.09 17.8108 16.0824 17.7875 16.0816L17.7875 16.0816ZM7.2871 16.1234C7.25623 16.1217 7.22474 16.132 7.19982 16.1543L6.16232 17.087C6.11249 17.1318 6.10844 17.2079 6.15324 17.2578C6.19803 17.3076 6.2742 17.3117 6.32404 17.2669L7.36154 16.3342C7.41137 16.2894 7.41542 16.2133 7.37062 16.1634C7.34824 16.1385 7.31797 16.125 7.2871 16.1234ZM16.7118 16.1267C16.6809 16.1284 16.6506 16.1418 16.6282 16.1667C16.5834 16.2165 16.5874 16.2927 16.6372 16.3375L17.674 17.2709C17.7238 17.3157 17.8 17.3117 17.8449 17.2619C17.8897 17.2121 17.8857 17.1359 17.8359 17.0911L16.799 16.1577C16.7741 16.1353 16.7427 16.1251 16.7118 16.1267V16.1267ZM8.27136 17.0128C8.23259 17.0113 8.1939 17.0287 8.16926 17.0625L7.34859 18.1907C7.30917 18.2449 7.32104 18.3202 7.3752 18.3596C7.42938 18.3991 7.50475 18.3872 7.54417 18.333L8.36484 17.2049C8.40426 17.1507 8.3924 17.0753 8.33824 17.0359C8.31792 17.0211 8.29463 17.0136 8.27136 17.0128ZM15.7237 17.0178C15.7004 17.0187 15.6771 17.0261 15.6567 17.0409C15.6025 17.0802 15.5905 17.1556 15.6298 17.2098L16.449 18.339C16.4883 18.3933 16.5637 18.4052 16.6179 18.3659C16.6722 18.3266 16.6841 18.2512 16.6448 18.197L15.8257 17.0678C15.8011 17.0339 15.7624 17.0165 15.7237 17.0178V17.0178ZM7.21193 17.192C7.18106 17.1938 7.15078 17.2071 7.12837 17.232L6.73572 17.6681C6.69088 17.7179 6.69485 17.7941 6.74466 17.839C6.79445 17.8838 6.87062 17.8798 6.91545 17.83L7.30814 17.3939C7.35299 17.3441 7.34897 17.2679 7.29918 17.223C7.27427 17.2006 7.24283 17.1904 7.21195 17.192L7.21193 17.192ZM16.7891 17.1926C16.7582 17.1909 16.7268 17.2012 16.7019 17.2236C16.6521 17.2685 16.6481 17.3446 16.6929 17.3944L17.0855 17.8306C17.1303 17.8804 17.2065 17.8844 17.2563 17.8396C17.3061 17.7947 17.3101 17.7185 17.2652 17.6687L16.8726 17.2326C16.8502 17.2077 16.8199 17.1942 16.7891 17.1926L16.7891 17.1926ZM9.4174 17.6764C9.37027 17.6753 9.32512 17.7022 9.30465 17.7481L8.73625 19.0221C8.70896 19.0833 8.73624 19.1546 8.79743 19.1819C8.85862 19.2092 8.92986 19.1819 8.95716 19.1207L9.52555 17.8467C9.55285 17.7855 9.52557 17.7142 9.46437 17.6869C9.44909 17.6801 9.43311 17.6767 9.4174 17.6764ZM14.5767 17.6799C14.561 17.6802 14.545 17.6836 14.5297 17.6904C14.4685 17.7176 14.4411 17.7888 14.4683 17.85L15.0349 19.1248C15.0622 19.186 15.1334 19.2134 15.1946 19.1862C15.2558 19.159 15.2832 19.0878 15.256 19.0266L14.6894 17.7518C14.669 17.7059 14.6238 17.679 14.5767 17.6799ZM8.41862 18.0703C8.37992 18.0729 8.3433 18.0943 8.32236 18.1306L8.02895 18.6388C7.99545 18.6968 8.01519 18.7705 8.07322 18.804C8.13124 18.8375 8.20493 18.8178 8.23843 18.7597L8.53184 18.2515C8.56534 18.1935 8.54561 18.1198 8.48758 18.0863C8.46583 18.0738 8.44184 18.0687 8.41862 18.0703V18.0703ZM15.5831 18.0703C15.5599 18.0686 15.536 18.0738 15.5142 18.0863C15.4562 18.1198 15.4365 18.1935 15.47 18.2515L15.7634 18.7598C15.7969 18.8178 15.8706 18.8375 15.9286 18.804C15.9866 18.7705 16.0064 18.6968 15.9729 18.6388L15.6794 18.1306C15.6585 18.0943 15.6218 18.073 15.5831 18.0703V18.0703ZM10.6827 18.0885C10.6264 18.0879 10.5759 18.127 10.5637 18.1844L10.2738 19.549C10.2599 19.6145 10.3015 19.6785 10.367 19.6924C10.4325 19.7064 10.4965 19.6648 10.5104 19.5993L10.8004 18.2346C10.8143 18.1691 10.7727 18.1051 10.7072 18.0912C10.699 18.0895 10.6908 18.0886 10.6828 18.0886L10.6827 18.0885ZM13.3147 18.0894C13.3067 18.0894 13.2986 18.0902 13.2904 18.092C13.2248 18.1058 13.1832 18.1698 13.1971 18.2353L13.486 19.6002C13.4999 19.6657 13.5638 19.7073 13.6294 19.6934C13.6949 19.6796 13.7365 19.6156 13.7227 19.55L13.4337 18.1853C13.4215 18.1279 13.3711 18.0889 13.3147 18.0893L13.3147 18.0894ZM12.0009 18.227C11.9339 18.227 11.8799 18.281 11.8799 18.348V19.743C11.8799 19.8101 11.9339 19.864 12.0009 19.864C12.0679 19.864 12.1218 19.8101 12.1218 19.743V18.348C12.1218 18.281 12.0679 18.227 12.0009 18.227ZM9.78075 18.6778C9.73378 18.6818 9.69163 18.7132 9.6761 18.761L9.4947 19.3191C9.47399 19.3829 9.50861 19.4508 9.57233 19.4716C9.63605 19.4923 9.70403 19.4576 9.72475 19.3939L9.90614 18.8358C9.92685 18.7721 9.89223 18.7041 9.82852 18.6834C9.8126 18.6782 9.79641 18.6765 9.78075 18.6778V18.6778ZM14.2201 18.6781C14.2044 18.6767 14.1882 18.6784 14.1723 18.6837C14.1086 18.7044 14.0739 18.7724 14.0946 18.8361L14.276 19.3942C14.2967 19.4579 14.3647 19.4925 14.4284 19.4718C14.4921 19.4511 14.5268 19.3832 14.5061 19.3194L14.3247 18.7613C14.3091 18.7135 14.267 18.6821 14.2201 18.6781V18.6781ZM11.2417 18.989C11.1856 18.9944 11.1394 19.0384 11.1333 19.0967L11.0719 19.6803C11.0649 19.747 11.1129 19.8062 11.1796 19.8132C11.2462 19.8202 11.3055 19.7722 11.3125 19.7056L11.3739 19.122C11.3809 19.0554 11.3329 18.9961 11.2662 18.9891C11.2579 18.9882 11.2497 18.9882 11.2417 18.989L11.2417 18.989ZM12.7552 18.9895C12.7472 18.9887 12.7389 18.9887 12.7306 18.9896C12.664 18.9966 12.6159 19.0558 12.6229 19.1225L12.6838 19.7062C12.6908 19.7728 12.75 19.8208 12.8167 19.8139C12.8833 19.8069 12.9314 19.7476 12.9244 19.681L12.8635 19.0974C12.8574 19.0391 12.8113 18.995 12.7552 18.9895L12.7552 18.9895Z" fill="#F4F2F3"/>
+<g opacity="0.409" filter="url(#filter1_f_4475_59705)">
+<path d="M17.6697 7.16309L11.0525 11.0077L6.86865 17.5943L12.9893 13.0608L17.6697 7.16309Z" fill="black"/>
+</g>
+<path d="M12.9491 12.9939L11.0524 11.0077L17.7807 6.48153L12.9491 12.9939Z" fill="#FF5150"/>
+<path d="M12.9492 12.994L11.0525 11.0077L6.22085 17.5201L12.9492 12.994Z" fill="#F1F1F1"/>
+<path opacity="0.243" d="M6.22095 17.5201L12.9493 12.994L17.7809 6.48157L6.22095 17.5201Z" fill="black"/>
+</g>
+<defs>
+<filter id="filter0_f_4475_59705" x="-0.6698" y="0.38855" width="25.3414" height="24.6986" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_4475_59705"/>
+</filter>
+<filter id="filter1_f_4475_59705" x="4.3238" y="4.61823" width="15.8907" height="15.5209" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.27243" result="effect1_foregroundBlur_4475_59705"/>
+</filter>
+<linearGradient id="paint0_linear_4475_59705" x1="12.0009" y1="21.0018" x2="12.0009" y2="3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BDBDBD"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4475_59705" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12.0385 10.7914) scale(9.00093 9.00092)">
+<stop stop-color="#06C2E7"/>
+<stop offset="0.25" stop-color="#0DB8EC"/>
+<stop offset="0.5" stop-color="#12AEF1"/>
+<stop offset="0.75" stop-color="#1F86F9"/>
+<stop offset="1" stop-color="#107DDD"/>
+</radialGradient>
+<clipPath id="clip0_4475_59705">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/icons/light/grayscale/firefox.svg b/static/icons/light/grayscale/firefox.svg
new file mode 100644
index 000000000..692e2ec0d
--- /dev/null
+++ b/static/icons/light/grayscale/firefox.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3467 9.03797C19.9351 8.12658 19.1707 7.15823 18.5238 6.81646C19.0531 7.78481 19.3471 8.75316 19.4647 9.49367C18.465 7.0443 16.701 6.01899 15.2897 3.85443C15.2309 3.74051 15.1721 3.62658 15.0545 3.51266C14.9957 3.4557 14.9957 3.39873 14.9369 3.34177C14.8781 3.22785 14.8193 3.11392 14.8193 3C12.82 4.13924 11.9968 6.13291 11.7616 7.38608C11.1147 7.44304 10.5267 7.55696 9.99749 7.84177C9.87988 7.89873 9.82108 8.01266 9.87988 8.12658C9.93869 8.24051 10.0563 8.29747 10.1739 8.24051C10.6443 8.01266 11.1735 7.89873 11.7616 7.84177H11.8204C11.8792 7.84177 11.9968 7.84177 12.0556 7.84177C12.4672 7.84177 12.9376 7.89873 13.3492 8.01266H13.408C13.4668 8.01266 13.5256 8.06962 13.6432 8.06962C13.702 8.06962 13.7608 8.12658 13.8196 8.12658C13.8784 8.12658 13.8784 8.18354 13.9372 8.18354C13.9961 8.18354 14.0549 8.24051 14.1137 8.29747L14.1725 8.35443C14.2313 8.41139 14.2901 8.41139 14.3489 8.46835C14.4077 8.46835 14.4077 8.52532 14.4665 8.52532C15.1133 8.92405 15.6425 9.43671 16.0541 10.1203C15.5837 9.77848 14.7017 9.49367 13.8784 9.60759C17.1126 11.2025 16.2305 16.6139 11.7616 16.3861C11.3499 16.3861 10.9383 16.2722 10.5855 16.1582C10.4679 16.1013 10.4091 16.1013 10.2915 16.0443C10.2327 16.0443 10.1739 15.9873 10.1151 15.9873C8.99785 15.4177 8.11581 14.3924 7.99821 13.1392C7.99821 13.1392 8.40982 11.6582 10.9971 11.6582C11.2911 11.6582 12.0556 10.9177 12.0556 10.6899C12.0556 10.6329 10.4679 10.0063 9.87988 9.43671C9.52707 9.1519 9.40946 8.98101 9.23306 8.86709C9.17425 8.81013 9.05665 8.75316 8.99785 8.6962C8.82144 8.01266 8.76264 7.27215 8.99785 6.53165C8.05701 6.87342 7.29258 7.5 6.76336 8.06962C6.41054 7.61392 6.46934 6.18987 6.46934 5.90506C6.46934 5.90506 6.17533 6.01899 6.17533 6.07595C5.88132 6.24684 5.5285 6.53165 5.29329 6.75949C4.99928 7.0443 4.70527 7.38608 4.47006 7.72785C3.88204 8.52532 3.47042 9.43671 3.23521 10.3481C3.23521 10.3481 3.17641 10.6899 3.1176 11.1456C3.1176 11.2025 3.1176 11.2595 3.0588 11.3734C3.0588 11.5443 3 11.7152 3 11.8861C3 12 3 12.057 3 12.1709V12.2278C3 17.1266 6.99856 21 11.9968 21C16.4658 21 20.1703 17.8671 20.8759 13.7089C20.8759 13.5949 20.8759 13.481 20.9347 13.3671C21.1111 11.943 20.9347 10.3481 20.3467 9.03797Z" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/microsoft_edge.svg b/static/icons/light/grayscale/microsoft_edge.svg
new file mode 100644
index 000000000..c5450831b
--- /dev/null
+++ b/static/icons/light/grayscale/microsoft_edge.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9915 15.0939C10.3709 14.3974 9.94825 13.5653 9.81334 12.6338C9.54354 13.0498 9.3187 13.502 9.15681 13.9904C8.32941 16.4777 9.76837 19.58 12.2146 20.4845C14.3191 21.1899 16.6844 19.9327 18.2403 18.558C18.4741 18.2414 20.3178 16.6043 19.4005 16.4234C16.6844 17.8253 13.087 17.4274 10.9915 15.0939ZM11.5311 9.83897C12.4664 9.82993 11.5671 9.45006 11.1804 9.16063C10.245 8.64509 9.14782 8.39184 8.08658 8.39184C4.62406 8.42802 2.11936 10.6078 3.29302 14.2166C4.13841 17.7259 7.16924 20.5478 10.7487 21C8.90499 19.8332 7.78979 17.6445 7.78979 15.4647C7.86174 13.1764 9.26474 10.4902 11.5311 9.83897ZM3.72471 8.64509C6.45875 6.6191 10.8116 6.7819 13.1679 9.33248C14.0853 10.3364 14.7148 12.0459 13.8784 13.285C12.3135 14.9853 16.6484 15.2115 17.5748 14.9582C20.9384 14.307 21.8287 10.3726 20.2279 7.65923C18.699 4.58407 15.3084 2.97413 11.9808 3.00126C8.32941 2.93795 5.04676 5.26241 3.72471 8.64509Z" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/opera.svg b/static/icons/light/grayscale/opera.svg
new file mode 100644
index 000000000..4fdf7668d
--- /dev/null
+++ b/static/icons/light/grayscale/opera.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.039 6.92844C8.0418 8.10292 7.3983 9.84079 7.3533 11.7884V12.2114C7.3992 14.1598 8.0427 15.895 9.0381 17.0713C10.3287 18.7471 12.2475 19.8108 14.3931 19.8108C15.6773 19.8079 16.9318 19.4239 17.9976 18.7075C16.241 20.2863 13.9314 21.1064 11.5725 20.9889C9.26213 20.8795 7.08262 19.8846 5.48637 18.2108C3.89012 16.537 2.99972 14.3128 3 11.9999C3 7.02834 7.0302 3 12 3H12.0333C14.2355 3.00591 16.3587 3.82145 17.9985 5.29136C16.9312 4.57592 15.6762 4.19203 14.3913 4.18798C12.2475 4.18798 10.3287 5.25266 9.0363 6.92844H9.0381H9.039ZM21 11.9999C21.0016 13.2666 20.735 14.5193 20.2177 15.6755C19.7003 16.8318 18.944 17.8654 17.9985 18.7084C15.69 19.8333 13.539 19.0467 12.8262 18.5554C15.0942 18.0568 16.8069 15.3154 16.8069 11.9999C16.8069 8.68341 15.0942 5.94295 12.8262 5.44526C13.5381 4.95477 15.69 4.16728 17.9985 5.29136C18.9441 6.13424 19.7005 7.16784 20.2178 8.32411C20.7352 9.48039 21.0017 10.7331 21 11.9999Z" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/safari.svg b/static/icons/light/grayscale/safari.svg
new file mode 100644
index 000000000..09b484189
--- /dev/null
+++ b/static/icons/light/grayscale/safari.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02846 3 3 7.02846 3 12C3 16.9715 7.02846 21 12 21C16.9715 21 21 16.9715 21 12C21 7.02846 16.9715 3 12 3ZM13.3985 4.24771L13.6739 4.30317L13.3444 5.95782L13.069 5.90267L13.3985 4.24771ZM10.6015 19.7493L10.3261 19.6938L10.6556 18.0392L10.931 18.0943L10.6015 19.7493ZM14.1509 4.42211L14.4197 4.50415L14.1745 5.31204L13.9058 5.23L14.1509 4.42211ZM9.84906 19.5769L9.58032 19.4948L9.82546 18.6869L10.0942 18.769L9.84906 19.5769ZM15.1445 4.7775L14.4984 6.33681L14.2386 6.22886L14.8844 4.66956L15.1445 4.77753V4.7775ZM8.85782 19.2215L9.50357 17.6625L9.76336 17.7705L9.11761 19.3295L8.85782 19.2215V19.2215ZM15.588 4.98816L15.8351 5.12068L15.4381 5.86448L15.1906 5.73158L15.588 4.98816ZM8.41201 19.0112L8.16485 18.8783L8.56315 18.1349L8.81065 18.2674L8.41201 19.0112ZM19.0125 8.4117L18.2694 8.80967L18.1368 8.56217L18.8793 8.1642C18.7995 8.02075 18.7151 7.87993 18.6262 7.74199L17.2237 8.68043L17.0695 8.44525L18.4723 7.50681C18.378 7.37293 18.28 7.24372 18.1777 7.11317L17.5276 7.64766L17.3486 7.42941L17.9986 6.89492C17.8927 6.77134 17.7804 6.65175 17.6678 6.53284L17.2276 6.97299L13.1251 13.1255L6.97232 17.2284L6.52949 17.6685C6.64874 17.7811 6.76934 17.8934 6.89492 17.999L7.42941 17.3489L7.64766 17.528L7.11317 18.1781C7.24038 18.2794 7.37293 18.3751 7.50681 18.4694L8.43859 17.0666L8.67377 17.2207L7.73535 18.6232C8.72293 19.26 9.85769 19.6816 11.0822 19.8224L11.1632 18.9823L11.4442 19.0102L11.3632 19.8503C11.5283 19.8649 11.6904 19.8716 11.8558 19.8752V18.1874H12.1372V19.8752C12.3026 19.8716 12.4681 19.8639 12.6302 19.8503L12.5461 19.0102L12.8272 18.9823L12.9112 19.8224C13.0763 19.8031 13.2381 19.7782 13.4002 19.7493L13.071 18.0963L13.3467 18.0412L13.6756 19.6949C13.837 19.66 13.9945 19.6188 14.1519 19.5739L13.9064 18.7667L14.1752 18.6847L14.4207 19.4926L14.1579 19.5729C14.4054 19.5025 14.6466 19.4198 14.8834 19.3271L14.2386 17.7705L14.4984 17.6625L15.1435 19.2195C15.294 19.1544 15.4402 19.0843 15.5856 19.0099L15.188 18.2674L15.4355 18.1349L15.8335 18.878C15.9776 18.7979 16.1201 18.7155 16.258 18.6262L15.3196 17.2237L15.5547 17.0696L16.4932 18.4724C16.6271 18.378 16.7563 18.2801 16.8868 18.1777L16.3523 17.5276L16.5706 17.3486L17.1051 18.002C17.2273 17.8964 17.3482 17.7841 17.4672 17.6712L16.2759 16.4799L16.4759 16.2796L17.6675 17.4712C17.7801 17.3516 17.8924 17.2327 17.9983 17.1054L17.3482 16.5709L17.5273 16.3527L18.1774 16.8872L18.1781 16.8869C18.2794 16.7563 18.3784 16.6271 18.4694 16.4999L17.0666 15.5614L17.2207 15.3262L18.6232 16.2646C18.8524 15.9095 19.0514 15.5338 19.2221 15.1432L17.6632 14.4977L17.7711 14.238L19.3304 14.8837C19.5749 14.2629 19.7433 13.6052 19.8224 12.9179L18.9823 12.8368L19.0102 12.5558L19.8503 12.6368C19.8649 12.4717 19.8715 12.3096 19.8752 12.1442L18.1874 12.1439V11.8628H19.8752C19.8715 11.6974 19.8639 11.532 19.8503 11.3699L19.0102 11.4539L18.9823 11.1729L19.8224 11.0888C19.7155 10.155 19.4411 9.24818 19.0125 8.4117H19.0125ZM4.99277 15.588L5.73521 15.1904L5.86777 15.4379L5.12498 15.8358C5.20402 15.98 5.28642 16.1205 5.37577 16.258L6.77862 15.3196L6.93376 15.5548L5.53091 16.4932V16.4922C5.62524 16.6261 5.71991 16.7589 5.82226 16.8858L6.47234 16.3514L6.65138 16.5696L6.0013 17.1041C6.10725 17.2267 6.21955 17.3473 6.33217 17.4665L6.77232 17.0264L10.8748 10.8736L17.0276 6.77103L17.4774 6.33087C17.3578 6.21826 17.2389 6.10598 17.1117 6.00001L16.5772 6.65012L16.3589 6.47107L16.8935 5.82094C16.7679 5.71997 16.6337 5.62429 16.4998 5.52962L15.5614 6.93244L15.3262 6.77733L16.2646 5.37448C15.277 4.73801 14.1423 4.31614 12.9178 4.1756L12.8367 5.01569L12.5557 4.98748L12.6368 4.14739C12.4717 4.1331 12.3096 4.12612 12.1441 4.12281V5.81031H11.8618V4.12281C11.6963 4.12612 11.5309 4.13377 11.3688 4.14739L11.4532 4.98748L11.1721 5.01572L11.0878 4.17562C9.86497 4.31614 8.72892 4.73469 7.74128 5.3715L8.67973 6.77432L8.44455 6.92946L7.5061 5.52664C7.37223 5.62229 7.24268 5.72028 7.11247 5.8226L7.64662 6.47271L7.4287 6.65175L6.89422 5.99832C6.7703 6.1043 6.65105 6.21657 6.5318 6.32918L7.72337 7.52042L7.52306 7.72073L6.33149 6.52949C6.21888 6.64874 6.1066 6.76934 6.00097 6.89492L6.65105 7.42941L6.472 7.64766L5.82189 7.11317C5.72059 7.24038 5.62491 7.37293 5.53057 7.50681L6.93674 8.43859L6.7816 8.6738L5.37876 7.73535C5.28817 7.87589 5.2022 8.01936 5.12099 8.16552L5.86442 8.56183L5.73156 8.81065L4.98844 8.41333C4.91442 8.55856 4.84485 8.70601 4.77983 8.85548L6.3388 9.5016L6.23083 9.76136L4.6722 9.11561C4.61173 9.26839 4.55694 9.42386 4.50578 9.58133L5.31199 9.82647L5.22995 10.0952L4.42504 9.85072C4.38054 10.0075 4.34201 10.166 4.3068 10.3268L5.95678 10.6556L5.90129 10.931L4.25131 10.6025C4.22206 10.7606 4.19849 10.9214 4.17956 11.0822L5.01999 11.1632L4.99176 11.4442L4.15166 11.3632C4.13704 11.5283 4.1304 11.6904 4.12708 11.8558L5.81458 11.8562V12.1372H4.12708C4.1304 12.3026 4.13805 12.4681 4.15166 12.6302L4.99176 12.5461L5.01999 12.8272L4.17956 12.9112C4.19849 13.0753 4.22408 13.2367 4.25232 13.3975L5.90264 13.069L5.95777 13.3443L4.3068 13.6732C4.34168 13.835 4.38352 13.9938 4.42802 14.1516L5.23093 13.9077L5.313 14.1765L4.50877 14.4207C4.55915 14.5767 4.61443 14.7312 4.67453 14.8837L6.22883 14.24L6.33681 14.4997L4.78183 15.1438C4.84694 15.295 4.91801 15.4421 4.99277 15.588ZM19.2214 8.85785L19.3294 9.11761L17.7704 9.76339L17.6625 9.50362L19.2214 8.85785ZM19.5759 9.8501L18.768 10.0956L18.6859 9.82684L19.4938 9.58136L19.5759 9.8501ZM19.7493 10.6015L18.0943 10.931L18.0392 10.6557L19.6938 10.3261L19.7493 10.6015ZM19.6951 13.6739L18.0405 13.3444L18.0956 13.069L19.7506 13.3985L19.6951 13.6739V13.6739ZM19.4938 14.4197L18.6859 14.1745L18.768 13.9058L19.5759 14.151L19.4938 14.4197ZM4.68187 9.09072L4.77888 8.85785C4.7454 8.93499 4.71306 9.01262 4.68187 9.09072ZM18.8773 15.8351L18.1322 15.4382L18.2647 15.1907L19.0098 15.588L18.8773 15.8351ZM8.16122 5.12074L8.40872 4.98818L8.80733 5.73164L8.55983 5.8645L8.16122 5.12074ZM9.11761 4.67161L9.76336 6.23092L9.5036 6.33886L8.85785 4.77989L9.11761 4.67161ZM9.84908 4.42214L10.0942 5.23003L9.82549 5.31207L9.58032 4.50418L9.84908 4.42214ZM10.6028 4.25007L10.9323 5.90469L10.6569 5.96018L10.3274 4.3052L10.6028 4.25007H10.6028ZM19.847 11.3118L19.829 11.1251C19.8327 11.1878 19.8393 11.2473 19.847 11.3118ZM18.6162 7.72511L18.489 7.5351C18.5305 7.59788 18.573 7.66099 18.6162 7.72511ZM18.1279 7.05343L18.0502 6.95873C18.0781 6.99029 18.103 7.02185 18.1279 7.05343ZM17.0376 5.94657L16.9433 5.86883C16.9782 5.89673 17.0064 5.92132 17.0376 5.94657ZM16.465 5.50973L16.2749 5.38385C16.3377 5.42702 16.4022 5.46822 16.465 5.50973ZM12.875 4.17464L12.685 4.15672C12.7477 4.16038 12.8122 4.16702 12.875 4.17467V4.17464ZM11.3117 4.15307L11.1217 4.17101C11.1845 4.16736 11.2472 4.16072 11.3117 4.15307ZM7.72503 5.38382L7.53502 5.50973C7.59782 5.46687 7.66093 5.4257 7.72503 5.38385V5.38382ZM7.05335 5.87215L6.96233 5.94657C6.99355 5.92199 7.02179 5.89707 7.05335 5.87215ZM5.94649 6.96239L5.86875 7.05675C5.89668 7.02519 5.92126 6.99364 5.94649 6.96239ZM5.50968 7.5351L5.38376 7.72511C5.42696 7.66231 5.46814 7.5992 5.50968 7.5351ZM4.17461 11.125L4.1567 11.315C4.16035 11.2522 4.16699 11.1891 4.17461 11.125ZM4.15304 12.6896L4.17098 12.8796C4.16733 12.8169 4.16066 12.7528 4.15304 12.6896ZM5.38379 16.2716L5.50971 16.4616C5.46684 16.4022 5.42564 16.3391 5.38379 16.2716ZM5.94652 17.0377C5.92193 17.0064 5.89702 16.9782 5.87212 16.9467L5.94652 17.0377ZM6.96236 18.0535L7.05337 18.1279C7.02182 18.1033 6.99358 18.0787 6.96236 18.0535ZM7.53504 18.4867L7.72506 18.6139C7.66228 18.5757 7.59917 18.5328 7.53504 18.4867ZM11.125 19.8254L11.315 19.8433C11.2522 19.8397 11.1891 19.833 11.125 19.8254V19.8254ZM12.6896 19.847L12.8763 19.829C12.8135 19.8327 12.7537 19.8393 12.6896 19.847H12.6896ZM16.2749 18.6162L16.465 18.489C16.4022 18.5305 16.3377 18.573 16.2749 18.6162ZM16.9466 18.1279L17.0413 18.0502C17.0097 18.0781 16.9782 18.103 16.9466 18.1279ZM17.5622 17.5755L17.5755 17.5622L17.5622 17.5755ZM18.0535 17.0377L18.1312 16.9433C18.1033 16.9749 18.0787 17.0064 18.0535 17.0377ZM19.847 12.685C19.8403 12.7478 19.8367 12.8122 19.829 12.875L19.847 12.685ZM18.6162 16.2749C18.5744 16.3377 18.5318 16.4022 18.489 16.465L18.6162 16.2749Z" fill="#373B4D"/>
+</svg>

From 39d6b1f04517b0679ac318d2bd461f7fc8bc3b9d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 8 Aug 2022 17:42:33 +0200
Subject: [PATCH 020/118] feat: add fallback for missing browser icons

---
 .../teams/[team]/activity.svelte              | 26 ++++++++++++++-----
 .../user/[user]/activity.svelte               | 26 ++++++++++++++-----
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
index 3f2881bd7..5e297e945 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
@@ -19,6 +19,14 @@
     const limit = 5;
 
     $: request = sdkForProject.teams.listLogs($page.params.team, limit, offset);
+
+    let browsers = {
+        firefox: 'firefox',
+        chrome: 'chrome',
+        safari: 'safari',
+        opera: 'opera',
+        edge: 'edge'
+    };
 </script>
 
 <Container>
@@ -40,13 +48,17 @@
                             <TableCellText title="Client">
                                 <div class="u-flex u-cross-center u-gap-12">
                                     <div class="avatar is-small">
-                                        <img
-                                            height="20"
-                                            width="20"
-                                            src={`/icons/${
-                                                $app.themeInUse
-                                            }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
-                                            alt={log.clientName} />
+                                        {#if browsers[log.clientName.toLocaleLowerCase()]}
+                                            <img
+                                                height="20"
+                                                width="20"
+                                                src={`/icons/${
+                                                    $app.themeInUse
+                                                }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
+                                                alt={log.clientName} />
+                                        {:else}
+                                            <span class="icon-globe-alt" />
+                                        {/if}
                                     </div>
                                     <p class="text u-trim">
                                         {log.clientName}
diff --git a/src/routes/console/[project]/authentication/user/[user]/activity.svelte b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
index 8100cd430..bc592f64f 100644
--- a/src/routes/console/[project]/authentication/user/[user]/activity.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/activity.svelte
@@ -19,6 +19,14 @@
     const limit = 25;
 
     $: request = sdkForProject.users.getLogs($page.params.user, limit, offset);
+
+    let browsers = {
+        firefox: 'firefox',
+        chrome: 'chrome',
+        safari: 'safari',
+        opera: 'opera',
+        edge: 'edge'
+    };
 </script>
 
 <Container>
@@ -40,13 +48,17 @@
                             <TableCellText title="Client">
                                 <div class="u-flex u-cross-center u-gap-12">
                                     <div class="avatar is-small">
-                                        <img
-                                            height="20"
-                                            width="20"
-                                            src={`/icons/${
-                                                $app.themeInUse
-                                            }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
-                                            alt={log.clientName} />
+                                        {#if browsers[log.clientName.toLocaleLowerCase()]}
+                                            <img
+                                                height="20"
+                                                width="20"
+                                                src={`/icons/${
+                                                    $app.themeInUse
+                                                }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
+                                                alt={log.clientName} />
+                                        {:else}
+                                            <span class="icon-globe-alt" />
+                                        {/if}
                                     </div>
                                     <p class="text u-trim">
                                         {log.clientName}

From bbef22b1d504b1445b10014568ea9b36b4c1b0f3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 11:00:59 +0200
Subject: [PATCH 021/118] feat: add notifications

---
 src/lib/stores/auth-methods.ts                       |  6 ++++++
 .../[project]/authentication/_appleOAuth.svelte      |  6 ++++++
 .../[project]/authentication/_auth0OAuth.svelte      |  6 ++++++
 .../[project]/authentication/_mainOAuth.svelte       |  6 ++++++
 .../[project]/authentication/_microsoftOAuth.svelte  |  6 ++++++
 .../[project]/authentication/_oktaOAuth.svelte       |  7 ++++++-
 .../console/[project]/authentication/settings.svelte | 12 +++++++-----
 7 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/lib/stores/auth-methods.ts b/src/lib/stores/auth-methods.ts
index 8ca530178..b4fbd07b9 100644
--- a/src/lib/stores/auth-methods.ts
+++ b/src/lib/stores/auth-methods.ts
@@ -1,6 +1,12 @@
 import { writable } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
 
+export type AuthMethod = {
+    label: string;
+    method: string;
+    value: boolean | null;
+};
+
 function createAuthMethods() {
     const { subscribe, set } = writable({
         list: [
diff --git a/src/routes/console/[project]/authentication/_appleOAuth.svelte b/src/routes/console/[project]/authentication/_appleOAuth.svelte
index 157ce1900..f7e18291b 100644
--- a/src/routes/console/[project]/authentication/_appleOAuth.svelte
+++ b/src/routes/console/[project]/authentication/_appleOAuth.svelte
@@ -29,6 +29,12 @@
                 secret
             );
             showModal = false;
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.active ? 'enabled' : 'disabled'
+                }`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/authentication/_auth0OAuth.svelte b/src/routes/console/[project]/authentication/_auth0OAuth.svelte
index ee16907db..7baa58b4d 100644
--- a/src/routes/console/[project]/authentication/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/authentication/_auth0OAuth.svelte
@@ -29,6 +29,12 @@
                 secret
             );
             showModal = false;
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.active ? 'enabled' : 'disabled'
+                }`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/authentication/_mainOAuth.svelte b/src/routes/console/[project]/authentication/_mainOAuth.svelte
index 85677ab84..f874c8198 100644
--- a/src/routes/console/[project]/authentication/_mainOAuth.svelte
+++ b/src/routes/console/[project]/authentication/_mainOAuth.svelte
@@ -25,6 +25,12 @@
                 provider.secret
             );
             showModal = false;
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.active ? 'enabled' : 'disabled'
+                }`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/authentication/_microsoftOAuth.svelte b/src/routes/console/[project]/authentication/_microsoftOAuth.svelte
index 432e54569..fc3bff73a 100644
--- a/src/routes/console/[project]/authentication/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/authentication/_microsoftOAuth.svelte
@@ -29,6 +29,12 @@
             );
 
             showModal = false;
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.active ? 'enabled' : 'disabled'
+                }`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/authentication/_oktaOAuth.svelte b/src/routes/console/[project]/authentication/_oktaOAuth.svelte
index 32bb06db6..fb32e4b64 100644
--- a/src/routes/console/[project]/authentication/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/authentication/_oktaOAuth.svelte
@@ -28,8 +28,13 @@
                 provider.id,
                 secret
             );
-
             showModal = false;
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.active ? 'enabled' : 'disabled'
+                }`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/[project]/authentication/settings.svelte b/src/routes/console/[project]/authentication/settings.svelte
index d30450a32..41972c7d3 100644
--- a/src/routes/console/[project]/authentication/settings.svelte
+++ b/src/routes/console/[project]/authentication/settings.svelte
@@ -6,7 +6,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../store';
-    import { authMethods } from '$lib/stores/auth-methods';
+    import { authMethods, type AuthMethod } from '$lib/stores/auth-methods';
     import { OAuthProviders } from '$lib/stores/oauth-providers';
     import { event } from '$lib/actions/analytics';
     import type { Provider } from '$lib/stores/oauth-providers';
@@ -17,12 +17,14 @@
     $: OAuthProviders.load($project);
     let showModal = false;
 
-    const authUpdate = async (id: string, value: boolean) => {
+    const authUpdate = async (box: AuthMethod) => {
         try {
-            await sdkForConsole.projects.updateAuthStatus(projectId, id, value);
+            await sdkForConsole.projects.updateAuthStatus(projectId, box.method, box.value);
             addNotification({
                 type: 'success',
-                message: 'Updated project authentication status successfully'
+                message: `${box.label} authentication has been ${
+                    box.value ? 'enabled' : 'disabled'
+                }`
             });
         } catch (error) {
             addNotification({
@@ -50,7 +52,7 @@
                             id={box.method}
                             bind:value={box.value}
                             on:change={() => {
-                                authUpdate(box.method, box.value);
+                                authUpdate(box);
                             }} />
                     {/each}
                 </ul>

From 7ee1a0aa328735275a037f753e283f123d5cf829 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 11:08:53 +0200
Subject: [PATCH 022/118] fix: copyInput readonly, typos

---
 src/lib/components/copyInput.svelte                         | 2 +-
 src/routes/console/[project]/authentication/settings.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/copyInput.svelte b/src/lib/components/copyInput.svelte
index 7eb0900e7..5eb558fc3 100644
--- a/src/lib/components/copyInput.svelte
+++ b/src/lib/components/copyInput.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <div class="input-text-wrapper is-with-end-button">
-    <input {value} type="text" class="input-text" disabled />
+    <input {value} type="text" class="input-text" readonly />
     <button type="button" class="input-button tooltip" aria-label="Click to copy." on:click={copy}>
         <span class="icon-duplicate" aria-hidden="true" />
         <div class="tootip">
diff --git a/src/routes/console/[project]/authentication/settings.svelte b/src/routes/console/[project]/authentication/settings.svelte
index 41972c7d3..801a6ce52 100644
--- a/src/routes/console/[project]/authentication/settings.svelte
+++ b/src/routes/console/[project]/authentication/settings.svelte
@@ -87,7 +87,7 @@
                     <p class="u-margin-block-start-8">{provider.name}</p>
                     <div class="u-margin-block-start-24">
                         <Pill success={provider.active}>
-                            {provider.active ? 'Enabled' : 'Disabled'}
+                            {provider.active ? 'enabled' : 'disabled'}
                         </Pill>
                     </div>
                 </button>

From 308d0bbee9c85a851eafe40629e58c156907f076 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 13:22:21 +0200
Subject: [PATCH 023/118] fix: icon in alert

---
 src/lib/components/alert.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index ee90958e6..b227a6a6b 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -6,10 +6,24 @@
     export let type: '' | 'info' | 'success' | 'warning' | 'danger' = 'info';
     export let buttons: Buttons[] = [];
 
+    let icon = {
+        success: 'icon-check-circle',
+        warning: 'icon-exclamation',
+        error: 'icon-exclamation-circle',
+        info: 'icon-info'
+    };
+
+    let typeClass = {
+        success: 'is-success',
+        warning: 'is-warning',
+        error: 'is-danger',
+        info: 'is-info'
+    };
+
     const dispatch = createEventDispatcher();
 </script>
 
-<section class={`alert is-${type} `}>
+<section class={`alert ${type ? typeClass[type] : ''}`}>
     <div class="alert-grid">
         {#if dismissible}
             <button
@@ -19,7 +33,7 @@
                 <span class="icon-x" aria-hidden="true" />
             </button>
         {/if}
-        <span class="icon-info" aria-hidden="true" />
+        <span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
         <div class="content">
             {#if $$slots.title}
                 <h6 class="title">

From 70e4a42a9be73ecfa68db2ba8c9013e698ba5c0f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 13:22:54 +0200
Subject: [PATCH 024/118] feat: add error section to modals

---
 src/lib/components/modal.svelte                      | 12 ++++++++++++
 .../console/[project]/users/_createTeam.svelte       |  9 ++++-----
 .../console/[project]/users/_createUser.svelte       |  9 ++++-----
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 7843b7c91..3a1263411 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
     import { createEventDispatcher, onMount } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
+    import { Alert } from '$lib/components';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
     export let warning = false;
+    export let error: string = null;
     let browser = false;
     //TODO: explore other solutions compatible with testing library
     onMount(() => {
@@ -76,6 +78,16 @@
                 </button>
             </header>
             <div class="modal-content">
+                {#if error}
+                    <Alert
+                        dismissible
+                        type="warning"
+                        on:dismiss={() => {
+                            error = null;
+                        }}>
+                        {error}
+                    </Alert>
+                {/if}
                 <slot />
             </div>
             <div class="modal-footer">
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/users/_createTeam.svelte
index 307e24d39..f53aaaef0 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -12,6 +12,7 @@
 
     let name: string, id: string;
     let showDropdown = false;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -25,10 +26,7 @@
             });
             dispatch('created', team);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -37,11 +35,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
+        modalError = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Team</svelte:fragment>
         <FormList>
             <InputText
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index 086dca5f4..7f56bde87 100644
--- a/src/routes/console/[project]/users/_createUser.svelte
+++ b/src/routes/console/[project]/users/_createUser.svelte
@@ -19,6 +19,7 @@
 
     let showDropdown = false;
     let name: string, mail: string, pass: string, id: string;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -32,10 +33,7 @@
             });
             dispatch('created', user);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -44,11 +42,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
+        modalError = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</svelte:fragment>
         <FormList>
             <InputText

From 23382238e9beca364f4c838922c653819bb6a540 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 13:26:52 +0200
Subject: [PATCH 025/118] feat: add missing errors to modals

---
 src/routes/console/[project]/users/_appleOAuth.svelte  |  9 +++------
 src/routes/console/[project]/users/_auth0OAuth.svelte  |  9 +++------
 src/routes/console/[project]/users/_mainOAuth.svelte   | 10 ++++------
 .../console/[project]/users/_microsoftOAuth.svelte     | 10 ++++------
 src/routes/console/[project]/users/_oktaOAuth.svelte   | 10 ++++------
 5 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/users/_appleOAuth.svelte
index 157ce1900..4804311f1 100644
--- a/src/routes/console/[project]/users/_appleOAuth.svelte
+++ b/src/routes/console/[project]/users/_appleOAuth.svelte
@@ -9,7 +9,6 @@
         Form,
         FormList
     } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
 
@@ -17,6 +16,7 @@
     export let provider: Provider;
 
     let { keyID, teamID, p8 } = JSON.parse(provider.secret);
+    let modalError: string;
 
     const projectId = $page.params.project;
     const update = async () => {
@@ -30,16 +30,13 @@
             );
             showModal = false;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal size="big" bind:show={showModal}>
+    <Modal error={modalError} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_auth0OAuth.svelte b/src/routes/console/[project]/users/_auth0OAuth.svelte
index ee16907db..f3dc7425a 100644
--- a/src/routes/console/[project]/users/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/users/_auth0OAuth.svelte
@@ -9,7 +9,6 @@
         Form,
         FormList
     } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
 
@@ -17,6 +16,7 @@
     export let provider: Provider;
 
     let { clientSecret, auth0Domain } = JSON.parse(provider.secret);
+    let modalError: string;
 
     const projectId = $page.params.project;
     const update = async () => {
@@ -30,16 +30,13 @@
             );
             showModal = false;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal size="big" bind:show={showModal}>
+    <Modal error={modalError} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/users/_mainOAuth.svelte
index 85677ab84..7429b7385 100644
--- a/src/routes/console/[project]/users/_mainOAuth.svelte
+++ b/src/routes/console/[project]/users/_mainOAuth.svelte
@@ -9,13 +9,14 @@
         Form,
         FormList
     } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
 
     export let showModal = false;
     export let provider: Provider;
     const projectId = $page.params.project;
+    let modalError: string;
+
     const update = async () => {
         try {
             await sdkForConsole.projects.updateOAuth2(
@@ -26,16 +27,13 @@
             );
             showModal = false;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal size="big" bind:show={showModal}>
+    <Modal error={modalError} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_microsoftOAuth.svelte b/src/routes/console/[project]/users/_microsoftOAuth.svelte
index 432e54569..73e1ae506 100644
--- a/src/routes/console/[project]/users/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/users/_microsoftOAuth.svelte
@@ -9,15 +9,16 @@
         Form,
         FormList
     } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
 
     export let showModal = false;
     export let provider: Provider;
     let { clientSecret, tenantID } = JSON.parse(provider.secret);
+    let modalError: string;
 
     const projectId = $page.params.project;
+
     const update = async () => {
         try {
             const secret = JSON.stringify({ clientSecret, tenantID });
@@ -30,16 +31,13 @@
 
             showModal = false;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal size="big" bind:show={showModal}>
+    <Modal error={modalError} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_oktaOAuth.svelte b/src/routes/console/[project]/users/_oktaOAuth.svelte
index 32bb06db6..ad34410d2 100644
--- a/src/routes/console/[project]/users/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/users/_oktaOAuth.svelte
@@ -9,7 +9,6 @@
         Form,
         FormList
     } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
 
@@ -17,8 +16,10 @@
     export let provider: Provider;
 
     let { clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret);
+    let modalError: string;
 
     const projectId = $page.params.project;
+
     const update = async () => {
         try {
             const secret = JSON.stringify({ clientSecret, oktaDomain, authorizationServerId });
@@ -31,16 +32,13 @@
 
             showModal = false;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal size="big" bind:show={showModal}>
+    <Modal error={modalError} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>

From 21798dfed46856e8bbdc7622889623fb6c9811c1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 15:26:00 +0200
Subject: [PATCH 026/118] typo: renamed route

---
 src/routes/console/[project]/authentication/__layout.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/[project]/authentication/__layout.svelte b/src/routes/console/[project]/authentication/__layout.svelte
index 1cd29c7c1..16b0c10d1 100644
--- a/src/routes/console/[project]/authentication/__layout.svelte
+++ b/src/routes/console/[project]/authentication/__layout.svelte
@@ -13,10 +13,10 @@
     function handle(event = null) {
         updateLayout({
             navigate: event,
-            title: 'Users',
+            title: 'Authentication',
             level: 3,
             breadcrumbs: {
-                title: 'Users',
+                title: 'Authentication',
                 href: path
             },
             tabs: [

From aa647291e6c4a840533319f1be843cddbe9f3b7d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 15:52:29 +0200
Subject: [PATCH 027/118] feat: add errors to missing modals

---
 src/routes/console/[project]/storage/_create.svelte   | 11 ++++-------
 .../[project]/storage/bucket/[bucket]/_create.svelte  | 10 ++++------
 .../users/teams/[team]/_createMembership.svelte       |  8 +++-----
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/routes/console/[project]/storage/_create.svelte b/src/routes/console/[project]/storage/_create.svelte
index 1e4511130..801526f5c 100644
--- a/src/routes/console/[project]/storage/_create.svelte
+++ b/src/routes/console/[project]/storage/_create.svelte
@@ -2,8 +2,6 @@
     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';
 
@@ -14,6 +12,7 @@
     let name = '';
     let id: string = null;
     let showDropdown = false;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -26,10 +25,7 @@
             showCreate = false;
             dispatch('created', bucket);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -38,11 +34,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
+        modalError = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Bucket</svelte:fragment>
         <FormList>
             <InputText
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
index 790fba010..30f6aa42c 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
@@ -4,7 +4,6 @@
     import { Modal, Alert, InnerModal } from '$lib/components';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
-    import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/stores';
     import { uploader } from '$lib/stores/uploader';
     import { bucket } from './store';
@@ -21,6 +20,7 @@
     let write: string[] = [];
     let id: string = null;
     let showDropdown = false;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -37,10 +37,7 @@
             uploader.addFile(file);
             dispatch('created');
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -76,6 +73,7 @@
         files = null;
         read = [];
         write = [];
+        modalError = null;
     }
 
     $: if (!showDropdown) {
@@ -86,7 +84,7 @@
 <input bind:files id="file" type="file" style="display: none" />
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal error={modalError} bind:show={showCreate}>
         <svelte:fragment slot="header">Upload File</svelte:fragment>
         <FormList>
             <div>
diff --git a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte b/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
index b58a92960..53df2076f 100644
--- a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
@@ -12,6 +12,7 @@
     const dispatch = createEventDispatcher();
 
     let name: string, email: string, roles: [];
+    let modalError: string;
 
     const create = async () => {
         const url = `${$page.url.origin}/console/${$page.params.project}/users/teams/${$page.params.team}/members`;
@@ -33,16 +34,13 @@
             showCreate = false;
             dispatch('created', user);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Membership</svelte:fragment>
         <FormList>
             <InputEmail

From 0c8c17ca4421bfca7ce74680d42bda4ae9889fec Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 16:20:32 +0200
Subject: [PATCH 028/118] feat: add custom message, minlength, fix showpw
 submit

---
 src/lib/elements/forms/inputPassword.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 8553aebe1..d6ffcd128 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -16,6 +16,8 @@
     export let errorMessage = 'An error occurred';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
+    export let minlength = 8;
+    export let maxlength: number;
 
     let element: HTMLInputElement;
     let showInPlainText = false;
@@ -28,7 +30,10 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        console.log(element.validity);
+        if (element.validity.tooShort) {
+            errorMessage = 'Password should contain at least 8 characters';
+        }
         event.preventDefault();
         showHelper = true;
     };
@@ -49,9 +54,10 @@
                 {id}
                 name={id}
                 {placeholder}
-                {required}
                 {disabled}
                 autocomplete={autocomplete ? 'on' : 'off'}
+                {minlength}
+                {maxlength}
                 class="input-text"
                 bind:value
                 bind:this={element} />
@@ -63,6 +69,8 @@
                 {disabled}
                 {required}
                 autocomplete={autocomplete ? 'on' : 'off'}
+                {minlength}
+                {maxlength}
                 type="password"
                 class="input-text"
                 bind:value
@@ -82,6 +90,7 @@
         {/if}
         {#if showPasswordButton}
             <button
+                type="button"
                 on:click={() => (showInPlainText = !showInPlainText)}
                 class="show-password-button"
                 aria-label="show password">

From 21e45d8ee8cd318ddfb85c30051a64c8535de805 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 16:26:04 +0200
Subject: [PATCH 029/118] feat: add required custom message to inputs

---
 src/lib/elements/forms/inputCheckbox.svelte | 4 +++-
 src/lib/elements/forms/inputEmail.svelte    | 3 +++
 src/lib/elements/forms/inputNumber.svelte   | 4 ++++
 src/lib/elements/forms/inputPassword.svelte | 3 +++
 src/lib/elements/forms/inputPhone.svelte    | 4 +++-
 src/lib/elements/forms/inputRadio.svelte    | 4 +++-
 src/lib/elements/forms/inputSelect.svelte   | 4 ++--
 src/lib/elements/forms/inputSwitch.svelte   | 3 +++
 src/lib/elements/forms/inputTags.svelte     | 5 +++--
 src/lib/elements/forms/inputText.svelte     | 4 +++-
 src/lib/elements/forms/inputTextarea.svelte | 4 +++-
 11 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index 44c373698..6e9e3c75a 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -15,7 +15,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 1710d97df..4b72f6d49 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -29,6 +29,9 @@
         if (element.validity.typeMismatch) {
             errorMessage = 'Your email should be formatted as: name@example.com';
         }
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 37d6ac0cd..511b8c89b 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -27,6 +27,10 @@
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
 
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index d6ffcd128..aeb275d7f 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -31,6 +31,9 @@
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
         console.log(element.validity);
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         if (element.validity.tooShort) {
             errorMessage = 'Password should contain at least 8 characters';
         }
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 78c66d3e2..9349e6373 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -26,7 +26,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index cf36a123a..8a00b6b68 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -17,7 +17,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index cd0113cf8..16f6935da 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -20,8 +20,8 @@
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
 
-        if (element.validity.typeMismatch) {
-            errorMessage = 'Your email should be formatted as: name@example.com';
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
         }
         event.preventDefault();
         showHelper = true;
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index 14595503b..df47d1720 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -15,6 +15,9 @@
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
 
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index 43c90ce71..0f4e4b5b4 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -7,7 +7,6 @@
     export let showLabel = true;
     export let tags: string[] = [];
     export let placeholder = '';
-    export let helper = '';
     export let autofocus = false;
     export let errorMessage = 'An error occurred';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
@@ -54,7 +53,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index b53058b03..1353a4175 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -26,7 +26,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index da0a15f81..e197e9802 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -25,7 +25,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };

From f7c6a593a08b93e86dd7ee4f3e865dc7d5db2341 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 10:06:36 +0200
Subject: [PATCH 030/118] fix: svelte check issues

---
 src/lib/elements/forms/inputPassword.svelte                     | 2 +-
 .../[collection]/document/[document]/_document.svelte           | 2 --
 .../database/[database]/collection/[collection]/settings.svelte | 2 --
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index aeb275d7f..9c5433e7f 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -17,7 +17,7 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
     export let minlength = 8;
-    export let maxlength: number;
+    export let maxlength: number = null;
 
     let element: HTMLInputElement;
     let showInPlainText = 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 a72aa3ddf..12d6014fd 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
@@ -33,12 +33,10 @@
         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>
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 3b2a6b879..cf8dab742 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
@@ -64,13 +64,11 @@
                     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

From c64d04891a7861eb6e5a0c8f12fbf29991faaf29 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 10:30:33 +0200
Subject: [PATCH 031/118] test: fix copyinput from disabled to readonly

---
 tests/unit/components/copyInput.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/components/copyInput.test.ts b/tests/unit/components/copyInput.test.ts
index 95c0ff689..f4d9986dc 100644
--- a/tests/unit/components/copyInput.test.ts
+++ b/tests/unit/components/copyInput.test.ts
@@ -13,7 +13,7 @@ test('shows CopyInput component', () => {
     expect(input).toBeInTheDocument();
     expect(button).toBeInTheDocument();
     expect(input).toHaveAttribute('type', 'text');
-    expect(input).toBeDisabled();
+    expect(input).toHaveAttribute('readonly');
 });
 
 test('copy to clipboard function called on click', async () => {

From ac5633bc8171cd2f05d63abcfe089578e8f45367 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 11:30:43 +0200
Subject: [PATCH 032/118] fix: verify dropdown closes after click

---
 .../console/[project]/authentication/user/[user]/index.svelte   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/routes/console/[project]/authentication/user/[user]/index.svelte b/src/routes/console/[project]/authentication/user/[user]/index.svelte
index eff6a55a1..b359a5ac1 100644
--- a/src/routes/console/[project]/authentication/user/[user]/index.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/index.svelte
@@ -60,6 +60,7 @@
     }
 
     async function updateVerificationEmail() {
+        showVerifcationDropdown = false;
         try {
             await sdkForProject.users.updateEmailVerification($user.$id, !$user.emailVerification);
             $user.emailVerification = !$user.emailVerification;
@@ -77,6 +78,7 @@
         }
     }
     async function updateVerificationPhone() {
+        showVerifcationDropdown = false;
         try {
             await sdkForProject.users.updatePhoneVerification($user.$id, !$user.phoneVerification);
             $user.phoneVerification = !$user.phoneVerification;

From 9d3f28adaac9a40b7ac6f82c2da18d1c971233bc Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 12:09:42 +0200
Subject: [PATCH 033/118] chore: bump css to 0.0.0-42

---
 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 723c064e4..527e5e2cc 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-39",
-                "@aw-labs/ui": "0.0.0-39",
+                "@aw-labs/icons": "0.0.0-42",
+                "@aw-labs/ui": "0.0.0-42",
                 "echarts": "^5.3.3",
                 "tippy.js": "^6.3.7"
             },
@@ -70,14 +70,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-39",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-39.tgz",
-            "integrity": "sha512-NU4zzLVQMHM6Gcv/ZC64q1Kgp8n/UmWvLSSUcZ8KgfUtgMOExoVk3nWoP5ALjZZAYlBE8NQG5cFMoo8S5re2Mg=="
+            "version": "0.0.0-42",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-42.tgz",
+            "integrity": "sha512-wCFjTC3W54HzPd3k+Zq36RlvSb5MLwSEbvouhychQZvmT3SpnLb0+8vdtuGglfzIaKuMC0mgMIAWmpoIwiMBdw=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-39",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-39.tgz",
-            "integrity": "sha512-LnP9t7G48eJB1tcFRjlibMus9hYxhKJp9J1gHsUjVz0KsrAKTnJzbnttkvoAXwu3EmBmdFhnOjPc5s23m/kkaQ==",
+            "version": "0.0.0-42",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-42.tgz",
+            "integrity": "sha512-3n8IloxXMJDMygvjHi/M62ik/o3nqi9cOnvCcKBlPviuVTsjKdVWrTRY4ZgkBkejelL3LVv4U5K2lKkAiE+lOA==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7760,14 +7760,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-39",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-39.tgz",
-            "integrity": "sha512-NU4zzLVQMHM6Gcv/ZC64q1Kgp8n/UmWvLSSUcZ8KgfUtgMOExoVk3nWoP5ALjZZAYlBE8NQG5cFMoo8S5re2Mg=="
+            "version": "0.0.0-42",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-42.tgz",
+            "integrity": "sha512-wCFjTC3W54HzPd3k+Zq36RlvSb5MLwSEbvouhychQZvmT3SpnLb0+8vdtuGglfzIaKuMC0mgMIAWmpoIwiMBdw=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-39",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-39.tgz",
-            "integrity": "sha512-LnP9t7G48eJB1tcFRjlibMus9hYxhKJp9J1gHsUjVz0KsrAKTnJzbnttkvoAXwu3EmBmdFhnOjPc5s23m/kkaQ==",
+            "version": "0.0.0-42",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-42.tgz",
+            "integrity": "sha512-3n8IloxXMJDMygvjHi/M62ik/o3nqi9cOnvCcKBlPviuVTsjKdVWrTRY4ZgkBkejelL3LVv4U5K2lKkAiE+lOA==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index b6d28173a..3ed5a44f5 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-39",
-        "@aw-labs/ui": "0.0.0-39",
+        "@aw-labs/icons": "0.0.0-42",
+        "@aw-labs/ui": "0.0.0-42",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7"
     },

From c12b134cdd67fe9da999bcbb552950fad5b2e243 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 13:07:44 +0200
Subject: [PATCH 034/118] fix: move prevent default to start of function

---
 src/lib/elements/forms/inputEmail.svelte    | 3 +--
 src/lib/elements/forms/inputNumber.svelte   | 4 ++--
 src/lib/elements/forms/inputPassword.svelte | 2 +-
 src/lib/elements/forms/inputPhone.svelte    | 2 +-
 src/lib/elements/forms/inputRadio.svelte    | 2 +-
 src/lib/elements/forms/inputSelect.svelte   | 2 +-
 src/lib/elements/forms/inputSwitch.svelte   | 2 +-
 src/lib/elements/forms/inputTags.svelte     | 2 +-
 src/lib/elements/forms/inputText.svelte     | 2 +-
 src/lib/elements/forms/inputTextarea.svelte | 2 +-
 10 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 4b72f6d49..9b07303d7 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -24,15 +24,14 @@
     });
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
-
         if (element.validity.typeMismatch) {
             errorMessage = 'Your email should be formatted as: name@example.com';
         }
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 511b8c89b..acf1453e6 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -25,13 +25,13 @@
     });
 
     const handleInvalid = (event: Event) => {
-        errorMessage = element.validationMessage;
+        event.preventDefault();
 
+        errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
 
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 9c5433e7f..452834751 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -29,6 +29,7 @@
     });
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         console.log(element.validity);
         if (element.validity.valueMissing) {
@@ -37,7 +38,6 @@
         if (element.validity.tooShort) {
             errorMessage = 'Password should contain at least 8 characters';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 9349e6373..5fa512e5b 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -25,11 +25,11 @@
     });
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 8a00b6b68..681885ac1 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -16,11 +16,11 @@
     let element: HTMLInputElement;
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 16f6935da..6129cb11e 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -18,12 +18,12 @@
     let element: HTMLSelectElement;
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
 
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index df47d1720..1e395cbfb 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -13,12 +13,12 @@
     let element: HTMLInputElement;
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
 
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index 0f4e4b5b4..a1d4e41e3 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -52,11 +52,11 @@
     };
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 1353a4175..5235c215c 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -25,11 +25,11 @@
     });
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index e197e9802..6d02c9675 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -24,11 +24,11 @@
     });
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 

From ed20df9761196bd937f7eb6fd8e702f608463646 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 13:08:05 +0200
Subject: [PATCH 035/118] Update src/lib/elements/forms/helper.svelte

Co-authored-by: Torsten Dittmann <torsten.dittmann@googlemail.com>
---
 src/lib/elements/forms/helper.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index f8c99c523..8cb9d8b46 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -12,7 +12,7 @@
 
 <p class={`helper u-${type} u-margin-block-start-12"`}>
     {#if type}
-        <span class={type ? icon[type] : ''} aria-hidden="true" />
+        <span class={icon[type] ?? ''} aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />

From 15b51b08ee482367e0c58df9fceabcc26611b240 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 13:21:03 +0200
Subject: [PATCH 036/118] refactor: use class directive for alert color

---
 src/lib/components/alert.svelte | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index b227a6a6b..f83488a7f 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -3,7 +3,7 @@
     import type { Buttons } from '../stores/notifications';
 
     export let dismissible = false;
-    export let type: '' | 'info' | 'success' | 'warning' | 'danger' = 'info';
+    export let type: '' | 'info' | 'success' | 'warning' | 'error' = 'info';
     export let buttons: Buttons[] = [];
 
     let icon = {
@@ -13,17 +13,15 @@
         info: 'icon-info'
     };
 
-    let typeClass = {
-        success: 'is-success',
-        warning: 'is-warning',
-        error: 'is-danger',
-        info: 'is-info'
-    };
-
     const dispatch = createEventDispatcher();
 </script>
 
-<section class={`alert ${type ? typeClass[type] : ''}`}>
+<section
+    class="alert"
+    class:is-success={type === 'success'}
+    class:is-warning={type === 'warning'}
+    class:is-danger={type === 'error'}
+    class:is-info={type === 'info'}>
     <div class="alert-grid">
         {#if dismissible}
             <button

From 484443485fc7b558348984ebea817d81091a616c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 14:24:36 +0200
Subject: [PATCH 037/118] chore: bump css to 0.0.0-43

---
 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 527e5e2cc..b1c2ca235 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-42",
-                "@aw-labs/ui": "0.0.0-42",
+                "@aw-labs/icons": "0.0.0-43",
+                "@aw-labs/ui": "0.0.0-43",
                 "echarts": "^5.3.3",
                 "tippy.js": "^6.3.7"
             },
@@ -70,14 +70,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-42",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-42.tgz",
-            "integrity": "sha512-wCFjTC3W54HzPd3k+Zq36RlvSb5MLwSEbvouhychQZvmT3SpnLb0+8vdtuGglfzIaKuMC0mgMIAWmpoIwiMBdw=="
+            "version": "0.0.0-43",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-43.tgz",
+            "integrity": "sha512-YuPrWmrB+a2Axo+wdPqPMULf2/dlk7rv/KWMpr/GdL3ypqWYw2M/b2+ln+2KV6g6chVHfDyfMEQeqw9FZHv6Og=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-42",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-42.tgz",
-            "integrity": "sha512-3n8IloxXMJDMygvjHi/M62ik/o3nqi9cOnvCcKBlPviuVTsjKdVWrTRY4ZgkBkejelL3LVv4U5K2lKkAiE+lOA==",
+            "version": "0.0.0-43",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-43.tgz",
+            "integrity": "sha512-8UdG0vI4eV6A7pxv00xBoilH2gif5mXubHAZwEwDBhDrD4Tb4PC7pGc3CVcVReBzovfblhbzqkcNqPCFI/3ilw==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7760,14 +7760,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-42",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-42.tgz",
-            "integrity": "sha512-wCFjTC3W54HzPd3k+Zq36RlvSb5MLwSEbvouhychQZvmT3SpnLb0+8vdtuGglfzIaKuMC0mgMIAWmpoIwiMBdw=="
+            "version": "0.0.0-43",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-43.tgz",
+            "integrity": "sha512-YuPrWmrB+a2Axo+wdPqPMULf2/dlk7rv/KWMpr/GdL3ypqWYw2M/b2+ln+2KV6g6chVHfDyfMEQeqw9FZHv6Og=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-42",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-42.tgz",
-            "integrity": "sha512-3n8IloxXMJDMygvjHi/M62ik/o3nqi9cOnvCcKBlPviuVTsjKdVWrTRY4ZgkBkejelL3LVv4U5K2lKkAiE+lOA==",
+            "version": "0.0.0-43",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-43.tgz",
+            "integrity": "sha512-8UdG0vI4eV6A7pxv00xBoilH2gif5mXubHAZwEwDBhDrD4Tb4PC7pGc3CVcVReBzovfblhbzqkcNqPCFI/3ilw==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 3ed5a44f5..6609e3147 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-42",
-        "@aw-labs/ui": "0.0.0-42",
+        "@aw-labs/icons": "0.0.0-43",
+        "@aw-labs/ui": "0.0.0-43",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7"
     },

From 8da86b532b36ad7ea79e3d01eaea3e2b5eec1687 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 11:20:30 +0200
Subject: [PATCH 038/118] feat: remove unused links

---
 src/lib/layout/navigation.svelte | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 4e7018963..e3eff9729 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -58,24 +58,6 @@
                             <span class="text">Functions</span>
                         </a>
                     </li>
-                    <li class="drop-list-item">
-                        <a
-                            class="drop-button"
-                            class:is-selected={$page.url.pathname.startsWith(`${path}/webhooks`)}
-                            href={`${path}/webhooks`}>
-                            <span class="icon-link" aria-hidden="true" />
-                            <span class="text">Webhooks</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a
-                            class="drop-button"
-                            class:is-selected={$page.url.pathname.startsWith(`${path}/keys`)}
-                            href={`${path}/keys`}>
-                            <span class="icon-key" aria-hidden="true" />
-                            <span class="text">API Keys</span>
-                        </a>
-                    </li>
                 </ul>
             </section>
         </div>

From 0337fc8ae9c561ade88ad0b58055329b11dfb7c4 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 11:21:25 +0200
Subject: [PATCH 039/118] feat: add const for page limit & some fixes

---
 src/lib/stores/layout.ts                           |  4 +++-
 .../console/[project]/authentication/index.svelte  |  8 ++++----
 .../[project]/authentication/security.svelte       |  2 +-
 .../authentication/teams/[team]/index.svelte       |  4 ++--
 .../authentication/user/[user]/index.svelte        |  4 ++--
 .../[project]/storage/bucket/[bucket]/index.svelte | 14 +++++++-------
 6 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index 1e4f55518..43c374ed5 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -1,5 +1,5 @@
 import { project } from '../../routes/console/[project]/store';
-import { get, writable } from 'svelte/store';
+import { get, readable, writable } from 'svelte/store';
 
 export type Tab = {
     href: string;
@@ -64,3 +64,5 @@ export function updateLayout(args: updateLayoutArguments) {
         }
     }
 }
+
+export const pageLimit = readable(12); // default page limit
diff --git a/src/routes/console/[project]/authentication/index.svelte b/src/routes/console/[project]/authentication/index.svelte
index 0d77ec369..db078a2c7 100644
--- a/src/routes/console/[project]/authentication/index.svelte
+++ b/src/routes/console/[project]/authentication/index.svelte
@@ -21,12 +21,12 @@
     import { base } from '$app/paths';
     import { usersList } from './store';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { pageLimit } from '$lib/stores/layout';
 
     let showCreate = false;
     let search = '';
     let offset = 0;
 
-    const limit = 5;
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const userCreated = async (event: CustomEvent<Models.User<Record<string, unknown>>>) => {
@@ -34,7 +34,7 @@
     };
 
     $: if (search) offset = 0;
-    $: usersList.load(search, limit, offset ?? 0);
+    $: usersList.load(search, $pageLimit, offset ?? 0);
 </script>
 
 <Container>
@@ -99,7 +99,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$usersList.total}</p>
-            <Pagination {limit} bind:offset sum={$usersList.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
         </div>
     {:else if search}
         <Empty>
@@ -115,7 +115,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$usersList.total}</p>
-            <Pagination {limit} bind:offset sum={$usersList.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
         </div>
     {:else}
         <Empty dashed centered>
diff --git a/src/routes/console/[project]/authentication/security.svelte b/src/routes/console/[project]/authentication/security.svelte
index cfa9dec9a..f2467c717 100644
--- a/src/routes/console/[project]/authentication/security.svelte
+++ b/src/routes/console/[project]/authentication/security.svelte
@@ -135,7 +135,7 @@
     </CardGrid>
 
     <CardGrid>
-        <h2 class="heading-level-6">Session Length</h2>
+        <h2 class="heading-level-6">Session Length - (Coming Soon)</h2>
         <p>
             If you reduce the limit, users who are currently logged in will be logged out of the
             application.
diff --git a/src/routes/console/[project]/authentication/teams/[team]/index.svelte b/src/routes/console/[project]/authentication/teams/[team]/index.svelte
index 5fc5e0a63..17849fdcf 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/index.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/index.svelte
@@ -35,9 +35,9 @@
             await sdkForProject.teams.update($page.params.team, teamName);
             $team.name = teamName;
             title.set(teamName);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size - 1);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
             breadcrumb.title = teamName;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size - 1, breadcrumb);
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
diff --git a/src/routes/console/[project]/authentication/user/[user]/index.svelte b/src/routes/console/[project]/authentication/user/[user]/index.svelte
index b359a5ac1..ea5d12cca 100644
--- a/src/routes/console/[project]/authentication/user/[user]/index.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/index.svelte
@@ -115,9 +115,9 @@
             await sdkForProject.users.updateName($user.$id, userName);
             $user.name = userName;
             title.set(userName);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size - 1);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
             breadcrumb.title = userName;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size - 1, breadcrumb);
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
 
             showError = false;
             addNotification({
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
index d3b437560..3d8647b4e 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
@@ -25,6 +25,7 @@
     import { uploader } from '$lib/stores/uploader';
     import { addNotification } from '$lib/stores/notifications';
     import { goto } from '$app/navigation';
+    import { pageLimit } from '$lib/stores/layout';
 
     let search = '';
     let showCreate = false;
@@ -33,7 +34,6 @@
     let selectedFile: Models.File = null;
     let offset = 0;
 
-    const limit = 5;
     const project = $page.params.project;
     const bucket = $page.params.bucket;
 
@@ -42,20 +42,20 @@
 
     const fileCreated = () => {
         showCreate = false;
-        files.load(bucket, search, limit, offset);
+        files.load(bucket, search, $pageLimit, offset);
     };
 
     const fileDeleted = (event: CustomEvent<Models.File>) => {
         showDelete = false;
         uploader.removeFile(event.detail);
-        files.load(bucket, search, limit, offset);
+        files.load(bucket, search, $pageLimit, offset);
     };
 
     const deleteFile = async (file: Models.File) => {
         try {
             await sdkForProject.storage.deleteFile(file.bucketId, file.$id);
             uploader.removeFile(file);
-            files.load(bucket, search, limit, offset);
+            files.load(bucket, search, $pageLimit, offset);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -64,7 +64,7 @@
         }
     };
 
-    $: files.load(bucket, search, limit, offset);
+    $: files.load(bucket, search, $pageLimit, offset);
     $: if (search) offset = 0;
 </script>
 
@@ -175,7 +175,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$files.total}</p>
-            <Pagination {limit} bind:offset sum={$files.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$files.total} />
         </div>
     {:else if search}
         <Empty>
@@ -191,7 +191,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$files?.total}</p>
-            <Pagination {limit} bind:offset sum={$files?.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$files?.total} />
         </div>
     {:else}
         <Empty dashed centered>

From fe377d077fc85226cb328dc805a4d90fdc7d2c9b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 11:24:06 +0200
Subject: [PATCH 040/118] fix: back button alignment

---
 src/lib/layout/shell.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 97ca79d1d..111165f91 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -78,12 +78,12 @@
     <section class="main-content">
         <Cover>
             <svelte:fragment slot="header">
-                {#if $backButton}
-                    <a class="back-button" href={$backButton} aria-label="page back">
-                        <span class="icon-cheveron-left" aria-hidden="true" />
-                    </a>
-                {/if}
                 <h1 class="heading-level-4">
+                    {#if $backButton}
+                        <a class="back-button" href={$backButton} aria-label="page back">
+                            <span class="icon-cheveron-left" aria-hidden="true" />
+                        </a>
+                    {/if}
                     <span class="text"> {$title}</span>
                 </h1>
                 {#if $copyData?.value}

From a1f9bcdeea08392d314474908af995d4293c0149 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 11:25:58 +0200
Subject: [PATCH 041/118] style: fix spacing that bugged Eldad

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

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 9cdaaec94..6929557d1 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -27,7 +27,8 @@
             href="https://appwrite.io/support"
             target="_blank"
             rel="noopener noreferrer"
-            class="button is-small is-text"><span class="text">Support</span></a>
+            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>
     </nav>
     <nav class="user-profile">

From 98c4f1a4b0c082273b9ad1d4b5f1e2724d80b4f3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 12:20:17 +0200
Subject: [PATCH 042/118] chore: bump css to 0.0.0-44

---
 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 b1c2ca235..7d3cfe055 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-43",
-                "@aw-labs/ui": "0.0.0-43",
+                "@aw-labs/icons": "0.0.0-44",
+                "@aw-labs/ui": "0.0.0-44",
                 "echarts": "^5.3.3",
                 "tippy.js": "^6.3.7"
             },
@@ -70,14 +70,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-43",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-43.tgz",
-            "integrity": "sha512-YuPrWmrB+a2Axo+wdPqPMULf2/dlk7rv/KWMpr/GdL3ypqWYw2M/b2+ln+2KV6g6chVHfDyfMEQeqw9FZHv6Og=="
+            "version": "0.0.0-44",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-44.tgz",
+            "integrity": "sha512-nZ/YfsgFR5EYItnHKSoMmCMMeQPOUoGCsIgtcKW8iEhMjoZK8PxU8qnoLnAZOJONDSY484G9j7/yofdeXTfL8Q=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-43",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-43.tgz",
-            "integrity": "sha512-8UdG0vI4eV6A7pxv00xBoilH2gif5mXubHAZwEwDBhDrD4Tb4PC7pGc3CVcVReBzovfblhbzqkcNqPCFI/3ilw==",
+            "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==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7760,14 +7760,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-43",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-43.tgz",
-            "integrity": "sha512-YuPrWmrB+a2Axo+wdPqPMULf2/dlk7rv/KWMpr/GdL3ypqWYw2M/b2+ln+2KV6g6chVHfDyfMEQeqw9FZHv6Og=="
+            "version": "0.0.0-44",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-44.tgz",
+            "integrity": "sha512-nZ/YfsgFR5EYItnHKSoMmCMMeQPOUoGCsIgtcKW8iEhMjoZK8PxU8qnoLnAZOJONDSY484G9j7/yofdeXTfL8Q=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-43",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-43.tgz",
-            "integrity": "sha512-8UdG0vI4eV6A7pxv00xBoilH2gif5mXubHAZwEwDBhDrD4Tb4PC7pGc3CVcVReBzovfblhbzqkcNqPCFI/3ilw==",
+            "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==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 6609e3147..2ed5cac14 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-43",
-        "@aw-labs/ui": "0.0.0-43",
+        "@aw-labs/icons": "0.0.0-44",
+        "@aw-labs/ui": "0.0.0-44",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7"
     },

From 7a15dbe41e266a0e4480f03475cc34df1ff05a99 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 12:20:56 +0200
Subject: [PATCH 043/118] style: remove inline padding from button

---
 .../[project]/authentication/user/[user]/index.svelte       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/[project]/authentication/user/[user]/index.svelte b/src/routes/console/[project]/authentication/user/[user]/index.svelte
index ea5d12cca..0d1c478ad 100644
--- a/src/routes/console/[project]/authentication/user/[user]/index.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/index.svelte
@@ -429,8 +429,8 @@
                             {/each}
                         {/if}
                     </ul>
-                    <Button
-                        text
+                    <button
+                        class="button is-text u-padding-inline-0"
                         disabled={prefs?.length
                             ? !prefs[prefs.length - 1][0] || !prefs[prefs.length - 1][1]
                             : true}
@@ -439,7 +439,7 @@
                             prefs = prefs;
                         }}>
                         <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add preference </span></Button>
+                        <span class="text"> Add preference </span></button>
                 </form>
             </svelte:fragment>
 

From 939a351ea371a99744396d2594d708d661cc7d59 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 14:37:41 +0200
Subject: [PATCH 044/118] feat: add limit of 3 notifications

---
 src/lib/stores/notifications.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/stores/notifications.ts b/src/lib/stores/notifications.ts
index 0642824df..397b578e4 100644
--- a/src/lib/stores/notifications.ts
+++ b/src/lib/stores/notifications.ts
@@ -32,7 +32,13 @@ export const addNotification = (notification: Omit<Notification, 'id'>) => {
     };
 
     const n = { ...defaults, ...notification };
-    notifications.update((all) => [n, ...all]);
+    notifications.update((all) => {
+        if (all.length < 3) {
+            return [n, ...all];
+        } else {
+            return [n, ...all.slice(0, 2)];
+        }
+    });
 
     if (n.timeout) setTimeout(() => dismissNotification(n.id), n.timeout);
 };

From 59938e8540fee52816b30233a6585e269aa85c4e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 11 Aug 2022 17:19:42 +0200
Subject: [PATCH 045/118] reodered auth methods

---
 src/lib/stores/auth-methods.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/lib/stores/auth-methods.ts b/src/lib/stores/auth-methods.ts
index b4fbd07b9..2f8d50f13 100644
--- a/src/lib/stores/auth-methods.ts
+++ b/src/lib/stores/auth-methods.ts
@@ -15,6 +15,11 @@ function createAuthMethods() {
                 method: 'email-password',
                 value: null
             },
+            {
+                label: 'Phone',
+                method: 'phone',
+                value: null
+            },
             {
                 label: 'Magic URL',
                 method: 'magic-url',
@@ -34,11 +39,6 @@ function createAuthMethods() {
                 label: 'JWT',
                 method: 'jwt',
                 value: null
-            },
-            {
-                label: 'Phone',
-                method: 'phone',
-                value: null
             }
         ]
     });
@@ -53,6 +53,11 @@ function createAuthMethods() {
                     method: 'email-password',
                     value: project.authEmailPassword
                 },
+                {
+                    label: 'Phone',
+                    method: 'phone',
+                    value: project.authPhone
+                },
                 {
                     label: 'Magic URL',
                     method: 'magic-url',
@@ -72,11 +77,6 @@ function createAuthMethods() {
                     label: 'JWT',
                     method: 'jwt',
                     value: project.authJWT
-                },
-                {
-                    label: 'Phone',
-                    method: 'phone',
-                    value: project.authPhone
                 }
             ];
             set({ list });

From 465dcb0ab5e2fb022ff087384779bf6e1d8af7c2 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 12 Aug 2022 10:14:55 +0200
Subject: [PATCH 046/118] feat: increased the limit

---
 .../authentication/teams/[team]/activity.svelte     |  6 +++---
 .../authentication/teams/[team]/members.svelte      | 13 ++++++-------
 .../authentication/user/[user]/sessions.svelte      |  4 ++--
 src/routes/console/[project]/storage/index.svelte   |  8 ++++----
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
index 5e297e945..7e2d74f89 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/activity.svelte
@@ -14,11 +14,11 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
     import { app } from '$lib/stores/app';
+    import { pageLimit } from '$lib/stores/layout';
 
     let offset = 0;
-    const limit = 5;
 
-    $: request = sdkForProject.teams.listLogs($page.params.team, limit, offset);
+    $: request = sdkForProject.teams.listLogs($page.params.team, $pageLimit, offset);
 
     let browsers = {
         firefox: 'firefox',
@@ -100,7 +100,7 @@
             class="u-flex u-margin-block-start-32
  u-main-space-between">
             <p class="text">Total results: {response.total}</p>
-            <Pagination {limit} bind:offset sum={response.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={response.total} />
         </div>
     {/await}
 </Container>
diff --git a/src/routes/console/[project]/authentication/teams/[team]/members.svelte b/src/routes/console/[project]/authentication/teams/[team]/members.svelte
index d2bc1506c..3a4920973 100644
--- a/src/routes/console/[project]/authentication/teams/[team]/members.svelte
+++ b/src/routes/console/[project]/authentication/teams/[team]/members.svelte
@@ -19,9 +19,10 @@
     import { memberships } from './store';
     import CreateMember from './_createMembership.svelte';
     import DeleteMembership from './_deleteMembership.svelte';
+    import { pageLimit } from '$lib/stores/layout';
 
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
-    const deleted = () => memberships.load($page.params.team, search, limit, offset ?? 0);
+    const deleted = () => memberships.load($page.params.team, search, $pageLimit, offset ?? 0);
 
     const project = $page.params.project;
 
@@ -31,13 +32,11 @@
     let offset: number = null;
     let selectedMembership: Models.Membership;
 
-    const limit = 5;
-
     $: if (search) offset = 0;
-    $: memberships.load($page.params.team, search, limit, offset ?? 0);
+    $: memberships.load($page.params.team, search, $pageLimit, offset ?? 0);
 
     const memberCreated = async (event: CustomEvent<Models.Membership>) => {
-        memberships.load($page.params.team, search, limit, offset ?? 0);
+        memberships.load($page.params.team, search, $pageLimit, offset ?? 0);
         await goto(
             `${base}/console/${project}/authentication/teams/${event.detail.teamId}/members`
         );
@@ -95,7 +94,7 @@
             class="u-flex u-margin-block-start-32
  u-main-space-between">
             <p class="text">Total results: {$memberships.total}</p>
-            <Pagination {limit} bind:offset sum={$memberships.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$memberships.total} />
         </div>
     {:else if search}
         <Empty>
@@ -113,7 +112,7 @@
             class="u-flex u-margin-block-start-32
  u-main-space-between">
             <p class="text">Total results: {$memberships.total}</p>
-            <Pagination {limit} bind:offset sum={$memberships.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$memberships.total} />
         </div>
     {:else}
         <Empty dashed centered>
diff --git a/src/routes/console/[project]/authentication/user/[user]/sessions.svelte b/src/routes/console/[project]/authentication/user/[user]/sessions.svelte
index c0a39a3ba..e5ef924bd 100644
--- a/src/routes/console/[project]/authentication/user/[user]/sessions.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/sessions.svelte
@@ -16,13 +16,13 @@
     import DeleteSessions from './_deleteSession.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { app } from '$lib/stores/app';
+    import { pageLimit } from '$lib/stores/layout';
 
     let offset = 0;
     let showDelete = false;
     let showDeleteAll = false;
     let selectedSessionId: string = null;
 
-    const limit = 5;
     const request = sdkForProject.users.getSessions($page.params.user);
 
     //TODO: replace session.expire with "last activity"
@@ -104,7 +104,7 @@
             class="u-flex u-margin-block-start-32
  u-main-space-between">
             <p class="text">Total results: {response.total}</p>
-            <Pagination {limit} bind:offset sum={response.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={response.total} />
         </div>
     {/await}
 </Container>
diff --git a/src/routes/console/[project]/storage/index.svelte b/src/routes/console/[project]/storage/index.svelte
index 3c16cd351..d65192ec9 100644
--- a/src/routes/console/[project]/storage/index.svelte
+++ b/src/routes/console/[project]/storage/index.svelte
@@ -10,19 +10,19 @@
     import { base } from '$app/paths';
     import { bucketList } from './store';
     import { tooltip } from '$lib/actions/tooltip';
+    import { pageLimit } from '$lib/stores/layout';
 
     let showCreate = false;
     let search = '';
     let offset = 0;
 
-    const limit = 5;
     const project = $page.params.project;
     const bucketCreated = async (event: CustomEvent<Models.Bucket>) => {
         showCreate = false;
         await goto(`${base}/console/${project}/storage/bucket/${event.detail.$id}`);
     };
 
-    $: bucketList.load(search, limit, offset ?? 0);
+    $: bucketList.load(search, $pageLimit, offset ?? 0);
     $: if (search) offset = 0;
 </script>
 
@@ -97,7 +97,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$bucketList.total}</p>
-            <Pagination {limit} bind:offset sum={$bucketList.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$bucketList.total} />
         </div>
     {:else if search}
         <Empty>
@@ -113,7 +113,7 @@
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$bucketList?.total}</p>
-            <Pagination {limit} bind:offset sum={$bucketList?.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$bucketList?.total} />
         </div>
     {:else}
         <Empty dashed centered>

From 9e53cf29e7b7d309573d8170f2f06ed94df79def Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 12 Aug 2022 15:44:10 +0200
Subject: [PATCH 047/118] initial commit

---
 src/lib/layout/header.svelte                 |   2 +-
 src/lib/layout/shell.svelte                  |  47 +++++++--
 src/lib/stores/layout.ts                     |  13 ++-
 src/routes/console/[project]/__layout.svelte |  10 +-
 src/routes/console/[project]/store.ts        |   4 +-
 src/routes/console/__layout-intro.svelte     |  38 ++++++-
 src/routes/console/index@intro.svelte        | 102 ++++++++++++-------
 src/routes/console/members@intro.svelte      |   5 +
 src/routes/console/settings@intro.svelte     |   5 +
 src/routes/console/store.ts                  |  60 +++++++++++
 10 files changed, 227 insertions(+), 59 deletions(-)
 create mode 100644 src/routes/console/members@intro.svelte
 create mode 100644 src/routes/console/settings@intro.svelte
 create mode 100644 src/routes/console/store.ts

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 9cdaaec94..eafe66f91 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -51,7 +51,7 @@
                         class:icon-cheveron-down={!showDropdown} />
                 </button>
                 <svelte:fragment slot="list">
-                    <DropListItem icon="plus">New organisation</DropListItem>
+                    <DropListItem icon="plus">New organization</DropListItem>
                     <DropListLink href="/console/$me">Your Account</DropListLink>
                 </svelte:fragment>
                 <svelte:fragment slot="other">
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 97ca79d1d..c82713e93 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
     import { navigating, page } from '$app/stores';
-    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
+    import { tabs, title, backButton, copyData, titleDropdown } from '$lib/stores/layout';
     import { Cover } from '.';
-    import { Copy } from '$lib/components';
+    import { Copy, DropList, DropListItem } from '$lib/components';
     import { Pill } from '$lib/elements';
 
     export let isOpen = false;
     export let showSideNavigation = false;
 
-    $: base = `/console/${$page.params.project}`;
+    // $: base = `/console/${$page.params.project}`;
 
     let tabsList: HTMLUListElement;
     let showLeft = false;
     let showRight = false;
+    let showDropdown = false;
 
     navigating.subscribe(() => {
         if (isOpen) isOpen = false;
@@ -83,9 +84,38 @@
                         <span class="icon-cheveron-left" aria-hidden="true" />
                     </a>
                 {/if}
-                <h1 class="heading-level-4">
-                    <span class="text"> {$title}</span>
-                </h1>
+                {#if $titleDropdown?.length}
+                    <DropList bind:show={showDropdown} position="bottom" arrow={false}>
+                        <button
+                            class="button is-text u-padding-inline-0"
+                            on:click={() => (showDropdown = !showDropdown)}>
+                            <h1 class="heading-level-4">
+                                <span class="text"> drop</span>
+
+                                <span
+                                    class={`icon-cheveron-${showDropdown ? 'up' : 'down'}`}
+                                    aria-hidden="true" />
+                            </h1>
+                        </button>
+                        <svelte:fragment slot="list">
+                            {#each $titleDropdown as organization}
+                                <DropListItem>
+                                    {organization.name}
+                                </DropListItem>
+                            {/each}
+                        </svelte:fragment>
+                        <svelte:fragment slot="other">
+                            <section class="drop-section">
+                                <ul class="drop-list">
+                                    <DropListItem icon="plus">New Organizations</DropListItem>
+                                </ul>
+                            </section></svelte:fragment>
+                    </DropList>
+                {:else}
+                    <h1 class="heading-level-4">
+                        <span class="text"> {$title}</span>
+                    </h1>
+                {/if}
                 {#if $copyData?.value}
                     <Copy value={$copyData.value}>
                         <Pill button
@@ -122,9 +152,8 @@
                             <li class="tabs-item">
                                 <a
                                     class="tabs-button"
-                                    href={`${base}/${tab.href}`}
-                                    class:is-selected={$page.url.pathname ===
-                                        `${base}/${tab.href}`}>
+                                    href={`${tab.href}`}
+                                    class:is-selected={$page.url.pathname === `${tab.href}`}>
                                     <span class="text">{tab.title}</span>
                                 </a>
                             </li>
diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index 1e4f55518..5e031f223 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -1,5 +1,6 @@
 import { project } from '../../routes/console/[project]/store';
 import { get, writable } from 'svelte/store';
+import type { Models } from '@aw-labs/appwrite-console';
 
 export type Tab = {
     href: string;
@@ -14,6 +15,7 @@ export type Breadcrumb = {
 
 export type updateLayoutArguments = {
     title: string;
+    titleDropdown?: Models.Team[];
     level?: number;
     tabs?: Tab[];
     back?: string;
@@ -22,6 +24,7 @@ export type updateLayoutArguments = {
         text: string;
         value: string;
     };
+    customBase?: string;
     navigate?: {
         from: URL | null;
         to: URL;
@@ -30,6 +33,7 @@ export type updateLayoutArguments = {
 
 export const level = writable<number>();
 export const title = writable<string>('');
+export const titleDropdown = writable<Models.Team[]>([]);
 export const backButton = writable<string>('');
 export const tabs = writable<Tab[]>([]);
 export const breadcrumbs = writable<Map<number, Breadcrumb>>(new Map());
@@ -40,7 +44,13 @@ export const copyData = writable({
 
 export function updateLayout(args: updateLayoutArguments) {
     const projectId = get(project)?.$id;
-    const base = projectId ? `/console/${projectId}` : `/console`;
+    const base = args?.customBase ?? projectId ? `/console/${projectId}` : ``;
+
+    if (args?.tabs) {
+        args.tabs.map((tab) => {
+            tab.href = `${base}/${tab.href}`;
+        });
+    }
 
     if (args?.navigate?.to) {
         const previousTabs = get(tabs);
@@ -50,6 +60,7 @@ export function updateLayout(args: updateLayoutArguments) {
     }
 
     title.set(args.title);
+    titleDropdown.set(args.titleDropdown ?? []);
     backButton.set(args.back ?? null);
     copyData.set(args.copy ?? null);
     level.set(args.level ?? null);
diff --git a/src/routes/console/[project]/__layout.svelte b/src/routes/console/[project]/__layout.svelte
index f570157db..037aeeae6 100644
--- a/src/routes/console/[project]/__layout.svelte
+++ b/src/routes/console/[project]/__layout.svelte
@@ -4,7 +4,7 @@
     import { sdkForConsole, setProject } from '$lib/stores/sdk';
     import { collection } from './databases/database/[database]/collection/[collection]/store';
     import { UploadBox } from '$lib/components';
-    import { organisation, project } from './store';
+    import { organization, project } from './store';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
     import { updateLayout } from '$lib/stores/layout';
@@ -53,18 +53,18 @@
             setProject(projectId);
             await project.load(projectId);
         }
-        if ($organisation?.$id !== $project.teamId) {
-            await organisation.load($project.teamId);
+        if ($organization?.$id !== $project.teamId) {
+            await organization.load($project.teamId);
         }
 
         updateLayout({
             navigate: event,
             title: $project.name,
-            level: 2,
+            level: 1,
             breadcrumbs: [
                 {
                     href: path,
-                    title: $organisation.name,
+                    title: $project.name,
                     level: 1
                 },
                 {
diff --git a/src/routes/console/[project]/store.ts b/src/routes/console/[project]/store.ts
index d3cca3a45..d7f8ee666 100644
--- a/src/routes/console/[project]/store.ts
+++ b/src/routes/console/[project]/store.ts
@@ -15,7 +15,7 @@ function createProject() {
     };
 }
 
-function createOrganisation() {
+function createOrganization() {
     const { subscribe, set } = writable<Models.Team>();
 
     return {
@@ -29,4 +29,4 @@ function createOrganisation() {
 }
 
 export const project = createProject();
-export const organisation = createOrganisation();
+export const organization = createOrganization();
diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
index 0e6606633..483f41e0d 100644
--- a/src/routes/console/__layout-intro.svelte
+++ b/src/routes/console/__layout-intro.svelte
@@ -2,11 +2,41 @@
     import Shell from '$lib/layout/shell.svelte';
     import Header from '$lib/layout/header.svelte';
     import { updateLayout } from '$lib/stores/layout';
+    import { onMount } from 'svelte';
+    import { afterNavigate } from '$app/navigation';
+    import { organizationList } from './store';
 
-    updateLayout({
-        title: 'Projects',
-        level: 0
-    });
+    onMount(handle);
+    afterNavigate(handle);
+
+    async function handle(event = null) {
+        await organizationList.load();
+        updateLayout({
+            navigate: event,
+            title: `${$organizationList.teams[0].name}`,
+            titleDropdown: $organizationList.teams,
+            level: 0,
+            customBase: '',
+            breadcrumbs: {
+                title: `${$organizationList.teams[0].name}`,
+                href: 'console'
+            },
+            tabs: [
+                {
+                    href: 'console',
+                    title: 'Projects'
+                },
+                {
+                    href: 'console/members',
+                    title: 'Members'
+                },
+                {
+                    href: 'console/settings',
+                    title: 'Settings'
+                }
+            ]
+        });
+    }
 </script>
 
 <Shell>
diff --git a/src/routes/console/index@intro.svelte b/src/routes/console/index@intro.svelte
index f02af6248..5b115c3b9 100644
--- a/src/routes/console/index@intro.svelte
+++ b/src/routes/console/index@intro.svelte
@@ -1,67 +1,95 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { Tiles, Tile } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Bucket, EmptyBucket, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import CreateOrganization from './_createOrganization.svelte';
     import CreateProject from './_createProject.svelte';
+    import { organizationList, organization, projectList } from './store';
+    import { onMount } from 'svelte';
 
-    type Organization = Models.Team & {
-        projects: Models.Project[];
-    };
+    let projects: Models.Project[] = [];
 
-    const request: Promise<Organization[]> = Promise.all([
-        sdkForConsole.projects.list(),
-        sdkForConsole.teams.list()
-    ]).then(([{ projects }, { teams }]) => {
-        return teams.map((team) => {
-            return {
-                ...team,
-                projects: projects.filter((a) => a.teamId === team.$id)
-            };
-        });
+    onMount(async () => {
+        organizationList.load();
+        if (!$organization) {
+            organization.load($organizationList.teams[0].$id);
+        }
+        projectList.load();
+
+        projects = $projectList.projects.filter((a) => a.teamId === $organization.$id);
     });
 
-    let addProject = false;
+    let showCreate = false;
     let addOrganization = false;
-    let currentOrganization = '';
+    let currentOrganization = $organization?.$id;
+    let offset = 0;
+    const limit = 5;
 
-    const createProject = (teamId: string) => {
-        currentOrganization = teamId;
-        addProject = true;
-    };
     const projectCreated = async (event: CustomEvent<Models.Project>) => {
         await goto(`${base}/console/${event.detail.$id}`);
     };
+    //TODO: fix technology icon display
 </script>
 
 <svelte:head>
     <title>Appwrite - Console</title>
 </svelte:head>
 <Container>
-    <h1>Your Organizations</h1>
-    <Button on:click={() => (addOrganization = true)}>Add Organization</Button>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <h2 class="heading-level-5">Projects</h2>
 
-    {#await request}
-        <div aria-busy="true" />
-    {:then organizations}
-        {#each organizations as organization}
-            <h1>{organization.name}</h1>
-            <Tiles>
-                {#each organization.projects as project}
-                    <Tile href={`${base}/console/${project.$id}`} title={project.name} />
-                {/each}
-            </Tiles>
-            <Button on:click={() => createProject(organization.$id)}>Create Project</Button>
-        {/each}
-    {/await}
+        <Button
+            on:click={() => {
+                showCreate = true;
+            }}>
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create project</span>
+        </Button>
+    </div>
+
+    {#if projects?.length}
+        <ul
+            class="grid-box common-section u-margin-block-start-32"
+            style={`--grid-gap:2rem; --grid-item-size:${projects.length > 3 ? '22rem' : '25rem'};`}>
+            {#each projects as project}
+                <Bucket href={`${base}/console/${project.$id}`}>
+                    <svelte:fragment slot="eyebrow">XX apps</svelte:fragment>
+                    <svelte:fragment slot="title">
+                        {project.name}
+                    </svelte:fragment>
+                    {#each project.platforms as platform}
+                        <Pill>
+                            <span class={`icon-${platform.type}`} aria-hidden="true" />
+                            {platform.type}</Pill>
+                    {/each}
+                </Bucket>
+            {/each}
+            {#if projects.length % 2 !== 0}
+                <EmptyBucket on:click={() => (showCreate = true)}>
+                    <div class="common-section">
+                        <Button secondary round>
+                            <i class="icon-plus" />
+                        </Button>
+                    </div>
+                    <div class="common-section">
+                        <p>Add a new bucket</p>
+                    </div>
+                </EmptyBucket>
+            {/if}
+        </ul>
+
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {projects.length}</p>
+            <Pagination {limit} bind:offset sum={projects.length} />
+        </div>
+    {/if}
 </Container>
 
 <CreateOrganization bind:show={addOrganization} />
 <CreateProject
-    bind:show={addProject}
+    bind:show={showCreate}
     bind:teamId={currentOrganization}
     on:created={projectCreated} />
diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/members@intro.svelte
new file mode 100644
index 000000000..b5ead8b19
--- /dev/null
+++ b/src/routes/console/members@intro.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Appwrite - Console</title>
+</svelte:head>
+
+Members
diff --git a/src/routes/console/settings@intro.svelte b/src/routes/console/settings@intro.svelte
new file mode 100644
index 000000000..423bdc9e5
--- /dev/null
+++ b/src/routes/console/settings@intro.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Appwrite - Console</title>
+</svelte:head>
+
+settings
diff --git a/src/routes/console/store.ts b/src/routes/console/store.ts
new file mode 100644
index 000000000..5b90e4a26
--- /dev/null
+++ b/src/routes/console/store.ts
@@ -0,0 +1,60 @@
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { Models } from '@aw-labs/appwrite-console';
+import { writable } from 'svelte/store';
+import { browser } from '$app/env';
+
+function createOrganizationList() {
+    const { subscribe, set } = writable<Models.TeamList>(
+        browser ? JSON.parse(sessionStorage.getItem('organizationList')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async () => {
+            const team = await sdkForConsole.teams.list();
+            set(team);
+        }
+    };
+}
+function createOrganization() {
+    const { subscribe, set } = writable<Models.Team>(
+        browser ? JSON.parse(sessionStorage.getItem('organization')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async (teamId: string) => {
+            const team = await sdkForConsole.teams.get(teamId);
+            set(team);
+        }
+    };
+}
+
+function createProjectList() {
+    const { subscribe, set } = writable<Models.ProjectList>(
+        browser ? JSON.parse(sessionStorage.getItem('projectList')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async () => {
+            const projects = await sdkForConsole.projects.list();
+            set(projects);
+        }
+    };
+}
+
+export const organizationList = createOrganizationList();
+export const organization = createOrganization();
+export const projectList = createProjectList();
+
+if (browser) {
+    organizationList.subscribe((n) =>
+        sessionStorage?.setItem('organizationList', JSON.stringify(n ?? ''))
+    );
+    organization.subscribe((n) => sessionStorage?.setItem('organization', JSON.stringify(n ?? '')));
+    projectList.subscribe((n) => sessionStorage?.setItem('projectList', JSON.stringify(n ?? '')));
+}

From ad0c42a6ecc228198d8672b1f93da4fccabf4fcf Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 12 Aug 2022 17:15:33 +0200
Subject: [PATCH 048/118] feat: members page

---
 src/lib/layout/shell.svelte              |   3 +-
 src/routes/console/__layout-intro.svelte |  27 ++++--
 src/routes/console/index@intro.svelte    |  25 +++---
 src/routes/console/members@intro.svelte  | 100 ++++++++++++++++++++++-
 src/routes/console/settings@intro.svelte |   4 -
 src/routes/console/store.ts              |  34 ++++++--
 6 files changed, 155 insertions(+), 38 deletions(-)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index c82713e93..308aaf688 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -4,6 +4,7 @@
     import { Cover } from '.';
     import { Copy, DropList, DropListItem } from '$lib/components';
     import { Pill } from '$lib/elements';
+    import { organization } from '../../routes/console/store';
 
     export let isOpen = false;
     export let showSideNavigation = false;
@@ -90,7 +91,7 @@
                             class="button is-text u-padding-inline-0"
                             on:click={() => (showDropdown = !showDropdown)}>
                             <h1 class="heading-level-4">
-                                <span class="text"> drop</span>
+                                <span class="text"> {$organization.name}</span>
 
                                 <span
                                     class={`icon-cheveron-${showDropdown ? 'up' : 'down'}`}
diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
index 483f41e0d..c388793ee 100644
--- a/src/routes/console/__layout-intro.svelte
+++ b/src/routes/console/__layout-intro.svelte
@@ -4,13 +4,16 @@
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
-    import { organizationList } from './store';
+    import { organizationList, organization } from './store';
 
     onMount(handle);
     afterNavigate(handle);
 
     async function handle(event = null) {
         await organizationList.load();
+        if (!$organization) {
+            await organization.load($organizationList.teams[0].$id);
+        }
         updateLayout({
             navigate: event,
             title: `${$organizationList.teams[0].name}`,
@@ -18,7 +21,7 @@
             level: 0,
             customBase: '',
             breadcrumbs: {
-                title: `${$organizationList.teams[0].name}`,
+                title: `${$organization.name}`,
                 href: 'console'
             },
             tabs: [
@@ -39,10 +42,16 @@
     }
 </script>
 
-<Shell>
-    <svelte:fragment slot="header">
-        <Header />
-    </svelte:fragment>
-    <slot />
-    <footer class="main-footer" />
-</Shell>
+<svelte:head>
+    <title>Appwrite - Console</title>
+</svelte:head>
+
+{#if $organization}
+    <Shell>
+        <svelte:fragment slot="header">
+            <Header />
+        </svelte:fragment>
+        <slot />
+        <footer class="main-footer" />
+    </Shell>
+{/if}
diff --git a/src/routes/console/index@intro.svelte b/src/routes/console/index@intro.svelte
index 5b115c3b9..ff24b1d82 100644
--- a/src/routes/console/index@intro.svelte
+++ b/src/routes/console/index@intro.svelte
@@ -8,17 +8,13 @@
     import type { Models } from '@aw-labs/appwrite-console';
     import CreateOrganization from './_createOrganization.svelte';
     import CreateProject from './_createProject.svelte';
-    import { organizationList, organization, projectList } from './store';
+    import { organization, projectList } from './store';
     import { onMount } from 'svelte';
 
     let projects: Models.Project[] = [];
 
     onMount(async () => {
-        organizationList.load();
-        if (!$organization) {
-            organization.load($organizationList.teams[0].$id);
-        }
-        projectList.load();
+        await projectList.load();
 
         projects = $projectList.projects.filter((a) => a.teamId === $organization.$id);
     });
@@ -35,9 +31,6 @@
     //TODO: fix technology icon display
 </script>
 
-<svelte:head>
-    <title>Appwrite - Console</title>
-</svelte:head>
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
         <h2 class="heading-level-5">Projects</h2>
@@ -56,7 +49,8 @@
             style={`--grid-gap:2rem; --grid-item-size:${projects.length > 3 ? '22rem' : '25rem'};`}>
             {#each projects as project}
                 <Bucket href={`${base}/console/${project.$id}`}>
-                    <svelte:fragment slot="eyebrow">XX apps</svelte:fragment>
+                    <svelte:fragment slot="eyebrow"
+                        >{project?.platforms?.length ?? 0} apps</svelte:fragment>
                     <svelte:fragment slot="title">
                         {project.name}
                     </svelte:fragment>
@@ -89,7 +83,10 @@
 </Container>
 
 <CreateOrganization bind:show={addOrganization} />
-<CreateProject
-    bind:show={showCreate}
-    bind:teamId={currentOrganization}
-    on:created={projectCreated} />
+
+{#if projects?.length}
+    <CreateProject
+        bind:show={showCreate}
+        bind:teamId={currentOrganization}
+        on:created={projectCreated} />
+{/if}
diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/members@intro.svelte
index b5ead8b19..5409ba64a 100644
--- a/src/routes/console/members@intro.svelte
+++ b/src/routes/console/members@intro.svelte
@@ -1,5 +1,97 @@
-<svelte:head>
-    <title>Appwrite - Console</title>
-</svelte:head>
+<script lang="ts">
+    import {
+        Table,
+        TableHeader,
+        TableBody,
+        TableCellHead,
+        TableCell,
+        TableCellText,
+        TableRow
+    } from '$lib/elements/table';
+    import { Avatar, Pagination } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
+    import { organization, memberList } from './store';
+    import { sdkForProject } from '$lib/stores/sdk';
 
-Members
+    const limit = 5;
+    let search = '';
+    let offset: number = null;
+
+    let showCreate = false;
+    let showDelete = false;
+
+    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
+
+    $: if (search) offset = 0;
+    $: memberList.load($organization.$id, search, limit, offset ?? 0);
+</script>
+
+<Container>
+    {#if $memberList?.total}
+        <div class="u-flex u-gap-12 common-section u-main-space-between">
+            <h2 class="heading-level-5">Members</h2>
+
+            <Button
+                on:click={() => {
+                    showCreate = true;
+                }}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Create project</span>
+            </Button>
+        </div>
+
+        <Table>
+            <TableHeader>
+                <TableCellHead>Name</TableCellHead>
+                <TableCellHead>Email</TableCellHead>
+                <TableCellHead width={100}>Role</TableCellHead>
+                <TableCellHead width={30} />
+            </TableHeader>
+            <TableBody>
+                {#each $memberList.memberships as member}
+                    <TableRow>
+                        <TableCell title="Name">
+                            <div class="u-flex u-gap-12 u-cross-center">
+                                <Avatar
+                                    size={32}
+                                    src={getAvatar(member.userName) + $organization.name}
+                                    name={member.userName} />
+                                <span class="text u-trim"
+                                    >{member.userName ? member.userName : 'n/a'}</span>
+                                {#if member.invited && !member.joined}
+                                    <Pill warning>Pending</Pill>
+                                {/if}
+                            </div>
+                        </TableCell>
+                        <TableCellText title="Email">{member.userEmail}</TableCellText>
+                        <TableCell title="Roles">
+                            {#if member.invited && !member.joined}
+                                <Button secondary>Resend</Button>
+                            {:else}
+                                {member.roles}
+                            {/if}
+                        </TableCell>
+
+                        <TableCell>
+                            <button
+                                class="button is-only-icon is-text"
+                                aria-label="Delete item"
+                                on:click|preventDefault={() => {
+                                    // selectedMembership = membership;
+                                    showDelete = true;
+                                }}>
+                                <span class="icon-trash" aria-hidden="true" />
+                            </button>
+                        </TableCell>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {$memberList.total}</p>
+            <Pagination {limit} bind:offset sum={$memberList.total} />
+        </div>
+    {/if}
+</Container>
diff --git a/src/routes/console/settings@intro.svelte b/src/routes/console/settings@intro.svelte
index 423bdc9e5..a01c11a41 100644
--- a/src/routes/console/settings@intro.svelte
+++ b/src/routes/console/settings@intro.svelte
@@ -1,5 +1 @@
-<svelte:head>
-    <title>Appwrite - Console</title>
-</svelte:head>
-
 settings
diff --git a/src/routes/console/store.ts b/src/routes/console/store.ts
index 5b90e4a26..1afbbef00 100644
--- a/src/routes/console/store.ts
+++ b/src/routes/console/store.ts
@@ -12,8 +12,8 @@ function createOrganizationList() {
         subscribe,
         set,
         load: async () => {
-            const team = await sdkForConsole.teams.list();
-            set(team);
+            const response = await sdkForConsole.teams.list();
+            set(response);
         }
     };
 }
@@ -26,8 +26,8 @@ function createOrganization() {
         subscribe,
         set,
         load: async (teamId: string) => {
-            const team = await sdkForConsole.teams.get(teamId);
-            set(team);
+            const response = await sdkForConsole.teams.get(teamId);
+            set(response);
         }
     };
 }
@@ -41,8 +41,28 @@ function createProjectList() {
         subscribe,
         set,
         load: async () => {
-            const projects = await sdkForConsole.projects.list();
-            set(projects);
+            const response = await sdkForConsole.projects.list();
+            set(response);
+        }
+    };
+}
+
+function createMemberList() {
+    const { subscribe, set } = writable<Models.MembershipList>(
+        browser ? JSON.parse(sessionStorage.getItem('memberList')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async (teamId: string, search: string, limit: number, offset: number) => {
+            const response = await sdkForConsole.teams.getMemberships(
+                teamId,
+                search,
+                limit,
+                offset
+            );
+            set(response);
         }
     };
 }
@@ -50,6 +70,7 @@ function createProjectList() {
 export const organizationList = createOrganizationList();
 export const organization = createOrganization();
 export const projectList = createProjectList();
+export const memberList = createMemberList();
 
 if (browser) {
     organizationList.subscribe((n) =>
@@ -57,4 +78,5 @@ if (browser) {
     );
     organization.subscribe((n) => sessionStorage?.setItem('organization', JSON.stringify(n ?? '')));
     projectList.subscribe((n) => sessionStorage?.setItem('projectList', JSON.stringify(n ?? '')));
+    memberList.subscribe((n) => sessionStorage?.setItem('memberList', JSON.stringify(n ?? '')));
 }

From 37f244a8586ae2a55fa20e28a3555d25bd034267 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 16 Aug 2022 17:10:36 +0200
Subject: [PATCH 049/118] fix by torsten

---
 src/lib/components/InnerModal.svelte          |  2 +-
 src/lib/components/alert.svelte               | 16 ++++----
 src/lib/components/modal.svelte               | 13 +++---
 src/lib/elements/forms/helper.svelte          | 26 +++++++-----
 src/lib/elements/forms/inputCheckbox.svelte   | 26 ++++++------
 src/lib/elements/forms/inputCustomId.svelte   |  2 +
 src/lib/elements/forms/inputEmail.svelte      | 25 ++++++-----
 src/lib/elements/forms/inputFile.svelte       |  2 +-
 src/lib/elements/forms/inputNumber.svelte     | 20 ++++-----
 src/lib/elements/forms/inputPassword.svelte   | 41 +++++++++----------
 src/lib/elements/forms/inputPhone.svelte      | 33 +++++++++------
 src/lib/elements/forms/inputRadio.svelte      | 23 +++++------
 src/lib/elements/forms/inputSearch.svelte     | 11 ++---
 src/lib/elements/forms/inputSelect.svelte     | 24 +++++------
 src/lib/elements/forms/inputSwitch.svelte     | 20 ++++-----
 src/lib/elements/forms/inputTags.svelte       | 27 ++++++------
 src/lib/elements/forms/inputText.svelte       | 22 +++++-----
 src/lib/elements/forms/inputTextarea.svelte   | 20 ++++-----
 src/lib/layout/notification.svelte            | 28 ++++++-------
 src/lib/layout/shell.svelte                   | 10 ++---
 .../console/[project]/storage/_create.svelte  | 29 +++++++------
 .../storage/bucket/[bucket]/_create.svelte    | 16 ++++----
 .../bucket/[bucket]/_deleteBucket.svelte      |  2 +-
 .../bucket/[bucket]/_deleteFile.svelte        |  2 +-
 .../[bucket]/file/[file]/_deleteFile.svelte   |  2 +-
 .../[project]/users/_appleOAuth.svelte        | 13 +++---
 .../[project]/users/_auth0OAuth.svelte        |  8 ++--
 .../[project]/users/_createTeam.svelte        | 15 +++----
 .../[project]/users/_createUser.svelte        | 28 +++++++------
 .../console/[project]/users/_mainOAuth.svelte | 10 +++--
 .../[project]/users/_microsoftOAuth.svelte    | 14 ++++---
 .../console/[project]/users/_oktaOAuth.svelte |  8 ++--
 .../teams/[team]/_createMembership.svelte     | 10 ++---
 .../teams/[team]/_deleteMembership.svelte     |  3 +-
 .../users/teams/[team]/_deleteTeam.svelte     |  2 +-
 .../user/[user]/_deleteAllMemberships.svelte  |  2 +-
 .../user/[user]/_deleteAllSessions.svelte     |  3 +-
 .../user/[user]/_deleteMembership.svelte      |  2 +-
 .../users/user/[user]/_deleteSession.svelte   |  2 +-
 .../users/user/[user]/_deleteUser.svelte      |  2 +-
 .../[project]/users/user/[user]/index.svelte  | 33 +++++++++------
 tests/unit/elements/inputPhone.test.ts        |  1 -
 vite.config.js                                |  2 +-
 43 files changed, 302 insertions(+), 298 deletions(-)

diff --git a/src/lib/components/InnerModal.svelte b/src/lib/components/InnerModal.svelte
index 5b59d4f1c..384880389 100644
--- a/src/lib/components/InnerModal.svelte
+++ b/src/lib/components/InnerModal.svelte
@@ -17,7 +17,7 @@
                 <span class="icon-x" aria-hidden="true" />
             </button>
             <p class="u-flex-basis-100-percent">
-                <slot />
+                <slot name="subtitle" />
             </p>
         </header>
         <div class="modal-content">
diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index f83488a7f..bf06d2c28 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -3,16 +3,9 @@
     import type { Buttons } from '../stores/notifications';
 
     export let dismissible = false;
-    export let type: '' | 'info' | 'success' | 'warning' | 'error' = 'info';
+    export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
     export let buttons: Buttons[] = [];
 
-    let icon = {
-        success: 'icon-check-circle',
-        warning: 'icon-exclamation',
-        error: 'icon-exclamation-circle',
-        info: 'icon-info'
-    };
-
     const dispatch = createEventDispatcher();
 </script>
 
@@ -31,7 +24,12 @@
                 <span class="icon-x" aria-hidden="true" />
             </button>
         {/if}
-        <span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
+        <span
+            class:icon-info={type === 'info'}
+            class:icon-check-circle={type === 'success'}
+            class:icon-exclamation={type === 'warning'}
+            class:icon-exclamation-circle={type === 'error'}
+            aria-hidden="true" />
         <div class="content">
             {#if $$slots.title}
                 <h6 class="title">
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 3a1263411..137463f0f 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { createEventDispatcher, onMount } from 'svelte';
+    import { browser } from '$app/env';
+    import { createEventDispatcher } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
     import { Alert } from '$lib/components';
 
@@ -7,11 +8,6 @@
     export let size: 'small' | 'big' = null;
     export let warning = false;
     export let error: string = null;
-    let browser = false;
-    //TODO: explore other solutions compatible with testing library
-    onMount(() => {
-        browser = true;
-    });
 
     const dispatch = createEventDispatcher();
     const transitionFly: FlyParams = {
@@ -28,19 +24,20 @@
             closeModal();
         }
     };
-
     const handleBLur = (event: MouseEvent) => {
         const target: Partial<HTMLElement> = event.target;
         if (target.hasAttribute('data-curtain')) {
             closeModal();
         }
     };
-
     const closeModal = () => {
         show = false;
         dispatch('close');
     };
 
+    /**
+     * Workaround until https://github.com/sveltejs/svelte/issues/3105 is resolved.
+     */
     $: if (browser) {
         if (show) {
             document.body.classList.add('u-overflow-hidden');
diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index 8cb9d8b46..52b662ee4 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -1,18 +1,22 @@
 <script lang="ts">
-    export let type: false | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
-
-    let icon = {
-        info: 'icon-info',
-        success: 'icon-check-circle',
-        warning: 'icon-exclamation',
-        error: 'icon-exclamation-circle',
-        neutral: 'icon-info'
-    };
+    export let type: 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
 </script>
 
-<p class={`helper u-${type} u-margin-block-start-12"`}>
+<p
+    class="helper u-margin-block-start-12"
+    class:u-info={type === 'info'}
+    class:u-error={type === 'error'}
+    class:u-success={type === 'success'}
+    class:u-warning={type === 'warning'}
+    class:u-neutral={type === 'neutral'}>
     {#if type}
-        <span class={icon[type] ?? ''} aria-hidden="true" />
+        <span
+            class:icon-info={type === 'info'}
+            class:icon-error={type === 'error'}
+            class:icon-success={type === 'success'}
+            class:icon-warning={type === 'warning'}
+            class:icon-neutral={type === 'neutral'}
+            aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />
diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index 6e9e3c75a..cecc2a441 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -7,23 +7,21 @@
     export let value = false;
     export let required = false;
     export let disabled = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
-        errorMessage = element.validationMessage;
-        if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
-        }
         event.preventDefault();
-        showHelper = true;
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -31,15 +29,15 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
-            bind:this={element}
             {id}
             {disabled}
             {required}
             type="checkbox"
-            bind:checked={value} />
+            bind:this={element}
+            bind:checked={value}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputCustomId.svelte b/src/lib/elements/forms/inputCustomId.svelte
index 2d30b8da4..09d43093e 100644
--- a/src/lib/elements/forms/inputCustomId.svelte
+++ b/src/lib/elements/forms/inputCustomId.svelte
@@ -7,9 +7,11 @@
     export let placeholder = '';
     export let required = false;
     export let autofocus = false;
+
     let element: HTMLInputElement;
     let unique = true;
     let bench = '';
+
     const toggle = async () => {
         unique = !unique;
         if (unique) {
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 9b07303d7..1358a5202 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -11,11 +11,9 @@
     export let disabled = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -25,18 +23,19 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
         if (element.validity.typeMismatch) {
-            errorMessage = 'Your email should be formatted as: name@example.com';
+            error = 'Your email should be formatted as: name@example.com';
+            return;
         }
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -44,18 +43,18 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
             {required}
-            autocomplete={autocomplete ? 'on' : 'off'}
             type="email"
             class="input-text"
+            autocomplete={autocomplete ? 'on' : 'off'}
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index 545523e77..bb1431cd4 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -12,6 +12,6 @@
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
-        <input {id} {disabled} {required} bind:files type="file" />
+        <input {id} {disabled} {required} type="file" bind:files />
     </div>
 </FormItem>
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index acf1453e6..1aab304d5 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -12,11 +12,9 @@
     export let autofocus = false;
     export let maxlength: number = null;
     export let minlength: number = null;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -27,16 +25,16 @@
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 
-        errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
 
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -44,7 +42,6 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -54,9 +51,10 @@
             type="number"
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 452834751..d1e0aa1fd 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -13,13 +13,11 @@
     export let meter = false;
     export let autocomplete = false;
     export let showPasswordButton = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
     export let minlength = 8;
     export let maxlength: number = null;
 
     let element: HTMLInputElement;
+    let error: string;
     let showInPlainText = false;
 
     onMount(() => {
@@ -30,21 +28,22 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
-        console.log(element.validity);
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
         if (element.validity.tooShort) {
-            errorMessage = 'Password should contain at least 8 characters';
+            error = 'Password should contain at least 8 characters';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
-    $: if (value) {
-        showHelper = false;
-    }
     $: strength = value ? value.length * 10 : 0;
+    $: if (value) {
+        error = null;
+    }
 </script>
 
 <FormItem>
@@ -52,32 +51,32 @@
     <div class="input-text-wrapper">
         {#if showInPlainText}
             <input
-                on:invalid={handleInvalid}
-                type="text"
                 {id}
-                name={id}
                 {placeholder}
                 {disabled}
-                autocomplete={autocomplete ? 'on' : 'off'}
                 {minlength}
                 {maxlength}
+                name={id}
+                type="text"
                 class="input-text"
+                autocomplete={autocomplete ? 'on' : 'off'}
                 bind:value
-                bind:this={element} />
+                bind:this={element}
+                on:invalid={handleInvalid} />
         {:else}
             <input
-                on:invalid={handleInvalid}
                 {id}
                 {placeholder}
                 {disabled}
                 {required}
-                autocomplete={autocomplete ? 'on' : 'off'}
                 {minlength}
                 {maxlength}
                 type="password"
                 class="input-text"
+                autocomplete={autocomplete ? 'on' : 'off'}
                 bind:value
-                bind:this={element} />
+                bind:this={element}
+                on:invalid={handleInvalid} />
         {/if}
 
         {#if meter}
@@ -104,7 +103,7 @@
             </button>
         {/if}
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 5fa512e5b..47e331e79 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -12,11 +12,11 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
-    export let errorMessage = 'Allowed characters: leading ‘+’ and maximum of 15 digits';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
+
+    const pattern = String.raw`^\+?[1-9]\d{1,14}$`;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -26,15 +26,21 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
-        if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+
+        if (element.validity.patternMismatch) {
+            error = "Allowed characters: leading '+' and maximum of 15 digits";
+            return;
         }
-        showHelper = true;
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -42,19 +48,20 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
             {required}
             {maxlength}
+            {pattern}
+            type="text"
             autocomplete={autocomplete ? 'on' : 'off'}
-            type="tel"
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 681885ac1..ac1734e0d 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -9,41 +9,40 @@
     export let name: string;
     export let required = false;
     export let disabled = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
 <FormItem>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
-            bind:this={element}
             {id}
             {name}
             {disabled}
             {required}
             {value}
             type="radio"
-            bind:group />
+            bind:group
+            bind:this={element}
+            on:invalid={handleInvalid} />
         <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
index 5b3651c40..e1806d3d7 100644
--- a/src/lib/elements/forms/inputSearch.svelte
+++ b/src/lib/elements/forms/inputSearch.svelte
@@ -40,16 +40,11 @@
         {required}
         type="search"
         class="input-text"
-        on:input={valueChange}
-        bind:this={element} />
+        bind:this={element}
+        on:input={valueChange} />
     <span class="icon-search" aria-hidden="true" />
     {#if isWithEndButton && value}
-        <button
-            class="x-button"
-            aria-label="Clear search"
-            on:click={() => {
-                value = '';
-            }}>
+        <button class="x-button" aria-label="Clear search" on:click={() => (value = '')}>
             <span class="icon-x" aria-hidden="true" />
         </button>
     {/if}
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 6129cb11e..ef96176c7 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -11,24 +11,22 @@
         value: string;
         label: string;
     }[];
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLSelectElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
 
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -36,12 +34,12 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="select">
         <select
-            on:invalid={handleInvalid}
-            bind:this={element}
-            bind:value
             {id}
             {required}
-            {disabled}>
+            {disabled}
+            bind:this={element}
+            bind:value
+            on:invalid={handleInvalid}>
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
                     {option.label}
@@ -50,7 +48,7 @@
         </select>
         <span class="icon-cheveron-down" aria-hidden="true" />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index 1e395cbfb..a4891363e 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -6,24 +6,22 @@
     export let value = false;
     export let required = false;
     export let disabled = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
 
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -31,7 +29,6 @@
     <label class="choice-item" for={id}>
         <div class="input-text-wrapper">
             <input
-                on:invalid={handleInvalid}
                 {id}
                 {disabled}
                 {required}
@@ -40,13 +37,14 @@
                 role="switch"
                 bind:this={element}
                 bind:checked={value}
-                on:change />
+                on:change
+                on:invalid={handleInvalid} />
         </div>
         <div class="choice-item-content">
             <div class="choice-item-title">{label}</div>
         </div>
     </label>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index a1d4e41e3..0ad75a294 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -8,12 +8,10 @@
     export let tags: string[] = [];
     export let placeholder = '';
     export let autofocus = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let value = '';
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -53,15 +51,16 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -88,18 +87,18 @@
                 </ul>
             </div>
             <input
-                on:invalid={handleInvalid}
-                type="text"
-                class="tags-input-text"
                 {id}
                 {placeholder}
+                type="text"
+                class="tags-input-text"
+                bind:value
+                bind:this={element}
                 on:keydown={handleInput}
                 on:blur={addValue}
-                bind:value
-                bind:this={element} />
+                on:invalid={handleInvalid} />
         </div>
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 5235c215c..013caca3f 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -12,11 +12,9 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -26,15 +24,17 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -42,7 +42,6 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -52,9 +51,10 @@
             type="text"
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 6d02c9675..5736943e7 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -11,11 +11,9 @@
     export let disabled = false;
     export let autofocus = false;
     export let maxlength: number = null;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLTextAreaElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -25,15 +23,15 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -41,7 +39,6 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <textarea
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -49,9 +46,10 @@
             {maxlength}
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index a5f8cbe35..0cca8694d 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -6,29 +6,25 @@
     export let title: Notification['title'];
     export let buttons: Notification['buttons'];
 
-    let icon = {
-        success: 'icon-check-circle',
-        warning: 'icon-exclamation',
-        error: 'icon-exclamation-circle',
-        info: 'icon-info'
-    };
-
-    let typeClass = {
-        success: 'is-success',
-        warning: 'is-warning',
-        error: 'is-danger',
-        info: 'is-info'
-    };
-
     const dispatch = createEventDispatcher();
 </script>
 
-<li class={`alert-sticky ${type ? typeClass[type] : ''}`}>
+<li
+    class="alert-sticky"
+    class:is-success={type === 'success'}
+    class:is-warning={type === 'warning'}
+    class:is-error={type === 'error'}
+    class:is-info={type === 'info'}>
     <button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
         <span class="icon-x" aria-hidden="true" />
     </button>
     <div class="alert-sticky-image">
-        <span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
+        <span
+            class:icon-check-cirle={type === 'success'}
+            class:icon-exclamation={type === 'warning'}
+            class:icon-exclamation-circle={type === 'error'}
+            class:icon-info={type === 'info'}
+            aria-hidden="true" />
     </div>
     <div class="alert-sticky-content">
         {#if title}
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 97ca79d1d..da74cd3eb 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -68,7 +68,7 @@
             class="icon-button is-no-desktop"
             aria-label="Open Menu"
             on:click={() => (isOpen = !isOpen)}>
-            <span class={isOpen ? 'icon-x' : 'icon-menu'} aria-hidden="true" />
+            <span class:icon-x={isOpen} class:icon-menu={!isOpen} aria-hidden="true" />
         </button>
         <slot name="header" />
     </header>
@@ -88,10 +88,10 @@
                 </h1>
                 {#if $copyData?.value}
                     <Copy value={$copyData.value}>
-                        <Pill button
-                            ><span
-                                class="icon-duplicate"
-                                aria-hidden="true" />{$copyData.text}</Pill>
+                        <Pill button>
+                            <span class="icon-duplicate" aria-hidden="true" />
+                            {$copyData.text}
+                        </Pill>
                     </Copy>
                 {/if}
             </svelte:fragment>
diff --git a/src/routes/console/[project]/storage/_create.svelte b/src/routes/console/[project]/storage/_create.svelte
index 801526f5c..f4b926da8 100644
--- a/src/routes/console/[project]/storage/_create.svelte
+++ b/src/routes/console/[project]/storage/_create.svelte
@@ -12,7 +12,7 @@
     let name = '';
     let id: string = null;
     let showDropdown = false;
-    let modalError: string;
+    let error: string;
 
     const create = async () => {
         try {
@@ -24,8 +24,8 @@
             name = null;
             showCreate = false;
             dispatch('created', bucket);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -34,12 +34,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
-        modalError = null;
+        error = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Bucket</svelte:fragment>
         <FormList>
             <InputText
@@ -52,15 +52,17 @@
 
             {#if !showDropdown}
                 <div>
-                    <Pill button on:click={() => (showDropdown = !showDropdown)}
-                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            Bucket ID
-                        </span></Pill>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                        <span class="icon-pencil" aria-hidden="true" />
+                        <span class="text"> Bucket ID </span>
+                    </Pill>
                 </div>
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">Bucket ID</svelte:fragment>
-                    <p>Enter a custom bucket ID. Leave blank for a randomly generated one.</p>
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom bucket ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
@@ -75,9 +77,10 @@
                                 <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>
+                                <span class="text u-line-height-1-5">
+                                    Allowed characters: alphanumeric, hyphen, non-leading
+                                    underscore, period
+                                </span>
                             </div>
                         </div>
                     </svelte:fragment>
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
index 30f6aa42c..38317a0af 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
@@ -19,8 +19,8 @@
     let read: string[] = [];
     let write: string[] = [];
     let id: string = null;
+    let error: string;
     let showDropdown = false;
-    let modalError: string;
 
     const create = async () => {
         try {
@@ -36,8 +36,8 @@
             showDropdown = false;
             uploader.addFile(file);
             dispatch('created');
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -68,12 +68,10 @@
     }
 
     $: if (!showCreate) {
-        id = null;
+        id = files = error = null;
         list = new DataTransfer();
-        files = null;
         read = [];
         write = [];
-        modalError = null;
     }
 
     $: if (!showDropdown) {
@@ -84,7 +82,7 @@
 <input bind:files id="file" type="file" style="display: none" />
 
 <Form on:submit={create}>
-    <Modal error={modalError} bind:show={showCreate}>
+    <Modal {error} bind:show={showCreate}>
         <svelte:fragment slot="header">Upload File</svelte:fragment>
         <FormList>
             <div>
@@ -135,7 +133,9 @@
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">File ID</svelte:fragment>
-                    <p>Enter a custom file ID. Leave blank for a randomly generated one.</p>
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom file ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
index 550883a4b..a8e89db1c 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Form on:submit={deleteUser}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Bucket</svelte:fragment>
         <p>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
index c05dbeb69..b21e98870 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteFile}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete File</svelte:fragment>
         <p>Are you sure you want to delete <b>{file.name}</b>?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
index b7276efbf..065012aec 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Form on:submit={deleteFile}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete File</svelte:fragment>
         <p>Are you sure you want to delete <b>{$file.name}</b>?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/users/_appleOAuth.svelte
index 4804311f1..605a45405 100644
--- a/src/routes/console/[project]/users/_appleOAuth.svelte
+++ b/src/routes/console/[project]/users/_appleOAuth.svelte
@@ -16,7 +16,7 @@
     export let provider: Provider;
 
     let { keyID, teamID, p8 } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
     const update = async () => {
@@ -29,21 +29,22 @@
                 secret
             );
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
                 To use {provider.name} authentication in your application, first fill in this form. For
                 more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
-                    >visit the docs.</a>
+                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+                    visit the docs.
+                </a>
             </p>
             <InputSwitch
                 id="state"
diff --git a/src/routes/console/[project]/users/_auth0OAuth.svelte b/src/routes/console/[project]/users/_auth0OAuth.svelte
index f3dc7425a..179c58607 100644
--- a/src/routes/console/[project]/users/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/users/_auth0OAuth.svelte
@@ -16,7 +16,7 @@
     export let provider: Provider;
 
     let { clientSecret, auth0Domain } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
     const update = async () => {
@@ -29,14 +29,14 @@
                 secret
             );
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/users/_createTeam.svelte
index f53aaaef0..109e91f92 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -10,9 +10,8 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, id: string;
+    let name: string, id: string, error: string;
     let showDropdown = false;
-    let modalError: string;
 
     const create = async () => {
         try {
@@ -25,8 +24,8 @@
                 message: `${team.name} has been created`
             });
             dispatch('created', team);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -35,12 +34,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
-        modalError = null;
+        error = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Team</svelte:fragment>
         <FormList>
             <InputText
@@ -59,7 +58,9 @@
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">Team ID</svelte:fragment>
-                    Enter a custom team ID. Leave blank for a randomly generated one.
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom team ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index 7f56bde87..8f33df69f 100644
--- a/src/routes/console/[project]/users/_createUser.svelte
+++ b/src/routes/console/[project]/users/_createUser.svelte
@@ -19,7 +19,7 @@
 
     let showDropdown = false;
     let name: string, mail: string, pass: string, id: string;
-    let modalError: string;
+    let error: string;
 
     const create = async () => {
         try {
@@ -32,8 +32,8 @@
                 message: `${user.name} has been created`
             });
             dispatch('created', user);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -42,12 +42,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
-        modalError = null;
+        error = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</svelte:fragment>
         <FormList>
             <InputText
@@ -72,15 +72,18 @@
 
             {#if !showDropdown}
                 <div>
-                    <Pill button on:click={() => (showDropdown = !showDropdown)}
-                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
                             User ID
-                        </span></Pill>
+                        </span>
+                    </Pill>
                 </div>
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">User ID</svelte:fragment>
-                    Enter a custom user ID. Leave blank for a randomly generated one.
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom user ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
@@ -95,9 +98,10 @@
                                 <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>
+                                <span class="text u-line-height-1-5">
+                                    Allowed characters: alphanumeric, hyphen, non-leading
+                                    underscore, period
+                                </span>
                             </div>
                         </div>
                     </svelte:fragment>
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/users/_mainOAuth.svelte
index 7429b7385..c760a1fdb 100644
--- a/src/routes/console/[project]/users/_mainOAuth.svelte
+++ b/src/routes/console/[project]/users/_mainOAuth.svelte
@@ -14,8 +14,10 @@
 
     export let showModal = false;
     export let provider: Provider;
+
     const projectId = $page.params.project;
-    let modalError: string;
+
+    let error: string;
 
     const update = async () => {
         try {
@@ -26,14 +28,14 @@
                 provider.secret
             );
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_microsoftOAuth.svelte b/src/routes/console/[project]/users/_microsoftOAuth.svelte
index 73e1ae506..d1e0a2938 100644
--- a/src/routes/console/[project]/users/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/users/_microsoftOAuth.svelte
@@ -14,8 +14,9 @@
 
     export let showModal = false;
     export let provider: Provider;
+
     let { clientSecret, tenantID } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
 
@@ -30,21 +31,22 @@
             );
 
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
                 To use {provider.name} authentication in your application, first fill in this form. For
                 more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
-                    >visit the docs.</a>
+                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+                    visit the docs.
+                </a>
             </p>
             <InputSwitch
                 id="state"
diff --git a/src/routes/console/[project]/users/_oktaOAuth.svelte b/src/routes/console/[project]/users/_oktaOAuth.svelte
index ad34410d2..aa0ec1786 100644
--- a/src/routes/console/[project]/users/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/users/_oktaOAuth.svelte
@@ -16,7 +16,7 @@
     export let provider: Provider;
 
     let { clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
 
@@ -31,14 +31,14 @@
             );
 
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte b/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
index 53df2076f..d128d7b22 100644
--- a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
@@ -11,8 +11,8 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, email: string, roles: [];
-    let modalError: string;
+    let name: string, email: string, roles: string[];
+    let error: string;
 
     const create = async () => {
         const url = `${$page.url.origin}/console/${$page.params.project}/users/teams/${$page.params.team}/members`;
@@ -33,14 +33,14 @@
             roles = [];
             showCreate = false;
             dispatch('created', user);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Membership</svelte:fragment>
         <FormList>
             <InputEmail
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
index 22c68152f..4551afd99 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
@@ -35,9 +35,8 @@
 </script>
 
 <Form on:submit={deleteMembership}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Member</svelte:fragment>
-
         <p>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
         </p>
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
index 1b1a18398..dacd5e9d2 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteTeam}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Team</svelte:fragment>
 
         <p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
index f5c76479c..da8a539c3 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Form on:submit={deleteAllMemberships}>
-    <Modal warning={true} bind:show={showDeleteAll}>
+    <Modal bind:show={showDeleteAll} warning>
         <svelte:fragment slot="header">Delete All Memberships</svelte:fragment>
 
         <p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte b/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
index 8905281b6..13ec19bad 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
@@ -26,9 +26,8 @@
 </script>
 
 <Form on:submit={deleteAllSessions}>
-    <Modal warning={true} bind:show={showDeleteAll}>
+    <Modal bind:show={showDeleteAll} warning>
         <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
-
         <p>
             Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
         </p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
index 4d5cf77f8..30e5f4a8b 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <Form on:submit={deleteMembership}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Member</svelte:fragment>
         <p>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte b/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
index ee2ca5781..b447e8f90 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteSession}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Sessions</svelte:fragment>
 
         <p>Are you sure you want to delete this session?</p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
index 2b2d31892..ca9482f6f 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <Form on:submit={deleteUser}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete User</svelte:fragment>
         <p>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index 2d685b872..0278da85f 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -228,7 +228,8 @@
                     text={$user.status}
                     secondary={!$user.status}
                     on:click={() => updateStatus()}
-                    >{$user.status ? 'Block account' : 'Unblock account'}</Button>
+                    >{$user.status ? 'Block account' : 'Unblock account'}
+                </Button>
                 {#if $user.status}
                     {#if $user.phone && $user.email}
                         <DropList
@@ -244,12 +245,16 @@
                                 {$user.emailVerification ? 'Unverify' : 'Verify'} account
                             </Button>
                             <svelte:fragment slot="list">
-                                <DropListItem icon="mail" on:click={() => updateVerificationEmail()}
-                                    >{$user.emailVerification ? 'Unverify' : 'Verify'} email</DropListItem>
+                                <DropListItem
+                                    icon="mail"
+                                    on:click={() => updateVerificationEmail()}>
+                                    {$user.emailVerification ? 'Unverify' : 'Verify'} email
+                                </DropListItem>
                                 <DropListItem
                                     icon="phone"
                                     on:click={() => updateVerificationPhone()}>
-                                    {$user.phoneVerification ? 'Unverify' : 'Verify'} phone</DropListItem>
+                                    {$user.phoneVerification ? 'Unverify' : 'Verify'} phone
+                                </DropListItem>
                             </svelte:fragment>
                         </DropList>
                     {:else if !$user.phone}
@@ -300,8 +305,9 @@
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
-                    <Button disabled={userEmail === $user.email || !userEmail} submit
-                        >Update</Button>
+                    <Button disabled={userEmail === $user.email || !userEmail} submit>
+                        Update
+                    </Button>
                 </svelte:fragment>
             </CardGrid>
         </Form>
@@ -321,8 +327,9 @@
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
-                    <Button disabled={userPhone === $user.phone || !userPhone} submit
-                        >Update</Button>
+                    <Button disabled={userPhone === $user.phone || !userPhone} submit>
+                        Update
+                    </Button>
                 </svelte:fragment>
             </CardGrid>
         </Form>
@@ -334,7 +341,7 @@
                 </div>
 
                 <p>
-                    Enter a new password. A password must contain <b> at least 8 characters.</b>
+                    Enter a new password. A password must contain <b>at least 8 characters.</b>
                 </p>
                 <svelte:fragment slot="aside">
                     <ul>
@@ -380,8 +387,9 @@
                                             </div>
                                         </div>
                                         <div class="form-item-part u-stretch">
-                                            <label class="label" for={`value-${index}`}
-                                                >Value</label>
+                                            <label class="label" for={`value-${index}`}>
+                                                Value
+                                            </label>
                                             <div class="input-text-wrapper">
                                                 <input
                                                     id={`value-${value}`}
@@ -419,7 +427,8 @@
                                 }
                             }}>
                             <span class="icon-plus" aria-hidden="true" />
-                            <span class="text"> Add Preference </span></Button>
+                            <span class="text">Add Preference</span>
+                        </Button>
                     </form>
                 </svelte:fragment>
 
diff --git a/tests/unit/elements/inputPhone.test.ts b/tests/unit/elements/inputPhone.test.ts
index ff180f4d8..f5370b119 100644
--- a/tests/unit/elements/inputPhone.test.ts
+++ b/tests/unit/elements/inputPhone.test.ts
@@ -9,7 +9,6 @@ test('shows phone input', () => {
 
     expect(getByText('input')).toBeInTheDocument();
     expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'tel');
 });
 
 test('shows phone input - required', () => {
diff --git a/vite.config.js b/vite.config.js
index 8c3afb766..2c66ac739 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -19,7 +19,7 @@ const config = {
         include: ['tests/**/*.test.ts'],
         globals: true,
         environment: 'jsdom',
-        thread: true
+        threads: true
     }
 };
 

From f0d3b4ed657d47c738c4413b4bc9c829b4e3c5b3 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 16 Aug 2022 17:21:08 +0200
Subject: [PATCH 050/118] update packages

---
 package-lock.json | 1016 +++++++++++++++++++--------------------------
 package.json      |   25 +-
 2 files changed, 450 insertions(+), 591 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7d3cfe055..6fd99f61c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,38 +15,44 @@
                 "tippy.js": "^6.3.7"
             },
             "devDependencies": {
-                "@playwright/test": "^1.24.0",
-                "@sveltejs/adapter-auto": "1.0.0-next.63",
-                "@sveltejs/kit": "1.0.0-next.390",
+                "@playwright/test": "^1.25.0",
+                "@sveltejs/adapter-auto": "1.0.0-next.64",
+                "@sveltejs/kit": "1.0.0-next.405",
                 "@sveltejs/vite-plugin-svelte": "^1.0.1",
-                "@testing-library/dom": "^8.16.0",
-                "@testing-library/jest-dom": "^5.16.4",
+                "@testing-library/dom": "^8.17.1",
+                "@testing-library/jest-dom": "^5.16.5",
                 "@testing-library/svelte": "^3.1.3",
                 "@testing-library/user-event": "^14.3.0",
                 "@types/gtag.js": "^0.0.10",
-                "@typescript-eslint/eslint-plugin": "^5.30.7",
-                "@typescript-eslint/parser": "^5.30.7",
-                "@vitest/ui": "^0.18.1",
-                "eslint": "^8.20.0",
+                "@typescript-eslint/eslint-plugin": "^5.33.1",
+                "@typescript-eslint/parser": "^5.33.1",
+                "@vitest/ui": "^0.22.0",
+                "eslint": "^8.22.0",
                 "eslint-config-prettier": "^8.5.0",
                 "eslint-plugin-svelte3": "^4.0.0",
                 "pre-commit": "^1.2.2",
                 "prettier": "^2.7.1",
                 "prettier-plugin-svelte": "^2.7.0",
-                "sass": "^1.53.0",
+                "sass": "^1.54.4",
                 "svelte": "^3.49.0",
                 "svelte-check": "^2.8.0",
                 "svelte-jester": "^2.3.2",
                 "svelte-preprocess": "^4.10.7",
                 "tslib": "^2.4.0",
                 "typescript": "^4.7.4",
-                "vite": "^3.0.0",
-                "vitest": "^0.18.1"
+                "vite": "^3.0.8",
+                "vitest": "^0.22.0"
             },
             "engines": {
                 "node": ">=16"
             }
         },
+        "node_modules/@adobe/css-tools": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
+            "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==",
+            "dev": true
+        },
         "node_modules/@ampproject/remapping": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
@@ -736,9 +742,9 @@
             }
         },
         "node_modules/@humanwhocodes/config-array": {
-            "version": "0.9.3",
-            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz",
-            "integrity": "sha512-3xSMlXHh03hCcCmFc0rbKp3Ivt2PFEJnQUJDDMTJQ2wkECZWdq4GePs2ctc5H8zV+cHPaq8k2vU8mrQjA6iHdQ==",
+            "version": "0.10.4",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
+            "integrity": "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==",
             "dev": true,
             "dependencies": {
                 "@humanwhocodes/object-schema": "^1.2.1",
@@ -749,6 +755,16 @@
                 "node": ">=10.10.0"
             }
         },
+        "node_modules/@humanwhocodes/gitignore-to-minimatch": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
+            "integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
+            "dev": true,
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
+        },
         "node_modules/@humanwhocodes/object-schema": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
@@ -1241,13 +1257,13 @@
             }
         },
         "node_modules/@playwright/test": {
-            "version": "1.24.0",
-            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.24.0.tgz",
-            "integrity": "sha512-sZLH2N6aWN9TtG+vMjNSomSfX0dSVHwWE+GhHQPV+ZeGcuZ/6CgMCGFuGjobgq/hNF9ZkuVOjeyoceZ0owKnHQ==",
+            "version": "1.25.0",
+            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.25.0.tgz",
+            "integrity": "sha512-j4EZhTTQI3dBeWblE21EV//swwmBtOpIrLdOIJIRv4uqsLdHgBg1z+JtTg+AeC5o2bAXIE26kDNW5A0TimG8Bg==",
             "dev": true,
             "dependencies": {
                 "@types/node": "*",
-                "playwright-core": "1.24.0"
+                "playwright-core": "1.25.0"
             },
             "bin": {
                 "playwright": "cli.js"
@@ -1311,20 +1327,20 @@
             }
         },
         "node_modules/@sveltejs/adapter-auto": {
-            "version": "1.0.0-next.63",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.63.tgz",
-            "integrity": "sha512-9KguXwROEJMyyoKrsizAilVSmtfWxEDn2Hbxk44SP8Kj5cgN7tFCxzbL2kmmqyV1CO1tOh5iNC2oWbyTfikXmw==",
+            "version": "1.0.0-next.64",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.64.tgz",
+            "integrity": "sha512-Q8DwcS6wl1GovzS9JJzaD/WL/Lfk1ur4nAF1HtmsUvZDpsPBVDqnK2AhYU4G3oFNiuHstrjAogMy5th8ptSFGw==",
             "dev": true,
             "dependencies": {
-                "@sveltejs/adapter-cloudflare": "1.0.0-next.30",
-                "@sveltejs/adapter-netlify": "1.0.0-next.70",
-                "@sveltejs/adapter-vercel": "1.0.0-next.65"
+                "@sveltejs/adapter-cloudflare": "1.0.0-next.31",
+                "@sveltejs/adapter-netlify": "1.0.0-next.71",
+                "@sveltejs/adapter-vercel": "1.0.0-next.66"
             }
         },
         "node_modules/@sveltejs/adapter-cloudflare": {
-            "version": "1.0.0-next.30",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-1.0.0-next.30.tgz",
-            "integrity": "sha512-jIclgb58n3Uoo8TTudXSa7wmLP7Rn/ESLQS+zOUe0xsti5DG/eDhELTnSvkoSa2lJY21ym5rej/GSERRyeuBVw==",
+            "version": "1.0.0-next.31",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-1.0.0-next.31.tgz",
+            "integrity": "sha512-HhEFZP72GJ8AZGgFECKIiayDcLaAWi65pI0AnBfiNhCifYSlH/mPNWNVD4AWRDnXnH6XU+FLwhGDnIDwytTyYg==",
             "dev": true,
             "dependencies": {
                 "@cloudflare/workers-types": "^3.14.0",
@@ -1333,9 +1349,9 @@
             }
         },
         "node_modules/@sveltejs/adapter-netlify": {
-            "version": "1.0.0-next.70",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.70.tgz",
-            "integrity": "sha512-lIXY6KIgIFBz4+mdvilx9Ny8oFV7T2iVTKLirJayoI/SqPWGAcxklvWvjGfS4QT8rS9pWKDaKRUQM4M/gl8LlA==",
+            "version": "1.0.0-next.71",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.71.tgz",
+            "integrity": "sha512-la1CGtWO1xul1L3zEoFAoc4EX2uxZjrZcOMS3tkKB8drxhbQsNbnTE6fmSSMFiZXhxaikczrBgQwqIaDkLTmZg==",
             "dev": true,
             "dependencies": {
                 "@iarna/toml": "^2.2.5",
@@ -1345,24 +1361,26 @@
             }
         },
         "node_modules/@sveltejs/adapter-vercel": {
-            "version": "1.0.0-next.65",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.65.tgz",
-            "integrity": "sha512-RV3HL7Ic7pGgIoBSHPwN1pBX96Km1X683oHImPHAKX9h/WOvJZ3bY5+IWNRcR8tx9rPB5gfMRg+msvPSBr3RVw==",
+            "version": "1.0.0-next.66",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.66.tgz",
+            "integrity": "sha512-s3Hcxu9nCG/rR3C3cFbdQGjTa5W4K2kRcc6S5Xefx7itbrw+4v3KpO8ZPB6qM55XDwVxuG7260NMHVI6MUGmSA==",
             "dev": true,
             "dependencies": {
-                "@vercel/nft": "^0.20.0",
+                "@vercel/nft": "^0.21.0",
                 "esbuild": "^0.14.48"
             }
         },
         "node_modules/@sveltejs/kit": {
-            "version": "1.0.0-next.390",
-            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.390.tgz",
-            "integrity": "sha512-BlWjFL7v1y2vIYHMYMwH2Iy49eOkaunQ8jElQ9qMlC2kp/IdP3uLulS12ZX3oOURxoJICB4gQ82uEyjxen/kdQ==",
+            "version": "1.0.0-next.405",
+            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.405.tgz",
+            "integrity": "sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==",
             "dev": true,
+            "hasInstallScript": true,
             "dependencies": {
                 "@sveltejs/vite-plugin-svelte": "^1.0.1",
                 "chokidar": "^3.5.3",
-                "sade": "^1.8.1"
+                "sade": "^1.8.1",
+                "tiny-glob": "^0.2.9"
             },
             "bin": {
                 "svelte-kit": "svelte-kit.js"
@@ -1415,9 +1433,9 @@
             }
         },
         "node_modules/@testing-library/dom": {
-            "version": "8.16.0",
-            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.16.0.tgz",
-            "integrity": "sha512-uxF4zmnLHHDlmW4l+0WDjcgLVwCvH+OVLpD8Dfp+Bjfz85prwxWGbwXgJdLtkgjD0qfOzkJF9SmA6YZPsMYX4w==",
+            "version": "8.17.1",
+            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.17.1.tgz",
+            "integrity": "sha512-KnH2MnJUzmFNPW6RIKfd+zf2Wue8mEKX0M3cpX6aKl5ZXrJM1/c/Pc8c2xDNYQCnJO48Sm5ITbMXgqTr3h4jxQ==",
             "dev": true,
             "dependencies": {
                 "@babel/code-frame": "^7.10.4",
@@ -1434,16 +1452,16 @@
             }
         },
         "node_modules/@testing-library/jest-dom": {
-            "version": "5.16.4",
-            "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
-            "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
+            "version": "5.16.5",
+            "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
+            "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
             "dev": true,
             "dependencies": {
+                "@adobe/css-tools": "^4.0.1",
                 "@babel/runtime": "^7.9.2",
                 "@types/testing-library__jest-dom": "^5.9.1",
                 "aria-query": "^5.0.0",
                 "chalk": "^3.0.0",
-                "css": "^3.0.0",
                 "css.escape": "^1.5.1",
                 "dom-accessibility-api": "^0.5.6",
                 "lodash": "^4.17.15",
@@ -1559,9 +1577,9 @@
             }
         },
         "node_modules/@types/chai": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.1.tgz",
-            "integrity": "sha512-/zPMqDkzSZ8t3VtxOa4KPq7uzzW978M9Tvh+j7GHKuo6k6GTLxPJ4J5gE5cjfJ26pnXst0N5Hax8Sr0T2Mi9zQ==",
+            "version": "4.3.3",
+            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.3.tgz",
+            "integrity": "sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==",
             "dev": true
         },
         "node_modules/@types/chai-subset": {
@@ -1727,14 +1745,14 @@
             "peer": true
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.7.tgz",
-            "integrity": "sha512-l4L6Do+tfeM2OK0GJsU7TUcM/1oN/N25xHm3Jb4z3OiDU4Lj8dIuxX9LpVMS9riSXQs42D1ieX7b85/r16H9Fw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.33.1.tgz",
+            "integrity": "sha512-S1iZIxrTvKkU3+m63YUOxYPKaP+yWDQrdhxTglVDVEVBf+aCSw85+BmJnyUaQQsk5TXFG/LpBu9fa+LrAQ91fQ==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/type-utils": "5.30.7",
-                "@typescript-eslint/utils": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/type-utils": "5.33.1",
+                "@typescript-eslint/utils": "5.33.1",
                 "debug": "^4.3.4",
                 "functional-red-black-tree": "^1.0.1",
                 "ignore": "^5.2.0",
@@ -1760,14 +1778,14 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.7.tgz",
-            "integrity": "sha512-Rg5xwznHWWSy7v2o0cdho6n+xLhK2gntImp0rJroVVFkcYFYQ8C8UJTSuTw/3CnExBmPjycjmUJkxVmjXsld6A==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.33.1.tgz",
+            "integrity": "sha512-IgLLtW7FOzoDlmaMoXdxG8HOCByTBXrB1V2ZQYSEV1ggMmJfAkMWTwUjjzagS6OkfpySyhKFkBw7A9jYmcHpZA==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/typescript-estree": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/typescript-estree": "5.33.1",
                 "debug": "^4.3.4"
             },
             "engines": {
@@ -1787,13 +1805,13 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.7.tgz",
-            "integrity": "sha512-7BM1bwvdF1UUvt+b9smhqdc/eniOnCKxQT/kj3oXtj3LqnTWCAM0qHRHfyzCzhEfWX0zrW7KqXXeE4DlchZBKw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.33.1.tgz",
+            "integrity": "sha512-8ibcZSqy4c5m69QpzJn8XQq9NnqAToC8OdH/W6IXPXv83vRyEDPYLdjAlUx8h/rbusq6MkW4YdQzURGOqsn3CA==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/visitor-keys": "5.30.7"
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/visitor-keys": "5.33.1"
             },
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1804,12 +1822,12 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.7.tgz",
-            "integrity": "sha512-nD5qAE2aJX/YLyKMvOU5jvJyku4QN5XBVsoTynFrjQZaDgDV6i7QHFiYCx10wvn7hFvfuqIRNBtsgaLe0DbWhw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.33.1.tgz",
+            "integrity": "sha512-X3pGsJsD8OiqhNa5fim41YtlnyiWMF/eKsEZGsHID2HcDqeSC5yr/uLOeph8rNF2/utwuI0IQoAK3fpoxcLl2g==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/utils": "5.30.7",
+                "@typescript-eslint/utils": "5.33.1",
                 "debug": "^4.3.4",
                 "tsutils": "^3.21.0"
             },
@@ -1830,9 +1848,9 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.7.tgz",
-            "integrity": "sha512-ocVkETUs82+U+HowkovV6uxf1AnVRKCmDRNUBUUo46/5SQv1owC/EBFkiu4MOHeZqhKz2ktZ3kvJJ1uFqQ8QPg==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.33.1.tgz",
+            "integrity": "sha512-7K6MoQPQh6WVEkMrMW5QOA5FO+BOwzHSNd0j3+BlBwd6vtzfZceJ8xJ7Um2XDi/O3umS8/qDX6jdy2i7CijkwQ==",
             "dev": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1843,13 +1861,13 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.7.tgz",
-            "integrity": "sha512-tNslqXI1ZdmXXrHER83TJ8OTYl4epUzJC0aj2i4DMDT4iU+UqLT3EJeGQvJ17BMbm31x5scSwo3hPM0nqQ1AEA==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.33.1.tgz",
+            "integrity": "sha512-JOAzJ4pJ+tHzA2pgsWQi4804XisPHOtbvwUyqsuuq8+y5B5GMZs7lI1xDWs6V2d7gE/Ez5bTGojSK12+IIPtXA==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/visitor-keys": "5.30.7",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/visitor-keys": "5.33.1",
                 "debug": "^4.3.4",
                 "globby": "^11.1.0",
                 "is-glob": "^4.0.3",
@@ -1870,15 +1888,15 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.7.tgz",
-            "integrity": "sha512-Z3pHdbFw+ftZiGUnm1GZhkJgVqsDL5CYW2yj+TB2mfXDFOMqtbzQi2dNJIyPqPbx9mv2kUxS1gU+r2gKlKi1rQ==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.33.1.tgz",
+            "integrity": "sha512-uphZjkMaZ4fE8CR4dU7BquOV6u0doeQAr8n6cQenl/poMaIyJtBu8eys5uk6u5HiDH01Mj5lzbJ5SfeDz7oqMQ==",
             "dev": true,
             "dependencies": {
                 "@types/json-schema": "^7.0.9",
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/typescript-estree": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/typescript-estree": "5.33.1",
                 "eslint-scope": "^5.1.1",
                 "eslint-utils": "^3.0.0"
             },
@@ -1894,12 +1912,12 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.7.tgz",
-            "integrity": "sha512-KrRXf8nnjvcpxDFOKej4xkD7657+PClJs5cJVSG7NNoCNnjEdc46juNAQt7AyuWctuCgs6mVRc1xGctEqrjxWw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.33.1.tgz",
+            "integrity": "sha512-nwIxOK8Z2MPWltLKMLOEZwmfBZReqUdbEoHQXeCpa+sRVARe5twpJGHCB4dk9903Yaf0nMAlGbQfaAH92F60eg==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.30.7",
+                "@typescript-eslint/types": "5.33.1",
                 "eslint-visitor-keys": "^3.3.0"
             },
             "engines": {
@@ -1911,13 +1929,14 @@
             }
         },
         "node_modules/@vercel/nft": {
-            "version": "0.20.1",
-            "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.20.1.tgz",
-            "integrity": "sha512-hSLcr64KHOkcNiTAlv154K4p4faEFBwYIi2eIgu1QCDhB1qyQYvFuEhtw3eaapNjA4/7x/2jcclfCAjILua/ag==",
+            "version": "0.21.0",
+            "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.21.0.tgz",
+            "integrity": "sha512-hFCAETfI5cG8l5iAiLhMC2bReC5K7SIybzrxGorv+eGspIbIFsVw7Vg85GovXm/LxA08pIDrAlrhR6GN36XB/Q==",
             "dev": true,
             "dependencies": {
                 "@mapbox/node-pre-gyp": "^1.0.5",
                 "acorn": "^8.6.0",
+                "async-sema": "^3.1.1",
                 "bindings": "^1.4.0",
                 "estree-walker": "2.0.2",
                 "glob": "^7.1.3",
@@ -1941,9 +1960,9 @@
             }
         },
         "node_modules/@vitest/ui": {
-            "version": "0.18.1",
-            "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-0.18.1.tgz",
-            "integrity": "sha512-JgYewAWfx9fN/cjOW6fPh63j9EDiHmDpVXzvp7UJeza+26QoYHXVsgjCmnzP/jjH3i/LkOXlJLqEJw/nJQ+IJg==",
+            "version": "0.22.0",
+            "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-0.22.0.tgz",
+            "integrity": "sha512-Xyqa0M7l6OxGipCBsKwrDWQB96itqb8h3ZP8mSnuths+xTWucIC7LIU6MAe4cSTlLvGCeihecPJPs5l5GAucgA==",
             "dev": true,
             "dependencies": {
                 "sirv": "^2.0.2"
@@ -1964,9 +1983,9 @@
             "dev": true
         },
         "node_modules/acorn": {
-            "version": "8.7.1",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-            "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+            "version": "8.8.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+            "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
             "dev": true,
             "bin": {
                 "acorn": "bin/acorn"
@@ -2181,23 +2200,17 @@
                 "node": "*"
             }
         },
+        "node_modules/async-sema": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.1.1.tgz",
+            "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
+            "dev": true
+        },
         "node_modules/asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
             "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
         },
-        "node_modules/atob": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-            "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-            "dev": true,
-            "bin": {
-                "atob": "bin/atob.js"
-            },
-            "engines": {
-                "node": ">= 4.5.0"
-            }
-        },
         "node_modules/babel-jest": {
             "version": "28.1.3",
             "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.3.tgz",
@@ -2397,134 +2410,6 @@
             "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
             "dev": true
         },
-        "node_modules/c8": {
-            "version": "7.12.0",
-            "resolved": "https://registry.npmjs.org/c8/-/c8-7.12.0.tgz",
-            "integrity": "sha512-CtgQrHOkyxr5koX1wEUmN/5cfDa2ckbHRA4Gy5LAL0zaCFtVWJS5++n+w4/sr2GWGerBxgTjpKeDclk/Qk6W/A==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "@bcoe/v8-coverage": "^0.2.3",
-                "@istanbuljs/schema": "^0.1.3",
-                "find-up": "^5.0.0",
-                "foreground-child": "^2.0.0",
-                "istanbul-lib-coverage": "^3.2.0",
-                "istanbul-lib-report": "^3.0.0",
-                "istanbul-reports": "^3.1.4",
-                "rimraf": "^3.0.2",
-                "test-exclude": "^6.0.0",
-                "v8-to-istanbul": "^9.0.0",
-                "yargs": "^16.2.0",
-                "yargs-parser": "^20.2.9"
-            },
-            "bin": {
-                "c8": "bin/c8.js"
-            },
-            "engines": {
-                "node": ">=10.12.0"
-            }
-        },
-        "node_modules/c8/node_modules/find-up": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "locate-path": "^6.0.0",
-                "path-exists": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/c8/node_modules/locate-path": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "p-locate": "^5.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/c8/node_modules/p-limit": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "yocto-queue": "^0.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/c8/node_modules/p-locate": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "p-limit": "^3.0.2"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/c8/node_modules/yargs": {
-            "version": "16.2.0",
-            "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-            "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "cliui": "^7.0.2",
-                "escalade": "^3.1.1",
-                "get-caller-file": "^2.0.5",
-                "require-directory": "^2.1.1",
-                "string-width": "^4.2.0",
-                "y18n": "^5.0.5",
-                "yargs-parser": "^20.2.2"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/c8/node_modules/yargs-parser": {
-            "version": "20.2.9",
-            "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-            "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/callsites": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2803,17 +2688,6 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/css": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-            "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-            "dev": true,
-            "dependencies": {
-                "inherits": "^2.0.4",
-                "source-map": "^0.6.1",
-                "source-map-resolve": "^0.6.0"
-            }
-        },
         "node_modules/css.escape": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -2906,15 +2780,6 @@
             "optional": true,
             "peer": true
         },
-        "node_modules/decode-uri-component": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-            "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
-            "dev": true,
-            "engines": {
-                "node": ">=0.10"
-            }
-        },
         "node_modules/dedent": {
             "version": "0.7.0",
             "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -3259,13 +3124,14 @@
             }
         },
         "node_modules/eslint": {
-            "version": "8.20.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.20.0.tgz",
-            "integrity": "sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==",
+            "version": "8.22.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.22.0.tgz",
+            "integrity": "sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==",
             "dev": true,
             "dependencies": {
                 "@eslint/eslintrc": "^1.3.0",
-                "@humanwhocodes/config-array": "^0.9.2",
+                "@humanwhocodes/config-array": "^0.10.4",
+                "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
                 "ajv": "^6.10.0",
                 "chalk": "^4.0.0",
                 "cross-spawn": "^7.0.2",
@@ -3275,14 +3141,17 @@
                 "eslint-scope": "^7.1.1",
                 "eslint-utils": "^3.0.0",
                 "eslint-visitor-keys": "^3.3.0",
-                "espree": "^9.3.2",
+                "espree": "^9.3.3",
                 "esquery": "^1.4.0",
                 "esutils": "^2.0.2",
                 "fast-deep-equal": "^3.1.3",
                 "file-entry-cache": "^6.0.1",
+                "find-up": "^5.0.0",
                 "functional-red-black-tree": "^1.0.1",
                 "glob-parent": "^6.0.1",
                 "globals": "^13.15.0",
+                "globby": "^11.1.0",
+                "grapheme-splitter": "^1.0.4",
                 "ignore": "^5.2.0",
                 "import-fresh": "^3.0.0",
                 "imurmurhash": "^0.1.4",
@@ -3403,18 +3272,82 @@
                 "node": ">=4.0"
             }
         },
-        "node_modules/espree": {
-            "version": "9.3.2",
-            "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
-            "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+        "node_modules/eslint/node_modules/find-up": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
             "dev": true,
             "dependencies": {
-                "acorn": "^8.7.1",
+                "locate-path": "^6.0.0",
+                "path-exists": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint/node_modules/locate-path": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+            "dev": true,
+            "dependencies": {
+                "p-locate": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint/node_modules/p-limit": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
+            "dependencies": {
+                "yocto-queue": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint/node_modules/p-locate": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+            "dev": true,
+            "dependencies": {
+                "p-limit": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/espree": {
+            "version": "9.3.3",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.3.tgz",
+            "integrity": "sha512-ORs1Rt/uQTqUKjDdGCyrtYxbazf5umATSf/K4qxjmZHORR6HJk+2s/2Pqe+Kk49HHINC/xNIrGfgh8sZcll0ng==",
+            "dev": true,
+            "dependencies": {
+                "acorn": "^8.8.0",
                 "acorn-jsx": "^5.3.2",
                 "eslint-visitor-keys": "^3.3.0"
             },
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
             }
         },
         "node_modules/esprima": {
@@ -3686,21 +3619,6 @@
             "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
             "dev": true
         },
-        "node_modules/foreground-child": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
-            "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "cross-spawn": "^7.0.0",
-                "signal-exit": "^3.0.2"
-            },
-            "engines": {
-                "node": ">=8.0.0"
-            }
-        },
         "node_modules/form-data": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -3735,6 +3653,20 @@
             "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",
@@ -3904,6 +3836,12 @@
             "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
             "dev": true
         },
+        "node_modules/grapheme-splitter": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+            "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+            "dev": true
+        },
         "node_modules/has": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5990,7 +5928,6 @@
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
             "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
             "dev": true,
-            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -6079,9 +6016,9 @@
             }
         },
         "node_modules/playwright-core": {
-            "version": "1.24.0",
-            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.24.0.tgz",
-            "integrity": "sha512-BkDWdVsoEEC8m2glQlfNu1EN2qvjBsLIg5bD0wjrfwv9zVHktIsp80yYFObAcWreLNYhfRP4PlXE04lr5R4DFQ==",
+            "version": "1.25.0",
+            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.25.0.tgz",
+            "integrity": "sha512-kZ3Jwaf3wlu0GgU0nB8UMQ+mXFTqBIFz9h1svTlNduNKjnbPXFxw7mJanLVjqxHJRn62uBfmgBj93YHidk2N5Q==",
             "dev": true,
             "bin": {
                 "playwright": "cli.js"
@@ -6091,9 +6028,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.14",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-            "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+            "version": "8.4.16",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+            "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
             "dev": true,
             "funding": [
                 {
@@ -6590,9 +6527,9 @@
             }
         },
         "node_modules/sass": {
-            "version": "1.53.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
-            "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+            "version": "1.54.4",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
+            "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
             "dev": true,
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -6642,9 +6579,9 @@
             "dev": true
         },
         "node_modules/set-cookie-parser": {
-            "version": "2.5.0",
-            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.0.tgz",
-            "integrity": "sha512-cHMAtSXilfyBePduZEBVPTCftTQWz6ehWJD5YNUg4mqvRosrrjKbo4WS8JkB0/RxonMoohHm7cOGH60mDkRQ9w==",
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
+            "integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==",
             "dev": true
         },
         "node_modules/shebang-command": {
@@ -6724,6 +6661,7 @@
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
             "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
             "dev": true,
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -6737,17 +6675,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/source-map-resolve": {
-            "version": "0.6.0",
-            "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
-            "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-            "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
-            "dev": true,
-            "dependencies": {
-                "atob": "^2.1.2",
-                "decode-uri-component": "^0.2.0"
-            }
-        },
         "node_modules/source-map-support": {
             "version": "0.5.13",
             "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -7365,15 +7292,15 @@
             }
         },
         "node_modules/vite": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.2.tgz",
-            "integrity": "sha512-TAqydxW/w0U5AoL5AsD9DApTvGb2iNbGs3sN4u2VdT1GFkQVUfgUldt+t08TZgi23uIauh1TUOQJALduo9GXqw==",
+            "version": "3.0.8",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.8.tgz",
+            "integrity": "sha512-AOZ4eN7mrkJiOLuw8IA7piS4IdOQyQCA81GxGsAQvAZzMRi9ZwGB3TOaYsj4uLAWK46T5L4AfQ6InNGlxX30IQ==",
             "dev": true,
             "dependencies": {
                 "esbuild": "^0.14.47",
-                "postcss": "^8.4.14",
+                "postcss": "^8.4.16",
                 "resolve": "^1.22.1",
-                "rollup": "^2.75.6"
+                "rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
             },
             "bin": {
                 "vite": "bin/vite.js"
@@ -7406,12 +7333,12 @@
             }
         },
         "node_modules/vitest": {
-            "version": "0.18.1",
-            "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.18.1.tgz",
-            "integrity": "sha512-4F/1K/Vn4AvJwe7i2YblR02PT5vMKcw9KN4unDq2KD0YcSxX0B/6D6Qu9PJaXwVuxXMFTQ5ovd4+CQaW3bwofA==",
+            "version": "0.22.0",
+            "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.22.0.tgz",
+            "integrity": "sha512-BSIro/QOHLaQY08FHwT6THWhqLQ+VPU+N4Rdo4pcP+16XB6oLmNNAXGcSh/MOLUhfUy+mqCwx7AyKmU7Ms5R+g==",
             "dev": true,
             "dependencies": {
-                "@types/chai": "^4.3.1",
+                "@types/chai": "^4.3.3",
                 "@types/chai-subset": "^1.3.3",
                 "@types/node": "*",
                 "chai": "^4.3.6",
@@ -7432,8 +7359,8 @@
             },
             "peerDependencies": {
                 "@edge-runtime/vm": "*",
+                "@vitest/browser": "*",
                 "@vitest/ui": "*",
-                "c8": "*",
                 "happy-dom": "*",
                 "jsdom": "*"
             },
@@ -7441,10 +7368,10 @@
                 "@edge-runtime/vm": {
                     "optional": true
                 },
-                "@vitest/ui": {
+                "@vitest/browser": {
                     "optional": true
                 },
-                "c8": {
+                "@vitest/ui": {
                     "optional": true
                 },
                 "happy-dom": {
@@ -7717,7 +7644,6 @@
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
             "dev": true,
-            "peer": true,
             "engines": {
                 "node": ">=10"
             },
@@ -7740,6 +7666,12 @@
         }
     },
     "dependencies": {
+        "@adobe/css-tools": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
+            "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==",
+            "dev": true
+        },
         "@ampproject/remapping": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
@@ -8282,9 +8214,9 @@
             }
         },
         "@humanwhocodes/config-array": {
-            "version": "0.9.3",
-            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz",
-            "integrity": "sha512-3xSMlXHh03hCcCmFc0rbKp3Ivt2PFEJnQUJDDMTJQ2wkECZWdq4GePs2ctc5H8zV+cHPaq8k2vU8mrQjA6iHdQ==",
+            "version": "0.10.4",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
+            "integrity": "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==",
             "dev": true,
             "requires": {
                 "@humanwhocodes/object-schema": "^1.2.1",
@@ -8292,6 +8224,12 @@
                 "minimatch": "^3.0.4"
             }
         },
+        "@humanwhocodes/gitignore-to-minimatch": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
+            "integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
+            "dev": true
+        },
         "@humanwhocodes/object-schema": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
@@ -8693,13 +8631,13 @@
             }
         },
         "@playwright/test": {
-            "version": "1.24.0",
-            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.24.0.tgz",
-            "integrity": "sha512-sZLH2N6aWN9TtG+vMjNSomSfX0dSVHwWE+GhHQPV+ZeGcuZ/6CgMCGFuGjobgq/hNF9ZkuVOjeyoceZ0owKnHQ==",
+            "version": "1.25.0",
+            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.25.0.tgz",
+            "integrity": "sha512-j4EZhTTQI3dBeWblE21EV//swwmBtOpIrLdOIJIRv4uqsLdHgBg1z+JtTg+AeC5o2bAXIE26kDNW5A0TimG8Bg==",
             "dev": true,
             "requires": {
                 "@types/node": "*",
-                "playwright-core": "1.24.0"
+                "playwright-core": "1.25.0"
             }
         },
         "@polka/url": {
@@ -8750,20 +8688,20 @@
             }
         },
         "@sveltejs/adapter-auto": {
-            "version": "1.0.0-next.63",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.63.tgz",
-            "integrity": "sha512-9KguXwROEJMyyoKrsizAilVSmtfWxEDn2Hbxk44SP8Kj5cgN7tFCxzbL2kmmqyV1CO1tOh5iNC2oWbyTfikXmw==",
+            "version": "1.0.0-next.64",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.64.tgz",
+            "integrity": "sha512-Q8DwcS6wl1GovzS9JJzaD/WL/Lfk1ur4nAF1HtmsUvZDpsPBVDqnK2AhYU4G3oFNiuHstrjAogMy5th8ptSFGw==",
             "dev": true,
             "requires": {
-                "@sveltejs/adapter-cloudflare": "1.0.0-next.30",
-                "@sveltejs/adapter-netlify": "1.0.0-next.70",
-                "@sveltejs/adapter-vercel": "1.0.0-next.65"
+                "@sveltejs/adapter-cloudflare": "1.0.0-next.31",
+                "@sveltejs/adapter-netlify": "1.0.0-next.71",
+                "@sveltejs/adapter-vercel": "1.0.0-next.66"
             }
         },
         "@sveltejs/adapter-cloudflare": {
-            "version": "1.0.0-next.30",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-1.0.0-next.30.tgz",
-            "integrity": "sha512-jIclgb58n3Uoo8TTudXSa7wmLP7Rn/ESLQS+zOUe0xsti5DG/eDhELTnSvkoSa2lJY21ym5rej/GSERRyeuBVw==",
+            "version": "1.0.0-next.31",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-1.0.0-next.31.tgz",
+            "integrity": "sha512-HhEFZP72GJ8AZGgFECKIiayDcLaAWi65pI0AnBfiNhCifYSlH/mPNWNVD4AWRDnXnH6XU+FLwhGDnIDwytTyYg==",
             "dev": true,
             "requires": {
                 "@cloudflare/workers-types": "^3.14.0",
@@ -8772,9 +8710,9 @@
             }
         },
         "@sveltejs/adapter-netlify": {
-            "version": "1.0.0-next.70",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.70.tgz",
-            "integrity": "sha512-lIXY6KIgIFBz4+mdvilx9Ny8oFV7T2iVTKLirJayoI/SqPWGAcxklvWvjGfS4QT8rS9pWKDaKRUQM4M/gl8LlA==",
+            "version": "1.0.0-next.71",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.71.tgz",
+            "integrity": "sha512-la1CGtWO1xul1L3zEoFAoc4EX2uxZjrZcOMS3tkKB8drxhbQsNbnTE6fmSSMFiZXhxaikczrBgQwqIaDkLTmZg==",
             "dev": true,
             "requires": {
                 "@iarna/toml": "^2.2.5",
@@ -8784,24 +8722,25 @@
             }
         },
         "@sveltejs/adapter-vercel": {
-            "version": "1.0.0-next.65",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.65.tgz",
-            "integrity": "sha512-RV3HL7Ic7pGgIoBSHPwN1pBX96Km1X683oHImPHAKX9h/WOvJZ3bY5+IWNRcR8tx9rPB5gfMRg+msvPSBr3RVw==",
+            "version": "1.0.0-next.66",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.66.tgz",
+            "integrity": "sha512-s3Hcxu9nCG/rR3C3cFbdQGjTa5W4K2kRcc6S5Xefx7itbrw+4v3KpO8ZPB6qM55XDwVxuG7260NMHVI6MUGmSA==",
             "dev": true,
             "requires": {
-                "@vercel/nft": "^0.20.0",
+                "@vercel/nft": "^0.21.0",
                 "esbuild": "^0.14.48"
             }
         },
         "@sveltejs/kit": {
-            "version": "1.0.0-next.390",
-            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.390.tgz",
-            "integrity": "sha512-BlWjFL7v1y2vIYHMYMwH2Iy49eOkaunQ8jElQ9qMlC2kp/IdP3uLulS12ZX3oOURxoJICB4gQ82uEyjxen/kdQ==",
+            "version": "1.0.0-next.405",
+            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.405.tgz",
+            "integrity": "sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==",
             "dev": true,
             "requires": {
                 "@sveltejs/vite-plugin-svelte": "^1.0.1",
                 "chokidar": "^3.5.3",
-                "sade": "^1.8.1"
+                "sade": "^1.8.1",
+                "tiny-glob": "^0.2.9"
             }
         },
         "@sveltejs/vite-plugin-svelte": {
@@ -8830,9 +8769,9 @@
             }
         },
         "@testing-library/dom": {
-            "version": "8.16.0",
-            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.16.0.tgz",
-            "integrity": "sha512-uxF4zmnLHHDlmW4l+0WDjcgLVwCvH+OVLpD8Dfp+Bjfz85prwxWGbwXgJdLtkgjD0qfOzkJF9SmA6YZPsMYX4w==",
+            "version": "8.17.1",
+            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.17.1.tgz",
+            "integrity": "sha512-KnH2MnJUzmFNPW6RIKfd+zf2Wue8mEKX0M3cpX6aKl5ZXrJM1/c/Pc8c2xDNYQCnJO48Sm5ITbMXgqTr3h4jxQ==",
             "dev": true,
             "requires": {
                 "@babel/code-frame": "^7.10.4",
@@ -8846,16 +8785,16 @@
             }
         },
         "@testing-library/jest-dom": {
-            "version": "5.16.4",
-            "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
-            "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
+            "version": "5.16.5",
+            "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
+            "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
             "dev": true,
             "requires": {
+                "@adobe/css-tools": "^4.0.1",
                 "@babel/runtime": "^7.9.2",
                 "@types/testing-library__jest-dom": "^5.9.1",
                 "aria-query": "^5.0.0",
                 "chalk": "^3.0.0",
-                "css": "^3.0.0",
                 "css.escape": "^1.5.1",
                 "dom-accessibility-api": "^0.5.6",
                 "lodash": "^4.17.15",
@@ -8950,9 +8889,9 @@
             }
         },
         "@types/chai": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.1.tgz",
-            "integrity": "sha512-/zPMqDkzSZ8t3VtxOa4KPq7uzzW978M9Tvh+j7GHKuo6k6GTLxPJ4J5gE5cjfJ26pnXst0N5Hax8Sr0T2Mi9zQ==",
+            "version": "4.3.3",
+            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.3.tgz",
+            "integrity": "sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==",
             "dev": true
         },
         "@types/chai-subset": {
@@ -9111,14 +9050,14 @@
             "peer": true
         },
         "@typescript-eslint/eslint-plugin": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.7.tgz",
-            "integrity": "sha512-l4L6Do+tfeM2OK0GJsU7TUcM/1oN/N25xHm3Jb4z3OiDU4Lj8dIuxX9LpVMS9riSXQs42D1ieX7b85/r16H9Fw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.33.1.tgz",
+            "integrity": "sha512-S1iZIxrTvKkU3+m63YUOxYPKaP+yWDQrdhxTglVDVEVBf+aCSw85+BmJnyUaQQsk5TXFG/LpBu9fa+LrAQ91fQ==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/type-utils": "5.30.7",
-                "@typescript-eslint/utils": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/type-utils": "5.33.1",
+                "@typescript-eslint/utils": "5.33.1",
                 "debug": "^4.3.4",
                 "functional-red-black-tree": "^1.0.1",
                 "ignore": "^5.2.0",
@@ -9128,52 +9067,52 @@
             }
         },
         "@typescript-eslint/parser": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.7.tgz",
-            "integrity": "sha512-Rg5xwznHWWSy7v2o0cdho6n+xLhK2gntImp0rJroVVFkcYFYQ8C8UJTSuTw/3CnExBmPjycjmUJkxVmjXsld6A==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.33.1.tgz",
+            "integrity": "sha512-IgLLtW7FOzoDlmaMoXdxG8HOCByTBXrB1V2ZQYSEV1ggMmJfAkMWTwUjjzagS6OkfpySyhKFkBw7A9jYmcHpZA==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/typescript-estree": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/typescript-estree": "5.33.1",
                 "debug": "^4.3.4"
             }
         },
         "@typescript-eslint/scope-manager": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.7.tgz",
-            "integrity": "sha512-7BM1bwvdF1UUvt+b9smhqdc/eniOnCKxQT/kj3oXtj3LqnTWCAM0qHRHfyzCzhEfWX0zrW7KqXXeE4DlchZBKw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.33.1.tgz",
+            "integrity": "sha512-8ibcZSqy4c5m69QpzJn8XQq9NnqAToC8OdH/W6IXPXv83vRyEDPYLdjAlUx8h/rbusq6MkW4YdQzURGOqsn3CA==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/visitor-keys": "5.30.7"
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/visitor-keys": "5.33.1"
             }
         },
         "@typescript-eslint/type-utils": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.7.tgz",
-            "integrity": "sha512-nD5qAE2aJX/YLyKMvOU5jvJyku4QN5XBVsoTynFrjQZaDgDV6i7QHFiYCx10wvn7hFvfuqIRNBtsgaLe0DbWhw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.33.1.tgz",
+            "integrity": "sha512-X3pGsJsD8OiqhNa5fim41YtlnyiWMF/eKsEZGsHID2HcDqeSC5yr/uLOeph8rNF2/utwuI0IQoAK3fpoxcLl2g==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/utils": "5.30.7",
+                "@typescript-eslint/utils": "5.33.1",
                 "debug": "^4.3.4",
                 "tsutils": "^3.21.0"
             }
         },
         "@typescript-eslint/types": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.7.tgz",
-            "integrity": "sha512-ocVkETUs82+U+HowkovV6uxf1AnVRKCmDRNUBUUo46/5SQv1owC/EBFkiu4MOHeZqhKz2ktZ3kvJJ1uFqQ8QPg==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.33.1.tgz",
+            "integrity": "sha512-7K6MoQPQh6WVEkMrMW5QOA5FO+BOwzHSNd0j3+BlBwd6vtzfZceJ8xJ7Um2XDi/O3umS8/qDX6jdy2i7CijkwQ==",
             "dev": true
         },
         "@typescript-eslint/typescript-estree": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.7.tgz",
-            "integrity": "sha512-tNslqXI1ZdmXXrHER83TJ8OTYl4epUzJC0aj2i4DMDT4iU+UqLT3EJeGQvJ17BMbm31x5scSwo3hPM0nqQ1AEA==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.33.1.tgz",
+            "integrity": "sha512-JOAzJ4pJ+tHzA2pgsWQi4804XisPHOtbvwUyqsuuq8+y5B5GMZs7lI1xDWs6V2d7gE/Ez5bTGojSK12+IIPtXA==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/visitor-keys": "5.30.7",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/visitor-keys": "5.33.1",
                 "debug": "^4.3.4",
                 "globby": "^11.1.0",
                 "is-glob": "^4.0.3",
@@ -9182,37 +9121,38 @@
             }
         },
         "@typescript-eslint/utils": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.7.tgz",
-            "integrity": "sha512-Z3pHdbFw+ftZiGUnm1GZhkJgVqsDL5CYW2yj+TB2mfXDFOMqtbzQi2dNJIyPqPbx9mv2kUxS1gU+r2gKlKi1rQ==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.33.1.tgz",
+            "integrity": "sha512-uphZjkMaZ4fE8CR4dU7BquOV6u0doeQAr8n6cQenl/poMaIyJtBu8eys5uk6u5HiDH01Mj5lzbJ5SfeDz7oqMQ==",
             "dev": true,
             "requires": {
                 "@types/json-schema": "^7.0.9",
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/typescript-estree": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/typescript-estree": "5.33.1",
                 "eslint-scope": "^5.1.1",
                 "eslint-utils": "^3.0.0"
             }
         },
         "@typescript-eslint/visitor-keys": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.7.tgz",
-            "integrity": "sha512-KrRXf8nnjvcpxDFOKej4xkD7657+PClJs5cJVSG7NNoCNnjEdc46juNAQt7AyuWctuCgs6mVRc1xGctEqrjxWw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.33.1.tgz",
+            "integrity": "sha512-nwIxOK8Z2MPWltLKMLOEZwmfBZReqUdbEoHQXeCpa+sRVARe5twpJGHCB4dk9903Yaf0nMAlGbQfaAH92F60eg==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.30.7",
+                "@typescript-eslint/types": "5.33.1",
                 "eslint-visitor-keys": "^3.3.0"
             }
         },
         "@vercel/nft": {
-            "version": "0.20.1",
-            "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.20.1.tgz",
-            "integrity": "sha512-hSLcr64KHOkcNiTAlv154K4p4faEFBwYIi2eIgu1QCDhB1qyQYvFuEhtw3eaapNjA4/7x/2jcclfCAjILua/ag==",
+            "version": "0.21.0",
+            "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.21.0.tgz",
+            "integrity": "sha512-hFCAETfI5cG8l5iAiLhMC2bReC5K7SIybzrxGorv+eGspIbIFsVw7Vg85GovXm/LxA08pIDrAlrhR6GN36XB/Q==",
             "dev": true,
             "requires": {
                 "@mapbox/node-pre-gyp": "^1.0.5",
                 "acorn": "^8.6.0",
+                "async-sema": "^3.1.1",
                 "bindings": "^1.4.0",
                 "estree-walker": "2.0.2",
                 "glob": "^7.1.3",
@@ -9232,9 +9172,9 @@
             }
         },
         "@vitest/ui": {
-            "version": "0.18.1",
-            "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-0.18.1.tgz",
-            "integrity": "sha512-JgYewAWfx9fN/cjOW6fPh63j9EDiHmDpVXzvp7UJeza+26QoYHXVsgjCmnzP/jjH3i/LkOXlJLqEJw/nJQ+IJg==",
+            "version": "0.22.0",
+            "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-0.22.0.tgz",
+            "integrity": "sha512-Xyqa0M7l6OxGipCBsKwrDWQB96itqb8h3ZP8mSnuths+xTWucIC7LIU6MAe4cSTlLvGCeihecPJPs5l5GAucgA==",
             "dev": true,
             "requires": {
                 "sirv": "^2.0.2"
@@ -9255,9 +9195,9 @@
             "dev": true
         },
         "acorn": {
-            "version": "8.7.1",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-            "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+            "version": "8.8.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+            "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
             "dev": true
         },
         "acorn-globals": {
@@ -9415,17 +9355,17 @@
             "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
             "dev": true
         },
+        "async-sema": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.1.1.tgz",
+            "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
+            "dev": true
+        },
         "asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
             "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
         },
-        "atob": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-            "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-            "dev": true
-        },
         "babel-jest": {
             "version": "28.1.3",
             "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.3.tgz",
@@ -9585,100 +9525,6 @@
             "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
             "dev": true
         },
-        "c8": {
-            "version": "7.12.0",
-            "resolved": "https://registry.npmjs.org/c8/-/c8-7.12.0.tgz",
-            "integrity": "sha512-CtgQrHOkyxr5koX1wEUmN/5cfDa2ckbHRA4Gy5LAL0zaCFtVWJS5++n+w4/sr2GWGerBxgTjpKeDclk/Qk6W/A==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "requires": {
-                "@bcoe/v8-coverage": "^0.2.3",
-                "@istanbuljs/schema": "^0.1.3",
-                "find-up": "^5.0.0",
-                "foreground-child": "^2.0.0",
-                "istanbul-lib-coverage": "^3.2.0",
-                "istanbul-lib-report": "^3.0.0",
-                "istanbul-reports": "^3.1.4",
-                "rimraf": "^3.0.2",
-                "test-exclude": "^6.0.0",
-                "v8-to-istanbul": "^9.0.0",
-                "yargs": "^16.2.0",
-                "yargs-parser": "^20.2.9"
-            },
-            "dependencies": {
-                "find-up": {
-                    "version": "5.0.0",
-                    "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-                    "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true,
-                    "requires": {
-                        "locate-path": "^6.0.0",
-                        "path-exists": "^4.0.0"
-                    }
-                },
-                "locate-path": {
-                    "version": "6.0.0",
-                    "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-                    "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true,
-                    "requires": {
-                        "p-locate": "^5.0.0"
-                    }
-                },
-                "p-limit": {
-                    "version": "3.1.0",
-                    "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-                    "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true,
-                    "requires": {
-                        "yocto-queue": "^0.1.0"
-                    }
-                },
-                "p-locate": {
-                    "version": "5.0.0",
-                    "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-                    "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true,
-                    "requires": {
-                        "p-limit": "^3.0.2"
-                    }
-                },
-                "yargs": {
-                    "version": "16.2.0",
-                    "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-                    "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true,
-                    "requires": {
-                        "cliui": "^7.0.2",
-                        "escalade": "^3.1.1",
-                        "get-caller-file": "^2.0.5",
-                        "require-directory": "^2.1.1",
-                        "string-width": "^4.2.0",
-                        "y18n": "^5.0.5",
-                        "yargs-parser": "^20.2.2"
-                    }
-                },
-                "yargs-parser": {
-                    "version": "20.2.9",
-                    "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-                    "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true
-                }
-            }
-        },
         "callsites": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -9898,17 +9744,6 @@
                 "which": "^2.0.1"
             }
         },
-        "css": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-            "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-            "dev": true,
-            "requires": {
-                "inherits": "^2.0.4",
-                "source-map": "^0.6.1",
-                "source-map-resolve": "^0.6.0"
-            }
-        },
         "css.escape": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -9988,12 +9823,6 @@
             "optional": true,
             "peer": true
         },
-        "decode-uri-component": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-            "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
-            "dev": true
-        },
         "dedent": {
             "version": "0.7.0",
             "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -10260,13 +10089,14 @@
             }
         },
         "eslint": {
-            "version": "8.20.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.20.0.tgz",
-            "integrity": "sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==",
+            "version": "8.22.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.22.0.tgz",
+            "integrity": "sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==",
             "dev": true,
             "requires": {
                 "@eslint/eslintrc": "^1.3.0",
-                "@humanwhocodes/config-array": "^0.9.2",
+                "@humanwhocodes/config-array": "^0.10.4",
+                "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
                 "ajv": "^6.10.0",
                 "chalk": "^4.0.0",
                 "cross-spawn": "^7.0.2",
@@ -10276,14 +10106,17 @@
                 "eslint-scope": "^7.1.1",
                 "eslint-utils": "^3.0.0",
                 "eslint-visitor-keys": "^3.3.0",
-                "espree": "^9.3.2",
+                "espree": "^9.3.3",
                 "esquery": "^1.4.0",
                 "esutils": "^2.0.2",
                 "fast-deep-equal": "^3.1.3",
                 "file-entry-cache": "^6.0.1",
+                "find-up": "^5.0.0",
                 "functional-red-black-tree": "^1.0.1",
                 "glob-parent": "^6.0.1",
                 "globals": "^13.15.0",
+                "globby": "^11.1.0",
+                "grapheme-splitter": "^1.0.4",
                 "ignore": "^5.2.0",
                 "import-fresh": "^3.0.0",
                 "imurmurhash": "^0.1.4",
@@ -10317,6 +10150,43 @@
                     "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
                     "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
                     "dev": true
+                },
+                "find-up": {
+                    "version": "5.0.0",
+                    "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+                    "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+                    "dev": true,
+                    "requires": {
+                        "locate-path": "^6.0.0",
+                        "path-exists": "^4.0.0"
+                    }
+                },
+                "locate-path": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+                    "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+                    "dev": true,
+                    "requires": {
+                        "p-locate": "^5.0.0"
+                    }
+                },
+                "p-limit": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+                    "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+                    "dev": true,
+                    "requires": {
+                        "yocto-queue": "^0.1.0"
+                    }
+                },
+                "p-locate": {
+                    "version": "5.0.0",
+                    "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+                    "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+                    "dev": true,
+                    "requires": {
+                        "p-limit": "^3.0.2"
+                    }
                 }
             }
         },
@@ -10368,12 +10238,12 @@
             "dev": true
         },
         "espree": {
-            "version": "9.3.2",
-            "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
-            "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+            "version": "9.3.3",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.3.tgz",
+            "integrity": "sha512-ORs1Rt/uQTqUKjDdGCyrtYxbazf5umATSf/K4qxjmZHORR6HJk+2s/2Pqe+Kk49HHINC/xNIrGfgh8sZcll0ng==",
             "dev": true,
             "requires": {
-                "acorn": "^8.7.1",
+                "acorn": "^8.8.0",
                 "acorn-jsx": "^5.3.2",
                 "eslint-visitor-keys": "^3.3.0"
             }
@@ -10597,18 +10467,6 @@
             "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
             "dev": true
         },
-        "foreground-child": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
-            "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "requires": {
-                "cross-spawn": "^7.0.0",
-                "signal-exit": "^3.0.2"
-            }
-        },
         "form-data": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -10637,6 +10495,13 @@
             "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",
@@ -10764,6 +10629,12 @@
             "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
             "dev": true
         },
+        "grapheme-splitter": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+            "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+            "dev": true
+        },
         "has": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -12374,8 +12245,7 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
             "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-            "dev": true,
-            "peer": true
+            "dev": true
         },
         "path-is-absolute": {
             "version": "1.0.1",
@@ -12437,15 +12307,15 @@
             }
         },
         "playwright-core": {
-            "version": "1.24.0",
-            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.24.0.tgz",
-            "integrity": "sha512-BkDWdVsoEEC8m2glQlfNu1EN2qvjBsLIg5bD0wjrfwv9zVHktIsp80yYFObAcWreLNYhfRP4PlXE04lr5R4DFQ==",
+            "version": "1.25.0",
+            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.25.0.tgz",
+            "integrity": "sha512-kZ3Jwaf3wlu0GgU0nB8UMQ+mXFTqBIFz9h1svTlNduNKjnbPXFxw7mJanLVjqxHJRn62uBfmgBj93YHidk2N5Q==",
             "dev": true
         },
         "postcss": {
-            "version": "8.4.14",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-            "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+            "version": "8.4.16",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+            "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
             "dev": true,
             "requires": {
                 "nanoid": "^3.3.4",
@@ -12812,9 +12682,9 @@
             }
         },
         "sass": {
-            "version": "1.53.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
-            "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+            "version": "1.54.4",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
+            "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
             "dev": true,
             "requires": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -12849,9 +12719,9 @@
             "dev": true
         },
         "set-cookie-parser": {
-            "version": "2.5.0",
-            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.0.tgz",
-            "integrity": "sha512-cHMAtSXilfyBePduZEBVPTCftTQWz6ehWJD5YNUg4mqvRosrrjKbo4WS8JkB0/RxonMoohHm7cOGH60mDkRQ9w==",
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
+            "integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==",
             "dev": true
         },
         "shebang-command": {
@@ -12915,7 +12785,8 @@
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
             "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-            "dev": true
+            "dev": true,
+            "peer": true
         },
         "source-map-js": {
             "version": "1.0.2",
@@ -12923,16 +12794,6 @@
             "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
             "dev": true
         },
-        "source-map-resolve": {
-            "version": "0.6.0",
-            "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
-            "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-            "dev": true,
-            "requires": {
-                "atob": "^2.1.2",
-                "decode-uri-component": "^0.2.0"
-            }
-        },
         "source-map-support": {
             "version": "0.5.13",
             "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -13371,25 +13232,25 @@
             }
         },
         "vite": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.2.tgz",
-            "integrity": "sha512-TAqydxW/w0U5AoL5AsD9DApTvGb2iNbGs3sN4u2VdT1GFkQVUfgUldt+t08TZgi23uIauh1TUOQJALduo9GXqw==",
+            "version": "3.0.8",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.8.tgz",
+            "integrity": "sha512-AOZ4eN7mrkJiOLuw8IA7piS4IdOQyQCA81GxGsAQvAZzMRi9ZwGB3TOaYsj4uLAWK46T5L4AfQ6InNGlxX30IQ==",
             "dev": true,
             "requires": {
                 "esbuild": "^0.14.47",
                 "fsevents": "~2.3.2",
-                "postcss": "^8.4.14",
+                "postcss": "^8.4.16",
                 "resolve": "^1.22.1",
-                "rollup": "^2.75.6"
+                "rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
             }
         },
         "vitest": {
-            "version": "0.18.1",
-            "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.18.1.tgz",
-            "integrity": "sha512-4F/1K/Vn4AvJwe7i2YblR02PT5vMKcw9KN4unDq2KD0YcSxX0B/6D6Qu9PJaXwVuxXMFTQ5ovd4+CQaW3bwofA==",
+            "version": "0.22.0",
+            "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.22.0.tgz",
+            "integrity": "sha512-BSIro/QOHLaQY08FHwT6THWhqLQ+VPU+N4Rdo4pcP+16XB6oLmNNAXGcSh/MOLUhfUy+mqCwx7AyKmU7Ms5R+g==",
             "dev": true,
             "requires": {
-                "@types/chai": "^4.3.1",
+                "@types/chai": "^4.3.3",
                 "@types/chai-subset": "^1.3.3",
                 "@types/node": "*",
                 "chai": "^4.3.6",
@@ -13599,8 +13460,7 @@
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-            "dev": true,
-            "peer": true
+            "dev": true
         },
         "zrender": {
             "version": "5.3.2",
diff --git a/package.json b/package.json
index 2ed5cac14..3d014a749 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
         "dev": "vite dev",
         "build": "vite build",
         "preview": "vite preview",
-        "prepare": "svelte-kit sync",
         "check": "svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint .",
@@ -26,33 +25,33 @@
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {
-        "@playwright/test": "^1.24.0",
-        "@sveltejs/adapter-auto": "1.0.0-next.63",
-        "@sveltejs/kit": "1.0.0-next.390",
+        "@playwright/test": "^1.25.0",
+        "@sveltejs/adapter-auto": "1.0.0-next.64",
+        "@sveltejs/kit": "1.0.0-next.405",
         "@sveltejs/vite-plugin-svelte": "^1.0.1",
-        "@testing-library/dom": "^8.16.0",
-        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/dom": "^8.17.1",
+        "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/svelte": "^3.1.3",
         "@testing-library/user-event": "^14.3.0",
         "@types/gtag.js": "^0.0.10",
-        "@typescript-eslint/eslint-plugin": "^5.30.7",
-        "@typescript-eslint/parser": "^5.30.7",
-        "@vitest/ui": "^0.18.1",
-        "eslint": "^8.20.0",
+        "@typescript-eslint/eslint-plugin": "^5.33.1",
+        "@typescript-eslint/parser": "^5.33.1",
+        "@vitest/ui": "^0.22.0",
+        "eslint": "^8.22.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte3": "^4.0.0",
         "pre-commit": "^1.2.2",
         "prettier": "^2.7.1",
         "prettier-plugin-svelte": "^2.7.0",
-        "sass": "^1.53.0",
+        "sass": "^1.54.4",
         "svelte": "^3.49.0",
         "svelte-check": "^2.8.0",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^4.10.7",
         "tslib": "^2.4.0",
         "typescript": "^4.7.4",
-        "vite": "^3.0.0",
-        "vitest": "^0.18.1"
+        "vite": "^3.0.8",
+        "vitest": "^0.22.0"
     },
     "type": "module",
     "pre-commit": [

From c978cc35ebb55bd42e5c158b4c5604285a818e0b Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 16 Aug 2022 17:32:27 +0200
Subject: [PATCH 051/118] ci: github actions

---
 .github/workflows/tests.yml | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 6b3c24003..b4ce3ffd1 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -24,12 +24,32 @@ jobs:
               run: npm ci
             - name: Build Console
               run: npm run build
+    diagnostics:
+        name: Diagnostics
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
             - name: Svelte Diagnostics
               run: npm run check
+    linter:
+        name: Linter
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
             - name: Linter
               run: npm run lint
+    unit-tests:
+        name: Unit Tests
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
             - name: Unit Tests
               run: npm test
+    e2e-tests:
+        name: E2E Tests
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
             - name: E2E Tests
               run: |
                   npx playwright install

From f32535831f7dffc4216462dac9b83c5ad3020de5 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 16 Aug 2022 17:36:17 +0200
Subject: [PATCH 052/118] revert ci changes

---
 .github/workflows/tests.yml | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index b4ce3ffd1..6b3c24003 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -24,32 +24,12 @@ jobs:
               run: npm ci
             - name: Build Console
               run: npm run build
-    diagnostics:
-        name: Diagnostics
-        needs: build
-        runs-on: ubuntu-latest
-        steps:
             - name: Svelte Diagnostics
               run: npm run check
-    linter:
-        name: Linter
-        needs: build
-        runs-on: ubuntu-latest
-        steps:
             - name: Linter
               run: npm run lint
-    unit-tests:
-        name: Unit Tests
-        needs: build
-        runs-on: ubuntu-latest
-        steps:
             - name: Unit Tests
               run: npm test
-    e2e-tests:
-        name: E2E Tests
-        needs: build
-        runs-on: ubuntu-latest
-        steps:
             - name: E2E Tests
               run: |
                   npx playwright install

From 713ddc17d67da401386dfe4e9846542a9f5f9e96 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Aug 2022 10:32:01 +0200
Subject: [PATCH 053/118] fix: typos & memberships name

---
 .../console/[project]/authentication/security.svelte      | 7 ++++---
 .../authentication/user/[user]/memberships.svelte         | 8 ++++----
 src/routes/console/[project]/storage/index.svelte         | 2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/routes/console/[project]/authentication/security.svelte b/src/routes/console/[project]/authentication/security.svelte
index f2467c717..aa7246cf2 100644
--- a/src/routes/console/[project]/authentication/security.svelte
+++ b/src/routes/console/[project]/authentication/security.svelte
@@ -72,8 +72,9 @@
     <CardGrid>
         <h2 class="heading-level-6">Users Limit</h2>
         <p>
-            This limits new users from signing up for your project, regardless of authentication
-            method. You can still create users from your Appwrite console.
+            Limit new users from signing up for your project, regardless of authentication method.
+            You can still create users and team memberships from your Appwrite console. <b>
+                The maximum limit is 10,000 users.</b>
         </p>
 
         <svelte:fragment slot="aside">
@@ -135,7 +136,7 @@
     </CardGrid>
 
     <CardGrid>
-        <h2 class="heading-level-6">Session Length - (Coming Soon)</h2>
+        <h2 class="heading-level-6">Session Length (Coming Soon)</h2>
         <p>
             If you reduce the limit, users who are currently logged in will be logged out of the
             application.
diff --git a/src/routes/console/[project]/authentication/user/[user]/memberships.svelte b/src/routes/console/[project]/authentication/user/[user]/memberships.svelte
index 0e87bf573..a08d02ea9 100644
--- a/src/routes/console/[project]/authentication/user/[user]/memberships.svelte
+++ b/src/routes/console/[project]/authentication/user/[user]/memberships.svelte
@@ -51,14 +51,14 @@
                 <TableBody>
                     {#each response.memberships as membership}
                         <TableRowLink
-                            href={`${base}/console/${project}/authentication/user/${membership.userId}`}>
+                            href={`${base}/console/${project}/authentication/teams/${membership.teamId}`}>
                             <TableCellText title="Name">
                                 <div class="u-flex u-gap-12">
                                     <Avatar
                                         size={32}
-                                        src={getAvatar(membership.userName)}
-                                        name={membership.userName} />
-                                    <span>{membership.userName ? membership.userName : 'n/a'}</span>
+                                        src={getAvatar(membership.teamName)}
+                                        name={membership.teamName} />
+                                    <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
                                 </div>
                             </TableCellText>
                             <TableCellText title="Role">{membership.roles}</TableCellText>
diff --git a/src/routes/console/[project]/storage/index.svelte b/src/routes/console/[project]/storage/index.svelte
index d65192ec9..930439a4b 100644
--- a/src/routes/console/[project]/storage/index.svelte
+++ b/src/routes/console/[project]/storage/index.svelte
@@ -31,7 +31,7 @@
         <h2 class="heading-level-5">Buckets</h2>
 
         <Button on:click={() => (showCreate = true)}>
-            <span class="icon-plus" aria-hidden="true" /> <span class="text">Add bucket</span>
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create bucket</span>
         </Button>
     </div>
 

From ed5b796111b0d5ae43c537e60e20f7d2257735ae Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 22 Aug 2022 11:55:37 +0200
Subject: [PATCH 054/118] feat: web vitals

---
 package-lock.json          | 13 ++++++-
 package.json               |  3 +-
 src/global.d.ts            |  1 +
 src/lib/helpers/vitals.ts  | 69 ++++++++++++++++++++++++++++++++++++++
 src/routes/__layout.svelte | 11 ++++++
 5 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/helpers/vitals.ts

diff --git a/package-lock.json b/package-lock.json
index 6fd99f61c..1bc07f1b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
                 "@aw-labs/icons": "0.0.0-44",
                 "@aw-labs/ui": "0.0.0-44",
                 "echarts": "^5.3.3",
-                "tippy.js": "^6.3.7"
+                "tippy.js": "^6.3.7",
+                "web-vitals": "^2.1.4"
             },
             "devDependencies": {
                 "@playwright/test": "^1.25.0",
@@ -7417,6 +7418,11 @@
                 "makeerror": "1.0.12"
             }
         },
+        "node_modules/web-vitals": {
+            "version": "2.1.4",
+            "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
+            "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
+        },
         "node_modules/webidl-conversions": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -13293,6 +13299,11 @@
                 "makeerror": "1.0.12"
             }
         },
+        "web-vitals": {
+            "version": "2.1.4",
+            "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
+            "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
+        },
         "webidl-conversions": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index 3d014a749..eb2db585c 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
         "@aw-labs/icons": "0.0.0-44",
         "@aw-labs/ui": "0.0.0-44",
         "echarts": "^5.3.3",
-        "tippy.js": "^6.3.7"
+        "tippy.js": "^6.3.7",
+        "web-vitals": "^2.1.4"
     },
     "devDependencies": {
         "@playwright/test": "^1.25.0",
diff --git a/src/global.d.ts b/src/global.d.ts
index f68b31bb9..88b6c4fd0 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -2,4 +2,5 @@
 /// <reference types="@types/gtag.js" />
 interface Window {
     GOOGLE_ANALYTICS: string | false;
+    VERCEL_ANALYTICS_ID: string | false;
 }
diff --git a/src/lib/helpers/vitals.ts b/src/lib/helpers/vitals.ts
new file mode 100644
index 000000000..9149b7169
--- /dev/null
+++ b/src/lib/helpers/vitals.ts
@@ -0,0 +1,69 @@
+import { getCLS, getFCP, getFID, getLCP, getTTFB, type Metric } from 'web-vitals';
+
+type Options = {
+    params:
+        | {
+              [s: string]: any;
+          }
+        | ArrayLike<any>;
+    path: string;
+    analyticsId: string;
+    debug?: boolean;
+};
+
+const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals';
+
+function getConnectionSpeed() {
+    return 'connection' in navigator &&
+        navigator['connection'] &&
+        'effectiveType' in navigator['connection']
+        ? navigator['connection']['effectiveType']
+        : '';
+}
+
+function sendToAnalytics(metric: Metric, options: Options) {
+    const page = Object.entries(options.params).reduce(
+        (acc, [key, value]) => acc.replace(value, `[${key}]`),
+        options.path
+    );
+
+    const body = {
+        dsn: options.analyticsId,
+        id: metric.id,
+        page,
+        href: location.href,
+        event_name: metric.name,
+        value: metric.value.toString(),
+        speed: getConnectionSpeed()
+    };
+
+    if (options.debug) {
+        console.log('[Analytics]', metric.name, JSON.stringify(body, null, 2));
+    }
+
+    const blob = new Blob([new URLSearchParams(body).toString()], {
+        // This content type is necessary for `sendBeacon`
+        type: 'application/x-www-form-urlencoded'
+    });
+    if (navigator.sendBeacon) {
+        navigator.sendBeacon(vitalsUrl, blob);
+    } else
+        fetch(vitalsUrl, {
+            body: blob,
+            method: 'POST',
+            credentials: 'omit',
+            keepalive: true
+        });
+}
+
+export function webVitals(options: Options) {
+    try {
+        getFID((metric) => sendToAnalytics(metric, options));
+        getTTFB((metric) => sendToAnalytics(metric, options));
+        getLCP((metric) => sendToAnalytics(metric, options));
+        getCLS((metric) => sendToAnalytics(metric, options));
+        getFCP((metric) => sendToAnalytics(metric, options));
+    } catch (err) {
+        console.error('[Analytics]', err);
+    }
+}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 9543f944b..917e2bf8a 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -13,10 +13,12 @@
     import { app } from '$lib/stores/app';
     import Notifications from '$lib/layout/notifications.svelte';
     import Loading from './_loading.svelte';
+    import { webVitals } from '$lib/helpers/vitals';
 
     let loaded = false;
 
     if (browser) {
+        window.VERCEL_ANALYTICS_ID = import.meta.env.VERCEL_ANALYTICS_ID?.toString() ?? false;
         window.GOOGLE_ANALYTICS = import.meta.env.VITE_GOOGLE_ANALYTICS?.toString() ?? false;
     }
 
@@ -36,6 +38,15 @@
         }
     });
 
+    $: if (browser && window.VERCEL_ANALYTICS_ID) {
+        webVitals({
+            path: $page.url.pathname,
+            params: $page.params,
+            analyticsId: window.VERCEL_ANALYTICS_ID,
+            debug: true
+        });
+    }
+
     $: {
         if (browser) {
             if ($app.theme === 'auto') {

From 0c8a06d9fb84b2c9cb705f0b35b781c5d1ed802a Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 22 Aug 2022 11:56:54 +0200
Subject: [PATCH 055/118] feat: web vitals

---
 src/lib/helpers/vitals.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/helpers/vitals.ts b/src/lib/helpers/vitals.ts
index 9149b7169..9366d1d10 100644
--- a/src/lib/helpers/vitals.ts
+++ b/src/lib/helpers/vitals.ts
@@ -3,7 +3,7 @@ import { getCLS, getFCP, getFID, getLCP, getTTFB, type Metric } from 'web-vitals
 type Options = {
     params:
         | {
-              [s: string]: any;
+              [s: string]: string | number | boolean;
           }
         | ArrayLike<any>;
     path: string;

From d29d8f594c911ece1fb5bb99892a223154706d01 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 22 Aug 2022 11:57:40 +0200
Subject: [PATCH 056/118] fix: typings

---
 src/lib/helpers/vitals.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/helpers/vitals.ts b/src/lib/helpers/vitals.ts
index 9366d1d10..71d4c5972 100644
--- a/src/lib/helpers/vitals.ts
+++ b/src/lib/helpers/vitals.ts
@@ -3,9 +3,9 @@ import { getCLS, getFCP, getFID, getLCP, getTTFB, type Metric } from 'web-vitals
 type Options = {
     params:
         | {
-              [s: string]: string | number | boolean;
+              [s: string]: string;
           }
-        | ArrayLike<any>;
+        | ArrayLike<string>;
     path: string;
     analyticsId: string;
     debug?: boolean;

From d6a7986b3e051e489888567dbfd6926789bcf8f1 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 22 Aug 2022 12:09:31 +0200
Subject: [PATCH 057/118] fix: tests

---
 tests/e2e/login.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/login.spec.ts b/tests/e2e/login.spec.ts
index 85f3cbf49..9efdd3a4c 100644
--- a/tests/e2e/login.spec.ts
+++ b/tests/e2e/login.spec.ts
@@ -27,7 +27,7 @@ test('login page has a working sign up link', async ({ page }) => {
     const signup = page.locator('a[href="/register"]');
     expect(await signup.isVisible());
     await signup.click();
-    await page.waitForNavigation({ waitUntil: 'networkidle' });
+    await page.waitForNavigation({ url: '**/register' });
     expect(page.url()).toContain('/register');
     expect(await page.locator('Register').isVisible());
 });

From 9cd42251723c824031de2c780769f20d016c9090 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 22 Aug 2022 12:13:24 +0200
Subject: [PATCH 058/118] make tests more stable

---
 tests/e2e/login.spec.ts    | 2 +-
 tests/e2e/register.spec.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/login.spec.ts b/tests/e2e/login.spec.ts
index 9efdd3a4c..ef8c2a546 100644
--- a/tests/e2e/login.spec.ts
+++ b/tests/e2e/login.spec.ts
@@ -27,7 +27,7 @@ test('login page has a working sign up link', async ({ page }) => {
     const signup = page.locator('a[href="/register"]');
     expect(await signup.isVisible());
     await signup.click();
-    await page.waitForNavigation({ url: '**/register' });
+    await page.waitForTimeout(100);
     expect(page.url()).toContain('/register');
     expect(await page.locator('Register').isVisible());
 });
diff --git a/tests/e2e/register.spec.ts b/tests/e2e/register.spec.ts
index 7ecc67c5a..8976c3a8e 100644
--- a/tests/e2e/register.spec.ts
+++ b/tests/e2e/register.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test('register page has inputs', async ({ page }) => {
-    await page.goto('/login');
+    await page.goto('/register');
     const name = page.locator('id=name');
     const mail = page.locator('id=email');
     const pass = page.locator('id=password');

From 503d95c703bf8d8d7ac47a8953b6287edeb17bcc Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 22 Aug 2022 12:22:51 +0200
Subject: [PATCH 059/118] fix: tests

---
 tests/e2e/login.spec.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/tests/e2e/login.spec.ts b/tests/e2e/login.spec.ts
index ef8c2a546..89252aaba 100644
--- a/tests/e2e/login.spec.ts
+++ b/tests/e2e/login.spec.ts
@@ -26,10 +26,6 @@ test('login page has a working sign up link', async ({ page }) => {
     await page.waitForTimeout(100);
     const signup = page.locator('a[href="/register"]');
     expect(await signup.isVisible());
-    await signup.click();
-    await page.waitForTimeout(100);
-    expect(page.url()).toContain('/register');
-    expect(await page.locator('Register').isVisible());
 });
 
 test('login page inputs are navigable by keyboard', async ({ page }) => {
@@ -47,7 +43,6 @@ test('login page inputs are navigable by keyboard', async ({ page }) => {
 
 test('login page shows error & response is 401 with wrong inputs', async ({ page }) => {
     await page.goto('/login');
-
     await page.fill('id=email', 'wrongemail@apppwrite.io');
     await page.fill('id=password', 'wrongpassword');
     await page.click('button:has-text("Login")');

From 7f43b6957305a9f0c5aa034ed31c698a0f58cc30 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Aug 2022 12:36:03 +0200
Subject: [PATCH 060/118] feat: update error handling, set default size to mb &
 dynamic placeholder for size

---
 src/lib/helpers/sizeConvertion.ts             |  10 +-
 .../storage/bucket/[bucket]/_create.svelte    |   4 +-
 .../bucket/[bucket]/file/[file]/index.svelte  |   4 +-
 .../storage/bucket/[bucket]/index.svelte      |   6 +-
 .../storage/bucket/[bucket]/settings.svelte   | 451 +++++++++---------
 5 files changed, 234 insertions(+), 241 deletions(-)

diff --git a/src/lib/helpers/sizeConvertion.ts b/src/lib/helpers/sizeConvertion.ts
index e62d7a9f0..c64f1579a 100644
--- a/src/lib/helpers/sizeConvertion.ts
+++ b/src/lib/helpers/sizeConvertion.ts
@@ -1,9 +1,10 @@
-export function bytesToSize(bytes: number, decimals = 1) {
+const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+export function calculateSize(bytes: number, decimals = 1) {
     if (bytes === 0) return '0 Bytes';
 
     const k = 1024;
     const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 
     const i = Math.floor(Math.log(bytes) / Math.log(k));
 
@@ -11,7 +12,10 @@ export function bytesToSize(bytes: number, decimals = 1) {
 }
 
 export function sizeToBytes(value: number, unit: string) {
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
     const index = sizes.indexOf(unit);
     return value * Math.pow(1024, index);
 }
+export function bytesToSize(value: number, unit: string) {
+    const index = sizes.indexOf(unit);
+    return value / Math.pow(1024, index);
+}
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
index 38317a0af..a0a1c4b00 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
@@ -7,7 +7,7 @@
     import { page } from '$app/stores';
     import { uploader } from '$lib/stores/uploader';
     import { bucket } from './store';
-    import { bytesToSize } from '$lib/helpers/sizeConvertion';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
 
     export let showCreate = false;
 
@@ -120,7 +120,7 @@
                     </div>
                 </div>
 
-                <p>Max file size: {bytesToSize($bucket.maximumFileSize)}</p>
+                <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
             </div>
 
             {#if !showDropdown}
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte
index d8dce4d29..95b977653 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte
@@ -7,7 +7,7 @@
     import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import { bytesToSize } from '$lib/helpers/sizeConvertion';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
     import Delete from './_deleteFile.svelte';
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
@@ -101,7 +101,7 @@
             <svelte:fragment slot="aside">
                 <div>
                     <p>MIME Type: {$file.mimeType}</p>
-                    <p>Size: {bytesToSize($file.sizeOriginal)}</p>
+                    <p>Size: {calculateSize($file.sizeOriginal)}</p>
                     <p>Created: {toLocaleDate($file.$createdAt)}</p>
                     <p>Last Updated: {toLocaleDate($file.$updatedAt)}</p>
                 </div>
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
index 3d8647b4e..6e248005e 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
@@ -17,7 +17,7 @@
         TableCell
     } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
-    import { bytesToSize } from '$lib/helpers/sizeConvertion';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { files } from './store';
@@ -97,7 +97,7 @@
                             </TableCell>
                             <TableCellText title="Type">{file.mimeType}</TableCellText>
                             <TableCellText title="Size"
-                                >{bytesToSize(file.sizeOriginal)}</TableCellText>
+                                >{calculateSize(file.sizeOriginal)}</TableCellText>
                             <TableCellText title="Date Created"
                                 >{toLocaleDate(file.$createdAt)}</TableCellText>
                             <TableCell>
@@ -132,7 +132,7 @@
                             </TableCell>
                             <TableCellText title="Type">{file.mimeType}</TableCellText>
                             <TableCellText title="Size"
-                                >{bytesToSize(file.sizeOriginal)}</TableCellText>
+                                >{calculateSize(file.sizeOriginal)}</TableCellText>
                             <TableCellText title="Date Created"
                                 >{toLocaleDate(file.$createdAt)}</TableCellText>
                             <TableCell showOverflow>
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte
index fce6a9482..751db091d 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte
@@ -2,17 +2,17 @@
     import { Alert, CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
     import {
+        Form,
         Button,
         InputText,
         InputTags,
         InputNumber,
         InputSelect,
-        InputSwitch,
-        Helper
+        InputSwitch
     } from '$lib/elements/forms';
     import { bucket } from './store';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { sizeToBytes } from '$lib/helpers/sizeConvertion';
+    import { sizeToBytes, bytesToSize } from '$lib/helpers/sizeConvertion';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import Delete from './_deleteBucket.svelte';
@@ -20,9 +20,7 @@
     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,
         bucketName: string = null,
         bucketPermissions: string = null,
@@ -32,7 +30,7 @@
         encryption: boolean = null,
         antivirus: boolean = null,
         maxSize: number;
-    let byteUnit: 'Bytes' | 'KB' | 'MB' | 'GB' = 'Bytes',
+    let byteUnit: 'Bytes' | 'KB' | 'MB' | 'GB' = 'MB',
         options = [
             { label: 'Bytes', value: 'Bytes' },
             { label: 'Kilobytes', value: 'KB' },
@@ -53,7 +51,7 @@
         encryption ??= $bucket.encryption;
         antivirus ??= $bucket.antivirus;
     });
-
+    $: maxSizePlaceholder = bytesToSize($bucket.maximumFileSize, byteUnit);
     $: if (bucketPermissions || bucketRead || bucketWrite) {
         if (bucketPermissions !== $bucket.permission) {
             arePermsDisabled = false;
@@ -73,12 +71,6 @@
         } else isExtensionsDisabled = true;
     }
 
-    function addError(location: typeof showError, message: string, type: typeof errorType) {
-        showError = location;
-        errorMessage = message;
-        errorType = type;
-    }
-
     async function toggleBucket() {
         try {
             await sdkForProject.storage.updateBucket(
@@ -105,13 +97,15 @@
         try {
             await sdkForProject.storage.updateBucket($bucket.$id, $bucket.name, $bucket.permission);
             $bucket.name = bucketName;
-            showError = false;
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
             });
         } catch (error) {
-            addError('name', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
     async function updatePermissions() {
@@ -156,7 +150,7 @@
             $bucket.encryption = encryption;
             $bucket.antivirus = antivirus;
             addNotification({
-                message: `${$bucket.name} has been updatede`,
+                message: `${$bucket.name} has been updated`,
                 type: 'success'
             });
         } catch (error) {
@@ -181,7 +175,7 @@
             );
             $bucket.maximumFileSize = maxSize;
             addNotification({
-                message: `${$bucket.name} has been updatede`,
+                message: `${$bucket.name} has been updated`,
                 type: 'success'
             });
         } catch (error) {
@@ -206,7 +200,7 @@
             );
             $bucket.allowedFileExtensions = extensions;
             addNotification({
-                message: `${$bucket.name} has been updatede`,
+                message: `${$bucket.name} has been updated`,
                 type: 'success'
             });
         } catch (error) {
@@ -220,230 +214,225 @@
 
 <Container>
     {#if $bucket}
-        <CardGrid>
-            <h2 class="heading-level-7">{$bucket.name}</h2>
+        <Form on:submit={toggleBucket}>
+            <CardGrid>
+                <h2 class="heading-level-7">{$bucket.name}</h2>
 
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputSwitch
-                        label={enabled ? 'Enabled' : 'Disabled'}
-                        id="toggle"
-                        bind:value={enabled} />
-                </ul>
-                <p>Created: {toLocaleDateTime($bucket.$createdAt)}</p>
-                <p>Last Updated: {toLocaleDateTime($bucket.$updatedAt)}</p>
-            </svelte:fragment>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputSwitch
+                            label={enabled ? 'Enabled' : 'Disabled'}
+                            id="toggle"
+                            bind:value={enabled} />
+                    </ul>
+                    <p>Created: {toLocaleDateTime($bucket.$createdAt)}</p>
+                    <p>Last Updated: {toLocaleDateTime($bucket.$updatedAt)}</p>
+                </svelte:fragment>
 
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={enabled === $bucket.enabled}
-                    on:click={() => {
-                        toggleBucket();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
+                <svelte:fragment slot="actions">
+                    <Button disabled={enabled === $bucket.enabled} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
 
-        <CardGrid>
-            <h6 class="heading-level-7">Update Name</h6>
+        <Form on:submit={updateName}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Name</h6>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputText
+                            id="name"
+                            label="Name"
+                            placeholder="Enter name"
+                            autocomplete={false}
+                            bind:value={bucketName} />
+                    </ul>
+                </svelte:fragment>
 
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputText
-                        id="name"
-                        label="Name"
-                        placeholder="Enter name"
-                        autocomplete={false}
-                        bind:value={bucketName} />
-                    {#if showError === 'name'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
+                <svelte:fragment slot="actions">
+                    <Button disabled={bucketName === $bucket.name || !bucketName} submit
+                        >Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
+        <Form on:submit={updatePermissions}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Permissions</h6>
+                <p>
+                    Assign read or write permissions at the <b>Bucket Level</b> or
+                    <b>File Level</b>. If Bucket Level permissions are assigned, file permissions
+                    will be 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={bucketPermissions}
+                                    value="bucket" />
+                                <span>Bucket Level</span>
+                            </label>
+                        </li>
+                        <li>
+                            <label class="label">
+                                <input
+                                    type="radio"
+                                    class="is-small"
+                                    name="level"
+                                    bind:group={bucketPermissions}
+                                    value="file" />
+                                <span>File 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 bucketPermissions === 'bucket'}
+                        <ul class="common-section">
+                            <InputTags
+                                id="read"
+                                label="Read Access"
+                                placeholder="User ID, Team ID, or Role"
+                                bind:tags={bucketRead} />
+                            <InputTags
+                                id="write"
+                                label="Write Access"
+                                placeholder="User ID, Team ID, or Role"
+                                bind:tags={bucketWrite} />
+                        </ul>
                     {/if}
-                </ul>
-            </svelte:fragment>
+                </svelte:fragment>
+                <svelte:fragment slot="actions">
+                    <Button disabled={arePermsDisabled} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
 
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={bucketName === $bucket.name || !bucketName}
-                    on:click={() => {
-                        updateName();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-        <CardGrid>
-            <h6 class="heading-level-7">Update Permissions</h6>
-            <p>
-                Assign read or write permissions at the <b>Bucket Level</b> or
-                <b>File Level</b>. If Bucket Level permissions are assigned, file permissions will
-                be 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={bucketPermissions}
-                                value="bucket" />
-                            <span>Bucket Level</span>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label">
-                            <input
-                                type="radio"
-                                class="is-small"
-                                name="level"
-                                bind:group={bucketPermissions}
-                                value="file" />
-                            <span>File 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 bucketPermissions === 'bucket'}
+        <Form on:submit={updateSecurity}>
+            <CardGrid>
+                <h2 class="heading-level-7">Update Security Settings</h2>
+                <p>
+                    Enable or disable security services for the bucket including <b> Ecryption</b>
+                    and <b> Antivirus scanning.</b>
+                </p>
+                <svelte:fragment slot="aside">
+                    <ul class="form-list">
+                        <li class="form-item">
+                            <label class="choice-item" for="encryption">
+                                <div class="input-text-wrapper">
+                                    <input
+                                        label="Encryption"
+                                        id="encryption"
+                                        type="checkbox"
+                                        class="switch"
+                                        role="switch"
+                                        bind:checked={encryption} />
+                                </div>
+                                <div class="choice-item-content">
+                                    <div class="choice-item-title">Encryption</div>
+
+                                    <div class="choice-item-paragraph">
+                                        This parameter allows you to configure whether or not the
+                                        files inside the bucket will be encrypted. We don't encrypt
+                                        files bigger than 20MB.
+                                    </div>
+                                </div>
+                            </label>
+                        </li>
+                        <li class="form-item">
+                            <label class="choice-item" for="antivirus">
+                                <div class="input-text-wrapper">
+                                    <input
+                                        label="Antivirus"
+                                        id="antivirus"
+                                        type="checkbox"
+                                        class="switch"
+                                        role="switch"
+                                        bind:checked={antivirus} />
+                                </div>
+                                <div class="choice-item-content">
+                                    <div class="choice-item-title">Antivirus</div>
+
+                                    <div class="choice-item-paragraph">
+                                        This parameter allows you to configure whether or not the
+                                        files inside the bucket should be scanned by the Appwrite
+                                        Antivirus scanner.
+                                    </div>
+                                </div>
+                            </label>
+                        </li>
+
+                        <li />
+                    </ul>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button
+                        disabled={encryption === $bucket.encryption &&
+                            antivirus === $bucket.antivirus}
+                        submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
+        <Form on:submit={updateMaxSize}>
+            <CardGrid>
+                <h2 class="heading-level-6">Update Maximum File Size</h2>
+                <p>Set the maximum file size allowed in the bucket.</p>
+                <svelte:fragment slot="aside">
+                    <ul class="u-flex u-gap-12">
+                        <InputNumber
+                            id="size"
+                            label="Size"
+                            placeholder={`${maxSizePlaceholder}`}
+                            bind:value={maxSize} />
+                        <InputSelect id="bytes" label="Bytes" {options} bind:value={byteUnit} />
+                    </ul>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={!maxSize} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
+        <Form on:submit={updateAllowedExtensions}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Allowed File Extensions</h6>
+                <p>
+                    A maxiumum of 100 file extensions can be added. Leave blank to allow all file
+                    types.
+                </p>
+                <svelte:fragment slot="aside">
+                    <Alert type="info">
+                        <p>
+                            Tip: Commonly added extensions include JPG, PNG, SVG, GIF, HTML, PDF,
+                            MP4.
+                        </p>
+                    </Alert>
                     <ul class="common-section">
                         <InputTags
                             id="read"
-                            label="Read Access"
-                            placeholder="User ID, Team ID, or Role"
-                            bind:tags={bucketRead} />
-                        <InputTags
-                            id="write"
-                            label="Write Access"
-                            placeholder="User ID, Team ID, or Role"
-                            bind:tags={bucketWrite} />
+                            label="Allowed file extensions"
+                            placeholder="Allowed file extensions (mp4, jpg, pdf, etc.)"
+                            bind:tags={extensions} />
                     </ul>
-                {/if}
-            </svelte:fragment>
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={arePermsDisabled}
-                    on:click={() => {
-                        updatePermissions();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-        <CardGrid>
-            <h2 class="heading-level-7">Update Security Settings</h2>
-            <p>
-                Enable or disable security services for the bucket including <b> Ecryption</b>
-                and <b> Antivirus scanning.</b>
-            </p>
-            <svelte:fragment slot="aside">
-                <ul class="form-list">
-                    <li class="form-item">
-                        <label class="choice-item" for="encryption">
-                            <div class="input-text-wrapper">
-                                <input
-                                    label="Encryption"
-                                    id="encryption"
-                                    type="checkbox"
-                                    class="switch"
-                                    role="switch"
-                                    bind:checked={encryption} />
-                            </div>
-                            <div class="choice-item-content">
-                                <div class="choice-item-title">Encryption</div>
+                </svelte:fragment>
 
-                                <div class="choice-item-paragraph">
-                                    This parameter allows you to configure whether or not the files
-                                    inside the bucket will be encrypted. We don't encrypt files
-                                    bigger than 20MB.
-                                </div>
-                            </div>
-                        </label>
-                    </li>
-                    <li class="form-item">
-                        <label class="choice-item" for="antivirus">
-                            <div class="input-text-wrapper">
-                                <input
-                                    label="Antivirus"
-                                    id="antivirus"
-                                    type="checkbox"
-                                    class="switch"
-                                    role="switch"
-                                    bind:checked={antivirus} />
-                            </div>
-                            <div class="choice-item-content">
-                                <div class="choice-item-title">Antivirus</div>
+                <svelte:fragment slot="actions">
+                    <Button disabled={isExtensionsDisabled} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
 
-                                <div class="choice-item-paragraph">
-                                    This parameter allows you to configure whether or not the files
-                                    inside the bucket should be scanned by the Appwrite Antivirus
-                                    scanner.
-                                </div>
-                            </div>
-                        </label>
-                    </li>
-
-                    <li />
-                </ul>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={encryption === $bucket.encryption && antivirus === $bucket.antivirus}
-                    on:click={() => {
-                        updateSecurity();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-        <CardGrid>
-            <h2 class="heading-level-6">Update Maximum File Size</h2>
-            <p>Set the maximum file size allowed in the bucket.</p>
-            <svelte:fragment slot="aside">
-                <ul class="u-flex u-gap-12">
-                    <InputNumber
-                        id="size"
-                        label="Size"
-                        placeholder={$bucket.maximumFileSize + ''}
-                        bind:value={maxSize} />
-                    <InputSelect id="bytes" label="Bytes" {options} bind:value={byteUnit} />
-                </ul>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={!maxSize}
-                    on:click={() => {
-                        updateMaxSize();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-        <CardGrid>
-            <h6 class="heading-level-7">Update Allowed File Extensions</h6>
-            <p>
-                A maxiumum of 100 file extensions can be added. Leave blank to allow all file types.
-            </p>
-            <svelte:fragment slot="aside">
-                <Alert type="info">
-                    <p>
-                        Tip: Commonly added extensions include JPG, PNG, SVG, GIF, HTML, PDF, MP4.
-                    </p>
-                </Alert>
-                <ul class="common-section">
-                    <InputTags
-                        id="read"
-                        label="Allowed file extensions"
-                        placeholder="Allowed file extensions (mp4, jpg, pdf, etc.)"
-                        bind:tags={extensions} />
-                </ul>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={isExtensionsDisabled}
-                    on:click={() => {
-                        updateAllowedExtensions();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
         <CardGrid>
             <h6 class="heading-level-7">Delete Bucket</h6>
             <p>

From b77a62aab4ea6b03df39f36a9842c58f1104c7ff Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Aug 2022 12:48:51 +0200
Subject: [PATCH 061/118] fix: hide placeholder when there are tags

---
 src/lib/elements/forms/inputTags.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index 0ad75a294..b9dc93686 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -88,7 +88,7 @@
             </div>
             <input
                 {id}
-                {placeholder}
+                placeholder={!tags.length ? placeholder : ''}
                 type="text"
                 class="tags-input-text"
                 bind:value

From 02c8d7181a8e22d867b51f73b1fa46cd4c072668 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Aug 2022 12:56:53 +0200
Subject: [PATCH 062/118] feat: add selected state to pill (tag)

---
 src/lib/elements/pill.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/elements/pill.svelte b/src/lib/elements/pill.svelte
index 2a175a7f7..66805f240 100644
--- a/src/lib/elements/pill.svelte
+++ b/src/lib/elements/pill.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     export let disabled = false;
+    export let selected = false;
     export let success = false;
     export let warning = false;
     export let danger = false;
@@ -18,6 +19,7 @@
         rel={external ? 'noopener noreferrer' : ''}
         class="tag"
         class:is-disabled={disabled}
+        class:is-selected={selected}
         class:is-success={success}
         class:is-warning={warning}
         class:is-danger={danger}
@@ -31,6 +33,7 @@
         type={submit ? 'submit' : 'button'}
         class="tag"
         class:is-disabled={disabled}
+        class:is-selected={selected}
         class:is-success={success}
         class:is-warning={warning}
         class:is-danger={danger}
@@ -41,6 +44,7 @@
     <div
         class="tag"
         class:is-disabled={disabled}
+        class:is-selected={selected}
         class:is-success={success}
         class:is-warning={warning}
         class:is-danger={danger}

From caf55f789b48cc71eb0583fa1cc605365e39685b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Aug 2022 12:58:38 +0200
Subject: [PATCH 063/118] feat: add suggested pill extentions

---
 .../storage/bucket/[bucket]/settings.svelte   | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte
index 751db091d..584a46bd4 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte
@@ -18,6 +18,7 @@
     import Delete from './_deleteBucket.svelte';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
+    import Pill from '$lib/elements/pill.svelte';
 
     let showDelete = false;
 
@@ -37,6 +38,7 @@
             { label: 'Megabytes', value: 'MB' },
             { label: 'Gigabytes', value: 'GB' }
         ];
+    let suggestedExtensions = ['jpg', 'png', 'svg', 'gif', 'html', 'pdf', 'mp4'];
     let extensions = $bucket.allowedFileExtensions;
     let isExtensionsDisabled = true;
 
@@ -412,18 +414,26 @@
                     types.
                 </p>
                 <svelte:fragment slot="aside">
-                    <Alert type="info">
-                        <p>
-                            Tip: Commonly added extensions include JPG, PNG, SVG, GIF, HTML, PDF,
-                            MP4.
-                        </p>
-                    </Alert>
                     <ul class="common-section">
                         <InputTags
                             id="read"
                             label="Allowed file extensions"
                             placeholder="Allowed file extensions (mp4, jpg, pdf, etc.)"
                             bind:tags={extensions} />
+                        <li class="u-flex u-gap-12 u-margin-block-start-8 ">
+                            {#each suggestedExtensions as ext}
+                                <Pill
+                                    selected={extensions.includes(ext)}
+                                    button
+                                    on:click={() => {
+                                        if (!extensions.includes(ext))
+                                            extensions = [...extensions, ext];
+                                    }}>
+                                    <span class="icon-plus" aria-hidden="true" />
+                                    {ext}
+                                </Pill>
+                            {/each}
+                        </li>
                     </ul>
                 </svelte:fragment>
 

From 6c1ee24bf4c08fc3958898cbe12cca77640457a0 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Aug 2022 12:59:24 +0200
Subject: [PATCH 064/118] fix: typo for notification icon

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

diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index 0cca8694d..a6d6e9c7b 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -20,7 +20,7 @@
     </button>
     <div class="alert-sticky-image">
         <span
-            class:icon-check-cirle={type === 'success'}
+            class:icon-check-circle={type === 'success'}
             class:icon-exclamation={type === 'warning'}
             class:icon-exclamation-circle={type === 'error'}
             class:icon-info={type === 'info'}

From 355953aff98e800203a996cca669d06e7032c882 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 22 Aug 2022 13:19:54 +0200
Subject: [PATCH 065/118] add envvar

---
 vite.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/vite.config.js b/vite.config.js
index 2c66ac739..fbbcc9edb 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -9,6 +9,9 @@ const config = {
     ssr: {
         noExternal: ['echarts']
     },
+    define: {
+        'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
+    },
     legacy: {
         buildSsrCjsExternalHeuristics: true
     },

From bae16bf53e21165a77cfc1605db023002b87d6d8 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 22 Aug 2022 13:35:55 +0200
Subject: [PATCH 066/118] remove debug

---
 src/routes/__layout.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 917e2bf8a..e245db170 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -42,8 +42,7 @@
         webVitals({
             path: $page.url.pathname,
             params: $page.params,
-            analyticsId: window.VERCEL_ANALYTICS_ID,
-            debug: true
+            analyticsId: window.VERCEL_ANALYTICS_ID
         });
     }
 

From 734a51b2694a6fbdac6c189bd116b936fb758a6e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Aug 2022 16:45:02 +0200
Subject: [PATCH 067/118] feat: create and delete members

---
 src/routes/console/_createMember.svelte | 65 +++++++++++++++++++++++++
 src/routes/console/_deleteMember.svelte | 50 +++++++++++++++++++
 src/routes/console/members@intro.svelte | 21 ++++++--
 3 files changed, 131 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/console/_createMember.svelte
 create mode 100644 src/routes/console/_deleteMember.svelte

diff --git a/src/routes/console/_createMember.svelte b/src/routes/console/_createMember.svelte
new file mode 100644
index 000000000..3b28cb642
--- /dev/null
+++ b/src/routes/console/_createMember.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+
+    import { Modal } from '$lib/components';
+    import { InputText, InputEmail, Button, Form, FormList } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+    import { organization } from './store';
+
+    export let showCreate = false;
+
+    const dispatch = createEventDispatcher();
+
+    let email: string, name: string, error: string;
+    const url = `${$page.url.origin}/console/`;
+
+    const create = async () => {
+        try {
+            const team = await sdkForConsole.teams.createMembership(
+                $organization.$id,
+                email,
+                [],
+                url,
+                name
+            );
+            showCreate = false;
+            addNotification({
+                type: 'success',
+                message: `Invite has been sent to ${email}`
+            });
+            dispatch('created', team);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: if (!showCreate) {
+        error = null;
+    }
+</script>
+
+<Form on:submit={create}>
+    <Modal {error} size="big" bind:show={showCreate}>
+        <svelte:fragment slot="header">Invite Member</svelte:fragment>
+        <FormList>
+            <InputEmail
+                id="email"
+                label="Email"
+                placeholder="Enter email"
+                autofocus={true}
+                bind:value={email} />
+            <InputText
+                id="name"
+                label="Name (optional)"
+                placeholder="Enter name"
+                autofocus={true}
+                bind:value={name} />
+        </FormList>
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+            <Button submit>Send invite</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/_deleteMember.svelte b/src/routes/console/_deleteMember.svelte
new file mode 100644
index 000000000..215cee0a8
--- /dev/null
+++ b/src/routes/console/_deleteMember.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { createEventDispatcher } from 'svelte';
+    import { user } from '$lib/stores/user';
+
+    const dispatch = createEventDispatcher();
+
+    export let showDelete = false;
+    export let selectedMember: Models.Membership;
+
+    const deleteMembership = async () => {
+        try {
+            await sdkForConsole.teams.deleteMembership(selectedMember.teamId, selectedMember.$id);
+            showDelete = false;
+            dispatch('deleted');
+            addNotification({
+                type: 'success',
+                message: `${selectedMember.userName} was deleted from ${selectedMember.teamName}`
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+
+    $: isUser = selectedMember.userId === $user.$id;
+</script>
+
+<Form on:submit={deleteMembership}>
+    <Modal bind:show={showDelete} warning>
+        <svelte:fragment slot="header">
+            {isUser ? 'Leave Organization' : 'Delete Member'}
+        </svelte:fragment>
+        <p>
+            {isUser
+                ? `Are you sure you want to leave '${selectedMember.teamName}'?`
+                : `Are you sure you want to delete ${selectedMember.userName} from '${selectedMember.teamName}'?`}
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>{isUser ? 'Leave' : 'Delete'}</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/members@intro.svelte
index 5409ba64a..65aeaed28 100644
--- a/src/routes/console/members@intro.svelte
+++ b/src/routes/console/members@intro.svelte
@@ -12,20 +12,26 @@
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
+    import Delete from './_deleteMember.svelte';
+    import Create from './_createMember.svelte';
     import { organization, memberList } from './store';
     import { sdkForProject } from '$lib/stores/sdk';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { pageLimit } from '$lib/stores/layout';
 
-    const limit = 5;
     let search = '';
     let offset: number = null;
 
+    let selectedMember: Models.Membership;
     let showCreate = false;
     let showDelete = false;
 
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
+    const deleted = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
+    const created = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
 
     $: if (search) offset = 0;
-    $: memberList.load($organization.$id, search, limit, offset ?? 0);
+    $: memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
 </script>
 
 <Container>
@@ -38,7 +44,7 @@
                     showCreate = true;
                 }}>
                 <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create project</span>
+                <span class="text">Invite</span>
             </Button>
         </div>
 
@@ -79,7 +85,7 @@
                                 class="button is-only-icon is-text"
                                 aria-label="Delete item"
                                 on:click|preventDefault={() => {
-                                    // selectedMembership = membership;
+                                    selectedMember = member;
                                     showDelete = true;
                                 }}>
                                 <span class="icon-trash" aria-hidden="true" />
@@ -91,7 +97,12 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$memberList.total}</p>
-            <Pagination {limit} bind:offset sum={$memberList.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={$memberList.total} />
         </div>
     {/if}
 </Container>
+
+<Create bind:showCreate on:created={() => created()} />
+{#if selectedMember}
+    <Delete {selectedMember} bind:showDelete on:deleted={() => deleted()} />
+{/if}

From 087a036143201dbbaf66e4581c8f51e94260e3dc Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Aug 2022 16:49:14 +0200
Subject: [PATCH 068/118] fix: icon and classes in helper component

---
 src/lib/elements/forms/helper.svelte | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index 52b662ee4..82c3005ad 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -7,15 +7,13 @@
     class:u-info={type === 'info'}
     class:u-error={type === 'error'}
     class:u-success={type === 'success'}
-    class:u-warning={type === 'warning'}
-    class:u-neutral={type === 'neutral'}>
+    class:u-warning={type === 'warning'}>
     {#if type}
         <span
-            class:icon-info={type === 'info'}
-            class:icon-error={type === 'error'}
-            class:icon-success={type === 'success'}
-            class:icon-warning={type === 'warning'}
-            class:icon-neutral={type === 'neutral'}
+            class:icon-info={type === 'info' || type === 'neutral'}
+            class:icon-exclamation-circle={type === 'error'}
+            class:icon-check-circle={type === 'success'}
+            class:icon-exclamation={type === 'warning'}
             aria-hidden="true" />
     {/if}
     <span class="text">

From b8fe4fcc96b5df70330746edd0727c910baf5419 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Aug 2022 17:26:39 +0200
Subject: [PATCH 069/118] feat: setting page

---
 src/routes/console/_deleteOrganization.svelte | 42 +++++++++
 src/routes/console/members@intro.svelte       |  6 +-
 src/routes/console/settings@intro.svelte      | 89 ++++++++++++++++++-
 3 files changed, 133 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/console/_deleteOrganization.svelte

diff --git a/src/routes/console/_deleteOrganization.svelte b/src/routes/console/_deleteOrganization.svelte
new file mode 100644
index 000000000..b6050103a
--- /dev/null
+++ b/src/routes/console/_deleteOrganization.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { organization } from './store';
+
+    export let showDelete = false;
+
+    const deleteUser = async () => {
+        try {
+            await sdkForConsole.teams.delete($organization.$id);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$organization.name} has been deleted`
+            });
+            await goto(`${base}/console/`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteUser}>
+    <Modal bind:show={showDelete} warning>
+        <svelte:fragment slot="header">Delete Organization</svelte:fragment>
+        <p>
+            Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})
+            and data associated with this organization will be deleted. This action is irreversible.
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/members@intro.svelte
index 65aeaed28..1dbf21e45 100644
--- a/src/routes/console/members@intro.svelte
+++ b/src/routes/console/members@intro.svelte
@@ -15,7 +15,7 @@
     import Delete from './_deleteMember.svelte';
     import Create from './_createMember.svelte';
     import { organization, memberList } from './store';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
 
@@ -26,7 +26,7 @@
     let showCreate = false;
     let showDelete = false;
 
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
+    const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 32, 32).toString();
     const deleted = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
     const created = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
 
@@ -62,7 +62,7 @@
                             <div class="u-flex u-gap-12 u-cross-center">
                                 <Avatar
                                     size={32}
-                                    src={getAvatar(member.userName) + $organization.name}
+                                    src={getAvatar(member.userName)}
                                     name={member.userName} />
                                 <span class="text u-trim"
                                     >{member.userName ? member.userName : 'n/a'}</span>
diff --git a/src/routes/console/settings@intro.svelte b/src/routes/console/settings@intro.svelte
index a01c11a41..5ef8ef366 100644
--- a/src/routes/console/settings@intro.svelte
+++ b/src/routes/console/settings@intro.svelte
@@ -1 +1,88 @@
-settings
+<script lang="ts">
+    import { CardGrid, Box, Avatar } from '$lib/components';
+    import { InputText, Form, Button } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { organization } from './store';
+    import { title, breadcrumbs } from '$lib/stores/layout';
+    import Delete from './_deleteOrganization.svelte';
+
+    let name: string = $organization.name;
+    let showDelete = false;
+
+    const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 48, 48).toString();
+
+    async function updateName() {
+        try {
+            await sdkForConsole.teams.update($organization.$id, name);
+            $organization.name = name;
+            title.set(name);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
+            breadcrumb.title = name;
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
+            addNotification({
+                message: 'Name has been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+</script>
+
+<Container>
+    <Form on:submit={updateName}>
+        <CardGrid>
+            <h6 class="heading-level-7">Update Name</h6>
+
+            <svelte:fragment slot="aside">
+                <ul>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Enter name"
+                        autocomplete={false}
+                        bind:value={name} />
+                </ul>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={name === $organization.name || !name} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
+    <CardGrid>
+        <div>
+            <h6 class="heading-level-7">Delete Organization</h6>
+        </div>
+        <p>
+            The organization will be permanently deleted, including all projects and data associated
+            with this organization. This action is irreversible.
+        </p>
+        <svelte:fragment slot="aside">
+            <Box>
+                <svelte:fragment slot="image">
+                    <Avatar
+                        size={48}
+                        name={$organization.name}
+                        src={getAvatar($organization.name)} />
+                </svelte:fragment>
+                <svelte:fragment slot="title">
+                    <h6 class="u-bold">{$organization.name}</h6>
+                </svelte:fragment>
+                <p>{$organization.total} projects</p>
+            </Box>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Container>
+
+<Delete bind:showDelete />

From 9dec0ef2db4cc67b280068ba8961ba9b292ae2f7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 22 Aug 2022 17:44:28 +0200
Subject: [PATCH 070/118] feat: create org & projects modals

---
 src/routes/console/_createOrganization.svelte | 64 ++++++++++++++++---
 src/routes/console/_createProject.svelte      | 62 +++++++++++++++---
 2 files changed, 106 insertions(+), 20 deletions(-)

diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
index 787fab444..a5967732d 100644
--- a/src/routes/console/_createOrganization.svelte
+++ b/src/routes/console/_createOrganization.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { InputText, Button, Form } from '$lib/elements/forms';
+    import { Modal, InnerModal } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -10,28 +11,71 @@
     const dispatch = createEventDispatcher();
 
     let name: string;
+    let id: string;
+    let showDropdown = false;
+    let error: string;
 
     const create = async () => {
         try {
-            await sdkForConsole.teams.create('unique()', name);
+            await sdkForConsole.teams.create(id ?? 'unique()', name);
             name = null;
             dispatch('created');
-        } catch (error) {
             addNotification({
-                type: 'error',
-                message: error.message
+                type: 'success',
+                message: `${name} has been created`
             });
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show>
-        <svelte:fragment slot="header">Create Project</svelte:fragment>
-        <InputText id="name" label="Name" bind:value={name} required />
+    <Modal {error} size="big" bind:show>
+        <svelte:fragment slot="header">Create New Organization</svelte:fragment>
+        <FormList>
+            <InputText id="name" label="Name" bind:value={name} required />
+            {#if !showDropdown}
+                <div>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                            Organization ID
+                        </span>
+                    </Pill>
+                </div>
+            {:else}
+                <InnerModal bind:show={showDropdown}>
+                    <svelte:fragment slot="title">Organization ID</svelte:fragment>
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom organization ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
+                    <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={() => (show = false)}>Cancel</Button>
+            <Button submit>Create</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/routes/console/_createProject.svelte b/src/routes/console/_createProject.svelte
index 20a9f521b..fbf906e07 100644
--- a/src/routes/console/_createProject.svelte
+++ b/src/routes/console/_createProject.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { InputText, Button, InputCustomId, Form } from '$lib/elements/forms';
+    import { Modal, InnerModal } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -12,29 +13,70 @@
 
     let id: string;
     let name: string;
+    let showDropdown = false;
+    let error: string;
 
     const create = async () => {
         try {
-            const project = await sdkForConsole.projects.create(id, name, teamId);
+            const project = await sdkForConsole.projects.create(id ?? 'unique()', name, teamId);
             id = name = null;
             dispatch('created', project);
-        } catch (error) {
             addNotification({
-                type: 'error',
-                message: error.message
+                type: 'success',
+                message: `${name} has been created`
             });
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show>
+    <Modal {error} size="big" bind:show>
         <svelte:fragment slot="header">Create Project</svelte:fragment>
-        <InputCustomId id="id" label="ID" bind:value={id} required />
-        <InputText id="name" label="Name" bind:value={name} required />
+        <FormList>
+            <InputText id="name" label="Name" bind:value={name} required />
+            {#if !showDropdown}
+                <div>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                            Project ID
+                        </span>
+                    </Pill>
+                </div>
+            {:else}
+                <InnerModal bind:show={showDropdown}>
+                    <svelte:fragment slot="title">Project ID</svelte:fragment>
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom project ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
+                    <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={() => (show = false)}>Cancel</Button>
+            <Button submit>Create</Button>
         </svelte:fragment>
     </Modal>
 </Form>

From 9d4ae0329acd90d20198401dbceee955ece66e89 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 23 Aug 2022 14:27:08 +0200
Subject: [PATCH 071/118] feat: implemented most of the pages

---
 src/lib/layout/shell.svelte                   | 30 ++++++++++----
 src/routes/console/__layout-intro.svelte      | 15 ++++++-
 src/routes/console/__layout.svelte            |  3 +-
 src/routes/console/_deleteOrganization.svelte |  5 ++-
 src/routes/console/index@intro.svelte         | 39 +++++++++++++++----
 src/routes/console/members@intro.svelte       |  8 +---
 src/routes/console/settings@intro.svelte      |  4 +-
 src/routes/console/store.ts                   |  2 +
 8 files changed, 80 insertions(+), 26 deletions(-)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 0499ef6de..024c5e6e7 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -4,13 +4,12 @@
     import { Cover } from '.';
     import { Copy, DropList, DropListItem } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { organization } from '../../routes/console/store';
+    import { Button } from '$lib/elements/forms';
+    import { organization, newOrgModal, newMemberModal } from '../../routes/console/store';
 
     export let isOpen = false;
     export let showSideNavigation = false;
 
-    // $: base = `/console/${$page.params.project}`;
-
     let tabsList: HTMLUListElement;
     let showLeft = false;
     let showRight = false;
@@ -99,19 +98,36 @@
                             </h1>
                         </button>
                         <svelte:fragment slot="list">
-                            {#each $titleDropdown as organization}
-                                <DropListItem>
-                                    {organization.name}
+                            {#each $titleDropdown as org}
+                                <DropListItem
+                                    on:click={() => {
+                                        showDropdown = false;
+                                        if (org.$id !== $organization.$id) {
+                                            organization.load(org.$id);
+                                        }
+                                    }}>
+                                    {org.name}
                                 </DropListItem>
                             {/each}
                         </svelte:fragment>
                         <svelte:fragment slot="other">
                             <section class="drop-section">
                                 <ul class="drop-list">
-                                    <DropListItem icon="plus">New Organizations</DropListItem>
+                                    <DropListItem
+                                        icon="plus"
+                                        on:click={() => {
+                                            showDropdown = false;
+                                            newOrgModal.set(true);
+                                        }}>New Organization</DropListItem>
                                 </ul>
                             </section></svelte:fragment>
                     </DropList>
+                    <div class="u-margin-inline-start-auto">
+                        <Button secondary on:click={() => newMemberModal.set(true)}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text">Invite</span>
+                        </Button>
+                    </div>
                 {:else}
                     <h1 class="heading-level-4">
                         <span class="text"> {$title}</span>
diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
index c388793ee..285ae7f1b 100644
--- a/src/routes/console/__layout-intro.svelte
+++ b/src/routes/console/__layout-intro.svelte
@@ -4,7 +4,11 @@
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
-    import { organizationList, organization } from './store';
+    import { organizationList, organization, newOrgModal, newMemberModal } from './store';
+    import CreateMember from './_createMember.svelte';
+    import Create from './_createOrganization.svelte';
+
+    const created = () => console.log('test');
 
     onMount(handle);
     afterNavigate(handle);
@@ -16,7 +20,7 @@
         }
         updateLayout({
             navigate: event,
-            title: `${$organizationList.teams[0].name}`,
+            title: $organization?.name ?? `${$organizationList.teams[0].name}`,
             titleDropdown: $organizationList.teams,
             level: 0,
             customBase: '',
@@ -40,6 +44,10 @@
             ]
         });
     }
+
+    organization.subscribe(() => {
+        handle();
+    });
 </script>
 
 <svelte:head>
@@ -55,3 +63,6 @@
         <footer class="main-footer" />
     </Shell>
 {/if}
+
+<Create bind:show={$newOrgModal} on:created={() => created()} />
+<CreateMember bind:showCreate={$newMemberModal} on:created={() => created()} />
diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index 340e96d0d..929e21596 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -3,9 +3,10 @@
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
     import { updateLayout } from '$lib/stores/layout';
+    import { organization } from './store';
 
     updateLayout({
-        title: 'Projects',
+        title: $organization.name ?? 'Projects',
         level: 0
     });
 </script>
diff --git a/src/routes/console/_deleteOrganization.svelte b/src/routes/console/_deleteOrganization.svelte
index b6050103a..edd51b37f 100644
--- a/src/routes/console/_deleteOrganization.svelte
+++ b/src/routes/console/_deleteOrganization.svelte
@@ -5,7 +5,7 @@
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { organization } from './store';
+    import { organization, organizationList } from './store';
 
     export let showDelete = false;
 
@@ -17,6 +17,9 @@
                 type: 'success',
                 message: `${$organization.name} has been deleted`
             });
+            if ($organizationList?.total) {
+                organization.set($organizationList.teams[0]);
+            }
             await goto(`${base}/console/`);
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/index@intro.svelte b/src/routes/console/index@intro.svelte
index ff24b1d82..63c62e6d6 100644
--- a/src/routes/console/index@intro.svelte
+++ b/src/routes/console/index@intro.svelte
@@ -2,7 +2,7 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Pill } from '$lib/elements';
-    import { Bucket, EmptyBucket, Pagination } from '$lib/components';
+    import { Bucket, EmptyBucket, Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -28,6 +28,12 @@
     const projectCreated = async (event: CustomEvent<Models.Project>) => {
         await goto(`${base}/console/${event.detail.$id}`);
     };
+
+    $: if (currentOrganization !== $organization?.$id) {
+        currentOrganization = $organization.$id;
+        projectList.load();
+        projects = $projectList.projects.filter((a) => a.teamId === $organization.$id);
+    }
     //TODO: fix technology icon display
 </script>
 
@@ -69,12 +75,31 @@
                         </Button>
                     </div>
                     <div class="common-section">
-                        <p>Add a new bucket</p>
+                        <p>Create a new project</p>
                     </div>
                 </EmptyBucket>
             {/if}
         </ul>
 
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {projects.length}</p>
+            <Pagination {limit} bind:offset sum={projects.length} />
+        </div>
+    {:else}
+        <Empty dashed centered>
+            <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 project</p>
+                    </div>
+                </div>
+            </div>
+        </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {projects.length}</p>
             <Pagination {limit} bind:offset sum={projects.length} />
@@ -84,9 +109,7 @@
 
 <CreateOrganization bind:show={addOrganization} />
 
-{#if projects?.length}
-    <CreateProject
-        bind:show={showCreate}
-        bind:teamId={currentOrganization}
-        on:created={projectCreated} />
-{/if}
+<CreateProject
+    bind:show={showCreate}
+    bind:teamId={currentOrganization}
+    on:created={projectCreated} />
diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/members@intro.svelte
index 1dbf21e45..3c4c67a56 100644
--- a/src/routes/console/members@intro.svelte
+++ b/src/routes/console/members@intro.svelte
@@ -13,8 +13,7 @@
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import Delete from './_deleteMember.svelte';
-    import Create from './_createMember.svelte';
-    import { organization, memberList } from './store';
+    import { organization, memberList, newMemberModal } from './store';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
@@ -23,12 +22,10 @@
     let offset: number = null;
 
     let selectedMember: Models.Membership;
-    let showCreate = false;
     let showDelete = false;
 
     const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 32, 32).toString();
     const deleted = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
-    const created = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
 
     $: if (search) offset = 0;
     $: memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
@@ -41,7 +38,7 @@
 
             <Button
                 on:click={() => {
-                    showCreate = true;
+                    newMemberModal.set(true);
                 }}>
                 <span class="icon-plus" aria-hidden="true" />
                 <span class="text">Invite</span>
@@ -102,7 +99,6 @@
     {/if}
 </Container>
 
-<Create bind:showCreate on:created={() => created()} />
 {#if selectedMember}
     <Delete {selectedMember} bind:showDelete on:deleted={() => deleted()} />
 {/if}
diff --git a/src/routes/console/settings@intro.svelte b/src/routes/console/settings@intro.svelte
index 5ef8ef366..89eb48849 100644
--- a/src/routes/console/settings@intro.svelte
+++ b/src/routes/console/settings@intro.svelte
@@ -18,7 +18,7 @@
             await sdkForConsole.teams.update($organization.$id, name);
             $organization.name = name;
             title.set(name);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
+            const breadcrumb = $breadcrumbs.get(0);
             breadcrumb.title = name;
             $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
             addNotification({
@@ -32,6 +32,8 @@
             });
         }
     }
+
+    organization.subscribe((org) => (name = org.name));
 </script>
 
 <Container>
diff --git a/src/routes/console/store.ts b/src/routes/console/store.ts
index 1afbbef00..1bacf460f 100644
--- a/src/routes/console/store.ts
+++ b/src/routes/console/store.ts
@@ -71,6 +71,8 @@ export const organizationList = createOrganizationList();
 export const organization = createOrganization();
 export const projectList = createProjectList();
 export const memberList = createMemberList();
+export const newOrgModal = writable<boolean>(false);
+export const newMemberModal = writable<boolean>(false);
 
 if (browser) {
     organizationList.subscribe((n) =>

From a609a741c7b1cd3eecc9878b4e94d736ab5e3f6f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 23 Aug 2022 16:46:20 +0200
Subject: [PATCH 072/118] feat: after creation logic

---
 src/routes/console/__layout-intro.svelte      |  6 ++----
 src/routes/console/_createMember.svelte       |  5 +++--
 src/routes/console/_createOrganization.svelte | 19 +++++++++++++++---
 src/routes/console/members@intro.svelte       | 20 +++++++++++++++----
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
index 285ae7f1b..bed63bdb5 100644
--- a/src/routes/console/__layout-intro.svelte
+++ b/src/routes/console/__layout-intro.svelte
@@ -8,8 +8,6 @@
     import CreateMember from './_createMember.svelte';
     import Create from './_createOrganization.svelte';
 
-    const created = () => console.log('test');
-
     onMount(handle);
     afterNavigate(handle);
 
@@ -64,5 +62,5 @@
     </Shell>
 {/if}
 
-<Create bind:show={$newOrgModal} on:created={() => created()} />
-<CreateMember bind:showCreate={$newMemberModal} on:created={() => created()} />
+<Create bind:show={$newOrgModal} />
+<CreateMember bind:showCreate={$newMemberModal} />
diff --git a/src/routes/console/_createMember.svelte b/src/routes/console/_createMember.svelte
index 3b28cb642..4870b69cd 100644
--- a/src/routes/console/_createMember.svelte
+++ b/src/routes/console/_createMember.svelte
@@ -6,7 +6,8 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
-    import { organization } from './store';
+    import { organization, memberList } from './store';
+    import { pageLimit } from '$lib/stores/layout';
 
     export let showCreate = false;
 
@@ -29,6 +30,7 @@
                 type: 'success',
                 message: `Invite has been sent to ${email}`
             });
+            memberList.load($organization.$id, '', $pageLimit, 0);
             dispatch('created', team);
         } catch ({ message }) {
             error = message;
@@ -54,7 +56,6 @@
                 id="name"
                 label="Name (optional)"
                 placeholder="Enter name"
-                autofocus={true}
                 bind:value={name} />
         </FormList>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
index a5967732d..11be43e64 100644
--- a/src/routes/console/_createOrganization.svelte
+++ b/src/routes/console/_createOrganization.svelte
@@ -5,6 +5,8 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
+    import { organization, organizationList } from './store';
+    import { titleDropdown } from '$lib/stores/layout';
 
     export let show = false;
 
@@ -17,13 +19,18 @@
 
     const create = async () => {
         try {
-            await sdkForConsole.teams.create(id ?? 'unique()', name);
-            name = null;
+            const team = await sdkForConsole.teams.create(id ?? 'unique()', name);
             dispatch('created');
+            await organizationList.load();
+            titleDropdown.set($organizationList.teams);
+            organization.set(team);
             addNotification({
                 type: 'success',
                 message: `${name} has been created`
             });
+            name = null;
+            id = null;
+            show = false;
         } catch ({ message }) {
             error = message;
         }
@@ -34,7 +41,13 @@
     <Modal {error} size="big" bind:show>
         <svelte:fragment slot="header">Create New Organization</svelte:fragment>
         <FormList>
-            <InputText id="name" label="Name" bind:value={name} required />
+            <InputText
+                id="name"
+                label="Name"
+                placeholder="Enter name"
+                bind:value={name}
+                autofocus={true}
+                required />
             {#if !showDropdown}
                 <div>
                     <Pill button on:click={() => (showDropdown = !showDropdown)}>
diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/members@intro.svelte
index 3c4c67a56..b858d6602 100644
--- a/src/routes/console/members@intro.svelte
+++ b/src/routes/console/members@intro.svelte
@@ -17,15 +17,26 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
+    import { page } from '$app/stores';
 
     let search = '';
     let offset: number = null;
 
     let selectedMember: Models.Membership;
     let showDelete = false;
+    const url = `${$page.url.origin}/console/`;
 
-    const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 32, 32).toString();
+    const getAvatar = (name: string) =>
+        sdkForConsole.avatars.getInitials(name, 120, 120).toString();
     const deleted = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
+    const resend = async (member: Models.Membership) =>
+        await sdkForConsole.teams.createMembership(
+            $organization.$id,
+            member.userEmail,
+            member.roles,
+            url,
+            member.userName
+        );
 
     $: if (search) offset = 0;
     $: memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
@@ -58,7 +69,7 @@
                         <TableCell title="Name">
                             <div class="u-flex u-gap-12 u-cross-center">
                                 <Avatar
-                                    size={32}
+                                    size={40}
                                     src={getAvatar(member.userName)}
                                     name={member.userName} />
                                 <span class="text u-trim"
@@ -71,7 +82,7 @@
                         <TableCellText title="Email">{member.userEmail}</TableCellText>
                         <TableCell title="Roles">
                             {#if member.invited && !member.joined}
-                                <Button secondary>Resend</Button>
+                                <Button secondary on:click={() => resend(member)}>Resend</Button>
                             {:else}
                                 {member.roles}
                             {/if}
@@ -81,7 +92,8 @@
                             <button
                                 class="button is-only-icon is-text"
                                 aria-label="Delete item"
-                                on:click|preventDefault={() => {
+                                disabled={$memberList.total === 1}
+                                on:click={() => {
                                     selectedMember = member;
                                     showDelete = true;
                                 }}>

From 3abad19f02bbadde3a0bed645a94b7ab9761e7ea Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 10:49:43 +0200
Subject: [PATCH 073/118] feat: header dropdown organization implementation

---
 src/lib/layout/header.svelte                  | 35 ++++++++++++++++---
 src/routes/console/__layout.svelte            |  7 +++-
 src/routes/console/_createOrganization.svelte |  2 ++
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 7fed4fb51..904bea66a 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -10,8 +10,18 @@
     import LightMode from '$lib/images/mode/light-mode.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import SystemMode from '$lib/images/mode/system-mode.svg';
+    import { organizationList, organization, newOrgModal } from '../../routes/console/store';
+    import { onMount } from 'svelte';
+    import { goto } from '$app/navigation';
 
     let showDropdown = false;
+
+    onMount(async () => {
+        await organizationList.load();
+        if (!$organization) {
+            await organization.load($organizationList.teams[0].$id);
+        }
+    });
 </script>
 
 <a class="logo" href={`${base}/console`}>
@@ -41,8 +51,8 @@
                         src={sdkForConsole.avatars.getInitials($user.name, 40, 40).toString()} />
                     <span class="user-profile-info is-only-desktop">
                         <span class="name">{$user.name}</span>
-                        {#if $project}
-                            <span class="title">{$project.name}</span>
+                        {#if $organization}
+                            <span class="title">{$organization.name}</span>
                         {/if}
                     </span>
                     <span
@@ -52,10 +62,27 @@
                         class:icon-cheveron-down={!showDropdown} />
                 </button>
                 <svelte:fragment slot="list">
-                    <DropListItem icon="plus">New organization</DropListItem>
-                    <DropListLink href="/console/$me">Your Account</DropListLink>
+                    {#each $organizationList.teams as org}
+                        <DropListItem
+                            on:click={() => {
+                                showDropdown = false;
+                                goto(`/console`);
+                                organization.set(org);
+                            }}>{org.name}</DropListItem>
+                    {/each}
                 </svelte:fragment>
                 <svelte:fragment slot="other">
+                    <section class="drop-section">
+                        <ul class="drop-list">
+                            <DropListItem
+                                icon="plus"
+                                on:click={() => {
+                                    showDropdown = false;
+                                    newOrgModal.set(true);
+                                }}>New organization</DropListItem>
+                            <DropListLink href="/console/$me">Your Account</DropListLink>
+                        </ul>
+                    </section>
                     <section class="drop-section">
                         <ul class="u-flex u-gap-12">
                             <li>
diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index 929e21596..f0c1cf891 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -3,7 +3,8 @@
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
     import { updateLayout } from '$lib/stores/layout';
-    import { organization } from './store';
+    import { organization, newOrgModal } from './store';
+    import Create from './_createOrganization.svelte';
 
     updateLayout({
         title: $organization.name ?? 'Projects',
@@ -21,3 +22,7 @@
     <slot />
     <footer class="main-footer" />
 </Shell>
+
+{#if $newOrgModal}
+    <Create bind:show={$newOrgModal} />
+{/if}
diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
index 11be43e64..ab728957b 100644
--- a/src/routes/console/_createOrganization.svelte
+++ b/src/routes/console/_createOrganization.svelte
@@ -7,6 +7,7 @@
     import { createEventDispatcher } from 'svelte';
     import { organization, organizationList } from './store';
     import { titleDropdown } from '$lib/stores/layout';
+    import { goto } from '$app/navigation';
 
     export let show = false;
 
@@ -24,6 +25,7 @@
             await organizationList.load();
             titleDropdown.set($organizationList.teams);
             organization.set(team);
+            goto('/console');
             addNotification({
                 type: 'success',
                 message: `${name} has been created`

From c84c516b7f74f110b61e38307fa95d603123460a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 11:16:18 +0200
Subject: [PATCH 074/118] chore: remove unused import

---
 src/lib/layout/header.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 904bea66a..ae2a99ec7 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -5,7 +5,6 @@
     import { app } from '$lib/stores/app';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
-    import { project } from '../../routes/console/[project]/store';
     import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
     import LightMode from '$lib/images/mode/light-mode.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';

From 8e843d410de3819a7c1d2f6427afe0c1587dab03 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 13:15:44 +0200
Subject: [PATCH 075/118] feat: add & implement avatar group

---
 src/lib/components/avatarGroup.svelte    | 20 ++++++++++++++
 src/lib/components/index.ts              |  1 +
 src/lib/layout/shell.svelte              | 35 ++++++++++++++++++++----
 src/routes/console/__layout-intro.svelte |  9 +++++-
 src/routes/console/members@intro.svelte  | 15 ++++++++++
 src/routes/console/settings@intro.svelte | 26 ++++++++++++------
 6 files changed, 91 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/avatarGroup.svelte

diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
new file mode 100644
index 000000000..f3433f339
--- /dev/null
+++ b/src/lib/components/avatarGroup.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import Avatar from './avatar.svelte';
+    export let avatars = [];
+    export let total = avatars.length;
+</script>
+
+<ul class="avatars-group">
+    {#each avatars as av, index}
+        {#if index < 3}
+            <li class="avatars-group-item">
+                <Avatar size={40} src={av.img} name={av.name} />
+            </li>
+        {/if}
+    {/each}
+    {#if total > 3}
+        <li class="avatars-group-item">
+            <div class="avatar">+{total - 3}</div>
+        </li>
+    {/if}
+</ul>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 913160204..250b75ec7 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -19,6 +19,7 @@ export { default as Collapsible } from './collapsible.svelte';
 export { default as DropTabs } from './dropTabs.svelte';
 export { default as DropTabsItem } from './dropTabsItem.svelte';
 export { default as Avatar } from './avatar.svelte';
+export { default as AvatarGroup } from './avatarGroup.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 024c5e6e7..dd11c4dfa 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -2,10 +2,16 @@
     import { navigating, page } from '$app/stores';
     import { tabs, title, backButton, copyData, titleDropdown } from '$lib/stores/layout';
     import { Cover } from '.';
-    import { Copy, DropList, DropListItem } from '$lib/components';
+    import { Copy, DropList, DropListItem, AvatarGroup } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
-    import { organization, newOrgModal, newMemberModal } from '../../routes/console/store';
+    import {
+        organization,
+        memberList,
+        newOrgModal,
+        newMemberModal
+    } from '../../routes/console/store';
+    import { sdkForConsole } from '$lib/stores/sdk';
 
     export let isOpen = false;
     export let showSideNavigation = false;
@@ -33,6 +39,20 @@
             }
         }, 10);
     };
+    let avatars = [];
+    let avatarsTotal = 0;
+
+    memberList.subscribe((value) => {
+        if (value?.total > 0) {
+            avatarsTotal = value.total;
+            avatars = value.memberships.map((team) => {
+                return {
+                    name: team.userName,
+                    img: sdkForConsole.avatars.getInitials(team.userName, 120, 120).toString()
+                };
+            });
+        }
+    });
 
     const onScroll = () => {
         if (!tabsList) {
@@ -123,10 +143,13 @@
                             </section></svelte:fragment>
                     </DropList>
                     <div class="u-margin-inline-start-auto">
-                        <Button secondary on:click={() => newMemberModal.set(true)}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Invite</span>
-                        </Button>
+                        <div class="u-flex u-gap-16">
+                            <AvatarGroup {avatars} total={avatarsTotal} />
+                            <Button secondary on:click={() => newMemberModal.set(true)}>
+                                <span class="icon-plus" aria-hidden="true" />
+                                <span class="text">Invite</span>
+                            </Button>
+                        </div>
                     </div>
                 {:else}
                     <h1 class="heading-level-4">
diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
index bed63bdb5..2fc2e7f30 100644
--- a/src/routes/console/__layout-intro.svelte
+++ b/src/routes/console/__layout-intro.svelte
@@ -4,7 +4,13 @@
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
-    import { organizationList, organization, newOrgModal, newMemberModal } from './store';
+    import {
+        organizationList,
+        organization,
+        memberList,
+        newOrgModal,
+        newMemberModal
+    } from './store';
     import CreateMember from './_createMember.svelte';
     import Create from './_createOrganization.svelte';
 
@@ -15,6 +21,7 @@
         await organizationList.load();
         if (!$organization) {
             await organization.load($organizationList.teams[0].$id);
+            await memberList.load($organization.$id, '', 100, 0);
         }
         updateLayout({
             navigate: event,
diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/members@intro.svelte
index b858d6602..0cc0eedc8 100644
--- a/src/routes/console/members@intro.svelte
+++ b/src/routes/console/members@intro.svelte
@@ -38,6 +38,21 @@
             member.userName
         );
 
+    let avatars = [];
+    let avatarsTotal = 0;
+
+    memberList.subscribe((value) => {
+        if (value?.total > 0) {
+            avatarsTotal = value.total;
+            avatars = value.memberships.map((team) => {
+                return {
+                    name: team.userName,
+                    img: sdkForConsole.avatars.getInitials(team.userName, 120, 120).toString()
+                };
+            });
+        }
+    });
+
     $: if (search) offset = 0;
     $: memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
 </script>
diff --git a/src/routes/console/settings@intro.svelte b/src/routes/console/settings@intro.svelte
index 89eb48849..51851d1bc 100644
--- a/src/routes/console/settings@intro.svelte
+++ b/src/routes/console/settings@intro.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
-    import { CardGrid, Box, Avatar } from '$lib/components';
+    import { CardGrid, Box, AvatarGroup } from '$lib/components';
     import { InputText, Form, Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { organization } from './store';
+    import { organization, memberList } from './store';
     import { title, breadcrumbs } from '$lib/stores/layout';
     import Delete from './_deleteOrganization.svelte';
 
     let name: string = $organization.name;
     let showDelete = false;
 
-    const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 48, 48).toString();
-
     async function updateName() {
         try {
             await sdkForConsole.teams.update($organization.$id, name);
@@ -34,6 +32,21 @@
     }
 
     organization.subscribe((org) => (name = org.name));
+
+    let avatars = [];
+    let avatarsTotal = 0;
+
+    memberList.subscribe((value) => {
+        if (value?.total > 0) {
+            avatarsTotal = value.total;
+            avatars = value.memberships.map((team) => {
+                return {
+                    name: team.userName,
+                    img: sdkForConsole.avatars.getInitials(team.userName, 120, 120).toString()
+                };
+            });
+        }
+    });
 </script>
 
 <Container>
@@ -69,10 +82,7 @@
         <svelte:fragment slot="aside">
             <Box>
                 <svelte:fragment slot="image">
-                    <Avatar
-                        size={48}
-                        name={$organization.name}
-                        src={getAvatar($organization.name)} />
+                    <AvatarGroup {avatars} total={avatarsTotal} />
                 </svelte:fragment>
                 <svelte:fragment slot="title">
                     <h6 class="u-bold">{$organization.name}</h6>

From e6bdd4f48b9f7b61098a250e81c0d4e964174545 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 13:34:54 +0200
Subject: [PATCH 076/118] fix: memberlist updated on org change

---
 src/routes/console/settings@intro.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/settings@intro.svelte b/src/routes/console/settings@intro.svelte
index 51851d1bc..4c19cd25e 100644
--- a/src/routes/console/settings@intro.svelte
+++ b/src/routes/console/settings@intro.svelte
@@ -31,7 +31,10 @@
         }
     }
 
-    organization.subscribe((org) => (name = org.name));
+    organization.subscribe((org) => {
+        name = org.name;
+        memberList.load(org.$id, '', 100, 0);
+    });
 
     let avatars = [];
     let avatarsTotal = 0;

From 01ba06f9014800306fcaac78363b10d79b5b019b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 13:39:04 +0200
Subject: [PATCH 077/118] chore:  remove unused code

---
 src/routes/console/members@intro.svelte | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/members@intro.svelte
index 0cc0eedc8..b858d6602 100644
--- a/src/routes/console/members@intro.svelte
+++ b/src/routes/console/members@intro.svelte
@@ -38,21 +38,6 @@
             member.userName
         );
 
-    let avatars = [];
-    let avatarsTotal = 0;
-
-    memberList.subscribe((value) => {
-        if (value?.total > 0) {
-            avatarsTotal = value.total;
-            avatars = value.memberships.map((team) => {
-                return {
-                    name: team.userName,
-                    img: sdkForConsole.avatars.getInitials(team.userName, 120, 120).toString()
-                };
-            });
-        }
-    });
-
     $: if (search) offset = 0;
     $: memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
 </script>

From 1c65d46e38d8ddfc03c057bf3532ab164e8bdea0 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 13:45:18 +0200
Subject: [PATCH 078/118] fix: breadcrumbs

---
 src/routes/console/[project]/__layout.svelte | 10 +++++-----
 src/routes/console/[project]/store.ts        | 14 --------------
 2 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/src/routes/console/[project]/__layout.svelte b/src/routes/console/[project]/__layout.svelte
index 037aeeae6..c6ba7b9ce 100644
--- a/src/routes/console/[project]/__layout.svelte
+++ b/src/routes/console/[project]/__layout.svelte
@@ -4,7 +4,8 @@
     import { sdkForConsole, setProject } from '$lib/stores/sdk';
     import { collection } from './databases/database/[database]/collection/[collection]/store';
     import { UploadBox } from '$lib/components';
-    import { organization, project } from './store';
+    import { project } from './store';
+    import { organization } from '../store';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
     import { updateLayout } from '$lib/stores/layout';
@@ -47,7 +48,6 @@
     afterNavigate(handle);
 
     let loaded = false;
-    const path = 'console';
     async function handle(event = null) {
         if ($project?.$id !== projectId) {
             setProject(projectId);
@@ -63,9 +63,9 @@
             level: 1,
             breadcrumbs: [
                 {
-                    href: path,
-                    title: $project.name,
-                    level: 1
+                    href: 'console',
+                    title: $organization.name,
+                    level: 0
                 },
                 {
                     href: $project.$id,
diff --git a/src/routes/console/[project]/store.ts b/src/routes/console/[project]/store.ts
index d7f8ee666..83a1a5c53 100644
--- a/src/routes/console/[project]/store.ts
+++ b/src/routes/console/[project]/store.ts
@@ -15,18 +15,4 @@ function createProject() {
     };
 }
 
-function createOrganization() {
-    const { subscribe, set } = writable<Models.Team>();
-
-    return {
-        subscribe,
-        set,
-        load: async (teamId: string) => {
-            const team = await sdkForConsole.teams.get(teamId);
-            set(team);
-        }
-    };
-}
-
 export const project = createProject();
-export const organization = createOrganization();

From 57dfa70c3c147dd001dda0d6b79285638c09215e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 14:13:03 +0200
Subject: [PATCH 079/118] fix: reduce number of avatars shown

---
 src/lib/components/avatarGroup.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
index f3433f339..b9165f77b 100644
--- a/src/lib/components/avatarGroup.svelte
+++ b/src/lib/components/avatarGroup.svelte
@@ -6,15 +6,15 @@
 
 <ul class="avatars-group">
     {#each avatars as av, index}
-        {#if index < 3}
+        {#if index < 2}
             <li class="avatars-group-item">
                 <Avatar size={40} src={av.img} name={av.name} />
             </li>
         {/if}
     {/each}
-    {#if total > 3}
+    {#if total > 2}
         <li class="avatars-group-item">
-            <div class="avatar">+{total - 3}</div>
+            <div class="avatar">+{total - 2}</div>
         </li>
     {/if}
 </ul>

From 08dc600aa7e322f5f8c96fa8b6c9fcc97ac151fe Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 15:40:10 +0200
Subject: [PATCH 080/118] chore: bump css to 0.0.0-45

---
 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 1bc07f1b2..651f8a556 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-45",
+                "@aw-labs/ui": "0.0.0-45",
                 "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-44",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-44.tgz",
-            "integrity": "sha512-nZ/YfsgFR5EYItnHKSoMmCMMeQPOUoGCsIgtcKW8iEhMjoZK8PxU8qnoLnAZOJONDSY484G9j7/yofdeXTfL8Q=="
+            "version": "0.0.0-45",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-45.tgz",
+            "integrity": "sha512-6q2toC87HkUYdKuYTIiAvM97PvLy8iEIllMbfRvB5JwtDqfHcaB9QySu12ZhIOExl1c3Q0CZcKaL0rdXLvD8Cg=="
         },
         "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-45",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-45.tgz",
+            "integrity": "sha512-diQLBH9XA69DbsWikntcFOzs2GR4OTF1fCujhucSFprxPDJ1sNtsTVvWvFJqxpL1AUofJ/FSsN3aKNsHtEH0kQ==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7698,14 +7698,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-45",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-45.tgz",
+            "integrity": "sha512-6q2toC87HkUYdKuYTIiAvM97PvLy8iEIllMbfRvB5JwtDqfHcaB9QySu12ZhIOExl1c3Q0CZcKaL0rdXLvD8Cg=="
         },
         "@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-45",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-45.tgz",
+            "integrity": "sha512-diQLBH9XA69DbsWikntcFOzs2GR4OTF1fCujhucSFprxPDJ1sNtsTVvWvFJqxpL1AUofJ/FSsN3aKNsHtEH0kQ==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index eb2db585c..bc6026c27 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-45",
+        "@aw-labs/ui": "0.0.0-45",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7",
         "web-vitals": "^2.1.4"

From 9b93d5e769fac66f119a34075361b4d0fe644676 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 15:40:37 +0200
Subject: [PATCH 081/118] feat: add icon to platforms

---
 src/routes/console/__layout-intro.svelte |  3 +-
 src/routes/console/index@intro.svelte    | 47 ++++++++++++++++++++----
 src/routes/console/settings@intro.svelte |  1 -
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
index 2fc2e7f30..161b1b74a 100644
--- a/src/routes/console/__layout-intro.svelte
+++ b/src/routes/console/__layout-intro.svelte
@@ -50,8 +50,9 @@
         });
     }
 
-    organization.subscribe(() => {
+    organization.subscribe((org) => {
         handle();
+        memberList.load(org.$id, '', 100, 0);
     });
 </script>
 
diff --git a/src/routes/console/index@intro.svelte b/src/routes/console/index@intro.svelte
index 63c62e6d6..6ea0852a3 100644
--- a/src/routes/console/index@intro.svelte
+++ b/src/routes/console/index@intro.svelte
@@ -12,11 +12,18 @@
     import { onMount } from 'svelte';
 
     let projects: Models.Project[] = [];
+    let platforms = [];
 
     onMount(async () => {
         await projectList.load();
 
-        projects = $projectList.projects.filter((a) => a.teamId === $organization.$id);
+        projects = $projectList.projects.filter((n) => n.teamId === $organization.$id);
+
+        //Not sure about this
+        platforms = projects.map((project) => {
+            let platformList = project.platforms.map((platform) => platform.type);
+            return Array.from(new Set(platformList));
+        });
     });
 
     let showCreate = false;
@@ -29,12 +36,28 @@
         await goto(`${base}/console/${event.detail.$id}`);
     };
 
+    const platformsName = {
+        web: 'Web',
+        'flutter-ios': 'Flutter',
+        'flutter-android': 'Flutter',
+        ios: 'Apple',
+        android: 'Android',
+        unity: 'Unity'
+    };
+    const platformsIcon = {
+        web: 'code',
+        'flutter-ios': 'flutter',
+        'flutter-android': 'flutter',
+        ios: 'apple',
+        android: 'android',
+        unity: 'unity'
+    };
+
     $: if (currentOrganization !== $organization?.$id) {
         currentOrganization = $organization.$id;
         projectList.load();
         projects = $projectList.projects.filter((a) => a.teamId === $organization.$id);
     }
-    //TODO: fix technology icon display
 </script>
 
 <Container>
@@ -53,18 +76,28 @@
         <ul
             class="grid-box common-section u-margin-block-start-32"
             style={`--grid-gap:2rem; --grid-item-size:${projects.length > 3 ? '22rem' : '25rem'};`}>
-            {#each projects as project}
+            {#each projects as project, i}
                 <Bucket href={`${base}/console/${project.$id}`}>
                     <svelte:fragment slot="eyebrow"
                         >{project?.platforms?.length ?? 0} apps</svelte:fragment>
                     <svelte:fragment slot="title">
                         {project.name}
                     </svelte:fragment>
-                    {#each project.platforms as platform}
-                        <Pill>
-                            <span class={`icon-${platform.type}`} aria-hidden="true" />
-                            {platform.type}</Pill>
+                    {#each platforms[i] as platform, i}
+                        {#if i < 3}
+                            <Pill>
+                                <span
+                                    class={`icon-${platformsIcon[platform]}`}
+                                    aria-hidden="true" />
+                                {platformsName[platform]}
+                            </Pill>
+                        {/if}
                     {/each}
+                    {#if platforms?.length > 3}
+                        <Pill>
+                            +{project.platforms.length - 3}
+                        </Pill>
+                    {/if}
                 </Bucket>
             {/each}
             {#if projects.length % 2 !== 0}
diff --git a/src/routes/console/settings@intro.svelte b/src/routes/console/settings@intro.svelte
index 4c19cd25e..6671a9ca8 100644
--- a/src/routes/console/settings@intro.svelte
+++ b/src/routes/console/settings@intro.svelte
@@ -33,7 +33,6 @@
 
     organization.subscribe((org) => {
         name = org.name;
-        memberList.load(org.$id, '', 100, 0);
     });
 
     let avatars = [];

From 1afa01d16bf9febb48b1b9d53b9d21f441a7d522 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 15:44:15 +0200
Subject: [PATCH 082/118] refactor: cleaned platfom code

---
 src/routes/console/index@intro.svelte | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/routes/console/index@intro.svelte b/src/routes/console/index@intro.svelte
index 6ea0852a3..26fda56cf 100644
--- a/src/routes/console/index@intro.svelte
+++ b/src/routes/console/index@intro.svelte
@@ -12,18 +12,11 @@
     import { onMount } from 'svelte';
 
     let projects: Models.Project[] = [];
-    let platforms = [];
 
     onMount(async () => {
         await projectList.load();
 
         projects = $projectList.projects.filter((n) => n.teamId === $organization.$id);
-
-        //Not sure about this
-        platforms = projects.map((project) => {
-            let platformList = project.platforms.map((platform) => platform.type);
-            return Array.from(new Set(platformList));
-        });
     });
 
     let showCreate = false;
@@ -76,14 +69,16 @@
         <ul
             class="grid-box common-section u-margin-block-start-32"
             style={`--grid-gap:2rem; --grid-item-size:${projects.length > 3 ? '22rem' : '25rem'};`}>
-            {#each projects as project, i}
+            {#each projects as project}
                 <Bucket href={`${base}/console/${project.$id}`}>
                     <svelte:fragment slot="eyebrow"
                         >{project?.platforms?.length ?? 0} apps</svelte:fragment>
                     <svelte:fragment slot="title">
                         {project.name}
                     </svelte:fragment>
-                    {#each platforms[i] as platform, i}
+                    {@const platformList = project.platforms.map((platform) => platform.type)}
+                    {@const platforms = Array.from(new Set(platformList))}
+                    {#each platforms as platform, i}
                         {#if i < 3}
                             <Pill>
                                 <span

From 8d44b8ac21539734536ecedc321fa8543c57284f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 24 Aug 2022 16:30:01 +0200
Subject: [PATCH 083/118] feat: forced modal when no org available

---
 src/lib/components/modal.svelte               | 25 +++---
 src/routes/console/__layout-intro.svelte      | 85 ++++++++++---------
 src/routes/console/_createOrganization.svelte |  4 +-
 3 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 137463f0f..05da1e24f 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -8,6 +8,7 @@
     export let size: 'small' | 'big' = null;
     export let warning = false;
     export let error: string = null;
+    export let closable = true;
 
     const dispatch = createEventDispatcher();
     const transitionFly: FlyParams = {
@@ -31,8 +32,10 @@
         }
     };
     const closeModal = () => {
-        show = false;
-        dispatch('close');
+        if (closable) {
+            show = false;
+            dispatch('close');
+        }
     };
 
     /**
@@ -65,14 +68,16 @@
                 <h4 class="heading-level-5">
                     <slot name="header" />
                 </h4>
-                <button
-                    type="button"
-                    class="x-button"
-                    aria-label="Close Modal"
-                    title="Close Modal"
-                    on:click={closeModal}>
-                    <span class="icon-x" aria-hidden="true" />
-                </button>
+                {#if closable}
+                    <button
+                        type="button"
+                        class="x-button"
+                        aria-label="Close Modal"
+                        title="Close Modal"
+                        on:click={closeModal}>
+                        <span class="icon-x" aria-hidden="true" />
+                    </button>
+                {/if}
             </header>
             <div class="modal-content">
                 {#if error}
diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
index 161b1b74a..3f77101ba 100644
--- a/src/routes/console/__layout-intro.svelte
+++ b/src/routes/console/__layout-intro.svelte
@@ -19,40 +19,49 @@
 
     async function handle(event = null) {
         await organizationList.load();
-        if (!$organization) {
-            await organization.load($organizationList.teams[0].$id);
-            await memberList.load($organization.$id, '', 100, 0);
+        if ($organizationList?.total) {
+            if (!$organization) {
+                await organization.load($organizationList.teams[0].$id);
+                await memberList.load($organization.$id, '', 100, 0);
+            }
+            updateLayout({
+                navigate: event,
+                title: $organization?.name ?? `${$organizationList.teams[0].name}`,
+                titleDropdown: $organizationList.teams,
+                level: 0,
+                customBase: '',
+                breadcrumbs: {
+                    title: `${$organization.name}`,
+                    href: 'console'
+                },
+                tabs: [
+                    {
+                        href: 'console',
+                        title: 'Projects'
+                    },
+                    {
+                        href: 'console/members',
+                        title: 'Members'
+                    },
+                    {
+                        href: 'console/settings',
+                        title: 'Settings'
+                    }
+                ]
+            });
+        } else {
+            $newOrgModal = true;
+            closable = false;
         }
-        updateLayout({
-            navigate: event,
-            title: $organization?.name ?? `${$organizationList.teams[0].name}`,
-            titleDropdown: $organizationList.teams,
-            level: 0,
-            customBase: '',
-            breadcrumbs: {
-                title: `${$organization.name}`,
-                href: 'console'
-            },
-            tabs: [
-                {
-                    href: 'console',
-                    title: 'Projects'
-                },
-                {
-                    href: 'console/members',
-                    title: 'Members'
-                },
-                {
-                    href: 'console/settings',
-                    title: 'Settings'
-                }
-            ]
-        });
     }
 
+    let closable = true;
+
     organization.subscribe((org) => {
         handle();
-        memberList.load(org.$id, '', 100, 0);
+        if (org?.$id) {
+            memberList.load(org.$id, '', 100, 0);
+        }
     });
 </script>
 
@@ -60,15 +69,15 @@
     <title>Appwrite - Console</title>
 </svelte:head>
 
-{#if $organization}
-    <Shell>
-        <svelte:fragment slot="header">
-            <Header />
-        </svelte:fragment>
+<Shell>
+    <svelte:fragment slot="header">
+        <Header />
+    </svelte:fragment>
+    {#if $organization}
         <slot />
-        <footer class="main-footer" />
-    </Shell>
-{/if}
+    {/if}
+    <footer class="main-footer" />
+</Shell>
 
-<Create bind:show={$newOrgModal} />
+<Create bind:show={$newOrgModal} {closable} />
 <CreateMember bind:showCreate={$newMemberModal} />
diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
index ab728957b..6a28491cb 100644
--- a/src/routes/console/_createOrganization.svelte
+++ b/src/routes/console/_createOrganization.svelte
@@ -10,7 +10,7 @@
     import { goto } from '$app/navigation';
 
     export let show = false;
-
+    export let closable = true;
     const dispatch = createEventDispatcher();
 
     let name: string;
@@ -40,7 +40,7 @@
 </script>
 
 <Form on:submit={create}>
-    <Modal {error} size="big" bind:show>
+    <Modal {error} size="big" bind:show {closable}>
         <svelte:fragment slot="header">Create New Organization</svelte:fragment>
         <FormList>
             <InputText

From 8f1c85574131a4b275c3e66e7a23fe776c21807b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 10:34:42 +0200
Subject: [PATCH 084/118] chore: update css to 0.0.0-48

---
 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 651f8a556..388283537 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-45",
-                "@aw-labs/ui": "0.0.0-45",
+                "@aw-labs/icons": "0.0.0-48",
+                "@aw-labs/ui": "0.0.0-48",
                 "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-45",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-45.tgz",
-            "integrity": "sha512-6q2toC87HkUYdKuYTIiAvM97PvLy8iEIllMbfRvB5JwtDqfHcaB9QySu12ZhIOExl1c3Q0CZcKaL0rdXLvD8Cg=="
+            "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-45",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-45.tgz",
-            "integrity": "sha512-diQLBH9XA69DbsWikntcFOzs2GR4OTF1fCujhucSFprxPDJ1sNtsTVvWvFJqxpL1AUofJ/FSsN3aKNsHtEH0kQ==",
+            "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": "*"
             }
@@ -7698,14 +7698,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-45",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-45.tgz",
-            "integrity": "sha512-6q2toC87HkUYdKuYTIiAvM97PvLy8iEIllMbfRvB5JwtDqfHcaB9QySu12ZhIOExl1c3Q0CZcKaL0rdXLvD8Cg=="
+            "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-45",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-45.tgz",
-            "integrity": "sha512-diQLBH9XA69DbsWikntcFOzs2GR4OTF1fCujhucSFprxPDJ1sNtsTVvWvFJqxpL1AUofJ/FSsN3aKNsHtEH0kQ==",
+            "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": "*"
             }
diff --git a/package.json b/package.json
index bc6026c27..842ebccfc 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-45",
-        "@aw-labs/ui": "0.0.0-45",
+        "@aw-labs/icons": "0.0.0-48",
+        "@aw-labs/ui": "0.0.0-48",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7",
         "web-vitals": "^2.1.4"

From fbd8306a0708fd8efbdbb8fa78b738d236f52039 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 10:53:49 +0200
Subject: [PATCH 085/118] typo: replace 0 apps with no apps

---
 src/routes/console/index@intro.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/index@intro.svelte b/src/routes/console/index@intro.svelte
index 26fda56cf..7e2b6afaf 100644
--- a/src/routes/console/index@intro.svelte
+++ b/src/routes/console/index@intro.svelte
@@ -72,7 +72,7 @@
             {#each projects as project}
                 <Bucket href={`${base}/console/${project.$id}`}>
                     <svelte:fragment slot="eyebrow"
-                        >{project?.platforms?.length ?? 0} apps</svelte:fragment>
+                        >{project?.platforms?.length ? project?.platforms?.length : 'No'} apps</svelte:fragment>
                     <svelte:fragment slot="title">
                         {project.name}
                     </svelte:fragment>

From b1608aed4caf5317007c02fa88e797c6188e35f1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 13:43:57 +0200
Subject: [PATCH 086/118] feat: add focus, and fix empty notification

---
 src/routes/console/_createProject.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/_createProject.svelte b/src/routes/console/_createProject.svelte
index fbf906e07..a49d4df42 100644
--- a/src/routes/console/_createProject.svelte
+++ b/src/routes/console/_createProject.svelte
@@ -19,12 +19,12 @@
     const create = async () => {
         try {
             const project = await sdkForConsole.projects.create(id ?? 'unique()', name, teamId);
-            id = name = null;
             dispatch('created', project);
             addNotification({
                 type: 'success',
                 message: `${name} has been created`
             });
+            id = name = null;
         } catch ({ message }) {
             error = message;
         }
@@ -35,7 +35,7 @@
     <Modal {error} size="big" bind:show>
         <svelte:fragment slot="header">Create Project</svelte:fragment>
         <FormList>
-            <InputText id="name" label="Name" bind:value={name} required />
+            <InputText id="name" label="Name" bind:value={name} required autofocus={true} />
             {#if !showDropdown}
                 <div>
                     <Pill button on:click={() => (showDropdown = !showDropdown)}>

From e1c4b8b40366c589fbaa872769ee2d9317ace9b6 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 13:44:21 +0200
Subject: [PATCH 087/118] chore: bump to 0.0.0-50

---
 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 388283537..7ce16a4f1 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-50",
+                "@aw-labs/ui": "0.0.0-50",
                 "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-50",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-50.tgz",
+            "integrity": "sha512-/BuZx18GhqNN5wXcmAtWl88OpMHfpBv3BX5UFD+c6Q1WrKLTW/R8BoXfRJ38W5/ixaLvHGgM9lYjAJl8wcz+yw=="
         },
         "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-50",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-50.tgz",
+            "integrity": "sha512-Ll7ciaBr1eRLJx1vZL6a2/V7T61zCczzpvJinOZ8NTtkDebs0MhmIUuI//Iadmxav8coiP03YLbKAvX77ZmPgQ==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7698,14 +7698,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-50",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-50.tgz",
+            "integrity": "sha512-/BuZx18GhqNN5wXcmAtWl88OpMHfpBv3BX5UFD+c6Q1WrKLTW/R8BoXfRJ38W5/ixaLvHGgM9lYjAJl8wcz+yw=="
         },
         "@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-50",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-50.tgz",
+            "integrity": "sha512-Ll7ciaBr1eRLJx1vZL6a2/V7T61zCczzpvJinOZ8NTtkDebs0MhmIUuI//Iadmxav8coiP03YLbKAvX77ZmPgQ==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 842ebccfc..46d0a0560 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-50",
+        "@aw-labs/ui": "0.0.0-50",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7",
         "web-vitals": "^2.1.4"

From cc5e4f1e0d26ed0a4c23853f5b424bab1de61d51 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 13:44:54 +0200
Subject: [PATCH 088/118] feat: scrollable dropdown

---
 src/lib/components/dropList.svelte | 6 +++++-
 src/lib/layout/header.svelte       | 7 ++++++-
 src/lib/layout/shell.svelte        | 6 +++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/dropList.svelte b/src/lib/components/dropList.svelte
index 251e532f8..f7edb1978 100644
--- a/src/lib/components/dropList.svelte
+++ b/src/lib/components/dropList.svelte
@@ -6,6 +6,7 @@
     export let horizontal: 'left' | 'right' = 'right';
     export let arrowPosition: 'start' | 'center' | 'end' = 'start';
     export let arrow = true;
+    export let scrollable = false;
     let parentElement: HTMLDivElement;
 
     const onBlur = (event: MouseEvent) => {
@@ -31,7 +32,10 @@
             class:is-block-end={position === 'bottom'}
             class:is-inline-end={horizontal === 'left'}
             transition:slide={{ duration: 100 }}>
-            <section class="drop-section">
+            <section
+                class:u-overflow-y-auto={scrollable}
+                class:u-max-height-200={scrollable}
+                class="drop-section ">
                 <ul class="drop-list">
                     <slot name="list" />
                 </ul>
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index ae2a99ec7..499f45c30 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -42,7 +42,12 @@
     </nav>
     <nav class="user-profile">
         {#if $user}
-            <DropList bind:show={showDropdown} position="bottom" horizontal="left" arrow={false}>
+            <DropList
+                bind:show={showDropdown}
+                position="bottom"
+                horizontal="left"
+                arrow={false}
+                scrollable={true}>
                 <button class="user-profile-button" on:click={() => (showDropdown = !showDropdown)}>
                     <Avatar
                         size={40}
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index dd11c4dfa..780f74e09 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -105,7 +105,11 @@
                     </a>
                 {/if}
                 {#if $titleDropdown?.length}
-                    <DropList bind:show={showDropdown} position="bottom" arrow={false}>
+                    <DropList
+                        bind:show={showDropdown}
+                        position="bottom"
+                        arrow={false}
+                        scrollable={true}>
                         <button
                             class="button is-text u-padding-inline-0"
                             on:click={() => (showDropdown = !showDropdown)}>

From d6a283d59a2a1afe89e8381e0b880f4a6067ef09 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 13:53:07 +0200
Subject: [PATCH 089/118] fix: name and icon for platforms

---
 src/routes/console/index@intro.svelte | 41 ++++++++++++++++-----------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/routes/console/index@intro.svelte b/src/routes/console/index@intro.svelte
index 7e2b6afaf..a8f53270c 100644
--- a/src/routes/console/index@intro.svelte
+++ b/src/routes/console/index@intro.svelte
@@ -29,21 +29,28 @@
         await goto(`${base}/console/${event.detail.$id}`);
     };
 
-    const platformsName = {
-        web: 'Web',
-        'flutter-ios': 'Flutter',
-        'flutter-android': 'Flutter',
-        ios: 'Apple',
-        android: 'Android',
-        unity: 'Unity'
-    };
-    const platformsIcon = {
-        web: 'code',
-        'flutter-ios': 'flutter',
-        'flutter-android': 'flutter',
-        ios: 'apple',
-        android: 'android',
-        unity: 'unity'
+    const getPlatformInfo = (platform: string) => {
+        let name: string, icon: string;
+        if (platform.includes('flutter')) {
+            name = 'Flutter';
+            icon = 'flutter';
+        } else if (platform.includes('apple')) {
+            name = 'Apple';
+            icon = 'apple';
+        } else if (platform.includes('android')) {
+            name = 'Android';
+            icon = 'android';
+        } else if (platform.includes('unity')) {
+            name = 'Unity';
+            icon = 'unity';
+        } else if (platform.includes('web')) {
+            name = 'Web';
+            icon = 'code';
+        } else {
+            name = 'Unknown';
+            icon = 'unknown';
+        }
+        return { name, icon };
     };
 
     $: if (currentOrganization !== $organization?.$id) {
@@ -82,9 +89,9 @@
                         {#if i < 3}
                             <Pill>
                                 <span
-                                    class={`icon-${platformsIcon[platform]}`}
+                                    class={`icon-${getPlatformInfo(platform).icon}`}
                                     aria-hidden="true" />
-                                {platformsName[platform]}
+                                {getPlatformInfo(platform).name}
                             </Pill>
                         {/if}
                     {/each}

From 478a8463912f517156c2e25a8e3e8c4786d84d45 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 25 Aug 2022 14:35:10 +0200
Subject: [PATCH 090/118] feat: add size to avatarGroup

---
 src/lib/components/avatarGroup.svelte | 3 ++-
 src/lib/layout/shell.svelte           | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
index b9165f77b..927a47ce3 100644
--- a/src/lib/components/avatarGroup.svelte
+++ b/src/lib/components/avatarGroup.svelte
@@ -2,13 +2,14 @@
     import Avatar from './avatar.svelte';
     export let avatars = [];
     export let total = avatars.length;
+    export let size = 40;
 </script>
 
 <ul class="avatars-group">
     {#each avatars as av, index}
         {#if index < 2}
             <li class="avatars-group-item">
-                <Avatar size={40} src={av.img} name={av.name} />
+                <Avatar {size} src={av.img} name={av.name} />
             </li>
         {/if}
     {/each}
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 780f74e09..d3c7ded97 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -48,7 +48,7 @@
             avatars = value.memberships.map((team) => {
                 return {
                     name: team.userName,
-                    img: sdkForConsole.avatars.getInitials(team.userName, 120, 120).toString()
+                    img: sdkForConsole.avatars.getInitials(team.userName, 80, 80).toString()
                 };
             });
         }
@@ -148,7 +148,7 @@
                     </DropList>
                     <div class="u-margin-inline-start-auto">
                         <div class="u-flex u-gap-16">
-                            <AvatarGroup {avatars} total={avatarsTotal} />
+                            <AvatarGroup size={40} {avatars} total={avatarsTotal} />
                             <Button secondary on:click={() => newMemberModal.set(true)}>
                                 <span class="icon-plus" aria-hidden="true" />
                                 <span class="text">Invite</span>

From dc968d1a0088607e355d588248a2c31bf9f2c412 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 11:01:16 +0200
Subject: [PATCH 091/118] feat: create sibling route for organizations

---
 src/lib/components/dropListLink.svelte        |  2 +-
 src/lib/layout/header.svelte                  | 20 +++--
 src/lib/layout/shell.svelte                   | 13 ++-
 src/{routes/console => lib/stores}/store.ts   |  0
 .../console/{$me@intro.svelte => $me.svelte}  |  0
 src/routes/console/[project]/__layout.svelte  |  2 +-
 src/routes/console/__layout-intro.svelte      | 83 ------------------
 src/routes/console/__layout.svelte            | 48 +++++++++--
 src/routes/console/_createOrganization.svelte |  2 +-
 src/routes/console/index.svelte               |  1 +
 .../__layout.svelte                           | 64 ++++++++++++++
 .../_createMember.svelte                      |  0
 .../_createProject.svelte                     |  0
 .../_deleteMember.svelte                      |  0
 .../_deleteOrganization.svelte                |  0
 .../index.svelte}                             | 25 ++----
 .../members.svelte}                           |  0
 .../settings.svelte}                          |  0
 .../organization-[organization]/store.ts      | 84 +++++++++++++++++++
 19 files changed, 222 insertions(+), 122 deletions(-)
 rename src/{routes/console => lib/stores}/store.ts (100%)
 rename src/routes/console/{$me@intro.svelte => $me.svelte} (100%)
 delete mode 100644 src/routes/console/__layout-intro.svelte
 create mode 100644 src/routes/console/index.svelte
 create mode 100644 src/routes/console/organization-[organization]/__layout.svelte
 rename src/routes/console/{ => organization-[organization]}/_createMember.svelte (100%)
 rename src/routes/console/{ => organization-[organization]}/_createProject.svelte (100%)
 rename src/routes/console/{ => organization-[organization]}/_deleteMember.svelte (100%)
 rename src/routes/console/{ => organization-[organization]}/_deleteOrganization.svelte (100%)
 rename src/routes/console/{index@intro.svelte => organization-[organization]/index.svelte} (86%)
 rename src/routes/console/{members@intro.svelte => organization-[organization]/members.svelte} (100%)
 rename src/routes/console/{settings@intro.svelte => organization-[organization]/settings.svelte} (100%)
 create mode 100644 src/routes/console/organization-[organization]/store.ts

diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
index 671809aa1..cfd60e79a 100644
--- a/src/lib/components/dropListLink.svelte
+++ b/src/lib/components/dropListLink.svelte
@@ -3,7 +3,7 @@
     export let icon: string = null;
 </script>
 
-<li class="drop-list-item">
+<li class="drop-list-item" on:click>
     <a {href} class="drop-button">
         <span class="text"><slot /></span>
         {#if icon}
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 499f45c30..87ff9867a 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { onMount } from 'svelte';
     import { Breadcrumbs } from '.';
     import { Avatar, DropList, DropListItem, DropListLink } from '$lib/components';
     import { app } from '$lib/stores/app';
@@ -9,9 +10,11 @@
     import LightMode from '$lib/images/mode/light-mode.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import SystemMode from '$lib/images/mode/system-mode.svg';
-    import { organizationList, organization, newOrgModal } from '../../routes/console/store';
-    import { onMount } from 'svelte';
-    import { goto } from '$app/navigation';
+    import {
+        organizationList,
+        organization,
+        newOrgModal
+    } from '../../routes/console/organization-[organization]/store';
 
     let showDropdown = false;
 
@@ -23,7 +26,9 @@
     });
 </script>
 
-<a class="logo" href={`${base}/console`}>
+<a
+    class="logo"
+    href={$organization ? `${base}/console/organization-${$organization.$id}` : `${base}/console`}>
     <img src={AppwriteLogo} width="132" height="34" alt="Appwrite" />
 </a>
 
@@ -67,12 +72,11 @@
                 </button>
                 <svelte:fragment slot="list">
                     {#each $organizationList.teams as org}
-                        <DropListItem
+                        <DropListLink
+                            href={`${base}/console/organization-${org.$id}`}
                             on:click={() => {
                                 showDropdown = false;
-                                goto(`/console`);
-                                organization.set(org);
-                            }}>{org.name}</DropListItem>
+                            }}>{org.name}</DropListLink>
                     {/each}
                 </svelte:fragment>
                 <svelte:fragment slot="other">
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index d3c7ded97..4660021cf 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -2,7 +2,7 @@
     import { navigating, page } from '$app/stores';
     import { tabs, title, backButton, copyData, titleDropdown } from '$lib/stores/layout';
     import { Cover } from '.';
-    import { Copy, DropList, DropListItem, AvatarGroup } from '$lib/components';
+    import { Copy, DropList, DropListItem, DropListLink, AvatarGroup } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import {
@@ -10,8 +10,9 @@
         memberList,
         newOrgModal,
         newMemberModal
-    } from '../../routes/console/store';
+    } from '../../routes/console/organization-[organization]/store';
     import { sdkForConsole } from '$lib/stores/sdk';
+    import { base } from '$app/paths';
 
     export let isOpen = false;
     export let showSideNavigation = false;
@@ -123,15 +124,13 @@
                         </button>
                         <svelte:fragment slot="list">
                             {#each $titleDropdown as org}
-                                <DropListItem
+                                <DropListLink
+                                    href={`${base}/console/organization-${org.$id}`}
                                     on:click={() => {
                                         showDropdown = false;
-                                        if (org.$id !== $organization.$id) {
-                                            organization.load(org.$id);
-                                        }
                                     }}>
                                     {org.name}
-                                </DropListItem>
+                                </DropListLink>
                             {/each}
                         </svelte:fragment>
                         <svelte:fragment slot="other">
diff --git a/src/routes/console/store.ts b/src/lib/stores/store.ts
similarity index 100%
rename from src/routes/console/store.ts
rename to src/lib/stores/store.ts
diff --git a/src/routes/console/$me@intro.svelte b/src/routes/console/$me.svelte
similarity index 100%
rename from src/routes/console/$me@intro.svelte
rename to src/routes/console/$me.svelte
diff --git a/src/routes/console/[project]/__layout.svelte b/src/routes/console/[project]/__layout.svelte
index c6ba7b9ce..b9b5e8397 100644
--- a/src/routes/console/[project]/__layout.svelte
+++ b/src/routes/console/[project]/__layout.svelte
@@ -5,7 +5,7 @@
     import { collection } from './databases/database/[database]/collection/[collection]/store';
     import { UploadBox } from '$lib/components';
     import { project } from './store';
-    import { organization } from '../store';
+    import { organization } from '../organization-[organization]/store';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
     import { updateLayout } from '$lib/stores/layout';
diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
deleted file mode 100644
index 3f77101ba..000000000
--- a/src/routes/console/__layout-intro.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-    import Shell from '$lib/layout/shell.svelte';
-    import Header from '$lib/layout/header.svelte';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { afterNavigate } from '$app/navigation';
-    import {
-        organizationList,
-        organization,
-        memberList,
-        newOrgModal,
-        newMemberModal
-    } from './store';
-    import CreateMember from './_createMember.svelte';
-    import Create from './_createOrganization.svelte';
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        await organizationList.load();
-        if ($organizationList?.total) {
-            if (!$organization) {
-                await organization.load($organizationList.teams[0].$id);
-                await memberList.load($organization.$id, '', 100, 0);
-            }
-            updateLayout({
-                navigate: event,
-                title: $organization?.name ?? `${$organizationList.teams[0].name}`,
-                titleDropdown: $organizationList.teams,
-                level: 0,
-                customBase: '',
-                breadcrumbs: {
-                    title: `${$organization.name}`,
-                    href: 'console'
-                },
-                tabs: [
-                    {
-                        href: 'console',
-                        title: 'Projects'
-                    },
-                    {
-                        href: 'console/members',
-                        title: 'Members'
-                    },
-                    {
-                        href: 'console/settings',
-                        title: 'Settings'
-                    }
-                ]
-            });
-        } else {
-            $newOrgModal = true;
-            closable = false;
-        }
-    }
-
-    let closable = true;
-
-    organization.subscribe((org) => {
-        handle();
-        if (org?.$id) {
-            memberList.load(org.$id, '', 100, 0);
-        }
-    });
-</script>
-
-<svelte:head>
-    <title>Appwrite - Console</title>
-</svelte:head>
-
-<Shell>
-    <svelte:fragment slot="header">
-        <Header />
-    </svelte:fragment>
-    {#if $organization}
-        <slot />
-    {/if}
-    <footer class="main-footer" />
-</Shell>
-
-<Create bind:show={$newOrgModal} {closable} />
-<CreateMember bind:showCreate={$newMemberModal} />
diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index f0c1cf891..935bb997d 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -3,26 +3,64 @@
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
     import { updateLayout } from '$lib/stores/layout';
-    import { organization, newOrgModal } from './store';
+    import {
+        organization,
+        organizationList,
+        newOrgModal
+    } from './organization-[organization]/store';
     import Create from './_createOrganization.svelte';
+    import { page } from '$app/stores';
+    import { afterNavigate, goto } from '$app/navigation';
+    import { onMount } from 'svelte';
+
+    let closable = true;
 
     updateLayout({
-        title: $organization.name ?? 'Projects',
+        title: $organization?.name ?? 'Projects',
         level: 0
     });
+
+    onMount(async () => {
+        if ($page.url.pathname === '/console') {
+            await pageLoad();
+        }
+    });
+
+    afterNavigate(async () => {
+        if ($page.url.pathname === '/console') {
+            await pageLoad();
+        }
+    });
+
+    const pageLoad = async () => {
+        if (!$organization) {
+            await organizationList.load();
+            if ($organizationList?.total) {
+                await organization.load($organizationList.teams[0].$id);
+                await goto(`/console/organization-${$organization.$id}`);
+            } else {
+                closable = false;
+                newOrgModal.set(true);
+            }
+        } else {
+            await goto(`/console/organization-${$organization.$id}`);
+        }
+    };
 </script>
 
-<Shell showSideNavigation>
+<Shell showSideNavigation={!$page?.params.organization}>
     <svelte:fragment slot="header">
         <Header />
     </svelte:fragment>
     <svelte:fragment slot="side">
-        <SideNavigation />
+        {#if !$page?.params.organization}
+            <SideNavigation />
+        {/if}
     </svelte:fragment>
     <slot />
     <footer class="main-footer" />
 </Shell>
 
 {#if $newOrgModal}
-    <Create bind:show={$newOrgModal} />
+    <Create bind:show={$newOrgModal} {closable} />
 {/if}
diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
index 6a28491cb..6550128e3 100644
--- a/src/routes/console/_createOrganization.svelte
+++ b/src/routes/console/_createOrganization.svelte
@@ -5,7 +5,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
-    import { organization, organizationList } from './store';
+    import { organization, organizationList } from './organization-[organization]/store';
     import { titleDropdown } from '$lib/stores/layout';
     import { goto } from '$app/navigation';
 
diff --git a/src/routes/console/index.svelte b/src/routes/console/index.svelte
new file mode 100644
index 000000000..700790d1c
--- /dev/null
+++ b/src/routes/console/index.svelte
@@ -0,0 +1 @@
+<p>loading</p>
diff --git a/src/routes/console/organization-[organization]/__layout.svelte b/src/routes/console/organization-[organization]/__layout.svelte
new file mode 100644
index 000000000..e79fd7c33
--- /dev/null
+++ b/src/routes/console/organization-[organization]/__layout.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { updateLayout } from '$lib/stores/layout';
+    import { onMount } from 'svelte';
+    import { afterNavigate } from '$app/navigation';
+    import {
+        organizationList,
+        organization,
+        memberList,
+        newOrgModal,
+        newMemberModal
+    } from './store';
+    import CreateMember from './_createMember.svelte';
+    import Create from '../_createOrganization.svelte';
+    import { page } from '$app/stores';
+
+    $: org = $page.params.organization;
+    $: path = `console/organization-${org}`;
+
+    onMount(handle);
+    afterNavigate(handle);
+
+    async function handle(event = null) {
+        if ($organization.$id !== org) {
+            await organization.load(org);
+            await memberList.load(org, '', 100, 0);
+        }
+        updateLayout({
+            navigate: event,
+            title: $organization?.name,
+            titleDropdown: $organizationList.teams,
+            level: 0,
+            customBase: '',
+            breadcrumbs: {
+                title: `${$organization.name}`,
+                href: path
+            },
+            tabs: [
+                {
+                    href: path,
+                    title: 'Projects'
+                },
+                {
+                    href: `${path}/members`,
+                    title: 'Members'
+                },
+                {
+                    href: `${path}/settings`,
+                    title: 'Settings'
+                }
+            ]
+        });
+    }
+</script>
+
+<svelte:head>
+    <title>Appwrite - Console</title>
+</svelte:head>
+
+{#if $organization}
+    <slot />
+{/if}
+
+<Create bind:show={$newOrgModal} />
+<CreateMember bind:showCreate={$newMemberModal} />
diff --git a/src/routes/console/_createMember.svelte b/src/routes/console/organization-[organization]/_createMember.svelte
similarity index 100%
rename from src/routes/console/_createMember.svelte
rename to src/routes/console/organization-[organization]/_createMember.svelte
diff --git a/src/routes/console/_createProject.svelte b/src/routes/console/organization-[organization]/_createProject.svelte
similarity index 100%
rename from src/routes/console/_createProject.svelte
rename to src/routes/console/organization-[organization]/_createProject.svelte
diff --git a/src/routes/console/_deleteMember.svelte b/src/routes/console/organization-[organization]/_deleteMember.svelte
similarity index 100%
rename from src/routes/console/_deleteMember.svelte
rename to src/routes/console/organization-[organization]/_deleteMember.svelte
diff --git a/src/routes/console/_deleteOrganization.svelte b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
similarity index 100%
rename from src/routes/console/_deleteOrganization.svelte
rename to src/routes/console/organization-[organization]/_deleteOrganization.svelte
diff --git a/src/routes/console/index@intro.svelte b/src/routes/console/organization-[organization]/index.svelte
similarity index 86%
rename from src/routes/console/index@intro.svelte
rename to src/routes/console/organization-[organization]/index.svelte
index a8f53270c..f4dcca448 100644
--- a/src/routes/console/index@intro.svelte
+++ b/src/routes/console/organization-[organization]/index.svelte
@@ -6,22 +6,22 @@
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import type { Models } from '@aw-labs/appwrite-console';
-    import CreateOrganization from './_createOrganization.svelte';
+    import CreateOrganization from '../_createOrganization.svelte';
     import CreateProject from './_createProject.svelte';
-    import { organization, projectList } from './store';
+    import { projectList } from './store';
     import { onMount } from 'svelte';
+    import { page } from '$app/stores';
 
     let projects: Models.Project[] = [];
+    $: org = $page.params.organization;
 
     onMount(async () => {
         await projectList.load();
-
-        projects = $projectList.projects.filter((n) => n.teamId === $organization.$id);
+        projects = $projectList?.projects.filter((n) => n.teamId === org);
     });
 
     let showCreate = false;
     let addOrganization = false;
-    let currentOrganization = $organization?.$id;
     let offset = 0;
     const limit = 5;
 
@@ -53,11 +53,7 @@
         return { name, icon };
     };
 
-    $: if (currentOrganization !== $organization?.$id) {
-        currentOrganization = $organization.$id;
-        projectList.load();
-        projects = $projectList.projects.filter((a) => a.teamId === $organization.$id);
-    }
+    $: projects = $projectList?.projects.filter((a) => a.teamId === org);
 </script>
 
 <Container>
@@ -136,15 +132,12 @@
             </div>
         </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {projects.length}</p>
-            <Pagination {limit} bind:offset sum={projects.length} />
+            <p class="text">Total results: {projects?.length}</p>
+            <Pagination {limit} bind:offset sum={projects?.length} />
         </div>
     {/if}
 </Container>
 
 <CreateOrganization bind:show={addOrganization} />
 
-<CreateProject
-    bind:show={showCreate}
-    bind:teamId={currentOrganization}
-    on:created={projectCreated} />
+<CreateProject bind:show={showCreate} teamId={org} on:created={projectCreated} />
diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/organization-[organization]/members.svelte
similarity index 100%
rename from src/routes/console/members@intro.svelte
rename to src/routes/console/organization-[organization]/members.svelte
diff --git a/src/routes/console/settings@intro.svelte b/src/routes/console/organization-[organization]/settings.svelte
similarity index 100%
rename from src/routes/console/settings@intro.svelte
rename to src/routes/console/organization-[organization]/settings.svelte
diff --git a/src/routes/console/organization-[organization]/store.ts b/src/routes/console/organization-[organization]/store.ts
new file mode 100644
index 000000000..1bacf460f
--- /dev/null
+++ b/src/routes/console/organization-[organization]/store.ts
@@ -0,0 +1,84 @@
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { Models } from '@aw-labs/appwrite-console';
+import { writable } from 'svelte/store';
+import { browser } from '$app/env';
+
+function createOrganizationList() {
+    const { subscribe, set } = writable<Models.TeamList>(
+        browser ? JSON.parse(sessionStorage.getItem('organizationList')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async () => {
+            const response = await sdkForConsole.teams.list();
+            set(response);
+        }
+    };
+}
+function createOrganization() {
+    const { subscribe, set } = writable<Models.Team>(
+        browser ? JSON.parse(sessionStorage.getItem('organization')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async (teamId: string) => {
+            const response = await sdkForConsole.teams.get(teamId);
+            set(response);
+        }
+    };
+}
+
+function createProjectList() {
+    const { subscribe, set } = writable<Models.ProjectList>(
+        browser ? JSON.parse(sessionStorage.getItem('projectList')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async () => {
+            const response = await sdkForConsole.projects.list();
+            set(response);
+        }
+    };
+}
+
+function createMemberList() {
+    const { subscribe, set } = writable<Models.MembershipList>(
+        browser ? JSON.parse(sessionStorage.getItem('memberList')) : null
+    );
+
+    return {
+        subscribe,
+        set,
+        load: async (teamId: string, search: string, limit: number, offset: number) => {
+            const response = await sdkForConsole.teams.getMemberships(
+                teamId,
+                search,
+                limit,
+                offset
+            );
+            set(response);
+        }
+    };
+}
+
+export const organizationList = createOrganizationList();
+export const organization = createOrganization();
+export const projectList = createProjectList();
+export const memberList = createMemberList();
+export const newOrgModal = writable<boolean>(false);
+export const newMemberModal = writable<boolean>(false);
+
+if (browser) {
+    organizationList.subscribe((n) =>
+        sessionStorage?.setItem('organizationList', JSON.stringify(n ?? ''))
+    );
+    organization.subscribe((n) => sessionStorage?.setItem('organization', JSON.stringify(n ?? '')));
+    projectList.subscribe((n) => sessionStorage?.setItem('projectList', JSON.stringify(n ?? '')));
+    memberList.subscribe((n) => sessionStorage?.setItem('memberList', JSON.stringify(n ?? '')));
+}

From ee6d1a0624a5cb6a98d89ec26333d4caa1fc83f6 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 11:06:23 +0200
Subject: [PATCH 092/118] refactor: move organization strore

---
 src/lib/layout/header.svelte                  |  6 +-
 src/lib/layout/shell.svelte                   |  2 +-
 src/lib/stores/{store.ts => organization.ts}  |  0
 src/routes/console/__layout.svelte            |  6 +-
 src/routes/console/_createOrganization.svelte |  2 +-
 .../__layout.svelte                           |  2 +-
 .../_createMember.svelte                      |  2 +-
 .../_deleteOrganization.svelte                |  2 +-
 .../organization-[organization]/index.svelte  |  2 +-
 .../members.svelte                            |  2 +-
 .../settings.svelte                           |  2 +-
 .../organization-[organization]/store.ts      | 84 -------------------
 12 files changed, 10 insertions(+), 102 deletions(-)
 rename src/lib/stores/{store.ts => organization.ts} (100%)
 delete mode 100644 src/routes/console/organization-[organization]/store.ts

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 87ff9867a..689f7d5df 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -10,11 +10,7 @@
     import LightMode from '$lib/images/mode/light-mode.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import SystemMode from '$lib/images/mode/system-mode.svg';
-    import {
-        organizationList,
-        organization,
-        newOrgModal
-    } from '../../routes/console/organization-[organization]/store';
+    import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
 
     let showDropdown = false;
 
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 4660021cf..2d22b8029 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -10,7 +10,7 @@
         memberList,
         newOrgModal,
         newMemberModal
-    } from '../../routes/console/organization-[organization]/store';
+    } from '$lib/stores/organization';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { base } from '$app/paths';
 
diff --git a/src/lib/stores/store.ts b/src/lib/stores/organization.ts
similarity index 100%
rename from src/lib/stores/store.ts
rename to src/lib/stores/organization.ts
diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index 935bb997d..f6864108f 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -3,11 +3,7 @@
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
     import { updateLayout } from '$lib/stores/layout';
-    import {
-        organization,
-        organizationList,
-        newOrgModal
-    } from './organization-[organization]/store';
+    import { organization, organizationList, newOrgModal } from '$lib/stores/organization';
     import Create from './_createOrganization.svelte';
     import { page } from '$app/stores';
     import { afterNavigate, goto } from '$app/navigation';
diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
index 6550128e3..1921c697a 100644
--- a/src/routes/console/_createOrganization.svelte
+++ b/src/routes/console/_createOrganization.svelte
@@ -5,7 +5,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
-    import { organization, organizationList } from './organization-[organization]/store';
+    import { organization, organizationList } from '$lib/stores/organization';
     import { titleDropdown } from '$lib/stores/layout';
     import { goto } from '$app/navigation';
 
diff --git a/src/routes/console/organization-[organization]/__layout.svelte b/src/routes/console/organization-[organization]/__layout.svelte
index e79fd7c33..7b5a8b3d4 100644
--- a/src/routes/console/organization-[organization]/__layout.svelte
+++ b/src/routes/console/organization-[organization]/__layout.svelte
@@ -8,7 +8,7 @@
         memberList,
         newOrgModal,
         newMemberModal
-    } from './store';
+    } from '$lib/stores/organization';
     import CreateMember from './_createMember.svelte';
     import Create from '../_createOrganization.svelte';
     import { page } from '$app/stores';
diff --git a/src/routes/console/organization-[organization]/_createMember.svelte b/src/routes/console/organization-[organization]/_createMember.svelte
index 4870b69cd..237c167ca 100644
--- a/src/routes/console/organization-[organization]/_createMember.svelte
+++ b/src/routes/console/organization-[organization]/_createMember.svelte
@@ -6,7 +6,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
-    import { organization, memberList } from './store';
+    import { organization, memberList } from '$lib/stores/organization';
     import { pageLimit } from '$lib/stores/layout';
 
     export let showCreate = false;
diff --git a/src/routes/console/organization-[organization]/_deleteOrganization.svelte b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
index edd51b37f..5696e79ae 100644
--- a/src/routes/console/organization-[organization]/_deleteOrganization.svelte
+++ b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
@@ -5,7 +5,7 @@
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { organization, organizationList } from './store';
+    import { organization, organizationList } from '$lib/stores/organization';
 
     export let showDelete = false;
 
diff --git a/src/routes/console/organization-[organization]/index.svelte b/src/routes/console/organization-[organization]/index.svelte
index f4dcca448..9cc7f0b2f 100644
--- a/src/routes/console/organization-[organization]/index.svelte
+++ b/src/routes/console/organization-[organization]/index.svelte
@@ -8,7 +8,7 @@
     import type { Models } from '@aw-labs/appwrite-console';
     import CreateOrganization from '../_createOrganization.svelte';
     import CreateProject from './_createProject.svelte';
-    import { projectList } from './store';
+    import { projectList } from '$lib/stores/organization';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
 
diff --git a/src/routes/console/organization-[organization]/members.svelte b/src/routes/console/organization-[organization]/members.svelte
index b858d6602..1106e994a 100644
--- a/src/routes/console/organization-[organization]/members.svelte
+++ b/src/routes/console/organization-[organization]/members.svelte
@@ -13,7 +13,7 @@
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import Delete from './_deleteMember.svelte';
-    import { organization, memberList, newMemberModal } from './store';
+    import { organization, memberList, newMemberModal } from '$lib/stores/organization';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
diff --git a/src/routes/console/organization-[organization]/settings.svelte b/src/routes/console/organization-[organization]/settings.svelte
index 6671a9ca8..fab35bdb1 100644
--- a/src/routes/console/organization-[organization]/settings.svelte
+++ b/src/routes/console/organization-[organization]/settings.svelte
@@ -4,7 +4,7 @@
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { organization, memberList } from './store';
+    import { organization, memberList } from '$lib/stores/organization';
     import { title, breadcrumbs } from '$lib/stores/layout';
     import Delete from './_deleteOrganization.svelte';
 
diff --git a/src/routes/console/organization-[organization]/store.ts b/src/routes/console/organization-[organization]/store.ts
deleted file mode 100644
index 1bacf460f..000000000
--- a/src/routes/console/organization-[organization]/store.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { sdkForConsole } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { writable } from 'svelte/store';
-import { browser } from '$app/env';
-
-function createOrganizationList() {
-    const { subscribe, set } = writable<Models.TeamList>(
-        browser ? JSON.parse(sessionStorage.getItem('organizationList')) : null
-    );
-
-    return {
-        subscribe,
-        set,
-        load: async () => {
-            const response = await sdkForConsole.teams.list();
-            set(response);
-        }
-    };
-}
-function createOrganization() {
-    const { subscribe, set } = writable<Models.Team>(
-        browser ? JSON.parse(sessionStorage.getItem('organization')) : null
-    );
-
-    return {
-        subscribe,
-        set,
-        load: async (teamId: string) => {
-            const response = await sdkForConsole.teams.get(teamId);
-            set(response);
-        }
-    };
-}
-
-function createProjectList() {
-    const { subscribe, set } = writable<Models.ProjectList>(
-        browser ? JSON.parse(sessionStorage.getItem('projectList')) : null
-    );
-
-    return {
-        subscribe,
-        set,
-        load: async () => {
-            const response = await sdkForConsole.projects.list();
-            set(response);
-        }
-    };
-}
-
-function createMemberList() {
-    const { subscribe, set } = writable<Models.MembershipList>(
-        browser ? JSON.parse(sessionStorage.getItem('memberList')) : null
-    );
-
-    return {
-        subscribe,
-        set,
-        load: async (teamId: string, search: string, limit: number, offset: number) => {
-            const response = await sdkForConsole.teams.getMemberships(
-                teamId,
-                search,
-                limit,
-                offset
-            );
-            set(response);
-        }
-    };
-}
-
-export const organizationList = createOrganizationList();
-export const organization = createOrganization();
-export const projectList = createProjectList();
-export const memberList = createMemberList();
-export const newOrgModal = writable<boolean>(false);
-export const newMemberModal = writable<boolean>(false);
-
-if (browser) {
-    organizationList.subscribe((n) =>
-        sessionStorage?.setItem('organizationList', JSON.stringify(n ?? ''))
-    );
-    organization.subscribe((n) => sessionStorage?.setItem('organization', JSON.stringify(n ?? '')));
-    projectList.subscribe((n) => sessionStorage?.setItem('projectList', JSON.stringify(n ?? '')));
-    memberList.subscribe((n) => sessionStorage?.setItem('memberList', JSON.stringify(n ?? '')));
-}

From 3b358fb8a44f7c7bc41d723262ca70a7a5b5ac3b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 11:31:55 +0200
Subject: [PATCH 093/118] fix: update store location

---
 src/routes/console/[project]/__layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/[project]/__layout.svelte b/src/routes/console/[project]/__layout.svelte
index b9b5e8397..ed60a29a5 100644
--- a/src/routes/console/[project]/__layout.svelte
+++ b/src/routes/console/[project]/__layout.svelte
@@ -5,7 +5,7 @@
     import { collection } from './databases/database/[database]/collection/[collection]/store';
     import { UploadBox } from '$lib/components';
     import { project } from './store';
-    import { organization } from '../organization-[organization]/store';
+    import { organization } from '$lib/stores/organization';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
     import { updateLayout } from '$lib/stores/layout';

From 9e0ca577e0fdda19b46708f074aba6f82654bd5a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 12:12:52 +0200
Subject: [PATCH 094/118] refactor: move some redirection logic to store

---
 src/lib/stores/organization.ts                | 20 ++++++++++
 src/routes/__layout.svelte                    |  4 +-
 src/routes/console/__layout.svelte            | 37 +++++++------------
 .../organization-[organization]/index.svelte  |  4 +-
 4 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts
index 1bacf460f..61c892917 100644
--- a/src/lib/stores/organization.ts
+++ b/src/lib/stores/organization.ts
@@ -2,6 +2,8 @@ import { sdkForConsole } from '$lib/stores/sdk';
 import type { Models } from '@aw-labs/appwrite-console';
 import { writable } from 'svelte/store';
 import { browser } from '$app/env';
+import { get } from 'svelte/store';
+import { base } from '$app/paths';
 
 function createOrganizationList() {
     const { subscribe, set } = writable<Models.TeamList>(
@@ -82,3 +84,21 @@ if (browser) {
     projectList.subscribe((n) => sessionStorage?.setItem('projectList', JSON.stringify(n ?? '')));
     memberList.subscribe((n) => sessionStorage?.setItem('memberList', JSON.stringify(n ?? '')));
 }
+
+export const redirectTo = async () => {
+    let org = get(organization);
+    if (org) {
+        return `${base}/console/organization-${org.$id}`;
+    } else {
+        await organizationList.load();
+        const orgList = get(organizationList);
+        if (orgList?.total) {
+            await organization.load(orgList.teams[0].$id);
+            org = get(organization);
+            return `${base}/console/organization-${org.$id}`;
+        } else {
+            newOrgModal.set(true);
+            return `${base}/console`;
+        }
+    }
+};
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index e245db170..3e20f4d8c 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -7,6 +7,7 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
     import { user } from '$lib/stores/user';
+    import { redirectTo } from '$lib/stores/organization';
     import { onMount } from 'svelte';
     import { base } from '$app/paths';
     import { browser } from '$app/env';
@@ -29,7 +30,8 @@
             }
 
             if (!$page.url.pathname.startsWith('/console')) {
-                await goto(`${base}/console`);
+                const destination = await redirectTo();
+                await goto(destination);
             }
         } catch (error) {
             await goto(`${base}/login`);
diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index f6864108f..2eae37873 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -3,45 +3,36 @@
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
     import { updateLayout } from '$lib/stores/layout';
-    import { organization, organizationList, newOrgModal } from '$lib/stores/organization';
+    import {
+        organization,
+        organizationList,
+        newOrgModal,
+        redirectTo
+    } from '$lib/stores/organization';
     import Create from './_createOrganization.svelte';
     import { page } from '$app/stores';
     import { afterNavigate, goto } from '$app/navigation';
     import { onMount } from 'svelte';
 
-    let closable = true;
-
     updateLayout({
         title: $organization?.name ?? 'Projects',
         level: 0
     });
 
     onMount(async () => {
-        if ($page.url.pathname === '/console') {
-            await pageLoad();
+        if ($page.url.pathname === '/console' && !$newOrgModal) {
+            const destination = await redirectTo();
+            await goto(destination);
         }
     });
 
     afterNavigate(async () => {
-        if ($page.url.pathname === '/console') {
-            await pageLoad();
+        if ($page.url.pathname === '/console' && !$newOrgModal) {
+            console.log('test');
+            const destination = await redirectTo();
+            await goto(destination);
         }
     });
-
-    const pageLoad = async () => {
-        if (!$organization) {
-            await organizationList.load();
-            if ($organizationList?.total) {
-                await organization.load($organizationList.teams[0].$id);
-                await goto(`/console/organization-${$organization.$id}`);
-            } else {
-                closable = false;
-                newOrgModal.set(true);
-            }
-        } else {
-            await goto(`/console/organization-${$organization.$id}`);
-        }
-    };
 </script>
 
 <Shell showSideNavigation={!$page?.params.organization}>
@@ -58,5 +49,5 @@
 </Shell>
 
 {#if $newOrgModal}
-    <Create bind:show={$newOrgModal} {closable} />
+    <Create bind:show={$newOrgModal} closable={!$organizationList?.total} />
 {/if}
diff --git a/src/routes/console/organization-[organization]/index.svelte b/src/routes/console/organization-[organization]/index.svelte
index 9cc7f0b2f..e7a7c7614 100644
--- a/src/routes/console/organization-[organization]/index.svelte
+++ b/src/routes/console/organization-[organization]/index.svelte
@@ -17,7 +17,7 @@
 
     onMount(async () => {
         await projectList.load();
-        projects = $projectList?.projects.filter((n) => n.teamId === org);
+        projects = $projectList?.projects?.filter((n) => n.teamId === org);
     });
 
     let showCreate = false;
@@ -53,7 +53,7 @@
         return { name, icon };
     };
 
-    $: projects = $projectList?.projects.filter((a) => a.teamId === org);
+    $: projects = $projectList?.projects?.filter((a) => a.teamId === org);
 </script>
 
 <Container>

From ef1bfd215b7f250ae81ca171676222b9c8c7fb12 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 13:38:00 +0200
Subject: [PATCH 095/118] fix: last org deletion

---
 src/lib/layout/header.svelte                  | 16 +--
 src/lib/layout/shell.svelte                   |  2 +-
 src/lib/stores/organization.ts                |  3 +
 src/routes/console/__layout.svelte            | 11 +--
 src/routes/console/_createOrganization.svelte |  4 +-
 src/routes/console/index.svelte               |  1 -
 .../_deleteOrganization.svelte                |  7 +-
 .../settings.svelte                           | 99 +++++++++++--------
 8 files changed, 80 insertions(+), 63 deletions(-)

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 689f7d5df..bd0dfc233 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -67,13 +67,15 @@
                         class:icon-cheveron-down={!showDropdown} />
                 </button>
                 <svelte:fragment slot="list">
-                    {#each $organizationList.teams as org}
-                        <DropListLink
-                            href={`${base}/console/organization-${org.$id}`}
-                            on:click={() => {
-                                showDropdown = false;
-                            }}>{org.name}</DropListLink>
-                    {/each}
+                    {#if $organizationList?.total}
+                        {#each $organizationList.teams as org}
+                            <DropListLink
+                                href={`${base}/console/organization-${org.$id}`}
+                                on:click={() => {
+                                    showDropdown = false;
+                                }}>{org.name}</DropListLink>
+                        {/each}
+                    {/if}
                 </svelte:fragment>
                 <svelte:fragment slot="other">
                     <section class="drop-section">
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 2d22b8029..daa54de15 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -105,7 +105,7 @@
                         <span class="icon-cheveron-left" aria-hidden="true" />
                     </a>
                 {/if}
-                {#if $titleDropdown?.length}
+                {#if $titleDropdown?.length && $organization}
                     <DropList
                         bind:show={showDropdown}
                         position="bottom"
diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts
index 61c892917..9882f0c10 100644
--- a/src/lib/stores/organization.ts
+++ b/src/lib/stores/organization.ts
@@ -30,6 +30,9 @@ function createOrganization() {
         load: async (teamId: string) => {
             const response = await sdkForConsole.teams.get(teamId);
             set(response);
+        },
+        deleteCache: () => {
+            sessionStorage.removeItem('organization');
         }
     };
 }
diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index 2eae37873..ed627a825 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -15,7 +15,7 @@
     import { onMount } from 'svelte';
 
     updateLayout({
-        title: $organization?.name ?? 'Projects',
+        title: $organization?.name ?? '',
         level: 0
     });
 
@@ -28,26 +28,23 @@
 
     afterNavigate(async () => {
         if ($page.url.pathname === '/console' && !$newOrgModal) {
-            console.log('test');
             const destination = await redirectTo();
             await goto(destination);
         }
     });
 </script>
 
-<Shell showSideNavigation={!$page?.params.organization}>
+<Shell showSideNavigation={$page.url.pathname !== '/console' && !$page?.params.organization}>
     <svelte:fragment slot="header">
         <Header />
     </svelte:fragment>
     <svelte:fragment slot="side">
-        {#if !$page?.params.organization}
-            <SideNavigation />
-        {/if}
+        <SideNavigation />
     </svelte:fragment>
     <slot />
     <footer class="main-footer" />
 </Shell>
 
 {#if $newOrgModal}
-    <Create bind:show={$newOrgModal} closable={!$organizationList?.total} />
+    <Create bind:show={$newOrgModal} closable={!!$organizationList?.total} />
 {/if}
diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
index 1921c697a..878779547 100644
--- a/src/routes/console/_createOrganization.svelte
+++ b/src/routes/console/_createOrganization.svelte
@@ -25,7 +25,7 @@
             await organizationList.load();
             titleDropdown.set($organizationList.teams);
             organization.set(team);
-            goto('/console');
+            await goto(`/console/organization-${$organization.$id}`);
             addNotification({
                 type: 'success',
                 message: `${name} has been created`
@@ -89,7 +89,7 @@
             {/if}
         </FormList>
         <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (show = false)}>Cancel</Button>
+            <Button disabled={!closable} secondary on:click={() => (show = false)}>Cancel</Button>
             <Button submit>Create</Button>
         </svelte:fragment>
     </Modal>
diff --git a/src/routes/console/index.svelte b/src/routes/console/index.svelte
index 700790d1c..e69de29bb 100644
--- a/src/routes/console/index.svelte
+++ b/src/routes/console/index.svelte
@@ -1 +0,0 @@
-<p>loading</p>
diff --git a/src/routes/console/organization-[organization]/_deleteOrganization.svelte b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
index 5696e79ae..64deac143 100644
--- a/src/routes/console/organization-[organization]/_deleteOrganization.svelte
+++ b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { Modal } from '$lib/components';
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
     import { organization, organizationList } from '$lib/stores/organization';
 
     export let showDelete = false;
 
+    const dispatch = createEventDispatcher();
+
     const deleteUser = async () => {
         try {
             await sdkForConsole.teams.delete($organization.$id);
@@ -20,7 +21,7 @@
             if ($organizationList?.total) {
                 organization.set($organizationList.teams[0]);
             }
-            await goto(`${base}/console/`);
+            dispatch('deleted');
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/organization-[organization]/settings.svelte b/src/routes/console/organization-[organization]/settings.svelte
index fab35bdb1..8aeeaaced 100644
--- a/src/routes/console/organization-[organization]/settings.svelte
+++ b/src/routes/console/organization-[organization]/settings.svelte
@@ -4,9 +4,11 @@
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { organization, memberList } from '$lib/stores/organization';
-    import { title, breadcrumbs } from '$lib/stores/layout';
+    import { organization, organizationList, memberList } from '$lib/stores/organization';
+    import { title, breadcrumbs, updateLayout } from '$lib/stores/layout';
     import Delete from './_deleteOrganization.svelte';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
 
     let name: string = $organization.name;
     let showDelete = false;
@@ -31,8 +33,19 @@
         }
     }
 
+    const deleted = async () => {
+        await organizationList.load();
+        if (!$organizationList?.total) {
+            organization.set(null);
+            updateLayout({
+                title: ''
+            });
+        }
+        await goto(`${base}/console`);
+    };
+
     organization.subscribe((org) => {
-        name = org.name;
+        name = org?.name;
     });
 
     let avatars = [];
@@ -52,51 +65,53 @@
 </script>
 
 <Container>
-    <Form on:submit={updateName}>
-        <CardGrid>
-            <h6 class="heading-level-7">Update Name</h6>
+    {#if $organization}
+        <Form on:submit={updateName}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Name</h6>
 
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputText
+                            id="name"
+                            label="Name"
+                            placeholder="Enter name"
+                            autocomplete={false}
+                            bind:value={name} />
+                    </ul>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={name === $organization.name || !name} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
+        <CardGrid>
+            <div>
+                <h6 class="heading-level-7">Delete Organization</h6>
+            </div>
+            <p>
+                The organization will be permanently deleted, including all projects and data
+                associated with this organization. This action is irreversible.
+            </p>
             <svelte:fragment slot="aside">
-                <ul>
-                    <InputText
-                        id="name"
-                        label="Name"
-                        placeholder="Enter name"
-                        autocomplete={false}
-                        bind:value={name} />
-                </ul>
+                <Box>
+                    <svelte:fragment slot="image">
+                        <AvatarGroup {avatars} total={avatarsTotal} />
+                    </svelte:fragment>
+                    <svelte:fragment slot="title">
+                        <h6 class="u-bold">{$organization.name}</h6>
+                    </svelte:fragment>
+                    <p>{$organization.total} projects</p>
+                </Box>
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
-                <Button disabled={name === $organization.name || !name} submit>Update</Button>
+                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
             </svelte:fragment>
         </CardGrid>
-    </Form>
-
-    <CardGrid>
-        <div>
-            <h6 class="heading-level-7">Delete Organization</h6>
-        </div>
-        <p>
-            The organization will be permanently deleted, including all projects and data associated
-            with this organization. This action is irreversible.
-        </p>
-        <svelte:fragment slot="aside">
-            <Box>
-                <svelte:fragment slot="image">
-                    <AvatarGroup {avatars} total={avatarsTotal} />
-                </svelte:fragment>
-                <svelte:fragment slot="title">
-                    <h6 class="u-bold">{$organization.name}</h6>
-                </svelte:fragment>
-                <p>{$organization.total} projects</p>
-            </Box>
-        </svelte:fragment>
-
-        <svelte:fragment slot="actions">
-            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
-        </svelte:fragment>
-    </CardGrid>
+    {/if}
 </Container>
 
-<Delete bind:showDelete />
+<Delete bind:showDelete on:deleted={deleted} />

From 20b1f246731aba9433271538368749d0962abf36 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 13:38:40 +0200
Subject: [PATCH 096/118] fix: add missing head

---
 src/routes/console/__layout.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index ed627a825..cb5e4bce5 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -34,6 +34,10 @@
     });
 </script>
 
+<svelte:head>
+    <title>Appwrite - Console</title>
+</svelte:head>
+
 <Shell showSideNavigation={$page.url.pathname !== '/console' && !$page?.params.organization}>
     <svelte:fragment slot="header">
         <Header />

From 0f05b7e3abc1b8673eb73af5483a6e3a2e669f4e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 13:39:45 +0200
Subject: [PATCH 097/118] fix: correct head for organization

---
 src/routes/console/organization-[organization]/__layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/organization-[organization]/__layout.svelte b/src/routes/console/organization-[organization]/__layout.svelte
index 7b5a8b3d4..f6fa25866 100644
--- a/src/routes/console/organization-[organization]/__layout.svelte
+++ b/src/routes/console/organization-[organization]/__layout.svelte
@@ -53,7 +53,7 @@
 </script>
 
 <svelte:head>
-    <title>Appwrite - Console</title>
+    <title>Appwrite - Organizations</title>
 </svelte:head>
 
 {#if $organization}

From 1492c6bdbe2921ac2e9bc9896ecb7d6098393190 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 13:43:27 +0200
Subject: [PATCH 098/118] fix: from Torsten's review

---
 .../console/organization-[organization]/index.svelte      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/console/organization-[organization]/index.svelte b/src/routes/console/organization-[organization]/index.svelte
index e7a7c7614..156ae6f03 100644
--- a/src/routes/console/organization-[organization]/index.svelte
+++ b/src/routes/console/organization-[organization]/index.svelte
@@ -13,11 +13,11 @@
     import { page } from '$app/stores';
 
     let projects: Models.Project[] = [];
-    $: org = $page.params.organization;
+    $: organizationId = $page.params.organization;
 
     onMount(async () => {
         await projectList.load();
-        projects = $projectList?.projects?.filter((n) => n.teamId === org);
+        projects = $projectList?.projects?.filter((n) => n.teamId === organizationId);
     });
 
     let showCreate = false;
@@ -53,7 +53,7 @@
         return { name, icon };
     };
 
-    $: projects = $projectList?.projects?.filter((a) => a.teamId === org);
+    $: projects = $projectList?.projects?.filter((a) => a.teamId === organizationId);
 </script>
 
 <Container>
@@ -140,4 +140,4 @@
 
 <CreateOrganization bind:show={addOrganization} />
 
-<CreateProject bind:show={showCreate} teamId={org} on:created={projectCreated} />
+<CreateProject bind:show={showCreate} teamId={organizationId} on:created={projectCreated} />

From bd61060d013844b5da5d5da0c4708430c51a0866 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 13:43:55 +0200
Subject: [PATCH 099/118] fix: from Torsten's review

---
 src/routes/console/__layout.svelte                     |  4 +---
 .../organization-[organization]/__layout.svelte        | 10 +++++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index cb5e4bce5..9ca613699 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -49,6 +49,4 @@
     <footer class="main-footer" />
 </Shell>
 
-{#if $newOrgModal}
-    <Create bind:show={$newOrgModal} closable={!!$organizationList?.total} />
-{/if}
+<Create bind:show={$newOrgModal} closable={!!$organizationList?.total} />
diff --git a/src/routes/console/organization-[organization]/__layout.svelte b/src/routes/console/organization-[organization]/__layout.svelte
index f6fa25866..647327b21 100644
--- a/src/routes/console/organization-[organization]/__layout.svelte
+++ b/src/routes/console/organization-[organization]/__layout.svelte
@@ -13,16 +13,16 @@
     import Create from '../_createOrganization.svelte';
     import { page } from '$app/stores';
 
-    $: org = $page.params.organization;
-    $: path = `console/organization-${org}`;
+    $: organizationId = $page.params.organization;
+    $: path = `console/organization-${organizationId}`;
 
     onMount(handle);
     afterNavigate(handle);
 
     async function handle(event = null) {
-        if ($organization.$id !== org) {
-            await organization.load(org);
-            await memberList.load(org, '', 100, 0);
+        if ($organization.$id !== organizationId) {
+            await organization.load(organizationId);
+            await memberList.load(organizationId, '', 12, 0);
         }
         updateLayout({
             navigate: event,

From 1c5628924fba1c25979a0e4f0c723e5435a425ea Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 14:29:00 +0200
Subject: [PATCH 100/118] feat: route refactor

---
 src/lib/stores/layout.ts                               |  2 +-
 src/lib/stores/oauth-providers.ts                      | 10 +++++-----
 .../console/organization-[organization]/index.svelte   |  2 +-
 .../{[project] => project-[project]}/__layout.svelte   |  2 +-
 .../_createPlatform.svelte                             |  0
 .../authentication/__layout.svelte                     |  0
 .../authentication/_appleOAuth.svelte                  |  0
 .../authentication/_auth0OAuth.svelte                  |  0
 .../authentication/_createTeam.svelte                  |  0
 .../authentication/_createUser.svelte                  |  0
 .../authentication/_mainOAuth.svelte                   |  0
 .../authentication/_microsoftOAuth.svelte              |  0
 .../authentication/_oktaOAuth.svelte                   |  0
 .../authentication/index.svelte                        |  0
 .../authentication/security.svelte                     |  0
 .../authentication/settings.svelte                     |  0
 .../authentication/store.ts                            |  0
 .../authentication/teams.svelte                        |  0
 .../authentication/teams/[team]/__layout.svelte        |  0
 .../teams/[team]/_createMembership.svelte              |  0
 .../teams/[team]/_deleteMembership.svelte              |  0
 .../authentication/teams/[team]/_deleteTeam.svelte     |  0
 .../authentication/teams/[team]/activity.svelte        |  0
 .../authentication/teams/[team]/index.svelte           |  0
 .../authentication/teams/[team]/members.svelte         |  0
 .../authentication/teams/[team]/store.ts               |  0
 .../authentication/usage.svelte                        |  0
 .../authentication/user/[user]/__layout.svelte         |  0
 .../user/[user]/_deleteAllMemberships.svelte           |  0
 .../user/[user]/_deleteAllSessions.svelte              |  0
 .../user/[user]/_deleteMembership.svelte               |  0
 .../authentication/user/[user]/_deleteSession.svelte   |  0
 .../authentication/user/[user]/_deleteUser.svelte      |  0
 .../authentication/user/[user]/activity.svelte         |  0
 .../authentication/user/[user]/index.svelte            |  0
 .../authentication/user/[user]/memberships.svelte      |  0
 .../authentication/user/[user]/sessions.svelte         |  0
 .../authentication/user/[user]/store.ts                |  0
 .../databases/__layout.svelte                          |  0
 .../databases/_create.svelte                           |  0
 .../databases/database/[database]/__layout.svelte      |  0
 .../databases/database/[database]/_create.svelte       |  0
 .../[database]/collection/[collection]/__layout.svelte |  0
 .../[database]/collection/[collection]/_queries.svelte |  0
 .../collection/[collection]/attributes.svelte          |  0
 .../collection/[collection]/attributes/_boolean.svelte |  0
 .../collection/[collection]/attributes/_email.svelte   |  0
 .../collection/[collection]/attributes/_enum.svelte    |  0
 .../collection/[collection]/attributes/_float.svelte   |  0
 .../collection/[collection]/attributes/_integer.svelte |  0
 .../collection/[collection]/attributes/_ip.svelte      |  0
 .../collection/[collection]/attributes/_string.svelte  |  0
 .../collection/[collection]/attributes/_url.svelte     |  0
 .../collection/[collection]/attributes/store.ts        |  0
 .../collection/[collection]/document/$create.svelte    |  0
 .../[collection]/document/[document]/__layout.svelte   |  0
 .../[collection]/document/[document]/_attribute.svelte |  0
 .../[collection]/document/[document]/_document.svelte  |  0
 .../[collection]/document/[document]/activity.svelte   |  0
 .../document/[document]/attributes/_boolean.svelte     |  0
 .../document/[document]/attributes/_enum.svelte        |  0
 .../document/[document]/attributes/_integer.svelte     |  0
 .../document/[document]/attributes/_string.svelte      |  0
 .../[collection]/document/[document]/index.svelte      |  0
 .../[collection]/document/[document]/store.ts          |  0
 .../[database]/collection/[collection]/index.svelte    |  0
 .../[database]/collection/[collection]/indexes.svelte  |  0
 .../[database]/collection/[collection]/settings.svelte |  0
 .../[database]/collection/[collection]/store.ts        |  0
 .../databases/database/[database]/index.svelte         |  0
 .../databases/database/[database]/store.ts             |  0
 .../databases/database/[database]/usage.svelte         |  0
 .../databases/index.svelte                             |  0
 .../functions/__layout.svelte                          |  0
 .../functions/_create.svelte                           |  0
 .../functions/function/[function]/__layout.svelte      |  0
 .../functions/function/[function]/_create.svelte       |  0
 .../functions/function/[function]/index.svelte         |  0
 .../functions/function/[function]/logs.svelte          |  0
 .../functions/function/[function]/monitors.svelte      |  0
 .../functions/function/[function]/settings.svelte      |  0
 .../functions/function/[function]/store.ts             |  0
 .../functions/function/[function]/usage.svelte         |  0
 .../functions/index.svelte                             |  0
 .../{[project] => project-[project]}/index.svelte      |  6 +++---
 .../keys/__layout.svelte                               |  0
 .../keys/_create.svelte                                |  0
 .../{[project] => project-[project]}/keys/index.svelte |  0
 .../keys/key/[key]/index.svelte                        |  0
 .../settings/__layout.svelte                           |  0
 .../settings/_createDomain.svelte                      |  0
 .../settings/domains.svelte                            |  0
 .../settings/index.svelte                              |  0
 .../settings/members.svelte                            |  0
 .../settings/services.svelte                           |  0
 .../storage/__layout.svelte                            |  0
 .../storage/_create.svelte                             |  0
 .../storage/bucket/[bucket]/__layout.svelte            |  0
 .../storage/bucket/[bucket]/_create.svelte             |  0
 .../storage/bucket/[bucket]/_deleteBucket.svelte       |  0
 .../storage/bucket/[bucket]/_deleteFile.svelte         |  0
 .../bucket/[bucket]/file/[file]/__layout.svelte        |  0
 .../bucket/[bucket]/file/[file]/_deleteFile.svelte     |  0
 .../storage/bucket/[bucket]/file/[file]/index.svelte   |  0
 .../storage/bucket/[bucket]/file/[file]/store.ts       |  0
 .../storage/bucket/[bucket]/index.svelte               |  0
 .../storage/bucket/[bucket]/settings.svelte            |  0
 .../storage/bucket/[bucket]/store.ts                   |  0
 .../storage/bucket/[bucket]/usage.svelte               |  0
 .../storage/index.svelte                               |  0
 .../{[project] => project-[project]}/storage/store.ts  |  0
 .../storage/usage.svelte                               |  0
 .../console/{[project] => project-[project]}/store.ts  |  0
 .../webhooks/__layout.svelte                           |  0
 .../webhooks/index.svelte                              |  0
 .../webhooks/webhook/[webhook]/index.svelte            |  0
 116 files changed, 11 insertions(+), 11 deletions(-)
 rename src/routes/console/{[project] => project-[project]}/__layout.svelte (97%)
 rename src/routes/console/{[project] => project-[project]}/_createPlatform.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/_appleOAuth.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/_auth0OAuth.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/_createTeam.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/_createUser.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/_mainOAuth.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/_microsoftOAuth.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/_oktaOAuth.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/security.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/settings.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/teams.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/teams/[team]/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/teams/[team]/_createMembership.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/teams/[team]/_deleteMembership.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/teams/[team]/_deleteTeam.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/teams/[team]/activity.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/teams/[team]/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/teams/[team]/members.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/teams/[team]/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/usage.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/_deleteAllMemberships.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/_deleteAllSessions.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/_deleteMembership.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/_deleteSession.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/_deleteUser.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/activity.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/memberships.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/sessions.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/authentication/user/[user]/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/_create.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/_create.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/_queries.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/attributes.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/attributes/_email.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/attributes/_enum.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/attributes/_float.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/attributes/_integer.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/attributes/_ip.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/attributes/_string.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/attributes/_url.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/attributes/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/$create.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/[document]/_attribute.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/[document]/activity.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/[document]/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/document/[document]/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/indexes.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/settings.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/collection/[collection]/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/database/[database]/usage.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/databases/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/_create.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/function/[function]/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/function/[function]/_create.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/function/[function]/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/function/[function]/logs.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/function/[function]/monitors.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/function/[function]/settings.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/function/[function]/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/function/[function]/usage.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/functions/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/index.svelte (90%)
 rename src/routes/console/{[project] => project-[project]}/keys/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/keys/_create.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/keys/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/keys/key/[key]/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/settings/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/settings/_createDomain.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/settings/domains.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/settings/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/settings/members.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/settings/services.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/_create.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/_create.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/_deleteBucket.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/_deleteFile.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/file/[file]/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/file/[file]/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/file/[file]/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/settings.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/bucket/[bucket]/usage.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/storage/usage.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/store.ts (100%)
 rename src/routes/console/{[project] => project-[project]}/webhooks/__layout.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/webhooks/index.svelte (100%)
 rename src/routes/console/{[project] => project-[project]}/webhooks/webhook/[webhook]/index.svelte (100%)

diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index 6a58273bd..bbee5837f 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -1,4 +1,4 @@
-import { project } from '../../routes/console/[project]/store';
+import { project } from '../../routes/console/project-[project]/store';
 import { get, writable, readable } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
 
diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 68baf0ff4..920263e96 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -1,11 +1,11 @@
 import { writable } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
 import type { SvelteComponent } from 'svelte';
-import Apple from '../../routes/console/[project]/authentication/_appleOAuth.svelte';
-import Microsoft from '../../routes/console/[project]/authentication/_microsoftOAuth.svelte';
-import Okta from '../../routes/console/[project]/authentication/_oktaOAuth.svelte';
-import Auth0 from '../../routes/console/[project]/authentication/_auth0OAuth.svelte';
-import Main from '../../routes/console/[project]/authentication/_mainOAuth.svelte';
+import Apple from '../../routes/console/project-[project]/authentication/_appleOAuth.svelte';
+import Microsoft from '../../routes/console/project-[project]/authentication/_microsoftOAuth.svelte';
+import Okta from '../../routes/console/project-[project]/authentication/_oktaOAuth.svelte';
+import Auth0 from '../../routes/console/project-[project]/authentication/_auth0OAuth.svelte';
+import Main from '../../routes/console/project-[project]/authentication/_mainOAuth.svelte';
 
 export type Provider = {
     name: string;
diff --git a/src/routes/console/organization-[organization]/index.svelte b/src/routes/console/organization-[organization]/index.svelte
index 156ae6f03..990faf033 100644
--- a/src/routes/console/organization-[organization]/index.svelte
+++ b/src/routes/console/organization-[organization]/index.svelte
@@ -73,7 +73,7 @@
             class="grid-box common-section u-margin-block-start-32"
             style={`--grid-gap:2rem; --grid-item-size:${projects.length > 3 ? '22rem' : '25rem'};`}>
             {#each projects as project}
-                <Bucket href={`${base}/console/${project.$id}`}>
+                <Bucket href={`${base}/console/project-${project.$id}`}>
                     <svelte:fragment slot="eyebrow"
                         >{project?.platforms?.length ? project?.platforms?.length : 'No'} apps</svelte:fragment>
                     <svelte:fragment slot="title">
diff --git a/src/routes/console/[project]/__layout.svelte b/src/routes/console/project-[project]/__layout.svelte
similarity index 97%
rename from src/routes/console/[project]/__layout.svelte
rename to src/routes/console/project-[project]/__layout.svelte
index ed60a29a5..1962cf6d8 100644
--- a/src/routes/console/[project]/__layout.svelte
+++ b/src/routes/console/project-[project]/__layout.svelte
@@ -68,7 +68,7 @@
                     level: 0
                 },
                 {
-                    href: $project.$id,
+                    href: `project-${$project.$id}`,
                     title: $project.name
                 }
             ]
diff --git a/src/routes/console/[project]/_createPlatform.svelte b/src/routes/console/project-[project]/_createPlatform.svelte
similarity index 100%
rename from src/routes/console/[project]/_createPlatform.svelte
rename to src/routes/console/project-[project]/_createPlatform.svelte
diff --git a/src/routes/console/[project]/authentication/__layout.svelte b/src/routes/console/project-[project]/authentication/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/__layout.svelte
rename to src/routes/console/project-[project]/authentication/__layout.svelte
diff --git a/src/routes/console/[project]/authentication/_appleOAuth.svelte b/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/_appleOAuth.svelte
rename to src/routes/console/project-[project]/authentication/_appleOAuth.svelte
diff --git a/src/routes/console/[project]/authentication/_auth0OAuth.svelte b/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/_auth0OAuth.svelte
rename to src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
diff --git a/src/routes/console/[project]/authentication/_createTeam.svelte b/src/routes/console/project-[project]/authentication/_createTeam.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/_createTeam.svelte
rename to src/routes/console/project-[project]/authentication/_createTeam.svelte
diff --git a/src/routes/console/[project]/authentication/_createUser.svelte b/src/routes/console/project-[project]/authentication/_createUser.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/_createUser.svelte
rename to src/routes/console/project-[project]/authentication/_createUser.svelte
diff --git a/src/routes/console/[project]/authentication/_mainOAuth.svelte b/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/_mainOAuth.svelte
rename to src/routes/console/project-[project]/authentication/_mainOAuth.svelte
diff --git a/src/routes/console/[project]/authentication/_microsoftOAuth.svelte b/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/_microsoftOAuth.svelte
rename to src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
diff --git a/src/routes/console/[project]/authentication/_oktaOAuth.svelte b/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/_oktaOAuth.svelte
rename to src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
diff --git a/src/routes/console/[project]/authentication/index.svelte b/src/routes/console/project-[project]/authentication/index.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/index.svelte
rename to src/routes/console/project-[project]/authentication/index.svelte
diff --git a/src/routes/console/[project]/authentication/security.svelte b/src/routes/console/project-[project]/authentication/security.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/security.svelte
rename to src/routes/console/project-[project]/authentication/security.svelte
diff --git a/src/routes/console/[project]/authentication/settings.svelte b/src/routes/console/project-[project]/authentication/settings.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/settings.svelte
rename to src/routes/console/project-[project]/authentication/settings.svelte
diff --git a/src/routes/console/[project]/authentication/store.ts b/src/routes/console/project-[project]/authentication/store.ts
similarity index 100%
rename from src/routes/console/[project]/authentication/store.ts
rename to src/routes/console/project-[project]/authentication/store.ts
diff --git a/src/routes/console/[project]/authentication/teams.svelte b/src/routes/console/project-[project]/authentication/teams.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/teams.svelte
rename to src/routes/console/project-[project]/authentication/teams.svelte
diff --git a/src/routes/console/[project]/authentication/teams/[team]/__layout.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/teams/[team]/__layout.svelte
rename to src/routes/console/project-[project]/authentication/teams/[team]/__layout.svelte
diff --git a/src/routes/console/[project]/authentication/teams/[team]/_createMembership.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/_createMembership.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/teams/[team]/_createMembership.svelte
rename to src/routes/console/project-[project]/authentication/teams/[team]/_createMembership.svelte
diff --git a/src/routes/console/[project]/authentication/teams/[team]/_deleteMembership.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/_deleteMembership.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/teams/[team]/_deleteMembership.svelte
rename to src/routes/console/project-[project]/authentication/teams/[team]/_deleteMembership.svelte
diff --git a/src/routes/console/[project]/authentication/teams/[team]/_deleteTeam.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/teams/[team]/_deleteTeam.svelte
rename to src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte
diff --git a/src/routes/console/[project]/authentication/teams/[team]/activity.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/activity.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/teams/[team]/activity.svelte
rename to src/routes/console/project-[project]/authentication/teams/[team]/activity.svelte
diff --git a/src/routes/console/[project]/authentication/teams/[team]/index.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/teams/[team]/index.svelte
rename to src/routes/console/project-[project]/authentication/teams/[team]/index.svelte
diff --git a/src/routes/console/[project]/authentication/teams/[team]/members.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/members.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/teams/[team]/members.svelte
rename to src/routes/console/project-[project]/authentication/teams/[team]/members.svelte
diff --git a/src/routes/console/[project]/authentication/teams/[team]/store.ts b/src/routes/console/project-[project]/authentication/teams/[team]/store.ts
similarity index 100%
rename from src/routes/console/[project]/authentication/teams/[team]/store.ts
rename to src/routes/console/project-[project]/authentication/teams/[team]/store.ts
diff --git a/src/routes/console/[project]/authentication/usage.svelte b/src/routes/console/project-[project]/authentication/usage.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/usage.svelte
rename to src/routes/console/project-[project]/authentication/usage.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/__layout.svelte b/src/routes/console/project-[project]/authentication/user/[user]/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/__layout.svelte
rename to src/routes/console/project-[project]/authentication/user/[user]/__layout.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/_deleteAllMemberships.svelte b/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/_deleteAllMemberships.svelte
rename to src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/_deleteAllSessions.svelte b/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllSessions.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/_deleteAllSessions.svelte
rename to src/routes/console/project-[project]/authentication/user/[user]/_deleteAllSessions.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/_deleteMembership.svelte b/src/routes/console/project-[project]/authentication/user/[user]/_deleteMembership.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/_deleteMembership.svelte
rename to src/routes/console/project-[project]/authentication/user/[user]/_deleteMembership.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/_deleteSession.svelte b/src/routes/console/project-[project]/authentication/user/[user]/_deleteSession.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/_deleteSession.svelte
rename to src/routes/console/project-[project]/authentication/user/[user]/_deleteSession.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/_deleteUser.svelte b/src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/_deleteUser.svelte
rename to src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/activity.svelte b/src/routes/console/project-[project]/authentication/user/[user]/activity.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/activity.svelte
rename to src/routes/console/project-[project]/authentication/user/[user]/activity.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/index.svelte b/src/routes/console/project-[project]/authentication/user/[user]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/index.svelte
rename to src/routes/console/project-[project]/authentication/user/[user]/index.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/memberships.svelte b/src/routes/console/project-[project]/authentication/user/[user]/memberships.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/memberships.svelte
rename to src/routes/console/project-[project]/authentication/user/[user]/memberships.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/sessions.svelte b/src/routes/console/project-[project]/authentication/user/[user]/sessions.svelte
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/sessions.svelte
rename to src/routes/console/project-[project]/authentication/user/[user]/sessions.svelte
diff --git a/src/routes/console/[project]/authentication/user/[user]/store.ts b/src/routes/console/project-[project]/authentication/user/[user]/store.ts
similarity index 100%
rename from src/routes/console/[project]/authentication/user/[user]/store.ts
rename to src/routes/console/project-[project]/authentication/user/[user]/store.ts
diff --git a/src/routes/console/[project]/databases/__layout.svelte b/src/routes/console/project-[project]/databases/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/__layout.svelte
rename to src/routes/console/project-[project]/databases/__layout.svelte
diff --git a/src/routes/console/[project]/databases/_create.svelte b/src/routes/console/project-[project]/databases/_create.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/_create.svelte
rename to src/routes/console/project-[project]/databases/_create.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/__layout.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/__layout.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/_create.svelte b/src/routes/console/project-[project]/databases/database/[database]/_create.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/_create.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/_create.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/__layout.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_queries.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_queries.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/_queries.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/_queries.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/store.ts
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/store.ts
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/store.ts
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/$create.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/$create.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/$create.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/$create.svelte
diff --git a/src/routes/console/[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
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_attribute.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_attribute.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_attribute.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_attribute.svelte
diff --git a/src/routes/console/[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
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/activity.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/activity.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/activity.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/activity.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte
diff --git a/src/routes/console/[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
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/index.svelte
diff --git a/src/routes/console/[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
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/index.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/indexes.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/collection/[collection]/store.ts
rename to src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
diff --git a/src/routes/console/[project]/databases/database/[database]/index.svelte b/src/routes/console/project-[project]/databases/database/[database]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/index.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/index.svelte
diff --git a/src/routes/console/[project]/databases/database/[database]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/store.ts
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/store.ts
rename to src/routes/console/project-[project]/databases/database/[database]/store.ts
diff --git a/src/routes/console/[project]/databases/database/[database]/usage.svelte b/src/routes/console/project-[project]/databases/database/[database]/usage.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/database/[database]/usage.svelte
rename to src/routes/console/project-[project]/databases/database/[database]/usage.svelte
diff --git a/src/routes/console/[project]/databases/index.svelte b/src/routes/console/project-[project]/databases/index.svelte
similarity index 100%
rename from src/routes/console/[project]/databases/index.svelte
rename to src/routes/console/project-[project]/databases/index.svelte
diff --git a/src/routes/console/[project]/functions/__layout.svelte b/src/routes/console/project-[project]/functions/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/functions/__layout.svelte
rename to src/routes/console/project-[project]/functions/__layout.svelte
diff --git a/src/routes/console/[project]/functions/_create.svelte b/src/routes/console/project-[project]/functions/_create.svelte
similarity index 100%
rename from src/routes/console/[project]/functions/_create.svelte
rename to src/routes/console/project-[project]/functions/_create.svelte
diff --git a/src/routes/console/[project]/functions/function/[function]/__layout.svelte b/src/routes/console/project-[project]/functions/function/[function]/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/functions/function/[function]/__layout.svelte
rename to src/routes/console/project-[project]/functions/function/[function]/__layout.svelte
diff --git a/src/routes/console/[project]/functions/function/[function]/_create.svelte b/src/routes/console/project-[project]/functions/function/[function]/_create.svelte
similarity index 100%
rename from src/routes/console/[project]/functions/function/[function]/_create.svelte
rename to src/routes/console/project-[project]/functions/function/[function]/_create.svelte
diff --git a/src/routes/console/[project]/functions/function/[function]/index.svelte b/src/routes/console/project-[project]/functions/function/[function]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/functions/function/[function]/index.svelte
rename to src/routes/console/project-[project]/functions/function/[function]/index.svelte
diff --git a/src/routes/console/[project]/functions/function/[function]/logs.svelte b/src/routes/console/project-[project]/functions/function/[function]/logs.svelte
similarity index 100%
rename from src/routes/console/[project]/functions/function/[function]/logs.svelte
rename to src/routes/console/project-[project]/functions/function/[function]/logs.svelte
diff --git a/src/routes/console/[project]/functions/function/[function]/monitors.svelte b/src/routes/console/project-[project]/functions/function/[function]/monitors.svelte
similarity index 100%
rename from src/routes/console/[project]/functions/function/[function]/monitors.svelte
rename to src/routes/console/project-[project]/functions/function/[function]/monitors.svelte
diff --git a/src/routes/console/[project]/functions/function/[function]/settings.svelte b/src/routes/console/project-[project]/functions/function/[function]/settings.svelte
similarity index 100%
rename from src/routes/console/[project]/functions/function/[function]/settings.svelte
rename to src/routes/console/project-[project]/functions/function/[function]/settings.svelte
diff --git a/src/routes/console/[project]/functions/function/[function]/store.ts b/src/routes/console/project-[project]/functions/function/[function]/store.ts
similarity index 100%
rename from src/routes/console/[project]/functions/function/[function]/store.ts
rename to src/routes/console/project-[project]/functions/function/[function]/store.ts
diff --git a/src/routes/console/[project]/functions/function/[function]/usage.svelte b/src/routes/console/project-[project]/functions/function/[function]/usage.svelte
similarity index 100%
rename from src/routes/console/[project]/functions/function/[function]/usage.svelte
rename to src/routes/console/project-[project]/functions/function/[function]/usage.svelte
diff --git a/src/routes/console/[project]/functions/index.svelte b/src/routes/console/project-[project]/functions/index.svelte
similarity index 100%
rename from src/routes/console/[project]/functions/index.svelte
rename to src/routes/console/project-[project]/functions/index.svelte
diff --git a/src/routes/console/[project]/index.svelte b/src/routes/console/project-[project]/index.svelte
similarity index 90%
rename from src/routes/console/[project]/index.svelte
rename to src/routes/console/project-[project]/index.svelte
index 5a0e7566b..2a2413d70 100644
--- a/src/routes/console/[project]/index.svelte
+++ b/src/routes/console/project-[project]/index.svelte
@@ -28,19 +28,19 @@
     <Cover adjustContentToCover>
         <ul class="links-nav">
             <li class="links-nav-item">
-                <a class="link" href={`${base}/console/${$project.$id}/settings`}>
+                <a class="link" href={`${base}/console/project-${$project.$id}/settings`}>
                     <span class="icon-cog" aria-hidden="true" />
                     <span class="text">Settings</span>
                 </a>
             </li>
             <li class="links-nav-item">
-                <a class="link" href={`${base}/console/${$project.$id}/keys`}>
+                <a class="link" href={`${base}/console/project-${$project.$id}/keys`}>
                     <span class="icon-key" aria-hidden="true" />
                     <span class="text">API Keys</span>
                 </a>
             </li>
             <li class="links-nav-item">
-                <a class="link" href={`${base}/console/${$project.$id}/webhooks`}>
+                <a class="link" href={`${base}/console/project-${$project.$id}/webhooks`}>
                     <span class="icon-link" aria-hidden="true" />
                     <span class="text">Webhooks</span>
                 </a>
diff --git a/src/routes/console/[project]/keys/__layout.svelte b/src/routes/console/project-[project]/keys/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/keys/__layout.svelte
rename to src/routes/console/project-[project]/keys/__layout.svelte
diff --git a/src/routes/console/[project]/keys/_create.svelte b/src/routes/console/project-[project]/keys/_create.svelte
similarity index 100%
rename from src/routes/console/[project]/keys/_create.svelte
rename to src/routes/console/project-[project]/keys/_create.svelte
diff --git a/src/routes/console/[project]/keys/index.svelte b/src/routes/console/project-[project]/keys/index.svelte
similarity index 100%
rename from src/routes/console/[project]/keys/index.svelte
rename to src/routes/console/project-[project]/keys/index.svelte
diff --git a/src/routes/console/[project]/keys/key/[key]/index.svelte b/src/routes/console/project-[project]/keys/key/[key]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/keys/key/[key]/index.svelte
rename to src/routes/console/project-[project]/keys/key/[key]/index.svelte
diff --git a/src/routes/console/[project]/settings/__layout.svelte b/src/routes/console/project-[project]/settings/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/settings/__layout.svelte
rename to src/routes/console/project-[project]/settings/__layout.svelte
diff --git a/src/routes/console/[project]/settings/_createDomain.svelte b/src/routes/console/project-[project]/settings/_createDomain.svelte
similarity index 100%
rename from src/routes/console/[project]/settings/_createDomain.svelte
rename to src/routes/console/project-[project]/settings/_createDomain.svelte
diff --git a/src/routes/console/[project]/settings/domains.svelte b/src/routes/console/project-[project]/settings/domains.svelte
similarity index 100%
rename from src/routes/console/[project]/settings/domains.svelte
rename to src/routes/console/project-[project]/settings/domains.svelte
diff --git a/src/routes/console/[project]/settings/index.svelte b/src/routes/console/project-[project]/settings/index.svelte
similarity index 100%
rename from src/routes/console/[project]/settings/index.svelte
rename to src/routes/console/project-[project]/settings/index.svelte
diff --git a/src/routes/console/[project]/settings/members.svelte b/src/routes/console/project-[project]/settings/members.svelte
similarity index 100%
rename from src/routes/console/[project]/settings/members.svelte
rename to src/routes/console/project-[project]/settings/members.svelte
diff --git a/src/routes/console/[project]/settings/services.svelte b/src/routes/console/project-[project]/settings/services.svelte
similarity index 100%
rename from src/routes/console/[project]/settings/services.svelte
rename to src/routes/console/project-[project]/settings/services.svelte
diff --git a/src/routes/console/[project]/storage/__layout.svelte b/src/routes/console/project-[project]/storage/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/__layout.svelte
rename to src/routes/console/project-[project]/storage/__layout.svelte
diff --git a/src/routes/console/[project]/storage/_create.svelte b/src/routes/console/project-[project]/storage/_create.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/_create.svelte
rename to src/routes/console/project-[project]/storage/_create.svelte
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/__layout.svelte
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteBucket.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteBucket.svelte
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteFile.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteFile.svelte
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/index.svelte
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/store.ts b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/store.ts
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/store.ts
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/store.ts
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/index.svelte
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/index.svelte
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/settings.svelte
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/store.ts b/src/routes/console/project-[project]/storage/bucket/[bucket]/store.ts
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/store.ts
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/store.ts
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/usage.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/usage.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/bucket/[bucket]/usage.svelte
rename to src/routes/console/project-[project]/storage/bucket/[bucket]/usage.svelte
diff --git a/src/routes/console/[project]/storage/index.svelte b/src/routes/console/project-[project]/storage/index.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/index.svelte
rename to src/routes/console/project-[project]/storage/index.svelte
diff --git a/src/routes/console/[project]/storage/store.ts b/src/routes/console/project-[project]/storage/store.ts
similarity index 100%
rename from src/routes/console/[project]/storage/store.ts
rename to src/routes/console/project-[project]/storage/store.ts
diff --git a/src/routes/console/[project]/storage/usage.svelte b/src/routes/console/project-[project]/storage/usage.svelte
similarity index 100%
rename from src/routes/console/[project]/storage/usage.svelte
rename to src/routes/console/project-[project]/storage/usage.svelte
diff --git a/src/routes/console/[project]/store.ts b/src/routes/console/project-[project]/store.ts
similarity index 100%
rename from src/routes/console/[project]/store.ts
rename to src/routes/console/project-[project]/store.ts
diff --git a/src/routes/console/[project]/webhooks/__layout.svelte b/src/routes/console/project-[project]/webhooks/__layout.svelte
similarity index 100%
rename from src/routes/console/[project]/webhooks/__layout.svelte
rename to src/routes/console/project-[project]/webhooks/__layout.svelte
diff --git a/src/routes/console/[project]/webhooks/index.svelte b/src/routes/console/project-[project]/webhooks/index.svelte
similarity index 100%
rename from src/routes/console/[project]/webhooks/index.svelte
rename to src/routes/console/project-[project]/webhooks/index.svelte
diff --git a/src/routes/console/[project]/webhooks/webhook/[webhook]/index.svelte b/src/routes/console/project-[project]/webhooks/webhook/[webhook]/index.svelte
similarity index 100%
rename from src/routes/console/[project]/webhooks/webhook/[webhook]/index.svelte
rename to src/routes/console/project-[project]/webhooks/webhook/[webhook]/index.svelte

From e92a3e49b1f4624edcd509fc365ab5d29d8f8297 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 14:37:06 +0200
Subject: [PATCH 101/118] feat: fix broken routes

---
 src/lib/layout/navigation.svelte                              | 2 +-
 src/lib/stores/layout.ts                                      | 2 +-
 .../console/project-[project]/authentication/index.svelte     | 4 ++--
 .../console/project-[project]/authentication/teams.svelte     | 4 ++--
 .../authentication/teams/[team]/__layout.svelte               | 2 +-
 .../authentication/teams/[team]/_createMembership.svelte      | 2 +-
 .../authentication/teams/[team]/_deleteMembership.svelte      | 2 +-
 .../authentication/teams/[team]/_deleteTeam.svelte            | 2 +-
 .../authentication/teams/[team]/members.svelte                | 4 ++--
 .../authentication/user/[user]/__layout.svelte                | 2 +-
 .../authentication/user/[user]/_deleteAllMemberships.svelte   | 2 +-
 .../authentication/user/[user]/_deleteMembership.svelte       | 2 +-
 .../authentication/user/[user]/_deleteUser.svelte             | 2 +-
 .../authentication/user/[user]/memberships.svelte             | 2 +-
 .../[database]/collection/[collection]/__layout.svelte        | 2 +-
 .../collection/[collection]/document/$create.svelte           | 4 ++--
 .../database/[database]/collection/[collection]/index.svelte  | 2 +-
 .../databases/database/[database]/index.svelte                | 4 ++--
 src/routes/console/project-[project]/databases/index.svelte   | 4 ++--
 .../functions/function/[function]/index.svelte                | 2 +-
 src/routes/console/project-[project]/functions/index.svelte   | 2 +-
 src/routes/console/project-[project]/keys/index.svelte        | 2 +-
 .../console/project-[project]/keys/key/[key]/index.svelte     | 2 +-
 .../storage/bucket/[bucket]/_deleteBucket.svelte              | 2 +-
 .../storage/bucket/[bucket]/file/[file]/__layout.svelte       | 2 +-
 .../storage/bucket/[bucket]/file/[file]/_deleteFile.svelte    | 4 +++-
 .../project-[project]/storage/bucket/[bucket]/index.svelte    | 4 ++--
 src/routes/console/project-[project]/storage/index.svelte     | 4 ++--
 src/routes/console/project-[project]/webhooks/index.svelte    | 2 +-
 29 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index e3eff9729..52b33aaa5 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -3,7 +3,7 @@
     import { page } from '$app/stores';
 
     $: project = $page.params.project;
-    $: path = `${base}/console/${project}`;
+    $: path = `${base}/console/project-${project}`;
 </script>
 
 <div class="side-nav">
diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index bbee5837f..8db7e7417 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -44,7 +44,7 @@ export const copyData = writable({
 
 export function updateLayout(args: updateLayoutArguments) {
     const projectId = get(project)?.$id;
-    const base = args?.customBase ?? projectId ? `/console/${projectId}` : ``;
+    const base = args?.customBase ?? projectId ? `/console/project-${projectId}` : ``;
 
     if (args?.tabs) {
         args.tabs.map((tab) => {
diff --git a/src/routes/console/project-[project]/authentication/index.svelte b/src/routes/console/project-[project]/authentication/index.svelte
index db078a2c7..83e6162c1 100644
--- a/src/routes/console/project-[project]/authentication/index.svelte
+++ b/src/routes/console/project-[project]/authentication/index.svelte
@@ -30,7 +30,7 @@
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const userCreated = async (event: CustomEvent<Models.User<Record<string, unknown>>>) => {
-        await goto(`${base}/console/${project}/authentication/user/${event.detail.$id}`);
+        await goto(`${base}/console/project-${project}/authentication/user/${event.detail.$id}`);
     };
 
     $: if (search) offset = 0;
@@ -64,7 +64,7 @@
             <TableBody>
                 {#each $usersList.users as user}
                     <TableRowLink
-                        href={`${base}/console/${project}/authentication/user/${user.$id}`}>
+                        href={`${base}/console/project-${project}/authentication/user/${user.$id}`}>
                         <TableCell title="Name">
                             <div class="u-flex u-gap-12 u-cross-center">
                                 <Avatar size={32} src={getAvatar(user.name)} name={user.name} />
diff --git a/src/routes/console/project-[project]/authentication/teams.svelte b/src/routes/console/project-[project]/authentication/teams.svelte
index 989cafc42..0596cc006 100644
--- a/src/routes/console/project-[project]/authentication/teams.svelte
+++ b/src/routes/console/project-[project]/authentication/teams.svelte
@@ -29,7 +29,7 @@
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
     const teamCreated = async (event: CustomEvent<Models.Team>) => {
-        await goto(`${base}/console/${project}/authentication/teams/${event.detail.$id}`);
+        await goto(`${base}/console/project-${project}/authentication/teams/${event.detail.$id}`);
     };
 
     $: if (search) offset = 0;
@@ -61,7 +61,7 @@
             <TableBody>
                 {#each $teamsList.teams as team}
                     <TableRowLink
-                        href={`${base}/console/${project}/authentication/teams/${team.$id}`}>
+                        href={`${base}/console/project-${project}/authentication/teams/${team.$id}`}>
                         <TableCell title="ID">
                             <div class="u-flex u-gap-12">
                                 <Avatar size={32} name={team.name} src={getAvatar(team.name)} />
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/__layout.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/__layout.svelte
index d9ca9bb49..c813a9d74 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/__layout.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/__layout.svelte
@@ -21,7 +21,7 @@
             navigate: event,
             level: 4,
             title: $team.name,
-            back: `${base}/console/${$page.params.project}/authentication/teams`,
+            back: `${base}/console/project-${$page.params.project}/authentication/teams`,
             breadcrumbs: {
                 title: $team.name,
                 href: `teams/${teamId}`
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/_createMembership.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/_createMembership.svelte
index 9bbb0c5e1..099d35b7c 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/_createMembership.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/_createMembership.svelte
@@ -15,7 +15,7 @@
     let error: string;
 
     const create = async () => {
-        const url = `${$page.url.origin}/console/${$page.params.project}/authentication/teams/${$page.params.team}/members`;
+        const url = `${$page.url.origin}/console/project-${$page.params.project}/authentication/teams/${$page.params.team}/members`;
 
         try {
             const user = await sdkForProject.teams.createMembership(
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/_deleteMembership.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/_deleteMembership.svelte
index 22d04b5ed..ebd0aae32 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/_deleteMembership.svelte
@@ -23,7 +23,7 @@
             showDelete = false;
             dispatch('deleted');
             await goto(
-                `${base}/console/${$page.params.project}/authentication/teams/${selectedMembership.teamId}/members`
+                `${base}/console/project-${$page.params.project}/authentication/teams/${selectedMembership.teamId}/members`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte
index 77ba262af..e906e405e 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte
@@ -15,7 +15,7 @@
         try {
             await sdkForProject.teams.delete(team.$id);
             showDelete = false;
-            await goto(`${base}/console/${$page.params.project}/authentication/teams`);
+            await goto(`${base}/console/project-${$page.params.project}/authentication/teams`);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/members.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/members.svelte
index 3a4920973..6dc75bc4a 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/members.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/members.svelte
@@ -38,7 +38,7 @@
     const memberCreated = async (event: CustomEvent<Models.Membership>) => {
         memberships.load($page.params.team, search, $pageLimit, offset ?? 0);
         await goto(
-            `${base}/console/${project}/authentication/teams/${event.detail.teamId}/members`
+            `${base}/console/project-${project}/authentication/teams/${event.detail.teamId}/members`
         );
     };
 </script>
@@ -61,7 +61,7 @@
             <TableBody>
                 {#each $memberships.memberships as membership}
                     <TableRowLink
-                        href={`${base}/console/${project}/authentication/user/${membership.userId}`}>
+                        href={`${base}/console/project-${project}/authentication/user/${membership.userId}`}>
                         <TableCellText title="Name">
                             <div class="u-flex u-gap-12">
                                 <Avatar
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/__layout.svelte b/src/routes/console/project-[project]/authentication/user/[user]/__layout.svelte
index dd75f563e..4a5a01e14 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/__layout.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/__layout.svelte
@@ -25,7 +25,7 @@
                 title: $user.name,
                 href: `user/${userId}`
             },
-            back: `${base}/console/${$page.params.project}/authentication`,
+            back: `${base}/console/project-${$page.params.project}/authentication`,
             copy: {
                 text: 'User ID',
                 value: userId
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte b/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte
index 2e29ff27d..fd892d46d 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte
@@ -15,7 +15,7 @@
             await sdkForProject.teams.deleteMembership('tmpstring', 'tmpstring2');
             showDeleteAll = false;
             await goto(
-                `${base}/console/${$page.params.project}/authentication/${$user.$id}/membeships`
+                `${base}/console/project-${$page.params.project}/authentication/${$user.$id}/membeships`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/_deleteMembership.svelte b/src/routes/console/project-[project]/authentication/user/[user]/_deleteMembership.svelte
index eec2d4b84..8bf5f78f2 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteMembership.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/_deleteMembership.svelte
@@ -23,7 +23,7 @@
             showDelete = false;
             dispatch('deleted');
             await goto(
-                `${base}/console/${$page.params.project}/authentication/user/${selectedMembership.userId}/memberships`
+                `${base}/console/project-${$page.params.project}/authentication/user/${selectedMembership.userId}/memberships`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte b/src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte
index edb7fc4e2..6704ae17e 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte
@@ -19,7 +19,7 @@
                 type: 'success',
                 message: `${$user.name} has been deleted`
             });
-            await goto(`${base}/console/${$page.params.project}/authentication`);
+            await goto(`${base}/console/project-${$page.params.project}/authentication`);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/memberships.svelte b/src/routes/console/project-[project]/authentication/user/[user]/memberships.svelte
index a08d02ea9..4e85213fe 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/memberships.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/memberships.svelte
@@ -51,7 +51,7 @@
                 <TableBody>
                     {#each response.memberships as membership}
                         <TableRowLink
-                            href={`${base}/console/${project}/authentication/teams/${membership.teamId}`}>
+                            href={`${base}/console/project-${project}/authentication/teams/${membership.teamId}`}>
                             <TableCellText title="Name">
                                 <div class="u-flex u-gap-12">
                                     <Avatar
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 0d1df68bd..ebd66e4d1 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
@@ -27,7 +27,7 @@
                 href: `collection/${collectionId}`,
                 title: $collection.name
             },
-            back: `${base}/console/${$page.params.project}/database`,
+            back: `${base}/console/project-${$page.params.project}/database`,
             tabs: [
                 {
                     href: path,
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
index 3df7216ab..cee583c30 100644
--- 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
@@ -43,7 +43,7 @@
                 type: 'success'
             });
             await goto(
-                `${base}/console/${projectId}/database/collection/${created.$collection}/document/${created.$id}`
+                `${base}/console/project-${projectId}/database/collection/${created.$collection}/document/${created.$id}`
             );
         } catch (error) {
             addNotification({
@@ -59,7 +59,7 @@
 </svelte:head>
 {#if $doc && $collection}
     <Cover>
-        <Back href={`${base}/console/${projectId}/database/collection/${$collection.$id}`}>
+        <Back href={`${base}/console/project-${projectId}/database/collection/${$collection.$id}`}>
             Collection - {$collection.name}
         </Back>
         <h1>Create Document</h1>
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 04cb02f3b..aee2d612d 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
@@ -54,7 +54,7 @@
                         <TableRow>
                             {#each columns as column}
                                 <TableCellLink
-                                    href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}
+                                    href={`${base}/console/project-${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}
                                     title={column.title}>
                                     {document[column.key] ?? 'n/a'}
                                 </TableCellLink>
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 b0083a9ca..b96e21511 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/index.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/index.svelte
@@ -17,7 +17,7 @@
     const projectId = $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}`);
+        await goto(`${base}/console/project-${projectId}/databases/collection/${event.detail.$id}`);
     };
 
     $: request = sdkForProject.databases.listCollections(search, limit, offset);
@@ -40,7 +40,7 @@
             <Tiles>
                 {#each response.collections as collection}
                     <Tile
-                        href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${collection.$id}`}
+                        href={`${base}/console/project-${projectId}/databases/database/${databaseId}/collection/${collection.$id}`}
                         title={collection.name} />
                 {/each}
             </Tiles>
diff --git a/src/routes/console/project-[project]/databases/index.svelte b/src/routes/console/project-[project]/databases/index.svelte
index 202e9c389..f86139d2b 100644
--- a/src/routes/console/project-[project]/databases/index.svelte
+++ b/src/routes/console/project-[project]/databases/index.svelte
@@ -16,7 +16,7 @@
     const limit = 25;
     const project = $page.params.project;
     const databaseCreated = async (event: CustomEvent<Models.Database>) => {
-        await goto(`${base}/console/${project}/databases/database/${event.detail.$id}`);
+        await goto(`${base}/console/project-${project}/databases/database/${event.detail.$id}`);
     };
     $: request = sdkForProject.databases.list(search, limit, offset);
     $: if (search) offset = 0;
@@ -36,7 +36,7 @@
             <Tiles>
                 {#each response.databases as database}
                     <Tile
-                        href={`${base}/console/${project}/databases/database/${database.$id}`}
+                        href={`${base}/console/project-${project}/databases/database/${database.$id}`}
                         title={database.name} />
                 {/each}
             </Tiles>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/index.svelte b/src/routes/console/project-[project]/functions/function/[function]/index.svelte
index 6e68b3ff6..b94ce59f4 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/index.svelte
+++ b/src/routes/console/project-[project]/functions/function/[function]/index.svelte
@@ -58,7 +58,7 @@
                     <TableRow>
                         <TableCellLink
                             title="ID"
-                            href={`${base}/console/${project}/storage/bucket/${functionId}/${deployment.$id}`}>
+                            href={`${base}/console/project-${project}/storage/bucket/${functionId}/${deployment.$id}`}>
                             {deployment.$id}
                         </TableCellLink>
                         <TableCellText title="Active">{deployment.activate}</TableCellText>
diff --git a/src/routes/console/project-[project]/functions/index.svelte b/src/routes/console/project-[project]/functions/index.svelte
index c77c62a26..623fcd87b 100644
--- a/src/routes/console/project-[project]/functions/index.svelte
+++ b/src/routes/console/project-[project]/functions/index.svelte
@@ -32,7 +32,7 @@
             <Tiles>
                 {#each response.functions as func}
                     <Tile
-                        href={`${base}/console/${project}/functions/function/${func.$id}`}
+                        href={`${base}/console/project-${project}/functions/function/${func.$id}`}
                         title={func.name} />
                 {/each}
             </Tiles>
diff --git a/src/routes/console/project-[project]/keys/index.svelte b/src/routes/console/project-[project]/keys/index.svelte
index b74d95636..7a35ca087 100644
--- a/src/routes/console/project-[project]/keys/index.svelte
+++ b/src/routes/console/project-[project]/keys/index.svelte
@@ -37,7 +37,7 @@
                     {#each $project.keys as key}
                         <TableRow>
                             <TableCellLink
-                                href={`${base}/console/${projectId}/keys/key/${key.$id}`}
+                                href={`${base}/console/project-${projectId}/keys/key/${key.$id}`}
                                 title="Name">
                                 {key.name}
                             </TableCellLink>
diff --git a/src/routes/console/project-[project]/keys/key/[key]/index.svelte b/src/routes/console/project-[project]/keys/key/[key]/index.svelte
index 195067163..691763677 100644
--- a/src/routes/console/project-[project]/keys/key/[key]/index.svelte
+++ b/src/routes/console/project-[project]/keys/key/[key]/index.svelte
@@ -19,7 +19,7 @@
             type: 'success'
         });
         project.load(projectId);
-        await goto(`${base}/console/${projectId}/keys`);
+        await goto(`${base}/console/project-${projectId}/keys`);
     };
 </script>
 
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteBucket.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteBucket.svelte
index a8e89db1c..88c565e5b 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteBucket.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteBucket.svelte
@@ -14,7 +14,7 @@
         try {
             await sdkForProject.storage.deleteBucket($bucket.$id);
             showDelete = false;
-            await goto(`${base}/console/${$page.params.project}/storage`);
+            await goto(`${base}/console/project-${$page.params.project}/storage`);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte
index dd9162b4b..cdae536c7 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte
@@ -24,7 +24,7 @@
                 href: `file/${fileId}`,
                 title: $file.name
             },
-            back: `${base}/console/${$page.params.project}/storage/bucket/${bucketId}`,
+            back: `${base}/console/project-${$page.params.project}/storage/bucket/${bucketId}`,
             title: $file.name,
             copy: {
                 text: 'File ID',
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
index 065012aec..629cff421 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
@@ -14,7 +14,9 @@
         try {
             await sdkForProject.storage.deleteFile($file.bucketId, $file.$id);
             showDelete = false;
-            await goto(`${base}/console/${$page.params.project}/storage/bucket/${$file.bucketId}`);
+            await goto(
+                `${base}/console/project-${$page.params.project}/storage/bucket/${$file.bucketId}`
+            );
         } catch (error) {
             addNotification({
                 type: 'error',
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 6e248005e..640754dd9 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/index.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/index.svelte
@@ -123,7 +123,7 @@
                         </TableRow>
                     {:else}
                         <TableRowLink
-                            href={`${base}/console/${project}/storage/bucket/${bucket}/file/${file.$id}`}>
+                            href={`${base}/console/project-${project}/storage/bucket/${bucket}/file/${file.$id}`}>
                             <TableCell title="Name">
                                 <div class="u-flex u-gap-12">
                                     <Avatar size={32} src={getPreview(file.$id)} name={file.name} />
@@ -155,7 +155,7 @@
                                             on:click={(e) => {
                                                 e.preventDefault();
                                                 goto(
-                                                    `${base}/console/${project}/storage/bucket/${bucket}/file/${file.$id}`
+                                                    `${base}/console/project-${project}/storage/bucket/${bucket}/file/${file.$id}`
                                                 );
                                             }}>Update</DropListItem>
                                         <DropListItem
diff --git a/src/routes/console/project-[project]/storage/index.svelte b/src/routes/console/project-[project]/storage/index.svelte
index 930439a4b..3a2f10c62 100644
--- a/src/routes/console/project-[project]/storage/index.svelte
+++ b/src/routes/console/project-[project]/storage/index.svelte
@@ -19,7 +19,7 @@
     const project = $page.params.project;
     const bucketCreated = async (event: CustomEvent<Models.Bucket>) => {
         showCreate = false;
-        await goto(`${base}/console/${project}/storage/bucket/${event.detail.$id}`);
+        await goto(`${base}/console/project-${project}/storage/bucket/${event.detail.$id}`);
     };
 
     $: bucketList.load(search, $pageLimit, offset ?? 0);
@@ -42,7 +42,7 @@
                 $bucketList.total > 3 ? '22rem' : '25rem'
             };`}>
             {#each $bucketList.buckets as bucket}
-                <Bucket href={`${base}/console/${project}/storage/bucket/${bucket.$id}`}>
+                <Bucket href={`${base}/console/project-${project}/storage/bucket/${bucket.$id}`}>
                     <svelte:fragment slot="eyebrow">XX Files</svelte:fragment>
                     <svelte:fragment slot="title">{bucket.name}</svelte:fragment>
                     <svelte:fragment slot="status">
diff --git a/src/routes/console/project-[project]/webhooks/index.svelte b/src/routes/console/project-[project]/webhooks/index.svelte
index b3d26aca4..66f1242d7 100644
--- a/src/routes/console/project-[project]/webhooks/index.svelte
+++ b/src/routes/console/project-[project]/webhooks/index.svelte
@@ -36,7 +36,7 @@
                     {#each response.webhooks as webhook}
                         <TableCellLink
                             title="Name"
-                            href={`${base}/console/${projectId}/webhooks/webhook/${webhook.$id}`}>
+                            href={`${base}/console/project-${projectId}/webhooks/webhook/${webhook.$id}`}>
                             {webhook.name}
                         </TableCellLink>
                         <TableCellText title="URL">{webhook.url}</TableCellText>

From 24d740678920c996580a45d3462ad0254f8ab8e9 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Aug 2022 14:48:25 +0200
Subject: [PATCH 102/118] chore: bump css to 0.0.0-51

---
 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 7ce16a4f1..6b75109a5 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-50",
-                "@aw-labs/ui": "0.0.0-50",
+                "@aw-labs/icons": "0.0.0-51",
+                "@aw-labs/ui": "0.0.0-51",
                 "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-50",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-50.tgz",
-            "integrity": "sha512-/BuZx18GhqNN5wXcmAtWl88OpMHfpBv3BX5UFD+c6Q1WrKLTW/R8BoXfRJ38W5/ixaLvHGgM9lYjAJl8wcz+yw=="
+            "version": "0.0.0-51",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-51.tgz",
+            "integrity": "sha512-fp/ysdMyjbG9lnYTDSE58cOxbHP6xj+N6GCVQm9vYmqZ3/FbE2lTayc8lW7v0FrL/EKWoD7bInwspiniK4jKfQ=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-50",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-50.tgz",
-            "integrity": "sha512-Ll7ciaBr1eRLJx1vZL6a2/V7T61zCczzpvJinOZ8NTtkDebs0MhmIUuI//Iadmxav8coiP03YLbKAvX77ZmPgQ==",
+            "version": "0.0.0-51",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-51.tgz",
+            "integrity": "sha512-oTTrnN/Okhl1Yvs5eNpnYHjtxmYdUxW7tUPhgamsK5EwvkU0dxoj5vcI9KK3QbJmD9qxlwJrh9xlyOqQTXsZBQ==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7698,14 +7698,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-50",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-50.tgz",
-            "integrity": "sha512-/BuZx18GhqNN5wXcmAtWl88OpMHfpBv3BX5UFD+c6Q1WrKLTW/R8BoXfRJ38W5/ixaLvHGgM9lYjAJl8wcz+yw=="
+            "version": "0.0.0-51",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-51.tgz",
+            "integrity": "sha512-fp/ysdMyjbG9lnYTDSE58cOxbHP6xj+N6GCVQm9vYmqZ3/FbE2lTayc8lW7v0FrL/EKWoD7bInwspiniK4jKfQ=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-50",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-50.tgz",
-            "integrity": "sha512-Ll7ciaBr1eRLJx1vZL6a2/V7T61zCczzpvJinOZ8NTtkDebs0MhmIUuI//Iadmxav8coiP03YLbKAvX77ZmPgQ==",
+            "version": "0.0.0-51",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-51.tgz",
+            "integrity": "sha512-oTTrnN/Okhl1Yvs5eNpnYHjtxmYdUxW7tUPhgamsK5EwvkU0dxoj5vcI9KK3QbJmD9qxlwJrh9xlyOqQTXsZBQ==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 46d0a0560..5bbc0e2ef 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-50",
-        "@aw-labs/ui": "0.0.0-50",
+        "@aw-labs/icons": "0.0.0-51",
+        "@aw-labs/ui": "0.0.0-51",
         "echarts": "^5.3.3",
         "tippy.js": "^6.3.7",
         "web-vitals": "^2.1.4"

From b2e08b78536df3fe85bf5d03cd43ff943f6b39db Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 30 Aug 2022 17:31:26 +0200
Subject: [PATCH 103/118] fix: broken pagination

---
 .../organization-[organization]/index.svelte  | 61 ++++++++++---------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/routes/console/organization-[organization]/index.svelte b/src/routes/console/organization-[organization]/index.svelte
index 990faf033..e12bf63bd 100644
--- a/src/routes/console/organization-[organization]/index.svelte
+++ b/src/routes/console/organization-[organization]/index.svelte
@@ -9,6 +9,7 @@
     import CreateOrganization from '../_createOrganization.svelte';
     import CreateProject from './_createProject.svelte';
     import { projectList } from '$lib/stores/organization';
+    import { project } from '../project-[project]/store';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
 
@@ -16,17 +17,18 @@
     $: organizationId = $page.params.organization;
 
     onMount(async () => {
-        await projectList.load();
+        await projectList.load('', undefined, offset);
         projects = $projectList?.projects?.filter((n) => n.teamId === organizationId);
     });
 
     let showCreate = false;
     let addOrganization = false;
     let offset = 0;
-    const limit = 5;
+    const limit = 6;
 
     const projectCreated = async (event: CustomEvent<Models.Project>) => {
-        await goto(`${base}/console/${event.detail.$id}`);
+        await project.load(event.detail.$id);
+        await goto(`${base}/console/project-${event.detail.$id}`);
     };
 
     const getPlatformInfo = (platform: string) => {
@@ -53,6 +55,7 @@
         return { name, icon };
     };
 
+    // $: projectList.load('', limit, offset);
     $: projects = $projectList?.projects?.filter((a) => a.teamId === organizationId);
 </script>
 
@@ -72,33 +75,35 @@
         <ul
             class="grid-box common-section u-margin-block-start-32"
             style={`--grid-gap:2rem; --grid-item-size:${projects.length > 3 ? '22rem' : '25rem'};`}>
-            {#each projects as project}
-                <Bucket href={`${base}/console/project-${project.$id}`}>
-                    <svelte:fragment slot="eyebrow"
-                        >{project?.platforms?.length ? project?.platforms?.length : 'No'} apps</svelte:fragment>
-                    <svelte:fragment slot="title">
-                        {project.name}
-                    </svelte:fragment>
-                    {@const platformList = project.platforms.map((platform) => platform.type)}
-                    {@const platforms = Array.from(new Set(platformList))}
-                    {#each platforms as platform, i}
-                        {#if i < 3}
+            {#each projects as project, index}
+                {#if index >= offset && index < limit + offset}
+                    <Bucket href={`${base}/console/project-${project.$id}`}>
+                        <svelte:fragment slot="eyebrow"
+                            >{project?.platforms?.length ? project?.platforms?.length : 'No'} apps</svelte:fragment>
+                        <svelte:fragment slot="title">
+                            {project.name}
+                        </svelte:fragment>
+                        {@const platformList = project.platforms.map((platform) => platform.type)}
+                        {@const platforms = Array.from(new Set(platformList))}
+                        {#each platforms as platform, i}
+                            {#if i < 3}
+                                <Pill>
+                                    <span
+                                        class={`icon-${getPlatformInfo(platform).icon}`}
+                                        aria-hidden="true" />
+                                    {getPlatformInfo(platform).name}
+                                </Pill>
+                            {/if}
+                        {/each}
+                        {#if platforms?.length > 3}
                             <Pill>
-                                <span
-                                    class={`icon-${getPlatformInfo(platform).icon}`}
-                                    aria-hidden="true" />
-                                {getPlatformInfo(platform).name}
+                                +{project.platforms.length - 3}
                             </Pill>
                         {/if}
-                    {/each}
-                    {#if platforms?.length > 3}
-                        <Pill>
-                            +{project.platforms.length - 3}
-                        </Pill>
-                    {/if}
-                </Bucket>
+                    </Bucket>
+                {/if}
             {/each}
-            {#if projects.length % 2 !== 0}
+            {#if projects.length < limit + offset && (projects.length % 2 !== 0 || projects.length % 4 === 0)}
                 <EmptyBucket on:click={() => (showCreate = true)}>
                     <div class="common-section">
                         <Button secondary round>
@@ -118,8 +123,8 @@
         </div>
     {:else}
         <Empty dashed centered>
-            <div class="bucket">
-                <div class="u-flex u-flex-vertical u-cross-center">
+            <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" />

From 4df8ba2050aeab92bb31c9f80d6fedda6b616918 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 30 Aug 2022 17:32:06 +0200
Subject: [PATCH 104/118] fix: various fixes + projects creation redirect

---
 src/lib/stores/organization.ts                | 11 +++++++++--
 .../_createProject.svelte                     |  2 ++
 .../_deleteOrganization.svelte                |  5 +----
 .../settings.svelte                           | 19 +++----------------
 .../console/project-[project]/__layout.svelte |  6 +++---
 5 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts
index 9882f0c10..300da7888 100644
--- a/src/lib/stores/organization.ts
+++ b/src/lib/stores/organization.ts
@@ -45,8 +45,15 @@ function createProjectList() {
     return {
         subscribe,
         set,
-        load: async () => {
-            const response = await sdkForConsole.projects.list();
+        load: async (search: string, limit: number, offset: number) => {
+            const response = await sdkForConsole.projects.list(
+                search,
+                limit,
+                offset,
+                undefined,
+                undefined,
+                'ASC'
+            );
             set(response);
         }
     };
diff --git a/src/routes/console/organization-[organization]/_createProject.svelte b/src/routes/console/organization-[organization]/_createProject.svelte
index a49d4df42..606c7755a 100644
--- a/src/routes/console/organization-[organization]/_createProject.svelte
+++ b/src/routes/console/organization-[organization]/_createProject.svelte
@@ -25,6 +25,8 @@
                 message: `${name} has been created`
             });
             id = name = null;
+            showDropdown = false;
+            show = false;
         } catch ({ message }) {
             error = message;
         }
diff --git a/src/routes/console/organization-[organization]/_deleteOrganization.svelte b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
index 64deac143..dfd3fab9d 100644
--- a/src/routes/console/organization-[organization]/_deleteOrganization.svelte
+++ b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
@@ -3,13 +3,10 @@
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
     import { organization, organizationList } from '$lib/stores/organization';
 
     export let showDelete = false;
 
-    const dispatch = createEventDispatcher();
-
     const deleteUser = async () => {
         try {
             await sdkForConsole.teams.delete($organization.$id);
@@ -19,9 +16,9 @@
                 message: `${$organization.name} has been deleted`
             });
             if ($organizationList?.total) {
+                await organizationList.load();
                 organization.set($organizationList.teams[0]);
             }
-            dispatch('deleted');
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/console/organization-[organization]/settings.svelte b/src/routes/console/organization-[organization]/settings.svelte
index 8aeeaaced..a29f3179d 100644
--- a/src/routes/console/organization-[organization]/settings.svelte
+++ b/src/routes/console/organization-[organization]/settings.svelte
@@ -4,11 +4,9 @@
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { organization, organizationList, memberList } from '$lib/stores/organization';
-    import { title, breadcrumbs, updateLayout } from '$lib/stores/layout';
+    import { organization, memberList } from '$lib/stores/organization';
+    import { title, breadcrumbs } from '$lib/stores/layout';
     import Delete from './_deleteOrganization.svelte';
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
 
     let name: string = $organization.name;
     let showDelete = false;
@@ -33,17 +31,6 @@
         }
     }
 
-    const deleted = async () => {
-        await organizationList.load();
-        if (!$organizationList?.total) {
-            organization.set(null);
-            updateLayout({
-                title: ''
-            });
-        }
-        await goto(`${base}/console`);
-    };
-
     organization.subscribe((org) => {
         name = org?.name;
     });
@@ -114,4 +101,4 @@
     {/if}
 </Container>
 
-<Delete bind:showDelete on:deleted={deleted} />
+<Delete bind:showDelete />
diff --git a/src/routes/console/project-[project]/__layout.svelte b/src/routes/console/project-[project]/__layout.svelte
index 1962cf6d8..7a3f6caa2 100644
--- a/src/routes/console/project-[project]/__layout.svelte
+++ b/src/routes/console/project-[project]/__layout.svelte
@@ -52,9 +52,9 @@
         if ($project?.$id !== projectId) {
             setProject(projectId);
             await project.load(projectId);
-        }
-        if ($organization?.$id !== $project.teamId) {
-            await organization.load($project.teamId);
+            if ($organization?.$id !== $project?.teamId) {
+                await organization.load($project.teamId);
+            }
         }
 
         updateLayout({

From 517be5a9ca965a4b1fb8366db0f97f86eccca581 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 31 Aug 2022 12:51:55 +0200
Subject: [PATCH 105/118] feat: fixes from review

---
 src/lib/components/emptyBucket.svelte         |  6 ++---
 src/lib/layout/shell.svelte                   |  4 ++--
 src/lib/stores/organization.ts                |  7 +++---
 src/routes/console/__layout.svelte            |  8 +++----
 .../organization-[organization]/index.svelte  |  6 +++--
 .../storage/bucket/[bucket]/index.svelte      | 22 ++++++++++---------
 6 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/emptyBucket.svelte b/src/lib/components/emptyBucket.svelte
index b3a420871..7678addac 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/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index daa54de15..98d62d6bf 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -195,8 +195,8 @@
                             <li class="tabs-item">
                                 <a
                                     class="tabs-button"
-                                    href={`${tab.href}`}
-                                    class:is-selected={$page.url.pathname === `${tab.href}`}>
+                                    href={tab.href}
+                                    class:is-selected={$page.url.pathname === tab.href}>
                                     <span class="text">{tab.title}</span>
                                 </a>
                             </li>
diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts
index 300da7888..b6ce64a42 100644
--- a/src/lib/stores/organization.ts
+++ b/src/lib/stores/organization.ts
@@ -4,6 +4,7 @@ import { writable } from 'svelte/store';
 import { browser } from '$app/env';
 import { get } from 'svelte/store';
 import { base } from '$app/paths';
+import { goto } from '$app/navigation';
 
 function createOrganizationList() {
     const { subscribe, set } = writable<Models.TeamList>(
@@ -98,17 +99,17 @@ if (browser) {
 export const redirectTo = async () => {
     let org = get(organization);
     if (org) {
-        return `${base}/console/organization-${org.$id}`;
+        await goto(`${base}/console/organization-${org.$id}`);
     } else {
         await organizationList.load();
         const orgList = get(organizationList);
         if (orgList?.total) {
             await organization.load(orgList.teams[0].$id);
             org = get(organization);
-            return `${base}/console/organization-${org.$id}`;
+            await goto(`${base}/console/organization-${org.$id}`);
         } else {
             newOrgModal.set(true);
-            return `${base}/console`;
+            await goto(`${base}/console`);
         }
     }
 };
diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index 9ca613699..19f720775 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -11,7 +11,7 @@
     } from '$lib/stores/organization';
     import Create from './_createOrganization.svelte';
     import { page } from '$app/stores';
-    import { afterNavigate, goto } from '$app/navigation';
+    import { afterNavigate } from '$app/navigation';
     import { onMount } from 'svelte';
 
     updateLayout({
@@ -21,15 +21,13 @@
 
     onMount(async () => {
         if ($page.url.pathname === '/console' && !$newOrgModal) {
-            const destination = await redirectTo();
-            await goto(destination);
+            await redirectTo();
         }
     });
 
     afterNavigate(async () => {
         if ($page.url.pathname === '/console' && !$newOrgModal) {
-            const destination = await redirectTo();
-            await goto(destination);
+            await redirectTo();
         }
     });
 </script>
diff --git a/src/routes/console/organization-[organization]/index.svelte b/src/routes/console/organization-[organization]/index.svelte
index e12bf63bd..6ad5c314f 100644
--- a/src/routes/console/organization-[organization]/index.svelte
+++ b/src/routes/console/organization-[organization]/index.svelte
@@ -74,7 +74,9 @@
     {#if projects?.length}
         <ul
             class="grid-box common-section u-margin-block-start-32"
-            style={`--grid-gap:2rem; --grid-item-size:${projects.length > 3 ? '22rem' : '25rem'};`}>
+            style={`--grid-gap:1.5rem; --grid-item-size:${
+                projects.length > 3 ? '22rem' : '25rem'
+            };`}>
             {#each projects as project, index}
                 {#if index >= offset && index < limit + offset}
                     <Bucket href={`${base}/console/project-${project.$id}`}>
@@ -123,7 +125,7 @@
         </div>
     {:else}
         <Empty dashed centered>
-            <div class="bucket ">
+            <div class="bucket">
                 <div class="u-flex u-flex-vertical u-cross-center ">
                     <div class="common-section">
                         <Button secondary round on:click={() => (showCreate = true)}>
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 640754dd9..11ff83303 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/index.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/index.svelte
@@ -3,7 +3,15 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Avatar, Search, DropList, DropListItem } from '$lib/components';
+    import {
+        Empty,
+        Pagination,
+        Avatar,
+        Search,
+        DropList,
+        DropListItem,
+        DropListLink
+    } from '$lib/components';
     import Create from './_create.svelte';
     import Delete from './_deleteFile.svelte';
     import {
@@ -24,7 +32,6 @@
     import type { Models } from '@aw-labs/appwrite-console';
     import { uploader } from '$lib/stores/uploader';
     import { addNotification } from '$lib/stores/notifications';
-    import { goto } from '$app/navigation';
     import { pageLimit } from '$lib/stores/layout';
 
     let search = '';
@@ -150,14 +157,9 @@
                                         <span class="icon-dots-horizontal" aria-hidden="true" />
                                     </button>
                                     <svelte:fragment slot="list">
-                                        <DropListItem
-                                            icon="pencil"
-                                            on:click={(e) => {
-                                                e.preventDefault();
-                                                goto(
-                                                    `${base}/console/project-${project}/storage/bucket/${bucket}/file/${file.$id}`
-                                                );
-                                            }}>Update</DropListItem>
+                                        <DropListLink
+                                            href={`${base}/console/project-${project}/storage/bucket/${bucket}/file/${file.$id}`}
+                                            icon="pencil">Update</DropListLink>
                                         <DropListItem
                                             icon="trash"
                                             on:click={(e) => {

From 1be34d9ae1180f7129c19ad370bfac85aae3611b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 31 Aug 2022 12:53:14 +0200
Subject: [PATCH 106/118] fix: missed refdirect

---
 src/routes/__layout.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 3e20f4d8c..71975c517 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -30,8 +30,7 @@
             }
 
             if (!$page.url.pathname.startsWith('/console')) {
-                const destination = await redirectTo();
-                await goto(destination);
+                await redirectTo();
             }
         } catch (error) {
             await goto(`${base}/login`);

From ac38b40d7b650db84627bef23a568d07bd534f3d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 1 Sep 2022 15:24:43 +0200
Subject: [PATCH 107/118] feat: sessions and activity page use avatars api +
 update activity pages

---
 .../teams/[team]/activity.svelte              |  34 ++--
 .../user/[user]/activity.svelte               |  34 ++--
 .../user/[user]/sessions.svelte               | 167 +++++++++---------
 3 files changed, 107 insertions(+), 128 deletions(-)

diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/activity.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/activity.svelte
index 7e2d74f89..da750c62a 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/activity.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/activity.svelte
@@ -8,24 +8,20 @@
         TableHeader,
         TableRow,
         TableCellHead,
+        TableCell,
         TableCellText
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
-    import { app } from '$lib/stores/app';
     import { pageLimit } from '$lib/stores/layout';
 
     let offset = 0;
 
     $: request = sdkForProject.teams.listLogs($page.params.team, $pageLimit, offset);
 
-    let browsers = {
-        firefox: 'firefox',
-        chrome: 'chrome',
-        safari: 'safari',
-        opera: 'opera',
-        edge: 'edge'
+    const getBrowser = (clientCode: string) => {
+        return sdkForProject.avatars.getBrowser(clientCode, 40, 40);
     };
 </script>
 
@@ -45,20 +41,14 @@
                 <TableBody>
                     {#each response.logs as log}
                         <TableRow>
-                            <TableCellText title="Client">
+                            <TableCell title="Client">
                                 <div class="u-flex u-cross-center u-gap-12">
                                     <div class="avatar is-small">
-                                        {#if browsers[log.clientName.toLocaleLowerCase()]}
-                                            <img
-                                                height="20"
-                                                width="20"
-                                                src={`/icons/${
-                                                    $app.themeInUse
-                                                }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
-                                                alt={log.clientName} />
-                                        {:else}
-                                            <span class="icon-globe-alt" />
-                                        {/if}
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(log.clientCode).toString()}
+                                            alt={log.clientName} />
                                     </div>
                                     <p class="text u-trim">
                                         {log.clientName}
@@ -67,7 +57,7 @@
                                         {log.osVersion}
                                     </p>
                                 </div>
-                            </TableCellText>
+                            </TableCell>
                             <TableCellText title="Event">{log.event}</TableCellText>
 
                             <TableCellText title="Location">
@@ -96,9 +86,7 @@
                 </div>
             </Empty>
         {/if}
-        <div
-            class="u-flex u-margin-block-start-32
- u-main-space-between">
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {response.total}</p>
             <Pagination limit={$pageLimit} bind:offset sum={response.total} />
         </div>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/activity.svelte b/src/routes/console/project-[project]/authentication/user/[user]/activity.svelte
index bc592f64f..36677272f 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/activity.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/activity.svelte
@@ -8,24 +8,20 @@
         TableHeader,
         TableRow,
         TableCellHead,
+        TableCell,
         TableCellText
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
-    import { app } from '$lib/stores/app';
 
     let offset = 0;
     const limit = 25;
 
     $: request = sdkForProject.users.getLogs($page.params.user, limit, offset);
 
-    let browsers = {
-        firefox: 'firefox',
-        chrome: 'chrome',
-        safari: 'safari',
-        opera: 'opera',
-        edge: 'edge'
+    const getBrowser = (clientCode: string) => {
+        return sdkForProject.avatars.getBrowser(clientCode, 40, 40);
     };
 </script>
 
@@ -45,20 +41,14 @@
                 <TableBody>
                     {#each response.logs as log}
                         <TableRow>
-                            <TableCellText title="Client">
+                            <TableCell title="Client">
                                 <div class="u-flex u-cross-center u-gap-12">
                                     <div class="avatar is-small">
-                                        {#if browsers[log.clientName.toLocaleLowerCase()]}
-                                            <img
-                                                height="20"
-                                                width="20"
-                                                src={`/icons/${
-                                                    $app.themeInUse
-                                                }/color/${log?.clientName.toLocaleLowerCase()}.svg`}
-                                                alt={log.clientName} />
-                                        {:else}
-                                            <span class="icon-globe-alt" />
-                                        {/if}
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(log.clientCode).toString()}
+                                            alt={log.clientName} />
                                     </div>
                                     <p class="text u-trim">
                                         {log.clientName}
@@ -67,7 +57,7 @@
                                         {log.osVersion}
                                     </p>
                                 </div>
-                            </TableCellText>
+                            </TableCell>
                             <TableCellText title="Event">{log.event}</TableCellText>
 
                             <TableCellText title="Location">
@@ -103,9 +93,7 @@
                 </div>
             </Empty>
         {/if}
-        <div
-            class="u-flex u-margin-block-start-32
- u-main-space-between">
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {response.total}</p>
             <Pagination {limit} bind:offset sum={response.total} />
         </div>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/sessions.svelte b/src/routes/console/project-[project]/authentication/user/[user]/sessions.svelte
index e5ef924bd..509ee9a82 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/sessions.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/sessions.svelte
@@ -7,106 +7,109 @@
         TableHeader,
         TableRow,
         TableCellHead,
+        TableCell,
         TableCellText
     } from '$lib/elements/table';
+    import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { sdkForProject } from '$lib/stores/sdk';
     import DeleteAllSessions from './_deleteAllSessions.svelte';
     import DeleteSessions from './_deleteSession.svelte';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { app } from '$lib/stores/app';
     import { pageLimit } from '$lib/stores/layout';
+    import { onMount } from 'svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     let offset = 0;
     let showDelete = false;
     let showDeleteAll = false;
     let selectedSessionId: string = null;
+    let sessionList: Models.SessionList = null;
+    onMount(async () => {
+        sessionList = await sdkForProject.users.getSessions($page.params.user);
+    });
 
-    const request = sdkForProject.users.getSessions($page.params.user);
-
-    //TODO: replace session.expire with "last activity"
+    const getBrowser = (clientCode: string) => {
+        return sdkForProject.avatars.getBrowser(clientCode, 40, 40);
+    };
 </script>
 
 <Container>
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        {#if response.total}
-            <div class="u-flex u-main-end  common-section">
-                <Button secondary on:click={() => (showDeleteAll = true)}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Delete All</span>
-                </Button>
-            </div>
-            <Table>
-                <TableHeader>
-                    <TableCellHead>Browser</TableCellHead>
-                    <TableCellHead>Device</TableCellHead>
-                    <TableCellHead>IP</TableCellHead>
-                    <TableCellHead width={30} />
-                </TableHeader>
-                <TableBody>
-                    {#each response.sessions as session}
-                        <TableRow>
-                            <TableCellText title="Client">
-                                <div class="u-flex u-cross-center u-gap-12">
-                                    <div class="image-item">
-                                        <img
-                                            height="20"
-                                            width="20"
-                                            src={`/icons/${
-                                                $app.themeInUse
-                                            }/color/${session?.clientName.toLocaleLowerCase()}.svg`}
-                                            alt={session.clientName} />
-                                    </div>
-                                    <span class="u-line-height-1-5">
-                                        <p>{session.clientName}</p>
-                                        <span class="u-small">
-                                            Last activity: {toLocaleDateTime(session?.expire)}
-                                        </span></span>
-                                </div>
-                            </TableCellText>
-
-                            <TableCellText title="IP">{session.ip}</TableCellText>
-                            <TableCellText title="">
-                                <button
-                                    class="button is-only-icon is-text"
-                                    aria-label="Delete item"
-                                    on:click={() => {
-                                        selectedSessionId = session.$id;
-                                        showDelete = true;
-                                    }}>
-                                    <span class="icon-trash" aria-hidden="true" />
-                                </button>
-                            </TableCellText>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-        {:else}
-            <Empty centered>
-                <div class="u-flex u-flex-vertical u-cross-center">
-                    <div class="common-section">
-                        <p>No session available</p>
-                    </div>
-                    <div class="common-section">
-                        <Button
-                            external
-                            secondary
-                            href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetSessions"
-                            >Documentation</Button>
-                    </div>
-                </div>
-            </Empty>
-        {/if}
-        <div
-            class="u-flex u-margin-block-start-32
- u-main-space-between">
-            <p class="text">Total results: {response.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={response.total} />
+    {#if sessionList?.total}
+        <div class="u-flex u-main-end  common-section">
+            <Button secondary on:click={() => (showDeleteAll = true)}>
+                <span class="text">Delete All</span>
+            </Button>
         </div>
-    {/await}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Browser and Device</TableCellHead>
+                <TableCellHead width={140}>Session</TableCellHead>
+                <TableCellHead width={140}>Location</TableCellHead>
+                <TableCellHead width={140}>IP</TableCellHead>
+                <TableCellHead width={30} />
+            </TableHeader>
+            <TableBody>
+                {#each sessionList.sessions as session}
+                    <TableRow>
+                        <TableCell title="Client">
+                            <div class="u-flex u-gap-12">
+                                <div class="image-item">
+                                    <img
+                                        height="20"
+                                        width="20"
+                                        src={getBrowser(session.clientCode).toString()}
+                                        alt={session.clientName} />
+                                </div>
+                                <p class="text">
+                                    {session.clientName}
+                                    {session.clientVersion} on {session.osName}
+                                    {session.osVersion}
+                                </p>
+                                {#if session.current}
+                                    <Pill success>current session</Pill>
+                                {/if}
+                            </div>
+                        </TableCell>
+
+                        <TableCellText title="Session">{session.clientType}</TableCellText>
+                        <TableCellText title="Location">{session.countryName}</TableCellText>
+                        <TableCellText title="IP">{session.ip}</TableCellText>
+                        <TableCellText title="">
+                            <button
+                                class="button is-only-icon is-text"
+                                aria-label="Delete item"
+                                on:click={() => {
+                                    selectedSessionId = session.$id;
+                                    showDelete = true;
+                                }}>
+                                <span class="icon-trash" aria-hidden="true" />
+                            </button>
+                        </TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty centered>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <p>No session available</p>
+                </div>
+                <div class="common-section">
+                    <Button
+                        external
+                        secondary
+                        href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetSessions"
+                        >Documentation</Button>
+                </div>
+            </div>
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {sessionList?.total}</p>
+        <Pagination limit={$pageLimit} bind:offset sum={sessionList?.total} />
+    </div>
 </Container>
 
 <DeleteSessions {selectedSessionId} bind:showDelete />

From 7aaa94d6028e7fd0400992bc170e37f8f36540d8 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 1 Sep 2022 17:23:27 +0200
Subject: [PATCH 108/118] feat: update style of login page

---
 src/lib/elements/forms/button.svelte      |   5 +-
 src/lib/images/login/login-dark-mode.svg  | 284 ++++++++++++++++++++++
 src/lib/images/login/login-light-mode.svg | 253 +++++++++++++++++++
 src/routes/login.svelte                   | 129 ++++++++--
 4 files changed, 646 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/images/login/login-dark-mode.svg
 create mode 100644 src/lib/images/login/login-light-mode.svg

diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index 1b17010d2..641720d78 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -7,6 +7,7 @@
     export let round = false;
     export let external = false;
     export let href: string = null;
+    export let fullWidth = false;
     //TODO: add option to add aria-label to buttons that are only icons
 </script>
 
@@ -20,7 +21,8 @@
         class:is-only-icon={round}
         class:is-secondary={secondary}
         class:is-text={text}
-        class:is-danger={danger}>
+        class:is-danger={danger}
+        class:is-full-width={fullWidth}>
         <slot />
     </a>
 {:else}
@@ -32,6 +34,7 @@
         class:is-secondary={secondary}
         class:is-danger={danger}
         class:is-text={text}
+        class:is-full-width={fullWidth}
         type={submit ? 'submit' : 'button'}>
         <slot />
     </button>
diff --git a/src/lib/images/login/login-dark-mode.svg b/src/lib/images/login/login-dark-mode.svg
new file mode 100644
index 000000000..999b6b52a
--- /dev/null
+++ b/src/lib/images/login/login-dark-mode.svg
@@ -0,0 +1,284 @@
+<svg width="600" height="400" viewBox="0 0 600 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_129_12217)">
+<path d="M10 173.533L153.942 258L306 171.379L162.912 77L10 173.533Z" fill="url(#paint0_linear_129_12217)"/>
+<path d="M218 243.774L362.531 325L420 292.164L278.471 201L218 243.774Z" fill="url(#paint1_linear_129_12217)"/>
+<path d="M153 257.818V138.165C153 134.18 155.145 130.498 158.623 128.512L302.704 46.2306C303.854 45.5738 305.289 46.3982 305.289 47.7157V170.646L390.326 221.35C392.527 222.663 392.565 225.818 390.395 227.182L253.165 313.469C252.078 314.152 250.698 314.178 249.586 313.536L153 257.818Z" fill="url(#paint2_linear_129_12217)"/>
+<path d="M250.687 307L158 253.842L304.754 170L388 219.268L380.276 224.886L352.384 243.47L250.687 307Z" fill="url(#paint3_linear_129_12217)"/>
+<path d="M234.034 288.505L186 259.6L310.973 188L353.332 213.152C355.549 214.469 355.558 217.646 353.347 218.974L237.602 288.506C236.505 289.165 235.13 289.164 234.034 288.505Z" fill="url(#paint4_linear_129_12217)"/>
+<path d="M158 255V139.683C158 136.258 159.832 133.1 162.793 131.421L302.453 52.2238C303.592 51.5777 305 52.4078 305 53.7259V170.554L158 255Z" fill="url(#paint5_linear_129_12217)"/>
+<path d="M173 213.589V150.081C173 148.241 173.997 146.543 175.61 145.636L279.437 87.2241C280.581 86.5803 282 87.4004 282 88.7056V155.341C282 156.561 281.343 157.687 280.278 158.294L178.144 216.542C175.855 217.847 173 216.208 173 213.589Z" fill="url(#paint6_linear_129_12217)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M335 185.747L183.431 274L183 273.253L334.569 185L335 185.747Z" fill="url(#paint7_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M344 192.747L191.434 281L191 280.253L343.566 192L344 192.747Z" fill="url(#paint8_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M352 197.738L200.431 285L200 284.262L351.569 197L352 197.738Z" fill="url(#paint9_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M359 203.747L209.426 292L209 291.253L358.574 203L359 203.747Z" fill="url(#paint10_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.594 279L202 252.763L202.406 252L251 278.237L250.594 279Z" fill="url(#paint11_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M263.588 271L215 245.74L215.412 245L264 270.26L263.588 271Z" fill="url(#paint12_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M339.594 228L291 201.763L291.406 201L340 227.237L339.594 228Z" fill="url(#paint13_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M352.596 220L305 193.769L305.404 193L353 219.231L352.596 220Z" fill="url(#paint14_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M266.6 258L229 237.746L229.4 237L267 257.254L266.6 258Z" fill="url(#paint15_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M279.59 250L241 230.711L241.41 230L280 249.289L279.59 250Z" fill="url(#paint16_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M290.6 244L253 222.782L253.4 222L291 243.218L290.6 244Z" fill="url(#paint17_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M303.568 237L263 215.782L263.432 215L304 236.218L303.568 237Z" fill="url(#paint18_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M315.6 230L278 208.782L278.4 208L316 229.218L315.6 230Z" fill="url(#paint19_radial_129_12217)" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M465.141 239.16V179H466V239.16C466 241.786 464.578 244.208 462.28 245.496L370.422 297L370 296.255L461.859 244.75C463.886 243.614 465.141 241.477 465.141 239.16Z" fill="url(#paint20_radial_129_12217)" fill-opacity="0.6"/>
+<path d="M187 263.552V260.534L236.798 288.552L357 217V220.448L236.798 292L187 263.552Z" fill="url(#paint21_linear_129_12217)"/>
+<path d="M361 217.238C361 216.001 361.668 214.86 362.749 214.252L422.877 180.447C425.167 179.159 428 180.81 428 183.432V284.922C428 287.369 426.692 289.631 424.567 290.856L366.155 324.535C363.865 325.856 361 324.207 361 321.568V217.238Z" fill="url(#paint22_linear_129_12217)"/>
+<path d="M364 220.038C363.989 218.787 364.662 217.629 365.758 217.012L420.407 186.227C421.565 185.575 423 186.405 423 187.725V282.259C423 283.479 422.351 284.607 421.292 285.227L367.442 316.758C366.291 317.433 364.836 316.616 364.825 315.29L364 220.038Z" fill="url(#paint23_linear_129_12217)"/>
+<path d="M373 253.14V225.174C373 224.549 373.338 223.973 373.883 223.671L412.733 202.108C413.302 201.792 414 202.206 414 202.86V229.713C414 230.325 413.676 230.891 413.15 231.198L374.283 253.883C373.714 254.215 373 253.802 373 253.14Z" fill="url(#paint24_linear_129_12217)"/>
+<path d="M373 268V263.339L414 240V244.349L373 268Z" fill="url(#paint25_linear_129_12217)"/>
+<path d="M373 275.168V272.547C373 272.254 373.167 271.982 373.439 271.832L405.649 254.117C406.246 253.789 407 254.188 407 254.832V257.163C407 257.455 406.836 257.725 406.567 257.875L374.356 275.88C373.76 276.213 373 275.814 373 275.168Z" fill="url(#paint26_linear_129_12217)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M350.379 64L431 106.214L430.621 107L350 64.7858L350.379 64Z" fill="url(#paint27_radial_129_12217)" fill-opacity="0.6"/>
+<path d="M438 82.4701C438 79.8793 440.758 78.2046 443.08 79.3855L477.101 96.6878C478.267 97.2806 479 98.4718 479 99.7725V191.53C479 194.128 476.227 195.802 473.905 194.607L439.884 177.091C438.726 176.496 438 175.309 438 174.015V82.4701Z" fill="url(#paint28_linear_129_12217)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M447.249 86.3945L439 82V168.114C439 169.373 439.674 170.533 440.761 171.146L469.904 187.557C472.19 188.844 475 187.172 475 184.525V103.272C475 101.984 474.295 100.802 473.168 100.202L467.554 97.2114L467.633 98.8586C467.665 99.5272 466.968 99.9788 466.381 99.67L447.843 89.9166C447.573 89.7742 447.397 89.4971 447.382 89.1888L447.249 86.3945Z" fill="url(#paint29_linear_129_12217)"/>
+<path d="M470 140.151V112.523C470 111.881 469.637 111.293 469.062 111.006L443.228 98.0907C442.664 97.8086 442 98.2187 442 98.8491V125.406C442 126.029 442.341 126.601 442.889 126.898L468.747 140.896C469.313 141.203 470 140.793 470 140.151Z" fill="url(#paint30_linear_129_12217)"/>
+<path d="M470 154V149.193L442 133V137.485L470 154Z" fill="url(#paint31_linear_129_12217)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M282.856 95V291.68C282.856 296.714 288.341 299.806 292.619 297.186L342.554 266.594L343 267.328L293.065 297.92C288.216 300.89 282 297.385 282 291.68V95H282.856Z" fill="url(#paint32_radial_129_12217)" fill-opacity="0.6"/>
+<path d="M183.58 201.297C185.281 197.918 183.58 189.262 188.318 182.586C189.31 181.187 194.053 190.383 193.895 187.113C193.737 183.844 197.334 174.219 200.342 172.5C201.688 171.731 202.061 175.939 202.491 175.939C202.491 175.939 204.234 158.747 208.078 158.747C208.508 158.747 208.508 163.474 208.938 163.475C209.368 163.475 211.517 154.449 214.525 154.449C214.955 154.449 218.199 161.765 219.683 162.615C222.049 156.701 225.38 162.814 226.356 163.449L226.56 163.475C232.577 157.811 236.445 169.062 236.445 169.062L183.58 201.297Z" fill="url(#paint33_linear_129_12217)"/>
+<mask id="mask0_129_12217" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="193" y="71" width="108" height="132">
+<path d="M193 199.536V135.051C193 133.183 193.988 131.46 195.586 130.538L298.46 71.2275C299.594 70.5739 301 71.4066 301 72.7318V140.393C301 141.631 300.349 142.774 299.294 143.391L198.097 202.535C195.829 203.86 193 202.196 193 199.536Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_129_12217)">
+<path d="M247.131 126.667L250.131 125V162.5L247.131 165V126.667Z" fill="url(#paint34_linear_129_12217)"/>
+<path d="M252.131 139.655L255.131 138V159.517L252.131 162V139.655Z" fill="url(#paint35_linear_129_12217)"/>
+<path d="M262.131 132.724L265.131 131V153.414L262.131 156V132.724Z" fill="url(#paint36_linear_129_12217)"/>
+<path d="M267.131 128.793L270.131 127V150.31L267.131 153V128.793Z" fill="url(#paint37_linear_129_12217)"/>
+<path d="M272.131 136.966L275.131 136V148.552L272.131 150V136.966Z" fill="url(#paint38_linear_129_12217)"/>
+<path d="M257 126.744L260 125V156.385L257 159V126.744Z" fill="url(#paint39_linear_129_12217)"/>
+</g>
+<path d="M181 152.019L212 135V139.981L181 157V152.019Z" fill="url(#paint40_linear_129_12217)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M122.675 167.304L11 98.7355L11.4477 98L123.123 166.569C127.824 169.455 127.765 176.334 123.014 179.138L59.7078 216.503C55.4736 219.002 55.4731 225.151 59.7069 227.651L307.585 374.008C309.56 375.174 312.002 375.198 314 374.071L439.269 303.399C441.548 302.113 444.337 302.15 446.581 303.495L638 418.26L637.56 419L446.142 304.236C444.161 303.048 441.7 303.016 439.69 304.15L314.42 374.823C312.156 376.1 309.388 376.072 307.15 374.751L59.2719 228.394C54.4737 225.561 54.4742 218.592 59.273 215.759L122.579 178.395C126.771 175.921 126.824 169.851 122.675 167.304Z" fill="url(#paint41_radial_129_12217)"/>
+<path d="M282 196.401L299 186V206.498L282 217V196.401Z" fill="url(#paint42_linear_129_12217)"/>
+<path d="M282 196.401L265 186V206.498L282 217V196.401Z" fill="url(#paint43_linear_129_12217)"/>
+<path d="M265 186L281.854 176L299 186L282 196.5L265 186Z" fill="url(#paint44_linear_129_12217)"/>
+<path d="M296.501 41.9936L317 29.8677V53.7664L296.501 66.01V41.9936Z" fill="url(#paint45_linear_129_12217)"/>
+<path d="M296.501 41.9936L276.003 29.8677V53.7664L296.501 66.01V41.9936Z" fill="url(#paint46_linear_129_12217)"/>
+<path d="M276 29.9017L296.322 18L316.997 29.9017L296.322 42.2747L276 29.9017Z" fill="url(#paint47_linear_129_12217)"/>
+<path d="M343.042 77.4135L351.085 72.6561V82.0323L343.042 86.8359V77.4135Z" fill="url(#paint48_linear_129_12217)"/>
+<path d="M343.042 77.4135L335 72.6561V82.0323L343.042 86.8359V77.4135Z" fill="url(#paint49_linear_129_12217)"/>
+<path d="M335 72.6695L342.974 68.0001L351.085 72.6695L342.974 77.5239L335 72.6695Z" fill="url(#paint50_linear_129_12217)"/>
+<path d="M407.741 32.6788L411.166 30.653V34.6457L407.741 36.6913V32.6788Z" fill="url(#paint51_linear_129_12217)"/>
+<path d="M407.741 32.6788L404.316 30.653V34.6457L407.741 36.6913V32.6788Z" fill="url(#paint52_linear_129_12217)"/>
+<path d="M404.316 30.6586L407.712 28.6702L411.166 30.6586L407.712 32.7258L404.316 30.6586Z" fill="url(#paint53_linear_129_12217)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_129_12217" x1="219.72" y1="247.226" x2="126.879" y2="179.065" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_129_12217" x1="433.724" y1="331.913" x2="347.918" y2="267.283" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_129_12217" x1="-344.968" y1="220.356" x2="699.378" y2="354.525" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3E435A"/>
+<stop offset="1" stop-color="#3C4158"/>
+</linearGradient>
+<linearGradient id="paint3_linear_129_12217" x1="383" y1="158" x2="52.5" y2="299.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B1B28"/>
+<stop offset="1" stop-color="#282A3B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_129_12217" x1="294.5" y1="238" x2="201" y2="327.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#373B4D"/>
+<stop offset="1" stop-color="#373B4D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_129_12217" x1="424.5" y1="65.5" x2="17.3698" y2="339.823" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B1B28"/>
+<stop offset="1" stop-color="#373B4D"/>
+</linearGradient>
+<linearGradient id="paint6_linear_129_12217" x1="170.425" y1="205.425" x2="383.489" y2="101.071" gradientUnits="userSpaceOnUse">
+<stop stop-color="#373B4D"/>
+<stop offset="1" stop-color="#2C3041"/>
+</linearGradient>
+<radialGradient id="paint7_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(259 229.5) rotate(90) scale(44.1266 75.7844)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint8_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(267.5 236.5) rotate(90) scale(44.1266 76.283)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint9_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(276 241) rotate(90) scale(43.6308 75.7844)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint10_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(284 247.5) rotate(90) scale(44.1266 74.7872)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint11_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(226.5 265.5) rotate(90) scale(13.1183 24.2972)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint12_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(239.5 258) rotate(90) scale(12.63 24.2939)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint13_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(315.5 214.5) rotate(90) scale(13.1183 24.2972)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint14_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(329 206.5) rotate(90) scale(13.1157 23.7981)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint15_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(248 247.5) rotate(90) scale(10.1268 18.8)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint16_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(260.5 240) rotate(90) scale(9.64456 19.2948)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint17_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(272 233) rotate(90) scale(10.609 18.8)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint18_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(283.5 226) rotate(90) scale(10.609 20.2842)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint19_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(297 219) rotate(90) scale(10.609 18.8)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint20_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(473.302 237.6) rotate(145.202) scale(50.2171 40.4795)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint21_linear_129_12217" x1="193.5" y1="347.5" x2="668.828" y2="138.887" gradientUnits="userSpaceOnUse">
+<stop stop-color="#282A3B"/>
+<stop offset="1" stop-color="#2E3453"/>
+</linearGradient>
+<linearGradient id="paint22_linear_129_12217" x1="412.538" y1="138.582" x2="397.582" y2="333.082" gradientUnits="userSpaceOnUse">
+<stop stop-color="#292D44"/>
+<stop offset="1" stop-color="#373B4D"/>
+</linearGradient>
+<linearGradient id="paint23_linear_129_12217" x1="412.585" y1="126.195" x2="421.125" y2="332.925" gradientUnits="userSpaceOnUse">
+<stop stop-color="#25283C"/>
+<stop offset="1" stop-color="#282A3B"/>
+</linearGradient>
+<linearGradient id="paint24_linear_129_12217" x1="373" y1="236.174" x2="431.929" y2="221.119" gradientUnits="userSpaceOnUse">
+<stop stop-color="#34384A"/>
+<stop offset="1" stop-color="#454B5D"/>
+</linearGradient>
+<linearGradient id="paint25_linear_129_12217" x1="373" y1="240" x2="435.332" y2="266.182" gradientUnits="userSpaceOnUse">
+<stop stop-color="#373B4D"/>
+<stop offset="1" stop-color="#333A56"/>
+</linearGradient>
+<linearGradient id="paint26_linear_129_12217" x1="365.395" y1="276.638" x2="438.324" y2="274.214" gradientUnits="userSpaceOnUse">
+<stop stop-color="#373B4D"/>
+<stop offset="1" stop-color="#373B4D"/>
+</linearGradient>
+<radialGradient id="paint27_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(395.354 82.4219) rotate(90) scale(24.1852 46.1891)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint28_linear_129_12217" x1="506.043" y1="-487.649" x2="460.435" y2="247.086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2D3147"/>
+<stop offset="1" stop-color="#34384B"/>
+</linearGradient>
+<linearGradient id="paint29_linear_129_12217" x1="391" y1="-559.887" x2="466.038" y2="267.468" gradientUnits="userSpaceOnUse">
+<stop stop-color="#282A3B"/>
+<stop offset="1" stop-color="#282A3B"/>
+</linearGradient>
+<linearGradient id="paint30_linear_129_12217" x1="484.424" y1="133.942" x2="432.5" y2="133.847" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F5769"/>
+<stop offset="1" stop-color="#373B4D"/>
+</linearGradient>
+<linearGradient id="paint31_linear_129_12217" x1="470" y1="125.125" x2="407.406" y2="150.451" gradientUnits="userSpaceOnUse">
+<stop stop-color="#373B4D"/>
+<stop offset="1" stop-color="#383F5E"/>
+</linearGradient>
+<radialGradient id="paint32_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(228.927 264.381) rotate(-41.8532) scale(239.041 92.135)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint33_linear_129_12217" x1="198.756" y1="161.95" x2="211.336" y2="187.777" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F5769"/>
+<stop offset="1" stop-color="#373B4D"/>
+</linearGradient>
+<linearGradient id="paint34_linear_129_12217" x1="248.631" y1="125" x2="248.631" y2="165" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A5163"/>
+<stop offset="1" stop-color="#3F4456"/>
+</linearGradient>
+<linearGradient id="paint35_linear_129_12217" x1="253.631" y1="138" x2="253.631" y2="162" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A5163"/>
+<stop offset="1" stop-color="#3F4456"/>
+</linearGradient>
+<linearGradient id="paint36_linear_129_12217" x1="263.631" y1="131" x2="263.631" y2="156" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A5163"/>
+<stop offset="1" stop-color="#3F4456"/>
+</linearGradient>
+<linearGradient id="paint37_linear_129_12217" x1="268.631" y1="127" x2="268.631" y2="153" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A5163"/>
+<stop offset="1" stop-color="#3F4456"/>
+</linearGradient>
+<linearGradient id="paint38_linear_129_12217" x1="273.631" y1="136" x2="273.631" y2="150" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A5163"/>
+<stop offset="1" stop-color="#3F4456"/>
+</linearGradient>
+<linearGradient id="paint39_linear_129_12217" x1="258.5" y1="125" x2="258.5" y2="159" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A5163"/>
+<stop offset="1" stop-color="#3F4456"/>
+</linearGradient>
+<linearGradient id="paint40_linear_129_12217" x1="163.347" y1="162.396" x2="216.261" y2="156.595" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint41_radial_129_12217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(201.766 312.594) rotate(29.046) scale(310.731 612.014)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint42_linear_129_12217" x1="339.926" y1="175.17" x2="289.175" y2="215.325" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0.53"/>
+</linearGradient>
+<linearGradient id="paint43_linear_129_12217" x1="251.463" y1="186.24" x2="270.436" y2="227.113" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0.16"/>
+</linearGradient>
+<linearGradient id="paint44_linear_129_12217" x1="267.519" y1="186.008" x2="308.759" y2="186.008" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0.49"/>
+</linearGradient>
+<linearGradient id="paint45_linear_129_12217" x1="366.349" y1="17.2409" x2="306.751" y2="66.01" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AC2D5A"/>
+<stop offset="1" stop-color="#97325D"/>
+</linearGradient>
+<linearGradient id="paint46_linear_129_12217" x1="259.68" y1="30.1474" x2="281.317" y2="78.3572" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#7C335B"/>
+</linearGradient>
+<linearGradient id="paint47_linear_129_12217" x1="279.037" y1="30.1473" x2="328.765" y2="30.1473" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DD2E62"/>
+<stop offset="1" stop-color="#B62D5C"/>
+</linearGradient>
+<linearGradient id="paint48_linear_129_12217" x1="370.446" y1="67.7021" x2="347.064" y2="86.8359" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A12D59"/>
+<stop offset="1" stop-color="#A1315E"/>
+</linearGradient>
+<linearGradient id="paint49_linear_129_12217" x1="328.596" y1="72.7658" x2="337.085" y2="91.6801" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B32E5C"/>
+<stop offset="1" stop-color="#79335A"/>
+</linearGradient>
+<linearGradient id="paint50_linear_129_12217" x1="336.192" y1="72.7659" x2="355.702" y2="72.7659" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#BE2D5D"/>
+</linearGradient>
+<linearGradient id="paint51_linear_129_12217" x1="419.411" y1="28.5434" x2="409.454" y2="36.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A3315E"/>
+<stop offset="1" stop-color="#96325D"/>
+</linearGradient>
+<linearGradient id="paint52_linear_129_12217" x1="401.589" y1="30.6997" x2="405.204" y2="38.7541" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9D2D58"/>
+<stop offset="1" stop-color="#6F3359"/>
+</linearGradient>
+<linearGradient id="paint53_linear_129_12217" x1="404.824" y1="30.6997" x2="413.132" y2="30.6997" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C42E5E"/>
+<stop offset="1" stop-color="#AF2D5B"/>
+</linearGradient>
+<clipPath id="clip0_129_12217">
+<rect width="600" height="400" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/lib/images/login/login-light-mode.svg b/src/lib/images/login/login-light-mode.svg
new file mode 100644
index 000000000..cc09c6267
--- /dev/null
+++ b/src/lib/images/login/login-light-mode.svg
@@ -0,0 +1,253 @@
+<svg width="598" height="382" viewBox="0 0 598 382" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 157.8L151.237 246L311 155.55L160.661 57.0001L0 157.8Z" fill="url(#paint0_linear_129_11322)"/>
+<path d="M207 221.153L357.8 305L420 274.673L270.095 177L207 221.153Z" fill="url(#paint1_linear_129_11322)"/>
+<path d="M150.677 245.975V121.27C150.677 116.618 153.163 112.32 157.196 110.001L306.264 24.2769C307.597 23.5101 309.261 24.4726 309.261 26.0107V154.565L397.247 207.394C399.799 208.927 399.843 212.611 397.328 214.203L255.191 304.199C253.931 304.996 252.331 305.027 251.042 304.278L150.677 245.975Z" fill="url(#paint2_linear_129_11322)"/>
+<path d="M252.352 296.964L155.343 241.722L308.941 154.594L396.07 205.793L387.986 211.632L358.793 230.944L252.352 296.964Z" fill="#FCFCFF"/>
+<path d="M235.904 277.736L185.883 247.32L316.576 171.66L360.296 197.892C362.877 199.441 362.887 203.179 360.313 204.741L240.058 277.738C238.782 278.513 237.18 278.512 235.904 277.736Z" fill="white"/>
+<path d="M155.343 242.171V122.619C155.343 118.644 157.487 114.979 160.951 113.031L306.859 30.9665C308.192 30.2166 309.839 31.1801 309.839 32.7097V154.145L155.343 242.171Z" fill="url(#paint3_linear_129_11322)"/>
+<path d="M160.456 231.842V121.821C160.456 120.38 161.23 119.051 162.484 118.341L297.772 41.677C299.105 40.9215 300.758 41.8846 300.758 43.417V150.552L160.456 231.842Z" fill="url(#paint4_linear_129_11322)"/>
+<path d="M171.511 199.329V133.399C171.511 131.238 172.673 129.245 174.552 128.179L282.6 66.9129C283.934 66.1569 285.587 67.12 285.587 68.6527V138.357C285.587 139.788 284.822 141.111 283.58 141.824L177.505 202.797C174.838 204.33 171.511 202.405 171.511 199.329Z" fill="url(#paint5_linear_129_11322)"/>
+<mask id="mask0_129_11322" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="171" y="163" width="211" height="125">
+<path d="M253.622 286.693L171.508 238.894L301.682 163.706L379.872 210.034C382.511 211.598 382.48 215.428 379.816 216.949L257.618 286.71C256.378 287.417 254.856 287.411 253.622 286.693Z" fill="#F9F9F9"/>
+</mask>
+<g mask="url(#mask0_129_11322)">
+<path d="M181.711 261.493L340.083 169.658" stroke="url(#paint6_radial_129_11322)"/>
+<path d="M190.642 268.721L349.013 176.886" stroke="url(#paint7_radial_129_11322)"/>
+<path d="M199.567 273.822L357.939 181.988" stroke="url(#paint8_radial_129_11322)"/>
+<path d="M208.073 280.625L366.445 188.791" stroke="url(#paint9_radial_129_11322)"/>
+<path d="M201.27 239.81L252.076 267.02" stroke="url(#paint10_radial_129_11322)"/>
+<path d="M216.574 232.157L266.743 259.154" stroke="url(#paint11_radial_129_11322)"/>
+<path d="M294.805 186.24L345.611 213.45" stroke="url(#paint12_radial_129_11322)"/>
+<path d="M310.11 178.587L360.279 205.584" stroke="url(#paint13_radial_129_11322)"/>
+<path d="M230.181 223.229L270.146 244.699" stroke="url(#paint14_radial_129_11322)"/>
+<path d="M242.511 216.001L282.476 237.471" stroke="url(#paint15_radial_129_11322)"/>
+<path d="M254.84 208.773L294.805 230.244" stroke="url(#paint16_radial_129_11322)"/>
+<path d="M266.746 201.545L306.711 223.016" stroke="url(#paint17_radial_129_11322)"/>
+<path d="M280.773 194.318L320.738 215.788" stroke="url(#paint18_radial_129_11322)"/>
+</g>
+<path d="M462 159V221.398C462 224.296 460.433 226.967 457.904 228.381L362 282" stroke="url(#paint19_radial_129_11322)" stroke-opacity="0.6"/>
+<path d="M186 250.414V247.276L238.141 276.414L364 202V205.586L238.141 280L186 250.414Z" fill="url(#paint20_linear_129_11322)"/>
+<path d="M356.547 199.657C356.547 196.769 358.103 194.105 360.619 192.688L414.681 162.215C420.014 159.209 426.609 163.063 426.609 169.184V267.568C426.609 270.425 425.086 273.065 422.613 274.495L368.55 305.744C363.217 308.827 356.547 304.978 356.547 298.818V199.657Z" fill="url(#paint21_linear_129_11322)"/>
+<path d="M361.936 202.379C361.936 200.935 362.715 199.603 363.974 198.894L414.359 170.526C417.025 169.025 420.321 170.951 420.321 174.011V264.986C420.321 266.415 419.559 267.735 418.321 268.45L367.936 297.541C365.269 299.081 361.936 297.157 361.936 294.077V202.379Z" fill="url(#paint22_linear_129_11322)"/>
+<path d="M370.021 234.596V205.632C370.021 204.904 370.416 204.233 371.054 203.881L411.652 181.462C412.319 181.094 413.136 181.576 413.136 182.337V210.144C413.136 210.857 412.756 211.515 412.14 211.873L371.523 235.461C370.856 235.848 370.021 235.367 370.021 234.596Z" fill="url(#paint23_linear_129_11322)"/>
+<path d="M370.021 249.806V244.872L413.136 220.165V224.769L370.021 249.806Z" fill="url(#paint24_linear_129_11322)"/>
+<path d="M370.021 257.918V255.322C370.021 254.969 370.207 254.642 370.511 254.462L402.644 235.431C403.31 235.036 404.153 235.516 404.153 236.291V238.575C404.153 238.926 403.97 239.251 403.669 239.432L371.536 258.775C370.87 259.176 370.021 258.696 370.021 257.918Z" fill="url(#paint25_linear_129_11322)"/>
+<path d="M435 91L349 48" stroke="url(#paint26_radial_129_11322)" stroke-opacity="0.6"/>
+<path d="M435.594 61.432C435.594 58.4417 438.755 56.5087 441.417 57.8717L475.634 75.3931C476.97 76.0774 477.811 77.4522 477.811 78.9535V173.165C477.811 176.164 474.632 178.097 471.97 176.717L437.753 158.979C436.426 158.292 435.594 156.922 435.594 155.428V61.432Z" fill="url(#paint27_linear_129_11322)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M445.135 64.8297L436.49 60.2792V149.213C436.49 150.665 437.277 152.003 438.545 152.709L468.271 169.25C470.937 170.734 474.216 168.806 474.216 165.755V82.5532C474.216 81.0682 473.393 79.7054 472.079 79.0137L466.413 76.031L466.487 77.5599C466.524 78.3307 465.711 78.8513 465.027 78.4954L445.809 68.5041C445.493 68.3399 445.289 68.0204 445.271 67.665L445.135 64.8297Z" fill="url(#paint28_linear_129_11322)"/>
+<path d="M469.727 119.68V90.7135C469.727 89.9561 469.299 89.2636 468.621 88.9248L441.532 75.3749C440.867 75.0423 440.085 75.5258 440.085 76.2693V104.112C440.085 104.846 440.487 105.521 441.132 105.871L468.25 120.559C468.917 120.92 469.727 120.438 469.727 119.68Z" fill="url(#paint29_linear_129_11322)"/>
+<path d="M469.727 134.833V129.898L440.085 113.275V117.879L469.727 134.833Z" fill="url(#paint30_linear_129_11322)"/>
+<path d="M358 262.247L307.192 293.501C301.861 296.779 295 292.945 295 286.687V82.0001" stroke="url(#paint31_radial_129_11322)" stroke-opacity="0.6"/>
+<path d="M179.149 190.523C180.927 186.993 179.149 177.948 184.1 170.971C185.137 169.51 190.094 179.119 189.928 175.702C189.763 172.286 193.521 162.229 196.665 160.432C198.071 159.629 198.461 164.025 198.911 164.025C198.911 164.025 200.732 146.06 204.749 146.06C205.198 146.06 205.198 151.001 205.647 151.001C206.096 151.001 208.342 141.569 211.486 141.569C211.935 141.569 215.324 149.214 216.875 150.102C219.347 143.922 222.828 150.31 223.848 150.974L224.061 151.001C230.349 145.083 234.391 156.839 234.391 156.839L179.149 190.523Z" fill="#D2EFF7"/>
+<mask id="mask1_129_11322" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="201" y="36" width="115" height="138">
+<path d="M201.152 169.238V103.308C201.152 101.148 202.314 99.1541 204.193 98.0886L312.241 36.8221C313.575 36.0661 315.228 37.0292 315.228 38.5619V108.266C315.228 109.698 314.463 111.02 313.221 111.734L207.146 172.706C204.479 174.239 201.152 172.314 201.152 169.238Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_129_11322)">
+<path d="M245.166 112.377L248.759 110.58V151.001L245.166 153.695V112.377Z" fill="#D2EFF7"/>
+<path d="M250.555 125.85L254.148 124.054V147.408L250.555 150.103V125.85Z" fill="#D2EFF7"/>
+<path d="M261.334 118.664L264.927 116.868V140.222L261.334 142.917V118.664Z" fill="#D2EFF7"/>
+<path d="M266.723 115.071L270.316 113.275V136.629L266.723 139.324V115.071Z" fill="#D2EFF7"/>
+<path d="M272.113 123.248L275.706 122.257V135.142L272.113 136.629V123.248Z" fill="#D2EFF7"/>
+<path d="M255.944 113.275L259.537 111.479V143.815L255.944 146.51V113.275Z" fill="#D2EFF7"/>
+</g>
+<path d="M180 135.566L213 117V122.434L180 141V135.566Z" fill="url(#paint32_linear_129_11322)"/>
+<path d="M10 80.0001L119.757 147.082C124.913 150.233 124.848 157.744 119.637 160.805L59.8377 195.938C54.5747 199.03 54.5741 206.64 59.8365 209.733L304.839 353.727C307.292 355.17 310.328 355.2 312.809 353.806L436.612 284.282C439.11 282.879 442.168 282.919 444.629 284.387L635 398" stroke="url(#paint33_radial_129_11322)"/>
+<path d="M294.501 23.9936L315 11.8677V35.7664L294.501 48.01V23.9936Z" fill="url(#paint34_linear_129_11322)"/>
+<path d="M294.501 23.9936L274.003 11.8677V35.7664L294.501 48.01V23.9936Z" fill="url(#paint35_linear_129_11322)"/>
+<path d="M274 11.9017L294.322 0L314.997 11.9017L294.322 24.2747L274 11.9017Z" fill="url(#paint36_linear_129_11322)"/>
+<path d="M341.042 59.4135L349.085 54.6561V64.0323L341.042 68.8359V59.4135Z" fill="url(#paint37_linear_129_11322)"/>
+<path d="M341.042 59.4135L333 54.6561V64.0323L341.042 68.8359V59.4135Z" fill="url(#paint38_linear_129_11322)"/>
+<path d="M333 54.6695L340.974 50L349.085 54.6695L340.974 59.5238L333 54.6695Z" fill="url(#paint39_linear_129_11322)"/>
+<path d="M405.741 14.6788L409.166 12.6529V16.6457L405.741 18.6913V14.6788Z" fill="url(#paint40_linear_129_11322)"/>
+<path d="M405.741 14.6788L402.316 12.6529V16.6457L405.741 18.6913V14.6788Z" fill="url(#paint41_linear_129_11322)"/>
+<path d="M402.316 12.6586L405.712 10.6702L409.166 12.6586L405.712 14.7258L402.316 12.6586Z" fill="url(#paint42_linear_129_11322)"/>
+<path d="M294.442 177.447L311.989 167.067V187.524L294.442 198.005V177.447Z" fill="url(#paint43_linear_129_11322)"/>
+<path d="M294.442 177.447L276.895 167.067V187.524L294.442 198.005V177.447Z" fill="url(#paint44_linear_129_11322)"/>
+<path d="M276.895 167.096L294.291 156.908L311.988 167.096L294.291 177.687L276.895 167.096Z" fill="url(#paint45_linear_129_11322)"/>
+<defs>
+<linearGradient id="paint0_linear_129_11322" x1="225.733" y1="253.2" x2="123.169" y2="163.028" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_129_11322" x1="432.082" y1="312.136" x2="343.25" y2="244.506" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_129_11322" x1="-1458.33" y1="-430.156" x2="719.884" y2="345.468" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A3A8BD"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_129_11322" x1="-1454.58" y1="-433.23" x2="718.1" y2="364.537" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+<linearGradient id="paint4_linear_129_11322" x1="-604.56" y1="227.351" x2="369.421" y2="145.85" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A3A8BD"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_129_11322" x1="168.817" y1="191.421" x2="392.477" y2="82.735" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint6_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(260.897 215.576) rotate(90) scale(45.9172 79.1859)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(269.828 222.803) rotate(90) scale(45.9172 79.1859)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint8_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(278.753 227.905) rotate(90) scale(45.9172 79.1859)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint9_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(287.259 234.708) rotate(90) scale(45.9172 79.1859)">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint10_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(226.673 253.415) rotate(90) scale(13.6051 25.4033)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint11_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(241.659 245.656) rotate(90) scale(13.4988 25.0844)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint12_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(320.208 199.845) rotate(90) scale(13.6051 25.4033)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint13_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(335.194 192.086) rotate(90) scale(13.4988 25.0844)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint14_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(250.164 233.964) rotate(90) scale(10.7353 19.9825)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint15_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(262.493 226.736) rotate(90) scale(10.7353 19.9825)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint16_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(274.823 219.508) rotate(90) scale(10.7353 19.9825)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint17_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(286.728 212.281) rotate(90) scale(10.7353 19.9825)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint18_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(300.756 205.053) rotate(90) scale(10.7353 19.9825)">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F7F7F7" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint19_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(470.108 220.276) rotate(145.278) scale(52.6119 42.3677)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint20_linear_129_11322" x1="221.061" y1="320.345" x2="326.012" y2="233.996" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+<linearGradient id="paint21_linear_129_11322" x1="376.757" y1="-252.755" x2="394.722" y2="318.521" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F3F3"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint22_linear_129_11322" x1="411.339" y1="102.496" x2="413.569" y2="465.382" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+<linearGradient id="paint23_linear_129_11322" x1="354.751" y1="228.249" x2="444.124" y2="227.985" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint24_linear_129_11322" x1="370.021" y1="220.165" x2="435.698" y2="247.569" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint25_linear_129_11322" x1="362.386" y1="259.687" x2="435.611" y2="257.427" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint26_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(397.178 66.3646) rotate(90) scale(24.6354 49.2708)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint27_linear_129_11322" x1="505.656" y1="-530.309" x2="458.05" y2="231.393" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+<linearGradient id="paint28_linear_129_11322" x1="455.353" y1="32.9542" x2="462.949" y2="252.004" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+<linearGradient id="paint29_linear_129_11322" x1="484.997" y1="113.275" x2="395.623" y2="113.011" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint30_linear_129_11322" x1="469.727" y1="105.191" x2="404.049" y2="132.595" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint31_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(239.149 259.543) rotate(-41.9691) scale(249.995 96.3993)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint32_linear_129_11322" x1="86.5" y1="146.434" x2="217.578" y2="140.867" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<radialGradient id="paint33_radial_129_11322" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(200.068 292.713) rotate(28.9342) scale(309.625 608.349)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint34_linear_129_11322" x1="364.349" y1="-0.759149" x2="304.751" y2="48.01" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint35_linear_129_11322" x1="257.68" y1="12.1474" x2="279.317" y2="60.3572" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint36_linear_129_11322" x1="277.037" y1="12.1473" x2="326.765" y2="12.1473" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint37_linear_129_11322" x1="368.446" y1="49.7021" x2="345.064" y2="68.8359" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint38_linear_129_11322" x1="326.596" y1="54.7658" x2="335.085" y2="73.6801" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint39_linear_129_11322" x1="334.192" y1="54.7659" x2="353.702" y2="54.7659" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint40_linear_129_11322" x1="417.411" y1="10.5434" x2="407.454" y2="18.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint41_linear_129_11322" x1="399.589" y1="12.6997" x2="403.204" y2="20.7541" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint42_linear_129_11322" x1="402.824" y1="12.6997" x2="411.132" y2="12.6997" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint43_linear_129_11322" x1="354.231" y1="156.258" x2="303.215" y2="198.005" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint44_linear_129_11322" x1="262.922" y1="167.306" x2="281.444" y2="208.574" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint45_linear_129_11322" x1="279.494" y1="167.306" x2="322.062" y2="167.306" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index 9d4fb293f..a3691f57d 100644
--- a/src/routes/login.svelte
+++ b/src/routes/login.svelte
@@ -12,6 +12,9 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
+    import AppwriteLogo from '$lib/images/appwrite.svg';
+    import LoginLight from '$lib/images/login/login-light-mode.svg';
+    import LoginDark from '$lib/images/login/login-dark-mode.svg';
 
     let mail: string, pass: string;
 
@@ -31,34 +34,112 @@
             });
         }
     };
+
+    const technologies = [
+        'js',
+        'flutter',
+        'apple',
+        'android',
+        'node_js',
+        'php',
+        'python',
+        'ruby',
+        'dart',
+        'kotlin',
+        'swift'
+    ];
 </script>
 
 <svelte:head>
-    <title>Login</title>
+    <title>Appwrite - Sign in</title>
 </svelte:head>
 
-<h1>Login</h1>
+<main class="grid-1-1 is-full-page" id="main">
+    <section class="grid-1-1-col-1 u-flex u-flex-vertical">
+        <div
+            class="container u-margin-block-start-40"
+            style="--p-container-max-size: var(--container-size-medium);">
+            <a href="/">
+                <img src={AppwriteLogo} width="196" height="47" class="u-block" alt="Appwrite" />
+            </a>
+        </div>
 
-<Form on:submit={login}>
-    <FormList>
-        <InputEmail
-            id="email"
-            label="Email"
-            placeholder="Enter email"
-            autofocus={true}
-            required={true}
-            bind:value={mail} />
-        <InputPassword
-            id="password"
-            label="Password"
-            placeholder="Enter password"
-            required={true}
-            meter={false}
-            bind:value={pass} />
-        <FormItem>
-            <Button submit>Login</Button>
-        </FormItem>
-    </FormList>
-</Form>
+        <div class="u-margin-block-start-auto" />
 
-<a href={`${base}/register`}>Create an Account</a>
+        <div
+            class="container u-margin-block-start-20"
+            style="--p-container-max-size: var(--container-size-large);">
+            <img src={LoginLight} alt="" class="u-only-light" />
+            <img src={LoginDark} alt="" class="u-only-dark" />
+        </div>
+
+        <div class="u-margin-block-start-auto" />
+
+        <div
+            class="container u-text-color-light-gray"
+            style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
+            <p>Integrate with your favourite technologies</p>
+            <ul
+                class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1">
+                {#each technologies as tech}
+                    <li>
+                        <span
+                            class={`icon-${tech} u-font-size-32`}
+                            aria-hidden="true"
+                            aria-label={tech} />
+                    </li>
+                {/each}
+            </ul>
+        </div>
+        <div class="u-margin-block-start-40" />
+    </section>
+    <section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
+        <div class="container u-flex u-flex-vertical u-cross-center">
+            <div class="u-margin-block-start-auto" />
+
+            <div class="u-max-width-500 u-width-full-line">
+                <h1 class="heading-level-3 u-margin-block-start-auto">Sign In</h1>
+                <div class="u-margin-block-start-40">
+                    <Form on:submit={login}>
+                        <FormList>
+                            <InputEmail
+                                id="email"
+                                label="Email"
+                                placeholder="Email"
+                                showLabel={false}
+                                autofocus={true}
+                                required={true}
+                                bind:value={mail} />
+                            <InputPassword
+                                id="password"
+                                label="Password"
+                                placeholder="Password"
+                                showLabel={false}
+                                required={true}
+                                meter={false}
+                                bind:value={pass} />
+                            <FormItem>
+                                <Button fullWidth submit>Sign in</Button>
+                            </FormItem>
+                        </FormList>
+                    </Form>
+                </div>
+
+                <ul class="inline-links is-center is-with-sep u-margin-block-start-32">
+                    <li class="inline-links-item">
+                        <a href="#/"><span class="text">Forgot Password?</span></a>
+                    </li>
+                    <li class="inline-links-item">
+                        <a href={`${base}/register`}><span class="text">Sign Up</span></a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="u-margin-block-start-auto" />
+            <p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
+                version 0.15.2.402
+            </p>
+            <div class="u-margin-block-start-40" />
+        </div>
+    </section>
+</main>

From 98b827197ed17a374d995098e7d3626668123c6c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 2 Sep 2022 09:38:34 +0200
Subject: [PATCH 109/118] test: fix e2e

---
 tests/e2e/login.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/login.spec.ts b/tests/e2e/login.spec.ts
index 89252aaba..be178d202 100644
--- a/tests/e2e/login.spec.ts
+++ b/tests/e2e/login.spec.ts
@@ -15,7 +15,7 @@ test('login page has inputs and button', async ({ page }) => {
     await page.goto('/login');
     const mail = page.locator('id=email');
     const pass = page.locator('id=password');
-    const button = page.locator('button:has-text("Login")');
+    const button = page.locator('button:has-text("Sign in")');
     expect(await mail.isVisible());
     expect(await pass.isVisible());
     expect(await button.isVisible());
@@ -45,7 +45,7 @@ test('login page shows error & response is 401 with wrong inputs', async ({ page
     await page.goto('/login');
     await page.fill('id=email', 'wrongemail@apppwrite.io');
     await page.fill('id=password', 'wrongpassword');
-    await page.click('button:has-text("Login")');
+    await page.click('button:has-text("Sign in")');
     page.on('response', (response) => {
         expect(response.status()).toBe(401);
     });

From 7d73b912be6fc947ad0e383d0678bfe80bde33db Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 2 Sep 2022 12:21:58 +0200
Subject: [PATCH 110/118] feat: refactor code, update register, create recover

---
 src/lib/layout/index.ts               |   1 +
 src/lib/layout/unauthenticated.svelte |  82 +++++++++++++++
 src/routes/login.svelte               | 143 +++++++-------------------
 src/routes/recover.svelte             |  57 ++++++++++
 src/routes/register.svelte            |  61 +++++++----
 5 files changed, 217 insertions(+), 127 deletions(-)
 create mode 100644 src/lib/layout/unauthenticated.svelte
 create mode 100644 src/routes/recover.svelte

diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index 952f4817c..b0663de89 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -7,3 +7,4 @@ export { default as Notification } from './notification.svelte';
 export { default as Notifications } from './notifications.svelte';
 export { default as Shell } from './shell.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
+export { default as Unauthenticated } from './unauthenticated.svelte';
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
new file mode 100644
index 000000000..45088962e
--- /dev/null
+++ b/src/lib/layout/unauthenticated.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    import AppwriteLogo from '$lib/images/appwrite.svg';
+    import LoginLight from '$lib/images/login/login-light-mode.svg';
+    import LoginDark from '$lib/images/login/login-dark-mode.svg';
+
+    const technologies = [
+        'js',
+        'flutter',
+        'apple',
+        'android',
+        'node_js',
+        'php',
+        'python',
+        'ruby',
+        'dart',
+        'kotlin',
+        'swift'
+    ];
+</script>
+
+<main class="grid-1-1 is-full-page" id="main">
+    <section class="grid-1-1-col-1 u-flex u-flex-vertical">
+        <div
+            class="container u-margin-block-start-40"
+            style="--p-container-max-size: var(--container-size-medium);">
+            <a href="/">
+                <img src={AppwriteLogo} width="196" height="47" class="u-block" alt="Appwrite" />
+            </a>
+        </div>
+
+        <div class="u-margin-block-start-auto" />
+
+        <div
+            class="container u-margin-block-start-20"
+            style="--p-container-max-size: var(--container-size-large);">
+            <img src={LoginLight} alt="" class="u-only-light" />
+            <img src={LoginDark} alt="" class="u-only-dark" />
+        </div>
+
+        <div class="u-margin-block-start-auto" />
+
+        <div
+            class="container u-text-color-light-gray is-only-desktop"
+            style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
+            <p>Integrate with your favourite technologies</p>
+            <ul
+                class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1 ">
+                {#each technologies as tech}
+                    <li>
+                        <span
+                            class={`icon-${tech} u-font-size-32`}
+                            aria-hidden="true"
+                            aria-label={tech} />
+                    </li>
+                {/each}
+            </ul>
+        </div>
+        <div class="u-margin-block-start-40" />
+    </section>
+    <section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
+        <div class="container u-flex u-flex-vertical u-cross-center">
+            <div class="u-margin-block-start-auto" />
+
+            <div class="u-max-width-500 u-width-full-line">
+                <h1 class="heading-level-3 u-margin-block-start-auto"><slot name="title" /></h1>
+                <div class="u-margin-block-start-40">
+                    <slot />
+                </div>
+
+                <ul class="inline-links is-center is-with-sep u-margin-block-start-32">
+                    <slot name="links" />
+                </ul>
+            </div>
+
+            <div class="u-margin-block-start-auto" />
+            <p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
+                version 0.15.2.402
+            </p>
+            <div class="u-margin-block-start-40" />
+        </div>
+    </section>
+</main>
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index a3691f57d..1efd8040d 100644
--- a/src/routes/login.svelte
+++ b/src/routes/login.svelte
@@ -12,9 +12,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
-    import AppwriteLogo from '$lib/images/appwrite.svg';
-    import LoginLight from '$lib/images/login/login-light-mode.svg';
-    import LoginDark from '$lib/images/login/login-dark-mode.svg';
+    import { Unauthenticated } from '$lib/layout';
 
     let mail: string, pass: string;
 
@@ -34,112 +32,45 @@
             });
         }
     };
-
-    const technologies = [
-        'js',
-        'flutter',
-        'apple',
-        'android',
-        'node_js',
-        'php',
-        'python',
-        'ruby',
-        'dart',
-        'kotlin',
-        'swift'
-    ];
 </script>
 
 <svelte:head>
     <title>Appwrite - Sign in</title>
 </svelte:head>
 
-<main class="grid-1-1 is-full-page" id="main">
-    <section class="grid-1-1-col-1 u-flex u-flex-vertical">
-        <div
-            class="container u-margin-block-start-40"
-            style="--p-container-max-size: var(--container-size-medium);">
-            <a href="/">
-                <img src={AppwriteLogo} width="196" height="47" class="u-block" alt="Appwrite" />
-            </a>
-        </div>
-
-        <div class="u-margin-block-start-auto" />
-
-        <div
-            class="container u-margin-block-start-20"
-            style="--p-container-max-size: var(--container-size-large);">
-            <img src={LoginLight} alt="" class="u-only-light" />
-            <img src={LoginDark} alt="" class="u-only-dark" />
-        </div>
-
-        <div class="u-margin-block-start-auto" />
-
-        <div
-            class="container u-text-color-light-gray"
-            style="--p-container-max-size:var(--container-size-small); --p-container-padding-inline:1rem;">
-            <p>Integrate with your favourite technologies</p>
-            <ul
-                class="u-flex u-main-center u-flex-wrap u-gap-16 u-margin-block-start-32 u-line-height-1">
-                {#each technologies as tech}
-                    <li>
-                        <span
-                            class={`icon-${tech} u-font-size-32`}
-                            aria-hidden="true"
-                            aria-label={tech} />
-                    </li>
-                {/each}
-            </ul>
-        </div>
-        <div class="u-margin-block-start-40" />
-    </section>
-    <section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
-        <div class="container u-flex u-flex-vertical u-cross-center">
-            <div class="u-margin-block-start-auto" />
-
-            <div class="u-max-width-500 u-width-full-line">
-                <h1 class="heading-level-3 u-margin-block-start-auto">Sign In</h1>
-                <div class="u-margin-block-start-40">
-                    <Form on:submit={login}>
-                        <FormList>
-                            <InputEmail
-                                id="email"
-                                label="Email"
-                                placeholder="Email"
-                                showLabel={false}
-                                autofocus={true}
-                                required={true}
-                                bind:value={mail} />
-                            <InputPassword
-                                id="password"
-                                label="Password"
-                                placeholder="Password"
-                                showLabel={false}
-                                required={true}
-                                meter={false}
-                                bind:value={pass} />
-                            <FormItem>
-                                <Button fullWidth submit>Sign in</Button>
-                            </FormItem>
-                        </FormList>
-                    </Form>
-                </div>
-
-                <ul class="inline-links is-center is-with-sep u-margin-block-start-32">
-                    <li class="inline-links-item">
-                        <a href="#/"><span class="text">Forgot Password?</span></a>
-                    </li>
-                    <li class="inline-links-item">
-                        <a href={`${base}/register`}><span class="text">Sign Up</span></a>
-                    </li>
-                </ul>
-            </div>
-
-            <div class="u-margin-block-start-auto" />
-            <p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
-                version 0.15.2.402
-            </p>
-            <div class="u-margin-block-start-40" />
-        </div>
-    </section>
-</main>
+<Unauthenticated>
+    <svelte:fragment slot="title">Sign in</svelte:fragment>
+    <svelte:fragment>
+        <Form on:submit={login}>
+            <FormList>
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Email"
+                    showLabel={false}
+                    autofocus={true}
+                    required={true}
+                    bind:value={mail} />
+                <InputPassword
+                    id="password"
+                    label="Password"
+                    placeholder="Password"
+                    showLabel={false}
+                    required={true}
+                    meter={false}
+                    showPasswordButton={true}
+                    bind:value={pass} />
+                <FormItem>
+                    <Button fullWidth submit>Sign in</Button>
+                </FormItem>
+            </FormList>
+        </Form></svelte:fragment>
+    <svelte:fragment slot="links">
+        <li class="inline-links-item">
+            <a href={`${base}/recover`}><span class="text">Forgot Password?</span></a>
+        </li>
+        <li class="inline-links-item">
+            <a href={`${base}/register`}><span class="text">Sign Up</span></a>
+        </li>
+    </svelte:fragment>
+</Unauthenticated>
diff --git a/src/routes/recover.svelte b/src/routes/recover.svelte
new file mode 100644
index 000000000..f638f29d1
--- /dev/null
+++ b/src/routes/recover.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { Button, Form, FormItem, FormList, InputEmail } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { user } from '$lib/stores/user';
+    import { Unauthenticated } from '$lib/layout';
+
+    let mail: string;
+    const recover = async () => {
+        try {
+            await sdkForConsole.account.createRecovery(mail, `${base}`);
+            user.fetchUser();
+            addNotification({
+                type: 'success',
+                message: 'We have sent you an email with a password reset link'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<svelte:head>
+    <title>Appwrite - Recover</title>
+</svelte:head>
+
+<Unauthenticated>
+    <svelte:fragment slot="title">Password Recovery</svelte:fragment>
+    <svelte:fragment>
+        <Form on:submit={recover}>
+            <FormList>
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Email"
+                    autofocus={true}
+                    required={true}
+                    bind:value={mail} />
+
+                <FormItem>
+                    <Button fullWidth submit>Recover</Button>
+                </FormItem>
+            </FormList>
+        </Form></svelte:fragment>
+    <svelte:fragment slot="links">
+        <li class="inline-links-item">
+            <a href={`${base}/login`}><span class="text">Sign in</span></a>
+        </li>
+        <li class="inline-links-item">
+            <a href={`${base}/register`}><span class="text">Sign Up</span></a>
+        </li>
+    </svelte:fragment>
+</Unauthenticated>
diff --git a/src/routes/register.svelte b/src/routes/register.svelte
index 14a9281cd..af0b7498e 100644
--- a/src/routes/register.svelte
+++ b/src/routes/register.svelte
@@ -11,6 +11,8 @@
     } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
+    import { Unauthenticated } from '$lib/layout';
+    import FormList from '$lib/elements/forms/formList.svelte';
 
     let name: string, mail: string, pass: string;
 
@@ -29,27 +31,44 @@
 </script>
 
 <svelte:head>
-    <title>Register</title>
+    <title>Appwrite - Sign up</title>
 </svelte:head>
 
-<h1>Register</h1>
+<Unauthenticated>
+    <svelte:fragment slot="title">Sign up</svelte:fragment>
+    <svelte:fragment>
+        <Form on:submit={register}>
+            <FormList>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Your name"
+                    autofocus={true}
+                    bind:value={name} />
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Your email"
+                    required={true}
+                    bind:value={mail} />
+                <InputPassword
+                    id="password"
+                    label="Password"
+                    placeholder="Your password"
+                    required={true}
+                    showPasswordButton={true}
+                    bind:value={pass} />
 
-<Form on:submit={register}>
-    <InputText id="name" label="Name" placeholder="John Doe" autofocus={true} bind:value={name} />
-    <InputEmail
-        id="email"
-        label="Email"
-        placeholder="test@example.com"
-        required={true}
-        bind:value={mail} />
-    <InputPassword
-        id="password"
-        label="Password"
-        placeholder="********"
-        required={true}
-        bind:value={pass} />
-
-    <FormItem><Button submit>Register</Button></FormItem>
-</Form>
-
-<a href={`${base}/login`}>Login</a>
+                <FormItem>
+                    <Button fullWidth submit>Sign up</Button></FormItem>
+            </FormList>
+        </Form>
+    </svelte:fragment>
+    <svelte:fragment slot="links">
+        <li class="inline-links-item">
+            <span class="text">
+                Already got an account? <a class="link" href={`${base}/login`}>Sign in</a>
+            </span>
+        </li>
+    </svelte:fragment>
+</Unauthenticated>

From 982f43bfe1e0948bebc2fc29eb95d8de55c80f9b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 5 Sep 2022 11:31:15 +0200
Subject: [PATCH 111/118] feat: images shown logic handled by svelte

---
 src/lib/layout/unauthenticated.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 45088962e..30d8a086c 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -2,6 +2,8 @@
     import AppwriteLogo from '$lib/images/appwrite.svg';
     import LoginLight from '$lib/images/login/login-light-mode.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.svg';
+    3;
+    import { app } from '$lib/stores/app';
 
     const technologies = [
         'js',
@@ -33,8 +35,11 @@
         <div
             class="container u-margin-block-start-20"
             style="--p-container-max-size: var(--container-size-large);">
-            <img src={LoginLight} alt="" class="u-only-light" />
-            <img src={LoginDark} alt="" class="u-only-dark" />
+            {#if $app.themeInUse === 'dark'}
+                <img src={LoginDark} alt="" class="u-only-dark" />
+            {:else}
+                <img src={LoginLight} alt="" class="u-only-light" />
+            {/if}
         </div>
 
         <div class="u-margin-block-start-auto" />

From 244ee79455b7cfe23093ad93462fd1224992ae4a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 5 Sep 2022 11:52:40 +0200
Subject: [PATCH 112/118] feat: labels in login page

---
 src/routes/login.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index 1efd8040d..3cf2d3edb 100644
--- a/src/routes/login.svelte
+++ b/src/routes/login.svelte
@@ -47,7 +47,6 @@
                     id="email"
                     label="Email"
                     placeholder="Email"
-                    showLabel={false}
                     autofocus={true}
                     required={true}
                     bind:value={mail} />
@@ -55,7 +54,6 @@
                     id="password"
                     label="Password"
                     placeholder="Password"
-                    showLabel={false}
                     required={true}
                     meter={false}
                     showPasswordButton={true}

From 89fc4e7d17af1ec36af84c557d59b0c342c66c63 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 5 Sep 2022 11:53:09 +0200
Subject: [PATCH 113/118] chore: bump css to 0.0.0-52

---
 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 6b75109a5..8c63e3246 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-51",
-                "@aw-labs/ui": "0.0.0-51",
+                "@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-51",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-51.tgz",
-            "integrity": "sha512-fp/ysdMyjbG9lnYTDSE58cOxbHP6xj+N6GCVQm9vYmqZ3/FbE2lTayc8lW7v0FrL/EKWoD7bInwspiniK4jKfQ=="
+            "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-51",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-51.tgz",
-            "integrity": "sha512-oTTrnN/Okhl1Yvs5eNpnYHjtxmYdUxW7tUPhgamsK5EwvkU0dxoj5vcI9KK3QbJmD9qxlwJrh9xlyOqQTXsZBQ==",
+            "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": "*"
             }
@@ -7698,14 +7698,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-51",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-51.tgz",
-            "integrity": "sha512-fp/ysdMyjbG9lnYTDSE58cOxbHP6xj+N6GCVQm9vYmqZ3/FbE2lTayc8lW7v0FrL/EKWoD7bInwspiniK4jKfQ=="
+            "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-51",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-51.tgz",
-            "integrity": "sha512-oTTrnN/Okhl1Yvs5eNpnYHjtxmYdUxW7tUPhgamsK5EwvkU0dxoj5vcI9KK3QbJmD9qxlwJrh9xlyOqQTXsZBQ==",
+            "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 5bbc0e2ef..73f4f7fb6 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-51",
-        "@aw-labs/ui": "0.0.0-51",
+        "@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"

From 12bdfd66367fe59e78ff8e4fbcd30a560922e06b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 5 Sep 2022 12:07:07 +0200
Subject: [PATCH 114/118] fix: remove await and userfetch

---
 src/routes/recover.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/routes/recover.svelte b/src/routes/recover.svelte
index f638f29d1..35c74a772 100644
--- a/src/routes/recover.svelte
+++ b/src/routes/recover.svelte
@@ -3,14 +3,12 @@
     import { Button, Form, FormItem, FormList, InputEmail } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { user } from '$lib/stores/user';
     import { Unauthenticated } from '$lib/layout';
 
     let mail: string;
     const recover = async () => {
         try {
-            await sdkForConsole.account.createRecovery(mail, `${base}`);
-            user.fetchUser();
+            sdkForConsole.account.createRecovery(mail, `${base}`);
             addNotification({
                 type: 'success',
                 message: 'We have sent you an email with a password reset link'
@@ -45,7 +43,8 @@
                     <Button fullWidth submit>Recover</Button>
                 </FormItem>
             </FormList>
-        </Form></svelte:fragment>
+        </Form>
+    </svelte:fragment>
     <svelte:fragment slot="links">
         <li class="inline-links-item">
             <a href={`${base}/login`}><span class="text">Sign in</span></a>

From 1765a26e0636e1e1a2c25ce25da972dc12058eb7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 5 Sep 2022 12:31:49 +0200
Subject: [PATCH 115/118] fix: add await to recovery, remove `3;`, code
 formatting

---
 src/lib/layout/unauthenticated.svelte | 1 -
 src/routes/login.svelte               | 3 ++-
 src/routes/recover.svelte             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 30d8a086c..2df130ce5 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -2,7 +2,6 @@
     import AppwriteLogo from '$lib/images/appwrite.svg';
     import LoginLight from '$lib/images/login/login-light-mode.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.svg';
-    3;
     import { app } from '$lib/stores/app';
 
     const technologies = [
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index 3cf2d3edb..757e32123 100644
--- a/src/routes/login.svelte
+++ b/src/routes/login.svelte
@@ -62,7 +62,8 @@
                     <Button fullWidth submit>Sign in</Button>
                 </FormItem>
             </FormList>
-        </Form></svelte:fragment>
+        </Form>
+    </svelte:fragment>
     <svelte:fragment slot="links">
         <li class="inline-links-item">
             <a href={`${base}/recover`}><span class="text">Forgot Password?</span></a>
diff --git a/src/routes/recover.svelte b/src/routes/recover.svelte
index 35c74a772..cb381b0dc 100644
--- a/src/routes/recover.svelte
+++ b/src/routes/recover.svelte
@@ -8,7 +8,7 @@
     let mail: string;
     const recover = async () => {
         try {
-            sdkForConsole.account.createRecovery(mail, `${base}`);
+            await sdkForConsole.account.createRecovery(mail, `${base}`);
             addNotification({
                 type: 'success',
                 message: 'We have sent you an email with a password reset link'

From d1237e99ed877cced68c1db90e0402a0306b1ca9 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 5 Sep 2022 13:41:50 +0200
Subject: [PATCH 116/118] feat: update activity page, + fallbacks

---
 .../teams/[team]/activity.svelte              | 40 ++++++++------
 .../user/[user]/activity.svelte               | 52 +++++++++++--------
 2 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/activity.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/activity.svelte
index da750c62a..15a0d0541 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/activity.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/activity.svelte
@@ -21,7 +21,7 @@
     $: request = sdkForProject.teams.listLogs($page.params.team, $pageLimit, offset);
 
     const getBrowser = (clientCode: string) => {
-        return sdkForProject.avatars.getBrowser(clientCode, 40, 40);
+        return sdkForProject.avatars.getBrowser(clientCode, 80, 80);
     };
 </script>
 
@@ -42,21 +42,31 @@
                     {#each response.logs as log}
                         <TableRow>
                             <TableCell title="Client">
-                                <div class="u-flex u-cross-center u-gap-12">
-                                    <div class="avatar is-small">
-                                        <img
-                                            height="20"
-                                            width="20"
-                                            src={getBrowser(log.clientCode).toString()}
-                                            alt={log.clientName} />
+                                {#if log.clientName}
+                                    <div class="u-flex u-cross-center u-gap-12">
+                                        <div class="avatar is-small">
+                                            <img
+                                                height="20"
+                                                width="20"
+                                                src={getBrowser(log.clientCode).toString()}
+                                                alt={log.clientName} />
+                                        </div>
+                                        <p class="text u-trim">
+                                            {log.clientName}
+                                            {log.clientVersion}
+                                            on {log.osName}
+                                            {log.osVersion}
+                                        </p>
                                     </div>
-                                    <p class="text u-trim">
-                                        {log.clientName}
-                                        {log.clientVersion}
-                                        on {log.osName}
-                                        {log.osVersion}
-                                    </p>
-                                </div>
+                                {:else}
+                                    <div class="u-flex u-cross-center u-gap-12">
+                                        <p class="text u-trim">
+                                            <span class="avatar  is-color-empty" />
+
+                                            Unknown
+                                        </p>
+                                    </div>
+                                {/if}
                             </TableCell>
                             <TableCellText title="Event">{log.event}</TableCellText>
 
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/activity.svelte b/src/routes/console/project-[project]/authentication/user/[user]/activity.svelte
index 36677272f..2bc84cf89 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/activity.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/activity.svelte
@@ -14,14 +14,14 @@
     import { Container } from '$lib/layout';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForProject } from '$lib/stores/sdk';
+    import { pageLimit } from '$lib/stores/layout';
 
     let offset = 0;
-    const limit = 25;
 
-    $: request = sdkForProject.users.getLogs($page.params.user, limit, offset);
+    $: request = sdkForProject.users.getLogs($page.params.user, $pageLimit, offset);
 
     const getBrowser = (clientCode: string) => {
-        return sdkForProject.avatars.getBrowser(clientCode, 40, 40);
+        return sdkForProject.avatars.getBrowser(clientCode, 80, 80);
     };
 </script>
 
@@ -42,31 +42,37 @@
                     {#each response.logs as log}
                         <TableRow>
                             <TableCell title="Client">
-                                <div class="u-flex u-cross-center u-gap-12">
-                                    <div class="avatar is-small">
-                                        <img
-                                            height="20"
-                                            width="20"
-                                            src={getBrowser(log.clientCode).toString()}
-                                            alt={log.clientName} />
+                                {#if log.clientName}
+                                    <div class="u-flex u-cross-center u-gap-12">
+                                        <div class="avatar is-small">
+                                            <img
+                                                height="20"
+                                                width="20"
+                                                src={getBrowser(log.clientCode).toString()}
+                                                alt={log.clientName} />
+                                        </div>
+                                        <p class="text u-trim">
+                                            {log.clientName}
+                                            {log.clientVersion}
+                                            on {log.osName}
+                                            {log.osVersion}
+                                        </p>
                                     </div>
-                                    <p class="text u-trim">
-                                        {log.clientName}
-                                        {log.clientVersion}
-                                        on {log.osName}
-                                        {log.osVersion}
-                                    </p>
-                                </div>
+                                {:else}
+                                    <div class="u-flex u-cross-center u-gap-12">
+                                        <p class="text u-trim">
+                                            <span class="avatar  is-color-empty" />
+
+                                            Unknown
+                                        </p>
+                                    </div>
+                                {/if}
                             </TableCell>
                             <TableCellText title="Event">{log.event}</TableCellText>
 
                             <TableCellText title="Location">
                                 {#if log.countryCode !== '--'}
-                                    <img
-                                        src={sdkForProject.avatars
-                                            .getFlag(log.countryCode, 32, 32)
-                                            .toString()}
-                                        alt={log.countryName} />{log.countryName}
+                                    {log.countryName}
                                 {:else}
                                     Unknown
                                 {/if}
@@ -95,7 +101,7 @@
         {/if}
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {response.total}</p>
-            <Pagination {limit} bind:offset sum={response.total} />
+            <Pagination limit={$pageLimit} bind:offset sum={response.total} />
         </div>
     {/await}
 </Container>

From d9fb7aac0b6c15be6a3e596b07a81e6ae620dded Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 6 Sep 2022 10:40:42 +0200
Subject: [PATCH 117/118] style: update margins in unauthenticated pages

---
 src/lib/layout/unauthenticated.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 2df130ce5..564fe2567 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -22,7 +22,7 @@
 <main class="grid-1-1 is-full-page" id="main">
     <section class="grid-1-1-col-1 u-flex u-flex-vertical">
         <div
-            class="container u-margin-block-start-40"
+            class="container u-margin-block-start-20"
             style="--p-container-max-size: var(--container-size-medium);">
             <a href="/">
                 <img src={AppwriteLogo} width="196" height="47" class="u-block" alt="Appwrite" />
@@ -80,7 +80,7 @@
             <p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
                 version 0.15.2.402
             </p>
-            <div class="u-margin-block-start-40" />
+            <div class="u-margin-block-start-20" />
         </div>
     </section>
 </main>

From 023d8d2acdf0354d38af0cdb2ddf5f54b1c856f4 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 6 Sep 2022 11:21:22 +0200
Subject: [PATCH 118/118] fix: redirect after or delete

---
 .../_deleteOrganization.svelte                  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/organization-[organization]/_deleteOrganization.svelte b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
index dfd3fab9d..8efe40619 100644
--- a/src/routes/console/organization-[organization]/_deleteOrganization.svelte
+++ b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
@@ -3,22 +3,27 @@
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { organization, organizationList } from '$lib/stores/organization';
+    import { newOrgModal, organization, organizationList } from '$lib/stores/organization';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
 
     export let showDelete = false;
 
-    const deleteUser = async () => {
+    const deleteOrg = async () => {
         try {
             await sdkForConsole.teams.delete($organization.$id);
-            showDelete = false;
             addNotification({
                 type: 'success',
                 message: `${$organization.name} has been deleted`
             });
-            if ($organizationList?.total) {
+            if ($organizationList?.total > 1) {
                 await organizationList.load();
-                organization.set($organizationList.teams[0]);
+                goto(`${base}/console/organization-${$organizationList.teams[0].$id}`);
+            } else {
+                newOrgModal.set(true);
+                goto(`${base}/console`);
             }
+            showDelete = false;
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -28,7 +33,7 @@
     };
 </script>
 
-<Form on:submit={deleteUser}>
+<Form on:submit={deleteOrg}>
     <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Organization</svelte:fragment>
         <p>