Merge branch 'main' of https://github.com/appwrite/appwrite-console-poc into feat-query-params

.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

@@ -4493,6 +4493,23 @@
             "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
             "dev": true
         },
+        "node_modules/happy-dom": {
+            "version": "8.9.0",
+            "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-8.9.0.tgz",
+            "integrity": "sha512-JZwJuGdR7ko8L61136YzmrLv7LgTh5b8XaEM3P709mLjyQuXJ3zHTDXvUtBBahRjGlcYW0zGjIiEWizoTUGKfA==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "css.escape": "^1.5.1",
+                "he": "^1.2.0",
+                "iconv-lite": "^0.6.3",
+                "node-fetch": "^2.x.x",
+                "webidl-conversions": "^7.0.0",
+                "whatwg-encoding": "^2.0.0",
+                "whatwg-mimetype": "^3.0.0"
+            }
+        },
         "node_modules/has": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -4562,6 +4579,17 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/he": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "bin": {
+                "he": "bin/he"
+            }
+        },
         "node_modules/html-encoding-sniffer": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",

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/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/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/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" data-private>
-    <div class="table-wrapper">
-        <table class="table" class:is-sticky-scroll={isSticky}>
+    <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/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;
         }
     }

src/lib/layout/shell.svelte

@@ -81,9 +81,14 @@
     .main-side {
         z-index: 25;
     }
+
     @media (max-width: 550.99px), (min-width: 551px) and (max-width: 1198.99px) {
         .main-side {
             top: 4.5rem;
         }
     }
+
+    .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.ts

@@ -2,7 +2,7 @@ import '@appwrite.io/pink';
 import '@appwrite.io/pink-icons';
 import 'tippy.js/dist/tippy.css';
 import LogRocket from 'logrocket';
-import { sdkForConsole } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { redirect } from '@sveltejs/kit';
 import { Dependencies } from '$lib/constants';
 import type { LayoutLoad } from './$types';
@@ -12,7 +12,7 @@ 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,
@@ -21,7 +21,7 @@ export const load: LayoutLoad = async ({ depends, url }) => {
 
         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,7 +43,7 @@
     $: 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>

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.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 ({ parent, url }) => {
-    await parent();
+export const load: PageLoad = async ({ url }) => {
     const page = Number(url.searchParams.get('page'));
     const offset = pageToOffset(page, PAGE_LIMIT);
     const search = url.searchParams.get('search') ?? undefined;
@@ -14,7 +13,7 @@ export const load: PageLoad = async ({ 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,7 +37,7 @@
     };
 </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 data-private>
         Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?

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,7 +28,7 @@
     };
 </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 data-private>
         Are you sure you want to delete <b>{team.name}</b>?

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

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,7 +31,7 @@
     };
 </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 data-private>
         Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>

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,7 +40,7 @@
     };
 </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 data-private>

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,7 +32,7 @@
     };
 </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 data-private>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
     <svelte:fragment slot="footer">

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,9 +33,9 @@
     }
 </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 data-private>

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>

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

