Merge branch 'feat/new-sidebar' of https://github.com/appwrite/console into feat/new-sidebar

.github/workflows/tests.yml

@@ -15,7 +15,7 @@ jobs:
         steps:
             - uses: actions/checkout@v3
             - name: Use Node.js
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v3
               with:
                   node-version: 18
             # - name: Audit dependencies

package-lock.json

@@ -16,6 +16,7 @@
                 "@sentry/tracing": "^7.36.0",
                 "analytics": "^0.8.1",
                 "echarts": "^5.4.1",
+                "logrocket": "^3.0.1",
                 "pretty-bytes": "^6.1.0",
                 "prismjs": "^1.29.0",
                 "tippy.js": "^6.3.7",
@@ -6261,6 +6262,11 @@
             "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
             "dev": true
         },
+        "node_modules/logrocket": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/logrocket/-/logrocket-3.0.1.tgz",
+            "integrity": "sha512-jOWG+jEzobKVxGytzZ+4KGm2kiMQMRTHab2uDWQyVZcHfEF38BlCH1yjQVY4LCmuQUwZitP9biMzJZnyUQ0dtQ=="
+        },
         "node_modules/loupe": {
             "version": "2.3.6",
             "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",

package.json

@@ -27,6 +27,7 @@
         "@sentry/tracing": "^7.36.0",
         "analytics": "^0.8.1",
         "echarts": "^5.4.1",
+        "logrocket": "^3.0.1",
         "pretty-bytes": "^6.1.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",

src/lib/actions/analytics.ts

@@ -10,7 +10,7 @@ const analytics = Analytics({
     app: 'appwrite',
     plugins: [
         googleAnalytics({
-            measurementIds: [VARS.GOOGLE_ANALYTICS ?? 'G-R4YJ9JN8L4']
+            measurementIds: [VARS.GOOGLE_ANALYTICS || 'G-R4YJ9JN8L4']
         })
     ]
 });
@@ -88,7 +88,7 @@ function sendEventToGrowth(event: string, path: string, data: object = null): vo
     });
 }
 
