From b1265c81549c1af636e3926a8de006a565957965 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 11 Oct 2022 17:50:15 +0200
Subject: [PATCH 1/7] feat: persistent pagination

---
 src/lib/components/pagination.svelte          |  2 +-
 src/lib/stores/pagination.ts                  | 36 +++++++++++++++++++
 .../authentication/+page.svelte               |  9 ++---
 3 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/stores/pagination.ts

diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index f3b8218d6..12d48afb3 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -69,7 +69,7 @@
                             <button
                                 type="button"
                                 class="button"
-                                on:click={() => handleOptionClick(page)}
+                                on:click={() => handleOptionClick(+page)}
                                 class:is-disabled={currentPage === page}
                                 class:is-text={currentPage !== page}
                                 aria-label="page">
diff --git a/src/lib/stores/pagination.ts b/src/lib/stores/pagination.ts
new file mode 100644
index 000000000..bef786f64
--- /dev/null
+++ b/src/lib/stores/pagination.ts
@@ -0,0 +1,36 @@
+import { goto } from '$app/navigation';
+import { page } from '$app/stores';
+import { get, writable } from 'svelte/store';
+
+export function createPersistenPagination(limit: number) {
+    const url = get(page).url;
+    const current = +(url.searchParams.get('page') ?? 1);
+    const offset = current * limit - limit;
+    const { subscribe, set } = writable<number>(offset < 0 ? 0 : offset);
+
+    subscribe((n) => {
+        const { pathname, searchParams } = get(page).url;
+        const newPage = n / limit + 1;
+        if (newPage > 0) {
+            searchParams.set('page', newPage.toString());
+        } else {
+            searchParams.delete('page');
+        }
+        let target = pathname;
+
+        const hasParams = Array.from(searchParams.keys()).length > 0;
+
+        if (hasParams) {
+            target += `?${searchParams.toString()}`;
+        }
+
+        goto(target, {
+            noscroll: true
+        });
+    });
+
+    return {
+        subscribe,
+        set
+    };
+}
diff --git a/src/routes/console/project-[project]/authentication/+page.svelte b/src/routes/console/project-[project]/authentication/+page.svelte
index 27daffdee..b9768357a 100644
--- a/src/routes/console/project-[project]/authentication/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/+page.svelte
@@ -22,10 +22,11 @@
     import { usersList } from './store';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
     let showCreate = false;
     let search = '';
-    let offset = 0;
+    let offset = createPersistenPagination($pageLimit);
 
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
@@ -33,9 +34,9 @@
         await goto(`${base}/console/project-${project}/authentication/user/${event.detail.$id}`);
     };
 
-    $: if (search) offset = 0;
+    $: if (search) $offset = 0;
     $: usersList.load(
-        [Query.limit($pageLimit), Query.offset(offset), Query.orderDesc('$createdAt')],
+        [Query.limit($pageLimit), Query.offset($offset), Query.orderDesc('$createdAt')],
         search
     );
 </script>
@@ -126,7 +127,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$usersList.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$usersList.total} />
+            <Pagination limit={$pageLimit} bind:offset={$offset} sum={$usersList.total} />
         </div>
     {:else if search}
         <EmptySearch>

From 1fb109108f1060c44a9511f7ed7c5373ba1159cd Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 11 Oct 2022 17:54:06 +0200
Subject: [PATCH 2/7] fix: hide page 1

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