@@ -5,7 +5,7 @@
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputPhone } 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 updatePhone() {
         try {
-            await sdkForProject.users.updatePhone($user.$id, userPhone);
+            await sdk.forProject.users.updatePhone($user.$id, userPhone);
             invalidate(Dependencies.USER);
             addNotification({
                 message: 'Phone has been updated',
@@ -33,9 +33,9 @@
     }
 </script>
 
-<Form on:submit={updatePhone}>
+<Form onSubmit={updatePhone}>
     <CardGrid>
-        <Heading tag="h6" size="7">Update Phone</Heading>
+        <Heading tag="h6" size="7">Phone</Heading>
         <svelte:fragment slot="aside">
             <ul>
                 <InputPhone

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

@@ -5,7 +5,7 @@
     import { Dependencies } from '$lib/constants';
     import { Button, Form } 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';
 
@@ -35,7 +35,7 @@
         try {
             let updatedPrefs = Object.fromEntries(prefs);
 
-            await sdkForProject.users.updatePrefs($user.$id, updatedPrefs);
+            await sdk.forProject.users.updatePrefs($user.$id, updatedPrefs);
             invalidate(Dependencies.USER);
             arePrefsDisabled = true;
 
@@ -54,7 +54,7 @@
     }
 </script>
 
-<Form on:submit={updatePrefs}>
+<Form onSubmit={updatePrefs}>
     <CardGrid>
         <Heading tag="h6" size="7">User Preferences</Heading>
         <p>

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

@@ -7,7 +7,7 @@
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { user } from './store';
 
     let showVerifcationDropdown = false;
@@ -15,7 +15,7 @@
     async function updateVerificationEmail() {
         showVerifcationDropdown = false;
         try {
-            await sdkForProject.users.updateEmailVerification($user.$id, !$user.emailVerification);
+            await sdk.forProject.users.updateEmailVerification($user.$id, !$user.emailVerification);
             invalidate(Dependencies.USER);
             addNotification({
                 message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
@@ -35,7 +35,7 @@
     async function updateVerificationPhone() {
         showVerifcationDropdown = false;
         try {
-            await sdkForProject.users.updatePhoneVerification($user.$id, !$user.phoneVerification);
+            await sdk.forProject.users.updatePhoneVerification($user.$id, !$user.phoneVerification);
             invalidate(Dependencies.USER);
             addNotification({
                 message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
@@ -54,7 +54,7 @@
     }
     async function updateStatus() {
         try {
-            await sdkForProject.users.updateStatus($user.$id, !$user.status);
+            await sdk.forProject.users.updateStatus($user.$id, !$user.status);
             await invalidate(Dependencies.USER);
             addNotification({
                 message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${

src/routes/console/project-[project]/databases/+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]/databases/[[page]]/+page.ts

@@ -1,17 +1,16 @@
-import { Query } from '@aw-labs/appwrite-console';
-import { sdkForProject } from '$lib/stores/sdk';
-import { pageToOffset } from '$lib/helpers/load';
 import { CARD_LIMIT } from '$lib/constants';
+import { pageToOffset } from '$lib/helpers/load';
+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, CARD_LIMIT);
 
     return {
         offset,
-        databases: await sdkForProject.databases.list([
+        databases: await sdk.forProject.databases.list([
             Query.limit(CARD_LIMIT),
             Query.offset(offset),
             Query.orderDesc('$createdAt')

src/routes/console/project-[project]/databases/create.svelte

@@ -4,7 +4,7 @@
     import { Pill } from '$lib/elements';
     import { Button, InputText, 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';
 
@@ -18,7 +18,7 @@
 
     const create = async () => {
         try {
-            const database = await sdkForProject.databases.create(id ? id : ID.unique(), name);
+            const database = await sdk.forProject.databases.create(id ? id : ID.unique(), name);
             showCreate = false;
             dispatch('created', database);
             addNotification({
@@ -39,7 +39,7 @@
     };
 </script>
 
-<Modal size="big" on:submit={create} bind:show={showCreate}>
+<Modal size="big" onSubmit={create} bind:show={showCreate}>
     <svelte:fragment slot="header">Create Database</svelte:fragment>
     <FormList>
         <InputText

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

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

src/routes/console/project-[project]/databases/database-[database]/[[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 { CARD_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, CARD_LIMIT);
 
     return {
         offset,
-        collections: await sdkForProject.databases.listCollections(params.database, [
+        collections: await sdk.forProject.databases.listCollections(params.database, [
             Query.limit(CARD_LIMIT),
             Query.offset(offset),
             Query.orderDesc('$createdAt')

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

@@ -1,14 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
     import { onDestroy, onMount } from 'svelte';
     import { collection } from './store';
 
     let unsubscribe: { (): void };
 
     onMount(() => {
-        unsubscribe = sdkForConsole.client.subscribe('console', (response) => {
+        unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
             if (
                 response.events.includes('databases.*.collections.*.attributes.*') ||
                 response.events.includes('databases.*.collections.*.indexes.*')

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

@@ -1,19 +1,17 @@
-import { sdkForProject } from '$lib/stores/sdk';
+import { sdk } from '$lib/stores/sdk';
 import { Dependencies } from '$lib/constants';
 import type { LayoutLoad } from './$types';
 import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
 import { error } from '@sveltejs/kit';
 
-export const load: LayoutLoad = async ({ params, parent, depends }) => {
+export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.COLLECTION);
-    await parent();
-
     try {
         return {
             header: Header,
             breadcrumbs: Breadcrumbs,
-            collection: await sdkForProject.databases.getCollection(
+            collection: await sdk.forProject.databases.getCollection(
                 params.database,
                 params.collection
             )

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte

@@ -91,7 +91,7 @@
         {#if data.documents.total}
             <TableScroll isSticky>
                 <TableHeader>
-                    <TableCellHead eyebrow={false}>Document ID</TableCellHead>
+                    <TableCellHead width={200} eyebrow={false}>Document ID</TableCellHead>
                     {#each columns as column}
                         <TableCellHead eyebrow={false}>{column.title}</TableCellHead>
                     {/each}

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.ts

@@ -1,21 +1,20 @@
-import { Query } from '@aw-labs/appwrite-console';
-import { sdkForProject } from '$lib/stores/sdk';
-import { pageToOffset } from '$lib/helpers/load';
 import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import { pageToOffset } from '$lib/helpers/load';
+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, depends }) => {
-    await parent();
+export const load: PageLoad = async ({ params, depends }) => {
     depends(Dependencies.DOCUMENTS);
     const page = Number(params.page);
     const offset = pageToOffset(page, PAGE_LIMIT);
 
     return {
         offset,
-        documents: await sdkForProject.databases.listDocuments(params.database, params.collection, [
-            Query.limit(PAGE_LIMIT),
-            Query.offset(offset),
-            Query.orderDesc('$createdAt')
-        ])
+        documents: await sdk.forProject.databases.listDocuments(
+            params.database,
+            params.collection,
+            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')]
+        )
     };
 };

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.ts

@@ -1,19 +1,19 @@
 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.databases.listCollectionLogs(params.database, params.collection, [
-            Query.limit(PAGE_LIMIT),
-            Query.offset(offset)
-        ])
+        logs: await sdk.forProject.databases.listCollectionLogs(
+            params.database,
+            params.collection,
+            [Query.limit(PAGE_LIMIT), Query.offset(offset)]
+        )
     };
 };

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte

@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
     import type { Models } from '@aw-labs/appwrite-console';
-    import { sdkForProject } from '$lib/stores/sdk';
+    import { sdk } from '$lib/stores/sdk';
 
     export async function submitBoolean(
         databaseId: string,
@@ -8,7 +8,7 @@
         key: string,
         data: Partial<Models.AttributeBoolean>
     ) {
-        await sdkForProject.databases.createBooleanAttribute(
+        await sdk.forProject.databases.createBooleanAttribute(
             databaseId,
             collectionId,
             key,