-function isTrackingAllowed() {
+export function isTrackingAllowed() {
     if (ENV.TEST) {
         return;
     }

src/lib/components/alert.svelte

@@ -32,7 +32,7 @@
             class:icon-exclamation={type === 'warning'}
             class:icon-exclamation-circle={type === 'error'}
             aria-hidden="true" />
-        <div class="alert-content">
+        <div class="alert-content" data-private>
             {#if $$slots.title}
                 <h6 class="alert-title">
                     <slot name="title" />

src/lib/components/avatarInitials.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import Avatar from './avatar.svelte';
 
     export let name: string;
     export let size: number;
 
-    $: src = sdkForConsole.avatars.getInitials(name, size * 2, size * 2).toString();
+    $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2).toString();
 </script>
 
 <Avatar {name} {size} {src} />

src/lib/components/cardContainer.svelte

@@ -10,7 +10,8 @@
 
 <ul
     class="grid-box common-section u-margin-block-start-32"
-    style={`--grid-gap:1.5rem; --grid-item-size:${total > 3 ? '22rem' : '25rem'};`}>
+    style={`--grid-gap:1.5rem; --grid-item-size:${total > 3 ? '22rem' : '25rem'};`}
+    data-private>
     <slot />
 
     {#if total > 3 ? total < limit + offset : total % 2 !== 0}

src/lib/components/eventModal.svelte

@@ -245,7 +245,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} size="big">
+<Modal bind:show onSubmit={create} size="big">
     <svelte:fragment slot="header">Create Event</svelte:fragment>
     <slot />
     <div>

src/lib/components/feedbackGeneral.svelte

@@ -51,7 +51,7 @@
         Your feedback is important to us. Please be honest and tell us what you think.
     </div>
 
-    <Form on:submit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
         <FormList>
             <InputText
                 label="name"

src/lib/components/feedbackNPS.svelte

@@ -49,7 +49,7 @@
         think.
     </div>
 
-    <Form on:submit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
         <Evaluation bind:value>
             How likely are you to recommend Appwrite to a friend or colleague?
         </Evaluation>

src/lib/components/modal.svelte

@@ -2,12 +2,16 @@
     import { createEventDispatcher, onDestroy, onMount } from 'svelte';
     import { Alert } from '$lib/components';
     import { trackEvent } from '$lib/actions/analytics';
+    import { Form } from '$lib/elements/forms';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
     export let warning = false;
     export let error: string = null;
     export let closable = true;
+    export let onSubmit: () => Promise<void> | void = function () {
+        return;
+    };
 
     let dialog: HTMLDialogElement;
     let alert: HTMLElement;
@@ -77,8 +81,7 @@
     class:is-big={size === 'big'}
     bind:this={dialog}>
     {#if show}
-        <!-- svelte-ignore a11y-no-redundant-roles -->
-        <form class="modal-form" role="form" on:submit|preventDefault>
+        <Form isModal {onSubmit}>
             <header class="modal-header">
                 {#if warning}
                     <div class="avatar is-warning is-medium">
@@ -127,6 +130,6 @@
                     </div>
                 </div>
             {/if}
-        </form>
+        </Form>
     {/if}
 </dialog>

src/lib/components/permissions/custom.svelte

@@ -25,7 +25,7 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal bind:show on:close={reset} on:submit={create}>
+<Modal bind:show on:close={reset} onSubmit={create}>
     <svelte:fragment slot="header">Custom permission</svelte:fragment>
     <p class="text">
         Custom permissions allow you to grant access to specific users or teams using their ID and
@@ -44,6 +44,6 @@
     </FormList>
 
     <svelte:fragment slot="footer">
-        <Button submit {disabled}>Create</Button>
+        <Button submit {disabled}>Add</Button>
     </svelte:fragment>
 </Modal>

src/lib/components/permissions/row.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { tooltip } from '$lib/actions/tooltip';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { tick } from 'svelte';
     import { AvatarInitials } from '../';
@@ -18,11 +18,11 @@
         const role = permission.split(':')[0];
         const id = permission.split(':')[1].split('/')[0];
         if (role === 'user') {
-            const user = await sdkForProject.users.get(id);
+            const user = await sdk.forProject.users.get(id);
             return user;
         }
         if (role === 'team') {
-            const team = await sdkForProject.teams.get(id);
+            const team = await sdk.forProject.teams.get(id);
             return team;
         }
     }

src/lib/components/permissions/team.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import { AvatarInitials, EmptySearch, Modal, PaginationInline } from '..';
     import type { Writable } from 'svelte/store';
@@ -31,7 +31,7 @@
 
     async function request() {
         if (!show) return;
-        results = await sdkForProject.teams.list([Query.limit(5), Query.offset(offset)], search);
+        results = await sdk.forProject.teams.list([Query.limit(5), Query.offset(offset)], search);
     }
 
     function onSelection(event: Event, role: string) {
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} on:close={reset} size="big">
+<Modal bind:show onSubmit={create} on:close={reset} size="big">
     <svelte:fragment slot="header">Select teams</svelte:fragment>
     <p class="text">
         Grant access to any member of a specific team. To grant access to team members with specific
@@ -144,6 +144,6 @@
     {/if}
 
     <svelte:fragment slot="footer">
-        <Button submit disabled={!hasSelection}>Create</Button>
+        <Button submit disabled={!hasSelection}>Add</Button>
     </svelte:fragment>
 </Modal>

src/lib/components/permissions/user.svelte

@@ -2,7 +2,7 @@
     import { Button, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { AvatarInitials, EmptySearch, Modal, PaginationInline } from '..';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
@@ -31,7 +31,7 @@
 
     async function request() {
         if (!show) return;
-        results = await sdkForProject.users.list([Query.limit(5), Query.offset(offset)], search);
+        results = await sdk.forProject.users.list([Query.limit(5), Query.offset(offset)], search);
     }
 
     function onSelection(event: Event, role: string) {
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} on:close={reset} size="big">
+<Modal bind:show onSubmit={create} on:close={reset} size="big">
     <svelte:fragment slot="header">Select users</svelte:fragment>
     <p class="text">Grant access to any authenticated or anonymous user.</p>
     <InputSearch
@@ -163,6 +163,6 @@
     {/if}
 
     <svelte:fragment slot="footer">
-        <Button submit disabled={!hasSelection}>Create</Button>
+        <Button submit disabled={!hasSelection}>Add</Button>
     </svelte:fragment>
 </Modal>

src/lib/components/secret.svelte

@@ -8,7 +8,7 @@
     export let copyEvent: string = null;
 </script>
 
-<div class="interactive-text-output" class:is-textarea={show}>
+<div class="interactive-text-output" class:is-textarea={show} data-private>
     {#if show}
         <span class="text u-line-height-1-5 u-break-all">{value}</span>
     {:else}

src/lib/components/tiles.svelte

@@ -1,3 +1,3 @@
-<ul class="grid-box common-section" style="--grid-item-size:25rem;">
+<ul class="grid-box common-section" style="--grid-item-size:25rem;" data-private>
     <slot />
 </ul>

src/lib/components/uploadBox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { uploader } from '$lib/stores/uploader';
     import { Pill } from '$lib/elements';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { Avatar } from '$lib/components';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
@@ -9,7 +9,7 @@
     let hovering = false;
 
     const getPreview = (fileId: string, bucketId: string) =>
-        sdkForProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
+        sdk.forProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
 </script>
 
 {#if $uploader?.isOpen}

src/lib/elements/forms/button.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
+    import { getContext, hasContext } from 'svelte';
+    import { readable } from 'svelte/store';
+    import type { FormContext } from './form.svelte';
 
     export let submit = false;
     export let secondary = false;
@@ -14,8 +17,14 @@
     export let noMargin = false;
     export let event: string = null;
 
+    const isSubmitting = hasContext('form')
+        ? getContext<FormContext>('form').isSubmitting
+        : readable(false);
+
+    $: internalDisabled = (submit && $isSubmitting) || disabled;
+
     //allows to add the disabled attribute to <a> tag without throwing an error
-    let attributes = { disabled } as Record<string, boolean>;
+    $: attributes = { internalDisabled } as Record<string, boolean>;
 
     function track() {
         if (!event) {
@@ -49,7 +58,7 @@
     <button
         on:click
         on:click={track}
-        {disabled}
+        disabled={internalDisabled}
         class="button"
         class:is-only-icon={round}
         class:is-secondary={secondary}

src/lib/elements/forms/form.svelte

@@ -1,9 +1,35 @@
-<script lang="ts">
-    export let noMargin = false;
-    export let noStyle = false;
+<script context="module" lang="ts">
+    import type { Writable } from 'svelte/store';
+
+    export type FormContext = {
+        isSubmitting: Writable<boolean>;
+    };
 </script>
 
-<!-- svelte-ignore a11y-no-redundant-roles -->
-<form role="form" class:form={!noStyle} class:common-section={!noMargin} on:submit|preventDefault>
+<script lang="ts">
+    import { setContext } from 'svelte';
+    import { writable } from 'svelte/store';
+
+    export let noMargin = false;
+    export let noStyle = false;
+    export let isModal = false;
+    export let onSubmit: () => Promise<void> | void;
+
+    const { isSubmitting } = setContext<FormContext>('form', {
+        isSubmitting: writable(false)
+    });
+
+    async function submit() {
+        isSubmitting.set(true);
+        await onSubmit();
+        isSubmitting.set(false);
+    }
+</script>
+
+<form
+    class:form={!noStyle}
+    class:common-section={!noMargin}
+    class:modal-form={isModal}
+    on:submit|preventDefault={submit}>
     <slot />
 </form>

src/lib/elements/table/cellLink.svelte

@@ -3,6 +3,6 @@
     export let title: string;
 </script>
 
-<div class="table-col" data-title={title} role="cell">
+<div class="table-col" data-title={title} role="cell" data-private>
     <a role="button" tabindex="0" class="link" {href}><slot /></a>
 </div>

src/lib/elements/table/cellText.svelte

@@ -10,6 +10,7 @@
     class:is-only-desktop={onlyDesktop}
     class:u-overflow-visible={showOverflow}
     data-title={title}
-    role="cell">
+    role="cell"
+    data-private>
     <Trim><slot /></Trim>
 </div>

src/lib/elements/table/table.svelte

@@ -7,6 +7,7 @@
     class="table is-selected-columns-mobile"
     class:u-margin-block-start-32={!noMargin}
     class:is-remove-outer-styles={noStyles}
-    role="table">
+    role="table"
+    data-private>
     <slot />
 </div>

src/lib/elements/table/tableList.svelte

@@ -1,5 +1,5 @@
 <!-- TODO: is 100% height needed? -->
-<div class="table-with-scroll">
+<div class="table-with-scroll" data-private>
     <div class="table-wrapper">
         <div class="table is-remove-outer-styles">
             <ul class="table-thead">

src/lib/elements/table/tableScroll.svelte

@@ -1,10 +1,30 @@
 <script lang="ts">
+    import type { Action } from 'svelte/action';
+
     export let isSticky = false;
+
+    const hasOverflow: Action<HTMLDivElement, (value: boolean) => void> = (node, callback) => {
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                callback(entry.contentRect.width < entry.target.scrollWidth);
+            }
+        });
+
+        observer.observe(node);
+
+        return {
+            destroy() {
+                observer.disconnect();
+            }
+        };
+    };
+
+    let isOverflowing = false;
 </script>
 
-<div class="table-with-scroll u-margin-block-start-32">
-    <div class="table-wrapper">
-        <table class="table" class:is-sticky-scroll={isSticky}>
+<div class="table-with-scroll u-margin-block-start-32" data-private>
+    <div class="table-wrapper" use:hasOverflow={(v) => (isOverflowing = v)}>
+        <table class="table" class:is-sticky-scroll={isSticky && isOverflowing}>
             <slot />
         </table>
     </div>

src/lib/helpers/project.ts

@@ -0,0 +1,5 @@
+export function getProjectId() {
+    const pathname = window.location.pathname;
+    const projectMatch = pathname.match(/\/project-(.*?)\//);
+    return projectMatch?.[1] || null;
+}

src/lib/helpers/promises.ts

@@ -0,0 +1,3 @@
+export async function sleep(ms: number): Promise<void> {
+    return new Promise((r) => setTimeout(r, ms));
+}

src/lib/layout/breadcrumbs.svelte

@@ -18,7 +18,7 @@
 <nav class="breadcrumbs is-only-desktop" aria-label="breadcrumb">
     <ol class="breadcrumbs-list">
         {#each breadcrumbs as breadcrumb}
-            <li class="breadcrumbs-item">
+            <li class="breadcrumbs-item" data-private>
                 {#if breadcrumb.href}
                     <a href={breadcrumb.href} title={breadcrumb.title} on:click={track}>
                         {breadcrumb.title}

src/lib/layout/coverTitle.svelte

@@ -11,7 +11,7 @@
                 <span class="icon-cheveron-left" aria-hidden="true" />
             </a>
         {/if}
-        <span class="text u-trim-1">
+        <span class="text u-trim-1" data-private>
             <slot />
         </span>
     </div>

src/lib/layout/header.svelte

@@ -20,7 +20,7 @@
     import { slide } from 'svelte/transition';
     import { page } from '$app/stores';
     import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { goto } from '$app/navigation';
 
     let showDropdown = false;
@@ -35,7 +35,7 @@
     }
 
     async function logout() {
-        await sdkForConsole.account.deleteSession('current');
+        await sdk.forConsole.account.deleteSession('current');
         trackEvent(Submit.AccountLogout);
         await goto(`${base}/login`);
     }

src/lib/layout/logs.svelte

@@ -6,7 +6,7 @@
     import { Button } from '$lib/elements/forms';
     import { base } from '$app/paths';
     import { app } from '$lib/stores/app';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { page } from '$app/stores';
     import { calculateTime } from '$lib/helpers/timeConversion';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -17,7 +17,7 @@
     function isDeployment(data: Models.Deployment | Models.Execution): data is Models.Deployment {
         if ('buildId' in data) {
             selectedTab = 'logs';
-            rawData = `${sdkForConsole.client.config.endpoint}/functions/${$log.func.$id}/deployment/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
+            rawData = `${sdk.forConsole.client.config.endpoint}/functions/${$log.func.$id}/deployment/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
             return true;
         }
     }
@@ -25,7 +25,7 @@
     function isExecution(data: Models.Deployment | Models.Execution): data is Models.Execution {
         if ('trigger' in data) {
             selectedTab = 'response';
-            rawData = `${sdkForConsole.client.config.endpoint}/functions/${$log.func.$id}/execution/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
+            rawData = `${sdk.forConsole.client.config.endpoint}/functions/${$log.func.$id}/execution/${$log.data.$id}?mode=admin&project=${$page.params.project}`;
             return true;
         }
     }
@@ -47,7 +47,7 @@
 <svelte:window on:keydown={handleKeydown} />
 
 {#if $log.data}
-    <section class="cover-frame">
+    <section class="cover-frame" data-private>
         <header class="cover-frame-header u-flex u-gap-16 u-main-space-between u-cross-center">
             <h1 class="body-text-1">Function ID: {$log.func.$id}</h1>
             <button

src/lib/layout/shell.svelte

@@ -92,4 +92,8 @@
             grid-template-columns: auto 1fr !important;
         }
     }
+
+    .main-content {
+        overflow: hidden;
+    }
 </style>

src/lib/layout/wizard.svelte

@@ -122,7 +122,7 @@
         {/if}
     </div>
     <div class="wizard-main">
-        <Form noStyle on:submit={submit}>
+        <Form noStyle onSubmit={submit}>
             {#each sortedSteps as [step, { component }]}
                 {#if currentStep === step}
                     <svelte:component this={component} />

src/lib/layout/wizardExitModal.svelte

@@ -11,7 +11,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={handleSubmit} warning>
+<Modal bind:show onSubmit={handleSubmit} warning>
     <svelte:fragment slot="header">Exit Process</svelte:fragment>
     <p>
         Are you sure you want to exit from <slot />? All data will be deleted. This action is

src/lib/mock/form.test.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import Form from '../elements/forms/form.svelte';
+    import Button from '../elements/forms/button.svelte';
+
+    export let onSubmit: () => Promise<void> | void;
+</script>
+
+<Form {onSubmit}>
+    <Button submit>Submit</Button>
+    <Button>Button</Button>
+</Form>

src/lib/stores/sdk.ts

@@ -1,3 +1,4 @@
+import { getProjectId } from '$lib/helpers/project';
 import { Project } from '$lib/sdk/project';
 import { VARS } from '$lib/system';
 import {
@@ -21,21 +22,6 @@ clientConsole.setEndpoint(endpoint).setProject('console');
 
 const clientProject = new Client();
 clientProject.setEndpoint(endpoint).setMode('admin');
-
-const setProject = (projectId: string): Client => clientProject.setProject(projectId);
-
-const sdkForConsole = {
-    client: clientConsole,
-    account: new Account(clientConsole),
-    avatars: new Avatars(clientConsole),
-    functions: new Functions(clientConsole),
-    health: new Health(clientConsole),
-    locale: new Locale(clientConsole),
-    projects: new Projects(clientConsole),
-    teams: new Teams(clientConsole),
-    users: new Users(clientConsole)
-};
-
 const sdkForProject = {
     client: clientProject,
     account: new Account(clientProject),
@@ -50,4 +36,24 @@ const sdkForProject = {
     users: new Users(clientProject)
 };
 
-export { sdkForConsole, sdkForProject, setProject };
+export const sdk = {
+    forConsole: {
+        client: clientConsole,
+        account: new Account(clientConsole),
+        avatars: new Avatars(clientConsole),
+        functions: new Functions(clientConsole),
+        health: new Health(clientConsole),
+        locale: new Locale(clientConsole),
+        projects: new Projects(clientConsole),
+        teams: new Teams(clientConsole),
+        users: new Users(clientConsole)
+    },
+    get forProject() {
+        const projectId = getProjectId();
+        if (projectId && projectId !== clientProject.config.project) {
+            clientProject.setProject(projectId);
+        }
+
+        return sdkForProject;
+    }
+};

src/lib/stores/uploader.ts

@@ -1,6 +1,6 @@
 import type { Models } from '@aw-labs/appwrite-console';
 import { writable } from 'svelte/store';
-import { sdkForProject } from './sdk';
+import { sdk } from './sdk';
 
 type UploaderFile = {
     $id: string;
@@ -71,7 +71,7 @@ const createUploader = () => {
                 n.files.unshift(newFile);
                 return n;
             });
-            const uploadedFile = await sdkForProject.storage.createFile(
+            const uploadedFile = await sdk.forProject.storage.createFile(
                 bucketId,
                 id ?? 'unique()',
                 file,

src/routes/+layout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-    import { browser, dev } from '$app/environment';
+    import { browser } from '$app/environment';
     import { afterNavigate, goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { trackPageView } from '$lib/actions/analytics';
+    import { isTrackingAllowed, trackPageView } from '$lib/actions/analytics';
     import { reportWebVitals } from '$lib/helpers/vitals';
     import { Notifications, Progress } from '$lib/layout';
     import { app } from '$lib/stores/app';
     import { user } from '$lib/stores/user';
+    import { ENV, isCloud } from '$lib/system';
     import * as Sentry from '@sentry/svelte';
+    import LogRocket from 'logrocket';
     import { BrowserTracing } from '@sentry/tracing';
     import { onMount } from 'svelte';
     import { onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from 'web-vitals';
@@ -23,7 +25,7 @@
         /**
          * Reporting Web Vitals.
          */
-        if (!dev && window.VERCEL_ANALYTICS_ID) {
+        if (ENV.PROD && window.VERCEL_ANALYTICS_ID) {
             onCLS(reportWebVitals);
             onFID(reportWebVitals);
             onLCP(reportWebVitals);
@@ -32,15 +34,26 @@
             onTTFB(reportWebVitals);
         }
 
-        /**
-         * Sentry Error Logging
-         */
-        if (!dev) {
+        if (ENV.PROD) {
+            /**
+             * Sentry Error Logging
+             */
             Sentry.init({
                 dsn: 'https://c7ce178bdedd486480317b72f282fd39@o1063647.ingest.sentry.io/4504158071422976',
                 integrations: [new BrowserTracing()],
                 tracesSampleRate: 1.0
             });
+
+            /**
+             * LogRocket
+             */
+            if (isCloud && isTrackingAllowed()) {
+                LogRocket.init('rgthvf/appwrite', {
+                    dom: {
+                        inputSanitizer: true
+                    }
+                });
+            }
         }
 
         /**

src/routes/+layout.ts

@@ -1,7 +1,8 @@
 import '@appwrite.io/pink';
 import '@appwrite.io/pink-icons';
 import 'tippy.js/dist/tippy.css';
-import { sdkForConsole } from '$lib/stores/sdk';
+import LogRocket from 'logrocket';
+import { sdk } from '$lib/stores/sdk';
 import { redirect } from '@sveltejs/kit';
 import { Dependencies } from '$lib/constants';
 import type { LayoutLoad } from './$types';
@@ -11,11 +12,16 @@ export const ssr = false;
 export const load: LayoutLoad = async ({ depends, url }) => {
     depends(Dependencies.ACCOUNT);
     try {
-        const account = await sdkForConsole.account.get();
+        const account = await sdk.forConsole.account.get();
+
+        LogRocket.identify(account.$id, {
+            name: account.name,
+            email: account.email
+        });
 
         return {
             account,
-            organizations: sdkForConsole.teams.list()
+            organizations: sdk.forConsole.teams.list()
         };
     } catch (error) {
         const acceptedRoutes = [

src/routes/console/+layout.ts

@@ -1,8 +1,8 @@
-import { sdkForConsole } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import type { LayoutLoad } from './$types';
 
 export const load: LayoutLoad = async () => {
-    const response = await fetch(`${sdkForConsole.client.config.endpoint}/health/version`);
+    const response = await fetch(`${sdk.forConsole.client.config.endpoint}/health/version`);
     const data = await response.json();
 
     return {

src/routes/console/account/+page.svelte

@@ -4,7 +4,7 @@
     import { Container } from '$lib/layout';
     import { onMount } from 'svelte';
     import { user } from '$lib/stores/user';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { base } from '$app/paths';
     import Delete from './delete.svelte';
@@ -26,7 +26,7 @@
 
     async function updateName() {
         try {
-            await sdkForConsole.account.updateName(name);
+            await sdk.forConsole.account.updateName(name);
             invalidate(Dependencies.ACCOUNT);
             addNotification({
                 message: 'Name has been updated',
@@ -43,7 +43,7 @@
     }
     async function updateEmail() {
         try {
-            await sdkForConsole.account.updateEmail(email, emailPassword);
+            await sdk.forConsole.account.updateEmail(email, emailPassword);
             invalidate(Dependencies.ACCOUNT);
             addNotification({
                 message: 'Email has been updated',
@@ -61,7 +61,7 @@
 
     async function updatePassword() {
         try {
-            await sdkForConsole.account.updatePassword(newPassword, oldPassword);
+            await sdk.forConsole.account.updatePassword(newPassword, oldPassword);
             newPassword = oldPassword = null;
             addNotification({
                 message: 'Password has been updated',
@@ -79,9 +79,9 @@
 </script>
 
 <Container>
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
-            <Heading tag="h6" size="7">Update Name</Heading>
+            <Heading tag="h6" size="7">Name</Heading>
 
             <svelte:fragment slot="aside">
                 <ul>
@@ -94,9 +94,9 @@
             </svelte:fragment>
         </CardGrid>
     </Form>
-    <Form on:submit={updateEmail}>
+    <Form onSubmit={updateEmail}>
         <CardGrid>
-            <Heading tag="h6" size="7">Update Email</Heading>
+            <Heading tag="h6" size="7">Email</Heading>
 
             <svelte:fragment slot="aside">
                 <FormList>
@@ -122,9 +122,9 @@
             </svelte:fragment>
         </CardGrid>
     </Form>
-    <Form on:submit={updatePassword}>
+    <Form onSubmit={updatePassword}>
         <CardGrid>
-            <Heading tag="h6" size="7">Update Password</Heading>
+            <Heading tag="h6" size="7">Password</Heading>
             <p class="text">
                 Forgot your password? <a class="link" href={`${base}/recover`}
                     >Recover your password</a>

src/routes/console/account/activity/[[page]]/+page.ts

@@ -1,5 +1,5 @@
 import { Query } from '@aw-labs/appwrite-console';
-import { sdkForConsole } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { pageToOffset } from '$lib/helpers/load';
 import { PAGE_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
@@ -10,6 +10,6 @@ export const load: PageLoad = async ({ params }) => {
 
     return {
         offset,
-        logs: await sdkForConsole.account.listLogs([Query.offset(offset), Query.limit(PAGE_LIMIT)])
+        logs: await sdk.forConsole.account.listLogs([Query.offset(offset), Query.limit(PAGE_LIMIT)])
     };
 };

src/routes/console/account/delete.svelte

@@ -5,13 +5,13 @@
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
 
     export let showDelete = false;
 
     const deleteAccount = async () => {
         try {
-            await sdkForConsole.account.updateStatus();
+            await sdk.forConsole.account.updateStatus();
             showDelete = false;
             invalidate(Dependencies.ACCOUNT);
             addNotification({
@@ -29,7 +29,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteAccount} warning>
+<Modal bind:show={showDelete} onSubmit={deleteAccount} warning>
     <svelte:fragment slot="header">Delete Account</svelte:fragment>
     <p>Are you sure you want to delete your account?</p>
     <svelte:fragment slot="footer">

src/routes/console/account/header.svelte

@@ -7,7 +7,7 @@
     import { Button } from '$lib/elements/forms';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
 
     const path = `/console/account`;
@@ -38,7 +38,7 @@
     ];
 
     async function logout() {
-        await sdkForConsole.account.deleteSession('current');
+        await sdk.forConsole.account.deleteSession('current');
         trackEvent(Submit.AccountLogout);
         await goto(`${base}/login`);
     }

src/routes/console/account/organizations/[[page]]/+page.svelte

@@ -11,14 +11,14 @@
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import CreateOrganization from '../../../createOrganization.svelte';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { CARD_LIMIT } from '$lib/constants';
     import type { PageData } from './$types';
 
     export let data: PageData;
 
     const getMemberships = async (teamId: string) => {
-        const memberships = await sdkForConsole.teams.listMemberships(teamId);
+        const memberships = await sdk.forConsole.teams.listMemberships(teamId);
         return memberships.memberships.map((team) => team.userName);
     };
 

src/routes/console/account/organizations/[[page]]/+page.ts

@@ -1,5 +1,5 @@
 import { Query } from '@aw-labs/appwrite-console';
-import { sdkForConsole } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { pageToOffset } from '$lib/helpers/load';
 import { CARD_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
@@ -10,7 +10,7 @@ export const load: PageLoad = async ({ params }) => {
 
     return {
         offset,
-        organizations: await sdkForConsole.teams.list([
+        organizations: await sdk.forConsole.teams.list([
             Query.offset(offset),
             Query.limit(CARD_LIMIT),
             Query.orderDesc('$createdAt')

src/routes/console/account/sessions/[[page]]/+page.svelte

@@ -12,7 +12,7 @@
         TableScroll
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -23,11 +23,11 @@
     export let data: PageData;
 
     const getBrowser = (clientCode: string) => {
-        return sdkForConsole.avatars.getBrowser(clientCode, 40, 40);
+        return sdk.forConsole.avatars.getBrowser(clientCode, 40, 40);
     };
 
     const logout = async (session: Models.Session) => {
-        await sdkForConsole.account.deleteSession(session.$id);
+        await sdk.forConsole.account.deleteSession(session.$id);
         trackEvent(Submit.AccountDeleteSession);
         if (session.current) {
             await goto(`${base}/login`);
@@ -35,7 +35,7 @@
         invalidate(Dependencies.ACCOUNT_SESSIONS);
     };
     const logoutAll = async () => {
-        await sdkForConsole.account.deleteSessions();
+        await sdk.forConsole.account.deleteSessions();
         trackEvent(Submit.AccountDeleteAllSessions);
         await goto(`${base}/login`);
         invalidate(Dependencies.ACCOUNT_SESSIONS);
@@ -115,7 +115,7 @@
                     <Button
                         external
                         secondary
-                        href="https://appwrite.io/docs/server/auth?sdk=nodejs-default#usersGetsessions">
+                        href="https://appwrite.io/docs/client/account#accountCreateEmailSession">
                         Documentation
                     </Button>
                 </div>

src/routes/console/account/sessions/[[page]]/+page.ts

@@ -1,11 +1,11 @@
 import { Dependencies } from '$lib/constants';
-import { sdkForConsole } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ depends }) => {
     depends(Dependencies.ACCOUNT_SESSIONS);
 
     return {
-        sessions: await sdkForConsole.account.listSessions()
+        sessions: await sdk.forConsole.account.listSessions()
     };
 };

src/routes/console/createOrganization.svelte

@@ -3,7 +3,7 @@
     import { Pill } from '$lib/elements';
     import { InputText, Button, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
@@ -21,7 +21,7 @@
 
     const create = async () => {
         try {
-            const org = await sdkForConsole.teams.create(id ?? ID.unique(), name);
+            const org = await sdk.forConsole.teams.create(id ?? ID.unique(), name);
             await invalidate(Dependencies.ACCOUNT);
             dispatch('created');
             await goto(`/console/organization-${org.$id}`);
@@ -42,7 +42,7 @@
     };
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show>
+<Modal {error} onSubmit={create} size="big" bind:show>
     <svelte:fragment slot="header">Create New Organization</svelte:fragment>
     <FormList>
         <InputText

src/routes/console/onboarding/+page.svelte

@@ -9,19 +9,17 @@
     import FormList from '$lib/elements/forms/formList.svelte';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { ID } from '@aw-labs/appwrite-console';
 
     let name: string;
     let id: string;
     let showCustomId = false;
-    let loading = false;
 
     async function createProject() {
         try {
-            loading = true;
             const org = await createOrganization();
-            const project = await sdkForConsole.projects.create(
+            const project = await sdk.forConsole.projects.create(
                 id ?? ID.unique(),
                 name,
                 org.$id,
@@ -34,7 +32,6 @@
                 teamId: org.$id
             });
         } catch (error) {
-            loading = false;
             addNotification({
                 message: error.message,
                 type: 'error'
@@ -44,20 +41,19 @@
     }
 
     async function createOrganization() {
-        return await sdkForConsole.teams.create(ID.unique(), 'Personal Projects');
+        return await sdk.forConsole.teams.create(ID.unique(), 'Personal Projects');
     }
 </script>
 
 <Container overlapCover size="large">
     <Card>
-        <Form on:submit={createProject}>
+        <Form onSubmit={createProject}>
             <FormList>
                 <InputText
                     id="name"
                     label="Project name"
                     placeholder="First Appwrite Project"
                     required
-                    disabled={loading}
                     bind:value={name} />
                 {#if !showCustomId}
                     <div>
@@ -70,7 +66,7 @@
                 {:else}
                     <CustomId bind:show={showCustomId} name="Project" bind:id />
                 {/if}
-                <Button fullWidth submit disabled={loading || name === ''} event="create_project">
+                <Button fullWidth submit disabled={name === ''} event="create_project">
                     Create project
                 </Button>
             </FormList>

src/routes/console/organization-[organization]/+layout.ts

@@ -1,20 +1,19 @@
 import Header from './header.svelte';
 import Breadcrumbs from './breadcrumbs.svelte';
-import { sdkForConsole } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import type { LayoutLoad } from './$types';
 import { error } from '@sveltejs/kit';
 import { Dependencies } from '$lib/constants';
 
-export const load: LayoutLoad = async ({ params, parent, depends }) => {
-    await parent();
+export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.ORGANIZATION);
 
     try {
         return {
             header: Header,
             breadcrumbs: Breadcrumbs,
-            organization: await sdkForConsole.teams.get(params.organization),
-            members: await sdkForConsole.teams.listMemberships(params.organization)
+            organization: await sdk.forConsole.teams.get(params.organization),
+            members: await sdk.forConsole.teams.listMemberships(params.organization)
         };
     } catch (e) {
         localStorage.removeItem('organization');

src/routes/console/organization-[organization]/[[page]]/+page.ts

@@ -1,5 +1,5 @@
 import { Query } from '@aw-labs/appwrite-console';
-import { sdkForConsole } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { pageToOffset } from '$lib/helpers/load';
 import { CARD_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
@@ -10,7 +10,7 @@ export const load: PageLoad = async ({ params }) => {
 
     return {
         offset,
-        projects: await sdkForConsole.projects.list([
+        projects: await sdk.forConsole.projects.list([
             Query.offset(offset),
             Query.limit(CARD_LIMIT),
             Query.equal('teamId', params.organization),

src/routes/console/organization-[organization]/createMember.svelte

@@ -3,7 +3,7 @@
     import { Modal } from '$lib/components';
     import { InputText, InputEmail, Button, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { organization } from '$lib/stores/organization';
     import { invalidate } from '$app/navigation';
@@ -19,7 +19,7 @@
 
     const create = async () => {
         try {
-            const team = await sdkForConsole.teams.createMembership(
+            const team = await sdk.forConsole.teams.createMembership(
                 $organization.$id,
                 email,
                 ['owner'],
@@ -47,7 +47,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Invite Member</svelte:fragment>
     <FormList>
         <InputEmail

src/routes/console/organization-[organization]/createProject.svelte

@@ -5,7 +5,7 @@
     import { Pill } from '$lib/elements';
     import { InputText, Button, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { ID } from '@aw-labs/appwrite-console';
     import { createEventDispatcher } from 'svelte';
 
@@ -18,12 +18,10 @@
     let name: string;
     let showCustomId = false;
     let error: string;
-    let isCreating = false;
 
     async function create() {
         try {
-            isCreating = true;
-            const project = await sdkForConsole.projects.create(
+            const project = await sdk.forConsole.projects.create(
                 id ?? ID.unique(),
                 name,
                 teamId,
@@ -40,23 +38,16 @@
             });
             await goto(`/console/project-${project.$id}`);
         } catch (e) {
-            isCreating = false;
             error = e.message;
             trackError(e, Submit.ProjectCreate);
         }
     }
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show>
+<Modal {error} onSubmit={create} size="big" bind:show>
     <svelte:fragment slot="header">Create Project</svelte:fragment>
     <FormList>
-        <InputText
-            id="name"
-            label="Name"
-            bind:value={name}
-            required
-            autofocus={true}
-            disabled={isCreating} />
+        <InputText id="name" label="Name" bind:value={name} required autofocus={true} />
         {#if !showCustomId}
             <div>
                 <Pill button on:click={() => (showCustomId = !showCustomId)}>
@@ -71,6 +62,6 @@
     </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
-        <Button submit disabled={isCreating}>Create</Button>
+        <Button submit>Create</Button>
     </svelte:fragment>
 </Modal>

src/routes/console/organization-[organization]/deleteMember.svelte

@@ -4,7 +4,7 @@
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { createEventDispatcher } from 'svelte';
     import { user } from '$lib/stores/user';
@@ -17,10 +17,10 @@
 
     const deleteMembership = async () => {
         try {
-            await sdkForConsole.teams.deleteMembership(selectedMember.teamId, selectedMember.$id);
+            await sdk.forConsole.teams.deleteMembership(selectedMember.teamId, selectedMember.$id);
 
             if (isUser) {
-                await sdkForConsole.account.deleteSession('current');
+                await sdk.forConsole.account.deleteSession('current');
                 await goto(`${base}/login`);
             } else {
                 dispatch('deleted');
@@ -43,11 +43,11 @@
     $: isUser = selectedMember?.userId === $user?.$id;
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+<Modal bind:show={showDelete} onSubmit={deleteMembership} warning>
     <svelte:fragment slot="header">
         {isUser ? 'Leave Organization' : 'Delete Member'}
     </svelte:fragment>
-    <p>
+    <p data-private>
         {isUser
             ? `Are you sure you want to leave '${selectedMember?.teamName}'?`
             : `Are you sure you want to delete ${selectedMember?.userName} from '${selectedMember?.teamName}'?`}

src/routes/console/organization-[organization]/deleteOrganization.svelte

@@ -2,7 +2,7 @@
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { organization, organizationList } from '$lib/stores/organization';
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
@@ -13,7 +13,7 @@
 
     const deleteOrg = async () => {
         try {
-            await sdkForConsole.teams.delete($organization.$id);
+            await sdk.forConsole.teams.delete($organization.$id);
             addNotification({
                 type: 'success',
                 message: `${$organization.name} has been deleted`
@@ -37,7 +37,7 @@
     };
 </script>
 
-<Modal on:submit={deleteOrg} bind:show={showDelete} warning>
+<Modal onSubmit={deleteOrg} 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})

src/routes/console/organization-[organization]/header.svelte

@@ -72,7 +72,9 @@
         </DropList>
         <div class="u-margin-inline-start-auto">
             <div class="u-flex u-gap-16">
-                <AvatarGroup size={40} {avatars} total={$members?.total ?? 0} />
+                <a href={`${path}/members`}>
+                    <AvatarGroup size={40} {avatars} total={$members?.total ?? 0} />
+                </a>
                 <Button secondary on:click={() => newMemberModal.set(true)}>
                     <span class="icon-plus" aria-hidden="true" />
                     <span class="text">Invite</span>

src/routes/console/organization-[organization]/members/[[page]]/+page.svelte

@@ -1,38 +1,37 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { AvatarInitials, Heading, Pagination } from '$lib/components';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+    import { Pill } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
     import {
-        TableHeader,
         TableBody,
-        TableCellHead,
         TableCell,
+        TableCellHead,
         TableCellText,
+        TableHeader,
         TableRow,
         TableScroll
     } from '$lib/elements/table';
-    import { AvatarInitials, Heading, Pagination } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { organization, members, newMemberModal } from '$lib/stores/organization';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
     import { addNotification } from '$lib/stores/notifications';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
-    import Delete from '../../deleteMember.svelte';
+    import { members, newMemberModal, organization } from '$lib/stores/organization';
+    import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import Delete from '../../deleteMember.svelte';
 
     export let data: PageData;
 
     let selectedMember: Models.Membership;
     let showDelete = false;
-
     const url = `${$page.url.origin}/console/`;
     const deleted = () => invalidate(Dependencies.ACCOUNT);
     const resend = async (member: Models.Membership) => {
         try {
-            await sdkForConsole.teams.createMembership(
+            await sdk.forConsole.teams.createMembership(
                 $organization.$id,
                 member.userEmail,
                 member.roles,
@@ -69,7 +68,7 @@
             <TableHeader>
                 <TableCellHead width={140}>Name</TableCellHead>
                 <TableCellHead width={120}>Email</TableCellHead>
-                <TableCellHead width={90}>Role</TableCellHead>
+                <TableCellHead width={90} />
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
@@ -87,17 +86,14 @@
                             </div>
                         </TableCell>
                         <TableCellText title="Email">{member.userEmail}</TableCellText>
-                        <TableCell title="Roles">
+                        <TableCell>
                             {#if member.invited && !member.joined}
                                 <Button
                                     secondary
                                     event="invite_resend"
                                     on:click={() => resend(member)}>Resend</Button>
-                            {:else}
-                                {member.roles}
                             {/if}
                         </TableCell>
-
                         <TableCell>
                             <button
                                 class="button is-only-icon is-text"

src/routes/console/organization-[organization]/members/[[page]]/+page.ts

@@ -1,17 +1,16 @@
 import { PAGE_LIMIT } from '$lib/constants';
 import { pageToOffset } from '$lib/helpers/load';
-import { sdkForConsole } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { Query } from '@aw-labs/appwrite-console';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent }) => {
-    await parent();
+export const load: PageLoad = async ({ params }) => {
     const page = Number(params.page);
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
         offset,
-        organizationMembers: await sdkForConsole.teams.listMemberships(params.organization, [
+        organizationMembers: await sdk.forConsole.teams.listMemberships(params.organization, [
             Query.limit(PAGE_LIMIT),
             Query.offset(offset)
         ])

src/routes/console/organization-[organization]/settings/+page.svelte

@@ -3,7 +3,7 @@
     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 { sdk } from '$lib/stores/sdk';
     import { members, organization } from '$lib/stores/organization';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
@@ -20,7 +20,7 @@
 
     async function updateName() {
         try {
-            await sdkForConsole.teams.update($organization.$id, name);
+            await sdk.forConsole.teams.update($organization.$id, name);
             await invalidate(Dependencies.ORGANIZATION);
             addNotification({
                 message: 'Name has been updated',
@@ -41,9 +41,9 @@
 
 <Container>
     {#if $organization}
-        <Form on:submit={updateName}>
+        <Form onSubmit={updateName}>
             <CardGrid>
-                <Heading tag="h6" size="7">Update Name</Heading>
+                <Heading tag="h6" size="7">Name</Heading>
 
                 <svelte:fragment slot="aside">
                     <ul>

src/routes/console/project-[project]/+layout.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
     import { UploadBox } from '$lib/components';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { onDestroy, onMount } from 'svelte';
     import { stats } from './store';
 
     let unsubscribe: { (): void };
 
     onMount(() => {
-        unsubscribe = sdkForConsole.client.subscribe(['project', 'console'], (response) => {
+        unsubscribe = sdk.forConsole.client.subscribe(['project', 'console'], (response) => {
             if (response.events.includes('stats.connections')) {
                 for (const [projectId, value] of Object.entries(response.payload)) {
                     stats.add(projectId, [new Date(response.timestamp).toISOString(), value]);

src/routes/console/project-[project]/+layout.ts

@@ -1,23 +1,19 @@
 import { Dependencies } from '$lib/constants';
-import { sdkForConsole, sdkForProject, setProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { error } from '@sveltejs/kit';
 import type { LayoutLoad } from './$types';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.PROJECT);
 
-    if (sdkForProject.client.config.project !== params.project) {
-        setProject(params.project);
-    }
-
     try {
-        const project = await sdkForConsole.projects.get(params.project);
+        const project = await sdk.forConsole.projects.get(params.project);
         localStorage.setItem('project', project.$id);
         localStorage.setItem('organization', project.teamId);
 
         return {
             project,
-            organization: await sdkForConsole.teams.get(project.teamId)
+            organization: await sdk.forConsole.teams.get(project.teamId)
         };
     } catch (e) {
         throw error(e.code, e.message);

src/routes/console/project-[project]/auth/+layout.ts

@@ -2,9 +2,7 @@ import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
 import type { LayoutLoad } from './$types';
 
-export const load: LayoutLoad = async ({ parent }) => {
-    await parent();
-
+export const load: LayoutLoad = async () => {
     return {
         header: Header,
         breadcrumbs: Breadcrumbs

src/routes/console/project-[project]/auth/[[page]]/+page.ts

@@ -1,11 +1,10 @@
 import { Query } from '@aw-labs/appwrite-console';
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { pageToOffset } from '$lib/helpers/load';
 import { PAGE_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent, url }) => {
-    await parent();
+export const load: PageLoad = async ({ params, url }) => {
     const page = Number(params.page);
     const offset = pageToOffset(page, PAGE_LIMIT);
     const search = url.search.slice(1) ?? undefined;
@@ -14,7 +13,7 @@ export const load: PageLoad = async ({ params, parent, url }) => {
         offset,
         search,
         page,
-        users: await sdkForProject.users.list(
+        users: await sdk.forProject.users.list(
             [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
             search
         )

src/routes/console/project-[project]/auth/appleOAuth.svelte

@@ -3,7 +3,7 @@
     import { Modal, CopyInput, Alert } from '$lib/components';
     import { Button, InputText, InputTextarea, InputSwitch, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { onMount } from 'svelte';
     import { invalidate } from '$app/navigation';
@@ -29,7 +29,7 @@
     const projectId = $page.params.project;
     const update = async () => {
         try {
-            await sdkForConsole.projects.updateOAuth2(
+            await sdk.forConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
                 appId,
@@ -57,7 +57,7 @@
     $: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" show on:close>
+<Modal {error} onSubmit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -84,7 +84,7 @@
             <p>URI</p>
             <CopyInput
                 value={`${
-                    sdkForConsole.client.config.endpoint
+                    sdk.forConsole.client.config.endpoint
                 }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         </div>
     </FormList>

src/routes/console/project-[project]/auth/auth0OAuth.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
     import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
@@ -27,7 +27,7 @@
     const projectId = $page.params.project;
     const update = async () => {
         try {
-            await sdkForConsole.projects.updateOAuth2(
+            await sdk.forConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
                 appId,
@@ -58,7 +58,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -93,7 +93,7 @@
             <p>URI</p>
             <CopyInput
                 value={`${
-                    sdkForConsole.client.config.endpoint
+                    sdk.forConsole.client.config.endpoint
                 }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         </div>
     </FormList>

src/routes/console/project-[project]/auth/authentikOAuth.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
     import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
@@ -27,7 +27,7 @@
     const projectId = $page.params.project;
     const update = async () => {
         try {
-            await sdkForConsole.projects.updateOAuth2(
+            await sdk.forConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
                 appId,
@@ -58,7 +58,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -93,7 +93,7 @@
             <p>URI</p>
             <CopyInput
                 value={`${
-                    sdkForConsole.client.config.endpoint
+                    sdk.forConsole.client.config.endpoint
                 }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         </div>
     </FormList>

src/routes/console/project-[project]/auth/createTeam.svelte

@@ -4,7 +4,7 @@
     import { Pill } from '$lib/elements';
     import { InputText, Button, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { ID } from '@aw-labs/appwrite-console';
     import { createEventDispatcher } from 'svelte';
 
@@ -17,7 +17,7 @@
 
     const create = async () => {
         try {
-            const team = await sdkForProject.teams.create(id ?? ID.unique(), name);
+            const team = await sdk.forProject.teams.create(id ?? ID.unique(), name);
             name = '';
             showCreate = false;
             showCustomId = false;
@@ -41,7 +41,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create Team</svelte:fragment>
     <FormList>
         <InputText

src/routes/console/project-[project]/auth/createUser.svelte

@@ -11,7 +11,7 @@
         FormList
     } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { ID } from '@aw-labs/appwrite-console';
     import { createEventDispatcher } from 'svelte';
 
@@ -25,7 +25,7 @@
 
     const create = async () => {
         try {
-            const user = await sdkForProject.users.create(
+            const user = await sdk.forProject.users.create(
                 id ?? ID.unique(),
                 mail,
                 phone,
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create User</svelte:fragment>
     <FormList>
         <InputText

src/routes/console/project-[project]/auth/gitlabOAuth.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
     import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
@@ -27,7 +27,7 @@
     const projectId = $page.params.project;
     const update = async () => {
         try {
-            await sdkForConsole.projects.updateOAuth2(
+            await sdk.forConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
                 appId,
@@ -56,7 +56,7 @@
         clientSecret && endpoint ? JSON.stringify({ clientSecret, endpoint }) : provider.secret;
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -91,7 +91,7 @@
             <p>URI</p>
             <CopyInput
                 value={`${
-                    sdkForConsole.client.config.endpoint
+                    sdk.forConsole.client.config.endpoint
                 }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         </div>
     </FormList>

src/routes/console/project-[project]/auth/mainOAuth.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
     import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
@@ -28,7 +28,7 @@
 
     const update = async () => {
         try {
-            await sdkForConsole.projects.updateOAuth2(
+            await sdk.forConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
                 appId,
@@ -54,7 +54,7 @@
     };
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -84,7 +84,7 @@
             <p>URI</p>
             <CopyInput
                 value={`${
-                    sdkForConsole.client.config.endpoint
+                    sdk.forConsole.client.config.endpoint
                 }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         </div>
     </FormList>

src/routes/console/project-[project]/auth/microsoftOAuth.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
     import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
@@ -28,7 +28,7 @@
 
     const update = async () => {
         try {
-            await sdkForConsole.projects.updateOAuth2(
+            await sdk.forConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
                 appId,
@@ -57,7 +57,7 @@
         clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" show on:close>
+<Modal {error} onSubmit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -93,7 +93,7 @@
             <p>URI</p>
             <CopyInput
                 value={`${
-                    sdkForConsole.client.config.endpoint
+                    sdk.forConsole.client.config.endpoint
                 }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         </div>
     </FormList>

src/routes/console/project-[project]/auth/oktaOAuth.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
     import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
@@ -31,7 +31,7 @@
 
     const update = async () => {
         try {
-            await sdkForConsole.projects.updateOAuth2(
+            await sdk.forConsole.projects.updateOAuth2(
                 projectId,
                 provider.name.toLowerCase(),
                 appId,
@@ -62,7 +62,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" show on:close>
+<Modal {error} onSubmit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
@@ -103,7 +103,7 @@
             <p>URI</p>
             <CopyInput
                 value={`${
-                    sdkForConsole.client.config.endpoint
+                    sdk.forConsole.client.config.endpoint
                 }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
         </div>
     </FormList>

src/routes/console/project-[project]/auth/security/updateSessionLength.svelte

@@ -6,7 +6,7 @@
     import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
     import { createTimeUnitPair } from '$lib/helpers/unit';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
 
     const projectId = $project.$id;
@@ -15,7 +15,7 @@
 
     async function updateSessionLength() {
         try {
-            await sdkForConsole.projects.updateAuthDuration(projectId, $baseValue);
+            await sdk.forConsole.projects.updateAuthDuration(projectId, $baseValue);
             invalidate(Dependencies.PROJECT);
 
             addNotification({

src/routes/console/project-[project]/auth/security/updateSessionsLimit.svelte

@@ -3,7 +3,7 @@
     import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, InputNumber } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
 
     const projectId = $project.$id;
@@ -12,7 +12,7 @@
 
     async function updateSessionsLimit() {
         try {
-            await sdkForConsole.projects.updateAuthSessionsLimit(projectId, maxSessions);
+            await sdk.forConsole.projects.updateAuthSessionsLimit(projectId, maxSessions);
 
             addNotification({
                 type: 'success',
@@ -29,7 +29,7 @@
     }
 </script>
 
-<Form on:submit={updateSessionsLimit}>
+<Form onSubmit={updateSessionsLimit}>
     <CardGrid>
         <Heading tag="h2" size="6">Sessions Limit</Heading>
         <p>Maximum number of active sessions allowed per user.</p>

src/routes/console/project-[project]/auth/security/updateUsersLimit.svelte

@@ -7,7 +7,7 @@
     import { Button } from '$lib/elements/forms';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
 
     const projectId = $project.$id;
@@ -31,7 +31,7 @@
     async function updateLimit() {
         submitting = true;
         try {
-            await sdkForConsole.projects.updateAuthLimit(projectId, isLimited ? newLimit : 0);
+            await sdk.forConsole.projects.updateAuthLimit(projectId, isLimited ? newLimit : 0);
             invalidate(Dependencies.PROJECT).then(() => (submitting = false));
             addNotification({
                 type: 'success',

src/routes/console/project-[project]/auth/settings/+page.svelte

@@ -4,7 +4,7 @@
     import { InputSwitch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
     import { authMethods, type AuthMethod } from '$lib/stores/auth-methods';
     import { OAuthProviders } from '$lib/stores/oauth-providers';
@@ -22,7 +22,7 @@
 
     async function authUpdate(box: AuthMethod) {
         try {
-            await sdkForConsole.projects.updateAuthStatus(projectId, box.method, box.value);
+            await sdk.forConsole.projects.updateAuthStatus(projectId, box.method, box.value);
             addNotification({
                 type: 'success',
                 message: `${box.label} authentication has been ${

src/routes/console/project-[project]/auth/teams/[[page]]/+page.ts

@@ -1,11 +1,10 @@
 import { Query } from '@aw-labs/appwrite-console';
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { pageToOffset } from '$lib/helpers/load';
 import { PAGE_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent, url }) => {
-    await parent();
+export const load: PageLoad = async ({ params, url }) => {
     const page = Number(params.page);
     const offset = pageToOffset(page, PAGE_LIMIT);
     const search = url.search.slice(1) ?? undefined;
@@ -14,7 +13,7 @@ export const load: PageLoad = async ({ params, parent, url }) => {
         offset,
         search,
         page,
-        teams: await sdkForProject.teams.list(
+        teams: await sdk.forProject.teams.list(
             [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
             search
         )

src/routes/console/project-[project]/auth/teams/team-[team]/+layout.ts

@@ -1,18 +1,17 @@
 import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import type { LayoutLoad } from './$types';
 import { Dependencies } from '$lib/constants';
 import { error } from '@sveltejs/kit';
 
-export const load: LayoutLoad = async ({ params, parent, depends }) => {
-    await parent();
+export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.TEAM);
     try {
         return {
             header: Header,
             breadcrumbs: Breadcrumbs,
-            team: await sdkForProject.teams.get(params.team)
+            team: await sdk.forProject.teams.get(params.team)
         };
     } catch (e) {
         throw error(e.code, e.message);

src/routes/console/project-[project]/auth/teams/team-[team]/+page.svelte

@@ -4,7 +4,7 @@
     import { CardGrid, Box, Heading, AvatarInitials } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, Form } from '$lib/elements/forms';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { team } from './store';
@@ -22,7 +22,7 @@
 
     async function updateName() {
         try {
-            await sdkForProject.teams.update($page.params.team, teamName);
+            await sdk.forProject.teams.update($page.params.team, teamName);
             invalidate(Dependencies.TEAM);
             addNotification({
                 message: 'Name has been updated',
@@ -55,9 +55,9 @@
         </svelte:fragment>
     </CardGrid>
 
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
-            <Heading tag="h6" size="7">Update Name</Heading>
+            <Heading tag="h6" size="7">Name</Heading>
 
             <svelte:fragment slot="aside">
                 <ul>
@@ -78,7 +78,7 @@
 
     <CardGrid danger>
         <div>
-            <Heading tag="h6" size="7">Danger Zone</Heading>
+            <Heading tag="h6" size="7">Delete Team</Heading>
         </div>
 
         <p>

src/routes/console/project-[project]/auth/teams/team-[team]/activity/[[page]]/+page.ts

@@ -1,17 +1,16 @@
 import { Query } from '@aw-labs/appwrite-console';
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { pageToOffset } from '$lib/helpers/load';
 import { PAGE_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent }) => {
-    await parent();
+export const load: PageLoad = async ({ params }) => {
     const page = Number(params.page);
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
         offset,
-        logs: await sdkForProject.teams.listLogs(params.team, [
+        logs: await sdk.forProject.teams.listLogs(params.team, [
             Query.limit(PAGE_LIMIT),
             Query.offset(offset)
         ])

src/routes/console/project-[project]/auth/teams/team-[team]/createMembership.svelte

@@ -4,7 +4,7 @@
     import { Modal, Alert } from '$lib/components';
     import { Button, InputEmail, InputText, InputTags, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
 
     export let showCreate = false;
@@ -19,7 +19,7 @@
         const url = `${$page.url.origin}/console/project-${$page.params.project}/auth/teams/team-${$page.params.team}/members`;
 
         try {
-            const user = await sdkForProject.teams.createMembership(
+            const user = await sdk.forProject.teams.createMembership(
                 teamId,
                 email,
                 roles,
@@ -42,7 +42,7 @@
     };
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show={showCreate}>
+<Modal {error} onSubmit={create} size="big" bind:show={showCreate}>
     <svelte:fragment slot="header">Create Membership</svelte:fragment>
     <FormList>
         <InputEmail

src/routes/console/project-[project]/auth/teams/team-[team]/deleteMembership.svelte

@@ -6,7 +6,7 @@
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { createEventDispatcher } from 'svelte';
 
@@ -17,7 +17,7 @@
 
     const deleteMembership = async () => {
         try {
-            await sdkForProject.teams.deleteMembership(
+            await sdk.forProject.teams.deleteMembership(
                 selectedMembership.teamId,
                 selectedMembership.$id
             );
@@ -37,9 +37,9 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+<Modal bind:show={showDelete} onSubmit={deleteMembership} warning>
     <svelte:fragment slot="header">Delete Member</svelte:fragment>
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/auth/teams/team-[team]/deleteTeam.svelte

@@ -6,7 +6,7 @@
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
 
     export let showDelete = false;
@@ -14,7 +14,7 @@
 
     const deleteTeam = async () => {
         try {
-            await sdkForProject.teams.delete(team.$id);
+            await sdk.forProject.teams.delete(team.$id);
             showDelete = false;
             trackEvent(Submit.TeamDelete);
             await goto(`${base}/console/project-${$page.params.project}/auth/teams`);
@@ -28,10 +28,9 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteTeam} warning>
+<Modal bind:show={showDelete} onSubmit={deleteTeam} warning>
     <svelte:fragment slot="header">Delete Team</svelte:fragment>
-
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>{team.name}</b>?
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/auth/teams/team-[team]/members/[[page]]/+page.ts

@@ -1,11 +1,10 @@
 import { Query } from '@aw-labs/appwrite-console';
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { pageToOffset } from '$lib/helpers/load';
 import { Dependencies, PAGE_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent, depends, url }) => {
-    await parent();
+export const load: PageLoad = async ({ params, depends, url }) => {
     depends(Dependencies.MEMBERSHIPS);
     const teamId = params.team;
     const page = Number(params.page);
@@ -15,7 +14,7 @@ export const load: PageLoad = async ({ params, parent, depends, url }) => {
     return {
         offset,
         search,
-        memberships: await sdkForProject.teams.listMemberships(
+        memberships: await sdk.forProject.teams.listMemberships(
             teamId,
             [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
             search

src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts

@@ -1,11 +1,10 @@
 import type { Models } from '@aw-labs/appwrite-console';
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent }) => {
-    await parent();
+export const load: PageLoad = async ({ params }) => {
     const { period } = params;
-    const response = await sdkForProject.users.getUsage(period ?? '30d');
+    const response = await sdk.forProject.users.getUsage(period ?? '30d');
     return {
         count: response.usersCount as unknown as Models.Metric[],
         created: response.usersCreate as unknown as Models.Metric[],

src/routes/console/project-[project]/auth/user-[user]/+layout.ts

@@ -1,19 +1,18 @@
 import type { LayoutLoad } from './$types';
 import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { Dependencies } from '$lib/constants';
 import { error } from '@sveltejs/kit';
 
-export const load: LayoutLoad = async ({ params, parent, depends }) => {
-    await parent();
+export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.USER);
 
     try {
         return {
             header: Header,
             breadcrumbs: Breadcrumbs,
-            user: await sdkForProject.users.get(params.user)
+            user: await sdk.forProject.users.get(params.user)
         };
     } catch (e) {
         throw error(e.code, e.message);

src/routes/console/project-[project]/auth/user-[user]/activity/[[page]]/+page.ts

@@ -1,17 +1,16 @@
 import { Query } from '@aw-labs/appwrite-console';
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { pageToOffset } from '$lib/helpers/load';
 import { PAGE_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent }) => {
-    await parent();
+export const load: PageLoad = async ({ params }) => {
     const page = Number(params.page);
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
         offset,
-        logs: await sdkForProject.users.listLogs(params.user, [
+        logs: await sdk.forProject.users.listLogs(params.user, [
             Query.limit(PAGE_LIMIT),
             Query.offset(offset)
         ])

src/routes/console/project-[project]/auth/user-[user]/dangerZone.svelte

@@ -9,7 +9,7 @@
 
 <CardGrid danger>
     <div>
-        <Heading tag="h6" size="7">Danger Zone</Heading>
+        <Heading tag="h6" size="7">Delete User</Heading>
     </div>
     <p>
         The user will be permanently deleted, including all data associated with this user. This
@@ -33,11 +33,11 @@
                 {/if}
             </svelte:fragment>
             <svelte:fragment slot="title">
-                <h6 class="u-bold u-trim-1">
+                <h6 class="u-bold u-trim-1" data-private>
                     {$user.name || $user.email || $user.phone || 'Anonymous'}
                 </h6>
             </svelte:fragment>
-            <p class="u-trim-1">
+            <p class="u-trim-1" data-private>
                 {$user.email && $user.phone
                     ? [$user.email, $user.phone].join(',')
                     : $user.email || $user.phone}

src/routes/console/project-[project]/auth/user-[user]/deleteAllSessions.svelte

@@ -6,14 +6,14 @@
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { user } from './store';
 
     export let showDeleteAll = false;
 
     const deleteAllSessions = async () => {
         try {
-            await sdkForProject.users.deleteSessions($page.params.user);
+            await sdk.forProject.users.deleteSessions($page.params.user);
             invalidate(Dependencies.SESSIONS);
             showDeleteAll = false;
             addNotification({
@@ -31,9 +31,9 @@
     };
 </script>
 
-<Modal bind:show={showDeleteAll} on:submit={deleteAllSessions} warning>
+<Modal bind:show={showDeleteAll} onSubmit={deleteAllSessions} warning>
     <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/auth/user-[user]/deleteMembership.svelte

@@ -7,7 +7,7 @@
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
 
     export let showDelete = false;
@@ -15,7 +15,7 @@
 
     const deleteMembership = async () => {
         try {
-            await sdkForProject.teams.deleteMembership(
+            await sdk.forProject.teams.deleteMembership(
                 selectedMembership.teamId,
                 selectedMembership.$id
             );
@@ -40,10 +40,10 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+<Modal bind:show={showDelete} onSubmit={deleteMembership} warning>
     <svelte:fragment slot="header">Delete Member</svelte:fragment>
     {#if selectedMembership}
-        <p>
+        <p data-private>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
         </p>
     {/if}

src/routes/console/project-[project]/auth/user-[user]/deleteSession.svelte

@@ -6,14 +6,14 @@
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
 
     export let showDelete = false;
     export let selectedSessionId: string;
 
     const deleteSession = async () => {
         try {
-            await sdkForProject.users.deleteSession($page.params.user, selectedSessionId);
+            await sdk.forProject.users.deleteSession($page.params.user, selectedSessionId);
             invalidate(Dependencies.SESSIONS);
             addNotification({
                 type: 'success',
@@ -30,7 +30,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteSession} warning>
+<Modal bind:show={showDelete} onSubmit={deleteSession} warning>
     <svelte:fragment slot="header">Delete Sessions</svelte:fragment>
 
     <p>Are you sure you want to delete this session?</p>

src/routes/console/project-[project]/auth/user-[user]/deleteUser.svelte

@@ -5,7 +5,7 @@
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { user } from './store';
     import { project } from '../../store';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
@@ -14,7 +14,7 @@
 
     const deleteUser = async () => {
         try {
-            await sdkForProject.users.delete($user.$id);
+            await sdk.forProject.users.delete($user.$id);
             showDelete = false;
             addNotification({
                 type: 'success',
@@ -32,9 +32,9 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteUser} warning>
+<Modal bind:show={showDelete} onSubmit={deleteUser} 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>
+    <p data-private>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit>Delete</Button>

src/routes/console/project-[project]/auth/user-[user]/memberships/[[page]]/+page.svelte

@@ -41,7 +41,7 @@
                     <TableRowLink
                         href={`${base}/console/project-${project}/auth/teams/team-${membership.teamId}`}>
                         <TableCellText title="Name">
-                            <div class="u-flex u-gap-12">
+                            <div class="u-flex u-cross-center u-gap-12">
                                 <AvatarInitials size={32} name={membership.teamName} />
                                 <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
                             </div>

src/routes/console/project-[project]/auth/user-[user]/memberships/[[page]]/+page.ts

@@ -1,10 +1,8 @@
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent }) => {
-    await parent();
-
+export const load: PageLoad = async ({ params }) => {
     return {
-        memberships: await sdkForProject.users.listMemberships(params.user)
+        memberships: await sdk.forProject.users.listMemberships(params.user)
     };
 };

src/routes/console/project-[project]/auth/user-[user]/sessions/[[page]]/+page.svelte

@@ -12,7 +12,7 @@
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import DeleteAllSessions from '../../deleteAllSessions.svelte';
     import DeleteSessions from '../../deleteSession.svelte';
     import type { PageData } from './$types';
@@ -23,7 +23,8 @@
     let showDeleteAll = false;
     let selectedSessionId: string;
 
-    const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 40, 40);
+    const getBrowser = (clientCode: string) =>
+        sdk.forProject.avatars.getBrowser(clientCode, 40, 40);
 </script>
 
 <Container>
@@ -90,7 +91,7 @@
                 <Button
                     external
                     secondary
-                    href="https://appwrite.io/docs/server/auth?sdk=nodejs-default#usersGetSessions">
+                    href="https://appwrite.io/docs/client/account#accountCreateEmailSession">
                     Documentation
                 </Button>
             </div>

src/routes/console/project-[project]/auth/user-[user]/sessions/[[page]]/+page.ts

@@ -1,12 +1,10 @@
 import { Dependencies } from '$lib/constants';
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent, depends }) => {
+export const load: PageLoad = async ({ params, depends }) => {
     depends(Dependencies.SESSIONS);
-    await parent();
-
     return {
-        sessions: await sdkForProject.users.listSessions(params.user)
+        sessions: await sdk.forProject.users.listSessions(params.user)
     };
 };

src/routes/console/project-[project]/auth/user-[user]/updateEmail.svelte

@@ -5,7 +5,7 @@
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputEmail } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { user } from './store';
 
@@ -16,7 +16,7 @@
 
     async function updateEmail() {
         try {
-            await sdkForProject.users.updateEmail($user.$id, userEmail);
+            await sdk.forProject.users.updateEmail($user.$id, userEmail);
             invalidate(Dependencies.USER);
             addNotification({
                 message: 'Email has been updated',
@@ -33,9 +33,9 @@
     }
 </script>
 
-<Form on:submit={updateEmail}>
+<Form onSubmit={updateEmail}>
     <CardGrid>
-        <Heading tag="h6" size="7">Update Email</Heading>
+        <Heading tag="h6" size="7">Email</Heading>
         <svelte:fragment slot="aside">
             <ul>
                 <InputEmail

src/routes/console/project-[project]/auth/user-[user]/updateName.svelte

@@ -5,7 +5,7 @@
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { user } from './store';
 
@@ -16,7 +16,7 @@
 
     async function updateName() {
         try {
-            await sdkForProject.users.updateName($user.$id, userName);
+            await sdk.forProject.users.updateName($user.$id, userName);
             invalidate(Dependencies.USER);
             addNotification({
                 message: 'Name has been updated',
@@ -33,12 +33,12 @@
     }
 </script>
 
-<Form on:submit={updateName}>
+<Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Update Name</Heading>
+        <Heading tag="h6" size="7">Name</Heading>
 
         <svelte:fragment slot="aside">
-            <ul>
+            <ul data-private>
                 <InputText
                     id="name"
                     label="Name"

src/routes/console/project-[project]/auth/user-[user]/updatePassword.svelte

@@ -3,14 +3,14 @@
     import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { user } from './store';
 
     let newPassword: string = null;
 
     async function updatePassword() {
         try {
-            await sdkForProject.users.updatePassword($user.$id, newPassword);
+            await sdk.forProject.users.updatePassword($user.$id, newPassword);
             newPassword = null;
             addNotification({
                 message: 'Password has been updated',
@@ -27,10 +27,10 @@
     }
 </script>
 
-<Form on:submit={updatePassword}>
+<Form onSubmit={updatePassword}>
     <CardGrid>
         <div>
-            <Heading tag="h6" size="7">Update Password</Heading>
+            <Heading tag="h6" size="7">Password</Heading>
         </div>
 
         <p>