diff --git a/src/lib/stores/pagination.ts b/src/lib/stores/pagination.ts
index bef786f64..9e4f8e751 100644
--- a/src/lib/stores/pagination.ts
+++ b/src/lib/stores/pagination.ts
@@ -11,7 +11,7 @@ export function createPersistenPagination(limit: number) {
     subscribe((n) => {
         const { pathname, searchParams } = get(page).url;
         const newPage = n / limit + 1;
-        if (newPage > 0) {
+        if (newPage > 1) {
             searchParams.set('page', newPage.toString());
         } else {
             searchParams.delete('page');

From 05ea4f012af2d0ac01b6fd9a126c9ebd411d08e1 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 11 Oct 2022 18:36:28 +0200
Subject: [PATCH 3/7] fix: pagination store popstate

---
 src/lib/stores/pagination.ts | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/lib/stores/pagination.ts b/src/lib/stores/pagination.ts
index 9e4f8e751..13e9e3fd4 100644
--- a/src/lib/stores/pagination.ts
+++ b/src/lib/stores/pagination.ts
@@ -1,4 +1,4 @@
-import { goto } from '$app/navigation';
+import { afterNavigate, goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { get, writable } from 'svelte/store';
 
@@ -8,14 +8,17 @@ export function createPersistenPagination(limit: number) {
     const offset = current * limit - limit;
     const { subscribe, set } = writable<number>(offset < 0 ? 0 : offset);
 
-    subscribe((n) => {
-        const { pathname, searchParams } = get(page).url;
+    let keepHistory = false;
+    const apply = (n: number) => {
+        const { pathname, searchParams, href } = get(page).url;
         const newPage = n / limit + 1;
+
         if (newPage > 1) {
             searchParams.set('page', newPage.toString());
         } else {
             searchParams.delete('page');
         }
+
         let target = pathname;
 
         const hasParams = Array.from(searchParams.keys()).length > 0;
@@ -24,11 +27,30 @@ export function createPersistenPagination(limit: number) {
             target += `?${searchParams.toString()}`;
         }
 
+        if (keepHistory) {
+            keepHistory = false;
+            return;
+        }
+
+        if (href.endsWith(target)) {
+            return;
+        }
+
         goto(target, {
             noscroll: true
         });
+    };
+
+    afterNavigate(({ type, to }) => {
+        if (type === 'popstate') {
+            const target = +(to.url.searchParams.get('page') ?? 1);
+            keepHistory = true;
+            set(target * limit - limit);
+        }
     });
 
+    subscribe(apply);
+
     return {
         subscribe,
         set

From 45686d0b441a499fcade0096af31f2989a780599 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 11 Oct 2022 18:56:17 +0200
Subject: [PATCH 4/7] fix: improve condition for persistent pagination

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

diff --git a/src/lib/stores/pagination.ts b/src/lib/stores/pagination.ts
index 13e9e3fd4..7829d9956 100644
--- a/src/lib/stores/pagination.ts
+++ b/src/lib/stores/pagination.ts
@@ -21,7 +21,7 @@ export function createPersistenPagination(limit: number) {
 
         let target = pathname;
 
-        const hasParams = Array.from(searchParams.keys()).length > 0;
+        const hasParams = searchParams.toString() !== '';
 
         if (hasParams) {
             target += `?${searchParams.toString()}`;

From 53f9ba19e9d5a38fb71002d0fd21c5209d1da77f Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 11 Oct 2022 21:43:42 +0200
Subject: [PATCH 5/7] docs: added comments to pagination

---
 src/lib/stores/pagination.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/lib/stores/pagination.ts b/src/lib/stores/pagination.ts
index 7829d9956..33130fba9 100644
--- a/src/lib/stores/pagination.ts
+++ b/src/lib/stores/pagination.ts
@@ -42,10 +42,19 @@ export function createPersistenPagination(limit: number) {
     };
 
     afterNavigate(({ type, to }) => {
+        const target = +(to.url.searchParams.get('page') ?? 1);
+
+        /**
+         * Listens to back/forward of the browser.
+         */
         if (type === 'popstate') {
-            const target = +(to.url.searchParams.get('page') ?? 1);
+            /**
+             * Keep the history state of the browser.
+             */
             keepHistory = true;
             set(target * limit - limit);
+        } else if (type === 'link') {
+            set(target * limit - limit);
         }
     });
 

From 1ec879adca2864cb0542e3a123acdfc954970851 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 12 Oct 2022 14:26:19 +0200
Subject: [PATCH 6/7] feat: add persistent pagination everywhere

---
 .../console/account/activity/+page.svelte     |  9 ++--
 .../account/organizations/+page.svelte        | 20 ++++-----
 .../console/account/sessions/+page.svelte     | 10 +++--
 .../organization-[organization]/+page.svelte  | 26 +++++------
 .../members/+page.svelte                      | 26 ++++++-----
 .../authentication/+page.svelte               |  2 +-
 .../authentication/teams/+page.svelte         |  9 ++--
 .../teams/[team]/activity/+page.svelte        | 14 +++---
 .../teams/[team]/members/+page.svelte         | 45 ++++++++++---------
 .../user/[user]/activity/+page.svelte         | 11 +++--
 .../user/[user]/memberships/+page.svelte      | 24 +++++-----
 .../user/[user]/sessions/+page.svelte         | 11 ++---
 .../project-[project]/databases/+page.svelte  | 17 ++++---
 .../database/[database]/+page.svelte          | 17 ++++---
 .../collection/[collection]/+page.svelte      | 17 +++----
 .../[collection]/attributes/+page.svelte      |  9 +++-
 .../project-[project]/storage/+page.svelte    | 17 ++++---
 .../storage/bucket/[bucket]/+page.svelte      | 36 ++++++++-------
 18 files changed, 175 insertions(+), 145 deletions(-)

diff --git a/src/routes/console/account/activity/+page.svelte b/src/routes/console/account/activity/+page.svelte
index 3dbf640a8..1892cd228 100644
--- a/src/routes/console/account/activity/+page.svelte
+++ b/src/routes/console/account/activity/+page.svelte
@@ -17,14 +17,15 @@
     import { onMount } from 'svelte';
     import { accountActivity } from '../store';
     import { Query } from '@aw-labs/appwrite-console';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
-    let offset = 0;
+    const offset = createPersistenPagination($pageLimit);
 
     onMount(async () => {
-        await accountActivity.load([Query.offset(offset), Query.limit($pageLimit)]);
+        await accountActivity.load([Query.offset($offset), Query.limit($pageLimit)]);
     });
 
-    $: accountActivity.load([Query.offset(offset), Query.limit($pageLimit)]);
+    $: accountActivity.load([Query.offset($offset), Query.limit($pageLimit)]);
 
     const getBrowser = (clientCode: string) => {
         return sdkForConsole.avatars.getBrowser(clientCode, 40, 40);
@@ -104,6 +105,6 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {$accountActivity?.total}</p>
-        <Pagination limit={$pageLimit} bind:offset sum={$accountActivity?.total} />
+        <Pagination limit={$pageLimit} bind:offset={$offset} sum={$accountActivity?.total} />
     </div>
 </Container>
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index 138a18da8..eece6d378 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -8,6 +8,7 @@
     import { onMount } from 'svelte';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { cardLimit } from '$lib/stores/layout';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
     onMount(async () => {
         await organizationList.load();
@@ -28,7 +29,7 @@
     };
 
     let addOrganization = false;
-    let offset = 0;
+    const offset = createPersistenPagination($cardLimit);
 </script>
 
 <Container>
@@ -47,11 +48,11 @@
     {#if $organizationList?.teams?.length}
         <CardContainer
             total={$organizationList.total}
-            {offset}
+            offset={$offset}
             on:click={() => (addOrganization = true)}>
             {#each $organizationList.teams as organization, index}
                 {@const avatarList = getMemberships(organization.$id)}
-                {#if index >= offset && index < $cardLimit + offset}
+                {#if index >= $offset && index < $cardLimit + $offset}
                     <GridItem1 href={`${base}/console/organization-${organization.$id}`}>
                         <svelte:fragment slot="eyebrow"
                             >{organization?.total ? organization?.total : 'No'} projects</svelte:fragment>
@@ -70,20 +71,15 @@
                 <p>Create a new organization</p>
             </svelte:fragment>
         </CardContainer>
-
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$organizationList?.total}</p>
-            <Pagination limit={$cardLimit} bind:offset sum={$organizationList?.total} />
-        </div>
     {:else}
         <Empty isButton single on:click={() => (addOrganization = true)}>
             <p>Create a new organization</p>
         </Empty>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$organizationList?.total}</p>
-            <Pagination limit={$cardLimit} bind:offset sum={$organizationList?.total} />
-        </div>
     {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {$organizationList?.total}</p>
+        <Pagination limit={$cardLimit} bind:offset={$offset} sum={$organizationList?.total} />
+    </div>
 </Container>
 
 <CreateOrganization bind:show={addOrganization} />
diff --git a/src/routes/console/account/sessions/+page.svelte b/src/routes/console/account/sessions/+page.svelte
index a0b90e1e5..cf8782712 100644
--- a/src/routes/console/account/sessions/+page.svelte
+++ b/src/routes/console/account/sessions/+page.svelte
@@ -17,8 +17,9 @@
     import type { Models } from '@aw-labs/appwrite-console';
     import { accountSession } from '../store';
     import { onMount } from 'svelte';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
-    let offset = 0;
+    const offset = createPersistenPagination($pageLimit);
 
     onMount(async () => {
         await accountSession.load();
@@ -112,14 +113,15 @@
                     <Button
                         external
                         secondary
-                        href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetsessions"
-                        >Documentation</Button>
+                        href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetsessions">
+                        Documentation
+                    </Button>
                 </div>
             </div>
         </Empty>
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {$accountSession?.total}</p>
-        <Pagination limit={$pageLimit} bind:offset sum={$accountSession?.total} />
+        <Pagination limit={$pageLimit} bind:offset={$offset} sum={$accountSession?.total} />
     </div>
 </Container>
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index 4373a820c..d9ac8df77 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -14,8 +14,8 @@
     import CreateProject from './_createProject.svelte';
     import { cardLimit } from '$lib/stores/layout';
     import CardContainer from '$lib/components/cardContainer.svelte';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
-    let projects: Models.Project[] = [];
     $: organizationId = $page.params.organization;
 
     onMount(handle);
@@ -23,7 +23,7 @@
 
     async function handle() {
         await projectList.load([
-            Query.offset(offset),
+            Query.offset($offset),
             Query.limit($cardLimit),
             Query.equal('teamId', organizationId)
         ]);
@@ -31,7 +31,7 @@
 
     let showCreate = false;
     let addOrganization = false;
-    let offset = 0;
+    const offset = createPersistenPagination($cardLimit);
 
     const projectCreated = async (event: CustomEvent<Models.Project>) => {
         await project.load(event.detail.$id);
@@ -79,9 +79,12 @@
     </div>
 
     {#if $projectList?.total}
-        <CardContainer total={$projectList.total} {offset} on:click={() => (showCreate = true)}>
+        <CardContainer
+            total={$projectList.total}
+            offset={$offset}
+            on:click={() => (showCreate = true)}>
             {#each $projectList.projects as project, index}
-                {#if index >= offset && index < $cardLimit + offset}
+                {#if index >= $offset && index < $cardLimit + $offset}
                     <GridItem1 href={`${base}/console/project-${project.$id}`}>
                         <svelte:fragment slot="eyebrow">
                             {project?.platforms?.length ? project?.platforms?.length : 'No'} apps
@@ -113,20 +116,15 @@
                 <p>Create a new project</p>
             </svelte:fragment>
         </CardContainer>
-
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$projectList.total}</p>
-            <Pagination limit={$cardLimit} bind:offset sum={$projectList.total} />
-        </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
             <p>Create a new project</p>
         </Empty>
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {projects?.length}</p>
-            <Pagination limit={$cardLimit} bind:offset sum={projects?.length} />
-        </div>
     {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {$projectList?.total}</p>
+        <Pagination limit={$cardLimit} bind:offset={$offset} sum={$projectList?.total} />
+    </div>
 </Container>
 
 <CreateOrganization bind:show={addOrganization} />
diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/+page.svelte
index 0a7c14ee8..aa9536dd9 100644
--- a/src/routes/console/organization-[organization]/members/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/+page.svelte
@@ -19,18 +19,22 @@
     import { pageLimit } from '$lib/stores/layout';
     import { page } from '$app/stores';
     import { addNotification } from '$lib/stores/notifications';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
     let search = '';
-    let offset = 0;
-
     let selectedMember: Models.Membership;
     let showDelete = false;
     const url = `${$page.url.origin}/console/`;
+    const offset = createPersistenPagination($pageLimit);
 
     const getAvatar = (name: string) =>
         sdkForConsole.avatars.getInitials(name, 120, 120).toString();
     const deleted = () =>
-        memberList.load($organization.$id, [Query.limit($pageLimit), Query.offset(offset)], search);
+        memberList.load(
+            $organization.$id,
+            [Query.limit($pageLimit), Query.offset($offset)],
+            search
+        );
     const resend = async (member: Models.Membership) => {
         try {
             await sdkForConsole.teams.createMembership(
@@ -52,8 +56,8 @@
         }
     };
 
-    $: if (search) offset = 0;
-    $: memberList.load($organization.$id, [Query.limit($pageLimit), Query.offset(offset)], search);
+    $: if (search) $offset = 0;
+    $: memberList.load($organization.$id, [Query.limit($pageLimit), Query.offset($offset)], search);
 </script>
 
 <Container>
@@ -61,10 +65,7 @@
         <div class="u-flex u-gap-12 common-section u-main-space-between">
             <h2 class="heading-level-5">Members</h2>
 
-            <Button
-                on:click={() => {
-                    newMemberModal.set(true);
-                }}>
+            <Button on:click={() => newMemberModal.set(true)}>
                 <span class="icon-plus" aria-hidden="true" />
                 <span class="text">Invite</span>
             </Button>
@@ -86,8 +87,9 @@
                                     size={40}
                                     src={getAvatar(member.userName)}
                                     name={member.userName} />
-                                <span class="text u-trim"
-                                    >{member.userName ? member.userName : 'n/a'}</span>
+                                <span class="text u-trim">
+                                    {member.userName ? member.userName : 'n/a'}
+                                </span>
                                 {#if member.invited && !member.joined}
                                     <Pill warning>Pending</Pill>
                                 {/if}
@@ -120,7 +122,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$memberList.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$memberList.total} />
+            <Pagination limit={$pageLimit} bind:offset={$offset} sum={$memberList.total} />
         </div>
     {/if}
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/+page.svelte b/src/routes/console/project-[project]/authentication/+page.svelte
index b9768357a..5a71b7af5 100644
--- a/src/routes/console/project-[project]/authentication/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/+page.svelte
@@ -26,7 +26,7 @@
 
     let showCreate = false;
     let search = '';
-    let offset = createPersistenPagination($pageLimit);
+    const offset = createPersistenPagination($pageLimit);
 
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
diff --git a/src/routes/console/project-[project]/authentication/teams/+page.svelte b/src/routes/console/project-[project]/authentication/teams/+page.svelte
index 49cf872a4..f27cdb16a 100644
--- a/src/routes/console/project-[project]/authentication/teams/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/+page.svelte
@@ -21,10 +21,11 @@
     import { teamsList } from '../store';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
     let search = '';
     let showCreate = false;
-    let offset = 0;
+    const offset = createPersistenPagination($pageLimit);
 
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
@@ -32,9 +33,9 @@
         await goto(`${base}/console/project-${project}/authentication/teams/${event.detail.$id}`);
     };
 
-    $: if (search) offset = 0;
+    $: if (search) $offset = 0;
     $: teamsList.load(
-        [Query.limit($pageLimit), Query.offset(offset), Query.orderDesc('$createdAt')],
+        [Query.limit($pageLimit), Query.offset($offset), Query.orderDesc('$createdAt')],
         search
     );
 </script>
@@ -81,7 +82,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$teamsList.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$teamsList.total} />
+            <Pagination limit={$pageLimit} bind:offset={$offset} sum={$teamsList.total} />
         </div>
     {:else if search}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
index 9b1e3abe6..223721afa 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
@@ -16,12 +16,13 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { pageLimit } from '$lib/stores/layout';
     import { Query } from '@aw-labs/appwrite-console';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
-    let offset = 0;
+    const offset = createPersistenPagination($pageLimit);
 
     $: request = sdkForProject.teams.listLogs($page.params.team, [
         Query.limit($pageLimit),
-        Query.offset(offset)
+        Query.offset($offset)
     ]);
 
     const getBrowser = (clientCode: string) => {
@@ -66,14 +67,12 @@
                                     <div class="u-flex u-cross-center u-gap-12">
                                         <p class="text u-trim">
                                             <span class="avatar  is-color-empty" />
-
                                             Unknown
                                         </p>
                                     </div>
                                 {/if}
                             </TableCell>
                             <TableCellText title="Event">{log.event}</TableCellText>
-
                             <TableCellText title="Location">
                                 {#if log.countryCode !== '--'}
                                     {log.countryName}
@@ -94,15 +93,16 @@
                         <p>No logs available</p>
                     </div>
                     <div class="common-section">
-                        <Button external secondary href="https://appwrite.io/docs/server/teams"
-                            >Documentation</Button>
+                        <Button external secondary href="https://appwrite.io/docs/server/teams">
+                            Documentation
+                        </Button>
                     </div>
                 </div>
             </Empty>
         {/if}
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {response.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={response.total} />
+            <Pagination limit={$pageLimit} bind:offset={$offset} sum={response.total} />
         </div>
     {/await}
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
index 01e68c7cb..46e274248 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
@@ -20,36 +20,42 @@
     import CreateMember from '../_createMembership.svelte';
     import DeleteMembership from '../_deleteMembership.svelte';
     import { pageLimit } from '$lib/stores/layout';
-
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
-    const deleted = () =>
-        memberships.load(
-            $page.params.team,
-            [Query.limit($pageLimit), Query.offset(offset)],
-            search
-        );
-
-    const project = $page.params.project;
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
     let showCreate = false;
     let showDelete = false;
     let search = '';
-    let offset = 0;
     let selectedMembership: Models.Membership;
 
-    $: if (search) offset = 0;
-    $: memberships.load($page.params.team, [Query.limit($pageLimit), Query.offset(offset)], search);
+    const project = $page.params.project;
+    const offset = createPersistenPagination($pageLimit);
+    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
 
-    const memberCreated = async (event: CustomEvent<Models.Membership>) => {
+    $: if (search) $offset = 0;
+    $: memberships.load(
+        $page.params.team,
+        [Query.limit($pageLimit), Query.offset($offset)],
+        search
+    );
+
+    async function memberCreated(event: CustomEvent<Models.Membership>) {
         memberships.load(
             $page.params.team,
-            [Query.limit($pageLimit), Query.offset(offset)],
+            [Query.limit($pageLimit), Query.offset($offset)],
             search
         );
         await goto(
             `${base}/console/project-${project}/authentication/teams/${event.detail.teamId}/members`
         );
-    };
+    }
+
+    function deleted() {
+        memberships.load(
+            $page.params.team,
+            [Query.limit($pageLimit), Query.offset($offset)],
+            search
+        );
+    }
 </script>
 
 <Container>
@@ -77,7 +83,6 @@
                                     size={32}
                                     src={getAvatar(membership.userName)}
                                     name={membership.userName} />
-
                                 <span>{membership.userName ? membership.userName : 'n/a'}</span>
                             </div>
                         </TableCellText>
@@ -99,11 +104,9 @@
                 {/each}
             </TableBody>
         </Table>
-        <div
-            class="u-flex u-margin-block-start-32
- u-main-space-between">
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$memberships.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$memberships.total} />
+            <Pagination limit={$pageLimit} bind:offset={$offset} sum={$memberships.total} />
         </div>
     {:else if search}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
index 94056cca1..ba5f3a0ca 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
@@ -16,17 +16,16 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { pageLimit } from '$lib/stores/layout';
     import { Query } from '@aw-labs/appwrite-console';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
-    let offset = 0;
+    const offset = createPersistenPagination($pageLimit);
 
     $: request = sdkForProject.users.listLogs($page.params.user, [
         Query.limit($pageLimit),
-        Query.offset(offset)
+        Query.offset($offset)
     ]);
 
-    const getBrowser = (clientCode: string) => {
-        return sdkForProject.avatars.getBrowser(clientCode, 80, 80);
-    };
+    const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 80, 80);
 </script>
 
 <Container>
@@ -99,7 +98,7 @@
         {/if}
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {response.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={response.total} />
+            <Pagination limit={$pageLimit} bind:offset={$offset} sum={response.total} />
         </div>
     {/await}
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
index 8335b106c..bfa88a3e3 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
+    import { base } from '$app/paths';
     import { Pagination, Empty, Avatar } from '$lib/components';
     import {
         Table,
@@ -12,23 +13,26 @@
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { base } from '$app/paths';
     import { sdkForProject } from '$lib/stores/sdk';
+    import { pageLimit } from '$lib/stores/layout';
+    import { createPersistenPagination } from '$lib/stores/pagination';
     import DeleteMembership from '../_deleteMembership.svelte';
     import DeleteAllMemberships from '../_deleteAllMemberships.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
-    import { pageLimit } from '$lib/stores/layout';
 
-    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
-    const deleted = () => (request = sdkForProject.users.listMemberships($page.params.user));
-    const project = $page.params.project;
-
-    let offset = 0;
     let selectedMembership: Models.Membership;
     let showDelete = false;
     let showDeleteAll = false;
 
+    const project = $page.params.project;
+    const offset = createPersistenPagination($pageLimit);
+    const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
+
     $: request = sdkForProject.users.listMemberships($page.params.user);
+
+    function deleted() {
+        request = sdkForProject.users.listMemberships($page.params.user);
+    }
 </script>
 
 <Container>
@@ -86,11 +90,9 @@
                     >Documentation</Button>
             </Empty>
         {/if}
-        <div
-            class="u-flex u-margin-block-start-32
- u-main-space-between">
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {response.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={response.total} />
+            <Pagination limit={$pageLimit} bind:offset={$offset} sum={response.total} />
         </div>
     {/await}
 </Container>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
index ce9d0dd02..223d8e90c 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
@@ -19,19 +19,20 @@
     import { pageLimit } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
-    let offset = 0;
     let showDelete = false;
     let showDeleteAll = false;
     let selectedSessionId: string = null;
     let sessionList: Models.SessionList = null;
+
+    const offset = createPersistenPagination($pageLimit);
+
     onMount(async () => {
         sessionList = await sdkForProject.users.listSessions($page.params.user);
     });
 
-    const getBrowser = (clientCode: string) => {
-        return sdkForProject.avatars.getBrowser(clientCode, 40, 40);
-    };
+    const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 40, 40);
 </script>
 
 <Container>
@@ -102,7 +103,7 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {sessionList?.total}</p>
-        <Pagination limit={$pageLimit} bind:offset sum={sessionList?.total} />
+        <Pagination limit={$pageLimit} bind:offset={$offset} sum={sessionList?.total} />
     </div>
 </Container>
 
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index ef5447ec8..44da83c78 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -10,19 +10,21 @@
     import { base } from '$app/paths';
     import { databaseList } from './store';
     import { cardLimit } from '$lib/stores/layout';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
     let showCreate = false;
     let search = '';
-    let offset = 0;
 
     const project = $page.params.project;
-    const handleCreate = async (event: CustomEvent<Models.Database>) => {
+    const offset = createPersistenPagination($cardLimit);
+
+    async function handleCreate(event: CustomEvent<Models.Database>) {
         showCreate = false;
         await goto(`${base}/console/project-${project}/databases/database/${event.detail.$id}`);
-    };
+    }
 
     $: databaseList.load(
-        [Query.limit($cardLimit), Query.offset(offset), Query.orderDesc('$createdAt')],
+        [Query.limit($cardLimit), Query.offset($offset), Query.orderDesc('$createdAt')],
         search
     );
 </script>
@@ -37,7 +39,10 @@
     </div>
 
     {#if $databaseList?.total}
-        <CardContainer total={$databaseList.total} {offset} on:click={() => (showCreate = true)}>
+        <CardContainer
+            total={$databaseList.total}
+            offset={$offset}
+            on:click={() => (showCreate = true)}>
             {#each $databaseList.databases as database}
                 <GridItem1
                     href={`${base}/console/project-${project}/databases/database/${database.$id}`}>
@@ -56,7 +61,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$databaseList.total}</p>
-            <Pagination limit={$cardLimit} bind:offset sum={$databaseList.total} />
+            <Pagination limit={$cardLimit} bind:offset={$offset} sum={$databaseList.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
index dc86ae5a8..7ceffd78a 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
@@ -10,22 +10,24 @@
     import { base } from '$app/paths';
     import { collections } from './store';
     import { cardLimit } from '$lib/stores/layout';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
     let showCreate = false;
-    let offset = 0;
 
     const project = $page.params.project;
     const databaseId = $page.params.database;
-    const handleCreate = async (event: CustomEvent<Models.Collection>) => {
+    const offset = createPersistenPagination($cardLimit);
+
+    async function handleCreate(event: CustomEvent<Models.Collection>) {
         showCreate = false;
         await goto(
             `${base}/console/project-${project}/databases/database/${databaseId}/collection/${event.detail.$id}`
         );
-    };
+    }
 
     $: collections.load(databaseId, [
         Query.limit($cardLimit),
-        Query.offset(offset),
+        Query.offset($offset),
         Query.orderDesc('$createdAt')
     ]);
 </script>
@@ -41,7 +43,10 @@
     </div>
 
     {#if $collections?.total}
-        <CardContainer total={$collections.total} {offset} on:click={() => (showCreate = true)}>
+        <CardContainer
+            total={$collections.total}
+            offset={$offset}
+            on:click={() => (showCreate = true)}>
             {#each $collections.collections as collection}
                 <GridItem1
                     href={`${base}/console/project-${project}/databases/database/${databaseId}/collection/${collection.$id}`}>
@@ -69,7 +74,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$collections.total}</p>
-            <Pagination limit={$cardLimit} bind:offset sum={$collections.total} />
+            <Pagination limit={$cardLimit} bind:offset={$offset} sum={$collections.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
index 53bcdb9ab..c7206f627 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
@@ -18,27 +18,28 @@
     import Create from './createDocument.svelte';
     import { Query } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
-
-    let offset = 0;
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
+    const offset = createPersistenPagination($pageLimit);
+
+    function openWizard() {
+        wizard.start(Create);
+    }
 
     $: documentList.load(databaseId, $collection.$id, [
         Query.limit($pageLimit),
-        Query.offset(offset),
+        Query.offset($offset),
         Query.orderDesc('$createdAt')
     ]);
+
     $: columns = [
         ...$collection.attributes.map((attribute) => ({
             key: attribute.key,
             title: attribute.key
         }))
     ];
-
-    function openWizard() {
-        wizard.start(Create);
-    }
 </script>
 
 <Container>
@@ -84,7 +85,7 @@
 
             <div class="u-flex common-section u-main-space-between">
                 <p class="text">Total results: {$documentList.total}</p>
-                <Pagination limit={$pageLimit} bind:offset sum={$documentList.total} />
+                <Pagination limit={$pageLimit} bind:offset={$offset} sum={$documentList.total} />
             </div>
         {:else}
             <Empty isButton single on:click={openWizard}>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
index 24210e796..8aacecc2c 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
@@ -19,14 +19,16 @@
     import Delete from './deleteAttribute.svelte';
     import Overview from './overview.svelte';
     import { pageLimit } from '$lib/stores/layout';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
-    let offset = 0;
     let showDropdown = [];
     let selectedAttribute: Attributes = null;
     let showCreate = false;
     let showDelete = false;
     let showOverview = false;
     let showCreateIndex = false;
+
+    const offset = createPersistenPagination($pageLimit);
 </script>
 
 <Container>
@@ -112,7 +114,10 @@
         </Table>
         <div class="u-flex common-section u-main-space-between">
             <p class="text">Total results: {$collection?.attributes?.length}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$collection?.attributes?.length} />
+            <Pagination
+                limit={$pageLimit}
+                bind:offset={$offset}
+                sum={$collection?.attributes?.length} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte
index 515002ec9..8da388e31 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/+page.svelte
@@ -11,19 +11,21 @@
     import { bucketList } from './store';
     import { tooltip } from '$lib/actions/tooltip';
     import { cardLimit } from '$lib/stores/layout';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
     let showCreate = false;
-    let offset = 0;
 
     const project = $page.params.project;
-    const bucketCreated = async (event: CustomEvent<Models.Bucket>) => {
+    const offset = createPersistenPagination($cardLimit);
+
+    async function bucketCreated(event: CustomEvent<Models.Bucket>) {
         showCreate = false;
         await goto(`${base}/console/project-${project}/storage/bucket/${event.detail.$id}`);
-    };
+    }
 
     $: bucketList.load([
         Query.limit($cardLimit),
-        Query.offset(offset),
+        Query.offset($offset),
         Query.orderDesc('$createdAt')
     ]);
 </script>
@@ -38,7 +40,10 @@
     </div>
 
     {#if $bucketList?.total}
-        <CardContainer total={$bucketList.total} {offset} on:click={() => (showCreate = true)}>
+        <CardContainer
+            total={$bucketList.total}
+            offset={$offset}
+            on:click={() => (showCreate = true)}>
             {#each $bucketList.buckets as bucket}
                 <GridItem1 href={`${base}/console/project-${project}/storage/bucket/${bucket.$id}`}>
                     <svelte:fragment slot="eyebrow">XX Files</svelte:fragment>
@@ -86,7 +91,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$bucketList.total}</p>
-            <Pagination limit={$cardLimit} bind:offset sum={$bucketList.total} />
+            <Pagination limit={$cardLimit} bind:offset={$offset} sum={$bucketList.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
index c7db7e610..e1ae9702a 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
@@ -34,50 +34,54 @@
     import { uploader } from '$lib/stores/uploader';
     import { addNotification } from '$lib/stores/notifications';
     import { pageLimit } from '$lib/stores/layout';
+    import { createPersistenPagination } from '$lib/stores/pagination';
 
     let search = '';
     let showCreate = false;
-    let showDropdown = [];
     let showDelete = false;
+    let showDropdown = [];
     let selectedFile: Models.File = null;
-    let offset = 0;
 
     const project = $page.params.project;
     const bucket = $page.params.bucket;
-
+    const offset = createPersistenPagination($pageLimit);
     const getPreview = (fileId: string) =>
         sdkForProject.storage.getFilePreview(bucket, fileId, 32, 32).toString() + '&mode=admin';
 
-    const fileCreated = () => {
-        showCreate = false;
-        files.load(bucket, [Query.limit($pageLimit), Query.offset(offset)], search);
-    };
+    async function loadFiles() {
+        files.load(bucket, [Query.limit($pageLimit), Query.offset($offset)], search);
+    }
 
-    const fileDeleted = (event: CustomEvent<Models.File>) => {
+    function fileCreated() {
+        showCreate = false;
+        loadFiles();
+    }
+
+    function fileDeleted(event: CustomEvent<Models.File>) {
         showDelete = false;
         uploader.removeFile(event.detail);
-        files.load(bucket, [Query.limit($pageLimit), Query.offset(offset)], search);
-    };
+        loadFiles();
+    }
 
-    const deleteFile = async (file: Models.File) => {
+    async function deleteFile(file: Models.File) {
         try {
             await sdkForProject.storage.deleteFile(file.bucketId, file.$id);
             uploader.removeFile(file);
-            files.load(bucket, [Query.limit($pageLimit), Query.offset(offset)], search);
+            loadFiles();
         } catch (error) {
             addNotification({
                 type: 'error',
                 message: error.message
             });
         }
-    };
+    }
 
     $: files.load(
         bucket,
-        [Query.limit($pageLimit), Query.offset(offset), Query.orderDesc('$createdAt')],
+        [Query.limit($pageLimit), Query.offset($offset), Query.orderDesc('$createdAt')],
         search
     );
-    $: if (search) offset = 0;
+    $: if (search) $offset = 0;
 </script>
 
 <Container>
@@ -181,7 +185,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {$files.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$files.total} />
+            <Pagination limit={$pageLimit} bind:offset={$offset} sum={$files.total} />
         </div>
     {:else if search}
         <EmptySearch>

From 24f123189e52abd5565ca1e8bf24f02cbba174c3 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 12 Oct 2022 14:40:06 +0200
Subject: [PATCH 7/7] fix: typo in createPersistentPagination

---
 src/lib/stores/pagination.ts                                  | 2 +-
 src/routes/console/account/activity/+page.svelte              | 4 ++--
 src/routes/console/account/organizations/+page.svelte         | 4 ++--
 src/routes/console/account/sessions/+page.svelte              | 4 ++--
 src/routes/console/organization-[organization]/+page.svelte   | 4 ++--
 .../console/organization-[organization]/members/+page.svelte  | 4 ++--
 .../console/project-[project]/authentication/+page.svelte     | 4 ++--
 .../project-[project]/authentication/teams/+page.svelte       | 4 ++--
 .../authentication/teams/[team]/activity/+page.svelte         | 4 ++--
 .../authentication/teams/[team]/members/+page.svelte          | 4 ++--
 .../authentication/user/[user]/activity/+page.svelte          | 4 ++--
 .../authentication/user/[user]/memberships/+page.svelte       | 4 ++--
 .../authentication/user/[user]/sessions/+page.svelte          | 4 ++--
 src/routes/console/project-[project]/databases/+page.svelte   | 4 ++--
 .../databases/database/[database]/+page.svelte                | 4 ++--
 .../database/[database]/collection/[collection]/+page.svelte  | 4 ++--
 .../collection/[collection]/attributes/+page.svelte           | 4 ++--
 src/routes/console/project-[project]/storage/+page.svelte     | 4 ++--
 .../project-[project]/storage/bucket/[bucket]/+page.svelte    | 4 ++--
 19 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/lib/stores/pagination.ts b/src/lib/stores/pagination.ts
index 33130fba9..f7ce19328 100644
--- a/src/lib/stores/pagination.ts
+++ b/src/lib/stores/pagination.ts
@@ -2,7 +2,7 @@ import { afterNavigate, goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { get, writable } from 'svelte/store';
 
-export function createPersistenPagination(limit: number) {
+export function createPersistentPagination(limit: number) {
     const url = get(page).url;
     const current = +(url.searchParams.get('page') ?? 1);
     const offset = current * limit - limit;
diff --git a/src/routes/console/account/activity/+page.svelte b/src/routes/console/account/activity/+page.svelte
index 1892cd228..c3ae5f00d 100644
--- a/src/routes/console/account/activity/+page.svelte
+++ b/src/routes/console/account/activity/+page.svelte
@@ -17,9 +17,9 @@
     import { onMount } from 'svelte';
     import { accountActivity } from '../store';
     import { Query } from '@aw-labs/appwrite-console';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
 
     onMount(async () => {
         await accountActivity.load([Query.offset($offset), Query.limit($pageLimit)]);
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index eece6d378..577a22b94 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -8,7 +8,7 @@
     import { onMount } from 'svelte';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { cardLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     onMount(async () => {
         await organizationList.load();
@@ -29,7 +29,7 @@
     };
 
     let addOrganization = false;
-    const offset = createPersistenPagination($cardLimit);
+    const offset = createPersistentPagination($cardLimit);
 </script>
 
 <Container>
diff --git a/src/routes/console/account/sessions/+page.svelte b/src/routes/console/account/sessions/+page.svelte
index cf8782712..b0c9c190c 100644
--- a/src/routes/console/account/sessions/+page.svelte
+++ b/src/routes/console/account/sessions/+page.svelte
@@ -17,9 +17,9 @@
     import type { Models } from '@aw-labs/appwrite-console';
     import { accountSession } from '../store';
     import { onMount } from 'svelte';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
 
     onMount(async () => {
         await accountSession.load();
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index d9ac8df77..7788eba71 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -14,7 +14,7 @@
     import CreateProject from './_createProject.svelte';
     import { cardLimit } from '$lib/stores/layout';
     import CardContainer from '$lib/components/cardContainer.svelte';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     $: organizationId = $page.params.organization;
 
@@ -31,7 +31,7 @@
 
     let showCreate = false;
     let addOrganization = false;
-    const offset = createPersistenPagination($cardLimit);
+    const offset = createPersistentPagination($cardLimit);
 
     const projectCreated = async (event: CustomEvent<Models.Project>) => {
         await project.load(event.detail.$id);
diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/+page.svelte
index aa9536dd9..623fd70c5 100644
--- a/src/routes/console/organization-[organization]/members/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/+page.svelte
@@ -19,13 +19,13 @@
     import { pageLimit } from '$lib/stores/layout';
     import { page } from '$app/stores';
     import { addNotification } from '$lib/stores/notifications';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     let search = '';
     let selectedMember: Models.Membership;
     let showDelete = false;
     const url = `${$page.url.origin}/console/`;
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
 
     const getAvatar = (name: string) =>
         sdkForConsole.avatars.getInitials(name, 120, 120).toString();
diff --git a/src/routes/console/project-[project]/authentication/+page.svelte b/src/routes/console/project-[project]/authentication/+page.svelte
index 5a71b7af5..c3350a8d8 100644
--- a/src/routes/console/project-[project]/authentication/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/+page.svelte
@@ -22,11 +22,11 @@
     import { usersList } from './store';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     let showCreate = false;
     let search = '';
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
 
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
diff --git a/src/routes/console/project-[project]/authentication/teams/+page.svelte b/src/routes/console/project-[project]/authentication/teams/+page.svelte
index f27cdb16a..be55c393e 100644
--- a/src/routes/console/project-[project]/authentication/teams/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/+page.svelte
@@ -21,11 +21,11 @@
     import { teamsList } from '../store';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     let search = '';
     let showCreate = false;
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
 
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
index 223721afa..0eb463d93 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
@@ -16,9 +16,9 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { pageLimit } from '$lib/stores/layout';
     import { Query } from '@aw-labs/appwrite-console';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
 
     $: request = sdkForProject.teams.listLogs($page.params.team, [
         Query.limit($pageLimit),
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
index 46e274248..41e5991c5 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
@@ -20,7 +20,7 @@
     import CreateMember from '../_createMembership.svelte';
     import DeleteMembership from '../_deleteMembership.svelte';
     import { pageLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     let showCreate = false;
     let showDelete = false;
@@ -28,7 +28,7 @@
     let selectedMembership: Models.Membership;
 
     const project = $page.params.project;
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
 
     $: if (search) $offset = 0;
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
index ba5f3a0ca..9244eb8ac 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
@@ -16,9 +16,9 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { pageLimit } from '$lib/stores/layout';
     import { Query } from '@aw-labs/appwrite-console';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
 
     $: request = sdkForProject.users.listLogs($page.params.user, [
         Query.limit($pageLimit),
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
index bfa88a3e3..35c9bd2b1 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
@@ -15,7 +15,7 @@
     import { Container } from '$lib/layout';
     import { sdkForProject } from '$lib/stores/sdk';
     import { pageLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
     import DeleteMembership from '../_deleteMembership.svelte';
     import DeleteAllMemberships from '../_deleteAllMemberships.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -25,7 +25,7 @@
     let showDeleteAll = false;
 
     const project = $page.params.project;
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString();
 
     $: request = sdkForProject.users.listMemberships($page.params.user);
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
index 223d8e90c..a960f8fc0 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
@@ -19,14 +19,14 @@
     import { pageLimit } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import type { Models } from '@aw-labs/appwrite-console';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     let showDelete = false;
     let showDeleteAll = false;
     let selectedSessionId: string = null;
     let sessionList: Models.SessionList = null;
 
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
 
     onMount(async () => {
         sessionList = await sdkForProject.users.listSessions($page.params.user);
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index 44da83c78..3673ee03d 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -10,13 +10,13 @@
     import { base } from '$app/paths';
     import { databaseList } from './store';
     import { cardLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     let showCreate = false;
     let search = '';
 
     const project = $page.params.project;
-    const offset = createPersistenPagination($cardLimit);
+    const offset = createPersistentPagination($cardLimit);
 
     async function handleCreate(event: CustomEvent<Models.Database>) {
         showCreate = false;
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
index 7ceffd78a..a02da7912 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
@@ -10,13 +10,13 @@
     import { base } from '$app/paths';
     import { collections } from './store';
     import { cardLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     let showCreate = false;
 
     const project = $page.params.project;
     const databaseId = $page.params.database;
-    const offset = createPersistenPagination($cardLimit);
+    const offset = createPersistentPagination($cardLimit);
 
     async function handleCreate(event: CustomEvent<Models.Collection>) {
         showCreate = false;
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
index c7206f627..cc053fa2c 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
@@ -18,11 +18,11 @@
     import Create from './createDocument.svelte';
     import { Query } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
 
     function openWizard() {
         wizard.start(Create);
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
index 8aacecc2c..014da3a29 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
@@ -19,7 +19,7 @@
     import Delete from './deleteAttribute.svelte';
     import Overview from './overview.svelte';
     import { pageLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     let showDropdown = [];
     let selectedAttribute: Attributes = null;
@@ -28,7 +28,7 @@
     let showOverview = false;
     let showCreateIndex = false;
 
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
 </script>
 
 <Container>
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte
index 8da388e31..fec56c60b 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/+page.svelte
@@ -11,12 +11,12 @@
     import { bucketList } from './store';
     import { tooltip } from '$lib/actions/tooltip';
     import { cardLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     let showCreate = false;
 
     const project = $page.params.project;
-    const offset = createPersistenPagination($cardLimit);
+    const offset = createPersistentPagination($cardLimit);
 
     async function bucketCreated(event: CustomEvent<Models.Bucket>) {
         showCreate = false;
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
index e1ae9702a..f381bafa7 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
@@ -34,7 +34,7 @@
     import { uploader } from '$lib/stores/uploader';
     import { addNotification } from '$lib/stores/notifications';
     import { pageLimit } from '$lib/stores/layout';
-    import { createPersistenPagination } from '$lib/stores/pagination';
+    import { createPersistentPagination } from '$lib/stores/pagination';
 
     let search = '';
     let showCreate = false;
@@ -44,7 +44,7 @@
 
     const project = $page.params.project;
     const bucket = $page.params.bucket;
-    const offset = createPersistenPagination($pageLimit);
+    const offset = createPersistentPagination($pageLimit);
     const getPreview = (fileId: string) =>
         sdkForProject.storage.getFilePreview(bucket, fileId, 32, 32).toString() + '&mode=admin';