From fe758062e9c63b1652f516a4dfdd5329640cf2bc Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 20 Mar 2023 23:23:03 +0100
Subject: [PATCH] feat: add limit

---
 src/lib/components/pagination.svelte          | 68 +++++++++++--------
 src/routes/console/account/activity/+page.ts  |  6 +-
 .../account/organizations/+page.svelte        |  3 +-
 .../console/account/organizations/+page.ts    |  6 +-
 .../organization-[organization]/+page.svelte  |  3 +-
 .../organization-[organization]/+page.ts      |  6 +-
 .../members/+page.svelte                      |  4 +-
 .../members/+page.ts                          |  6 +-
 .../project-[project]/auth/+page.svelte       |  3 +-
 .../console/project-[project]/auth/+page.ts   |  6 +-
 .../project-[project]/auth/teams/+page.svelte |  3 +-
 .../project-[project]/auth/teams/+page.ts     |  6 +-
 .../auth/teams/team-[team]/activity/+page.ts  |  5 +-
 .../teams/team-[team]/members/+page.svelte    |  4 +-
 .../auth/teams/team-[team]/members/+page.ts   |  6 +-
 .../auth/user-[user]/activity/+page.ts        |  6 +-
 .../project-[project]/databases/+page.svelte  |  3 +-
 .../project-[project]/databases/+page.ts      |  6 +-
 .../database-[database]/+page.svelte          |  3 +-
 .../databases/database-[database]/+page.ts    |  6 +-
 .../collection-[collection]/+page.svelte      |  3 +-
 .../collection-[collection]/+page.ts          |  7 +-
 .../collection-[collection]/activity/+page.ts |  6 +-
 .../document-[document]/activity/+page.ts     |  6 +-
 .../project-[project]/functions/+page.svelte  |  3 +-
 .../project-[project]/functions/+page.ts      |  6 +-
 .../function-[function]/+page.svelte          |  4 +-
 .../functions/function-[function]/+page.ts    |  6 +-
 .../executions/+page.svelte                   |  4 +-
 .../function-[function]/executions/+page.ts   |  6 +-
 .../project-[project]/storage/+page.svelte    |  4 +-
 .../project-[project]/storage/+page.ts        |  6 +-
 .../storage/bucket-[bucket]/+page.svelte      |  4 +-
 .../storage/bucket-[bucket]/+page.ts          |  6 +-
 34 files changed, 133 insertions(+), 97 deletions(-)

diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index 59084439b..216455f72 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { page as pageStore } from '$app/stores';
+    import { Button } from '$lib/elements/forms';
 
     export let sum: number;
     export let limit: number;
@@ -42,27 +43,31 @@
 {#if totalPages > 1}
     {#key $pageStore.url}
         <nav class="pagination">
-            <a
-                class:is-disabled={currentPage <= 1}
-                class="button is-text"
-                aria-label="prev page"
-                href={getLink(currentPage - 1)}>
-                <span class="icon-cheveron-left" aria-hidden="true" />
-                <span class="text">Prev</span>
-            </a>
+            {#if currentPage <= 1}
+                <Button disabled text ariaLabel="prev page">
+                    <span class="icon-cheveron-left" aria-hidden="true" />
+                    <span class="text">Prev</span>
+                </Button>
+            {:else}
+                <Button text ariaLabel="prev page" href={getLink(currentPage - 1)}>
+                    <span class="icon-cheveron-left" aria-hidden="true" />
+                    <span class="text">Prev</span>
+                </Button>
+            {/if}
             {#if !hidePages}
                 <ol class="pagination-list is-only-desktop">
                     {#each pages as page}
                         {#if typeof page === 'number'}
                             <li class="pagination-item">
-                                <a
-                                    href={getLink(page)}
-                                    class="button"
-                                    class:is-disabled={currentPage === page}
-                                    class:is-text={currentPage !== page}
-                                    aria-label="page">
-                                    <span class="text">{page}</span>
-                                </a>
+                                {#if currentPage === page}
+                                    <Button ariaLabel="page" disabled>
+                                        <span class="text">{page}</span>
+                                    </Button>
+                                {:else}
+                                    <Button text ariaLabel="page" href={getLink(page)}>
+                                        <span class="text">{page}</span>
+                                    </Button>
+                                {/if}
                             </li>
                         {:else}
                             <li class="li is-text">
@@ -72,34 +77,37 @@
                     {/each}
                 </ol>
             {/if}
-            <a
-                class:is-disabled={currentPage === totalPages}
-                class="button is-text"
-                href={getLink(currentPage + 1)}
-                aria-label="next page">
-                <span class="text">Next</span>
-                <span class="icon-cheveron-right" aria-hidden="true" />
-            </a>
+            {#if currentPage >= totalPages}
+                <Button disabled text ariaLabel="next page">
+                    <span class="text">Next</span>
+                    <span class="icon-cheveron-right" aria-hidden="true" />
+                </Button>
+            {:else}
+                <Button text ariaLabel="next page" href={getLink(currentPage + 1)}>
+                    <span class="text">Next</span>
+                    <span class="icon-cheveron-right" aria-hidden="true" />
+                </Button>
+            {/if}
         </nav>
     {/key}
 {:else}
     <nav class="pagination">
-        <button type="button" class="button is-text is-disabled" aria-label="prev page">
+        <Button text disabled ariaLabel="prev page">
             <span class="icon-cheveron-left" aria-hidden="true" />
             <span class="text">Prev</span>
-        </button>
+        </Button>
         {#if !hidePages}
             <ol class="pagination-list is-only-desktop">
                 <li class="pagination-item">
-                    <button type="button" class="button is-disabled" aria-label="page">
+                    <Button disabled ariaLabel="page">
                         <span class="text">1</span>
-                    </button>
+                    </Button>
                 </li>
             </ol>
         {/if}
-        <button type="button" class="button is-text is-disabled" aria-label="next page">
+        <Button text disabled ariaLabel="next page">
             <span class="text">Next</span>
             <span class="icon-cheveron-right" aria-hidden="true" />
-        </button>
+        </Button>
     </nav>
 {/if}
diff --git a/src/routes/console/account/activity/+page.ts b/src/routes/console/account/activity/+page.ts
index a01b4ce80..13a06a80b 100644
--- a/src/routes/console/account/activity/+page.ts
+++ b/src/routes/console/account/activity/+page.ts
@@ -6,10 +6,12 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
-        logs: await sdk.forConsole.account.listLogs([Query.offset(offset), Query.limit(PAGE_LIMIT)])
+        limit,
+        logs: await sdk.forConsole.account.listLogs([Query.offset(offset), Query.limit(limit)])
     };
 };
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index 55435fa2b..c01ac1e9f 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -12,7 +12,6 @@
     import { Container } from '$lib/layout';
     import CreateOrganization from '../../createOrganization.svelte';
     import { sdk } from '$lib/stores/sdk';
-    import { CARD_LIMIT } from '$lib/constants';
     import type { PageData } from './$types';
 
     export let data: PageData;
@@ -68,7 +67,7 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.organizations.total}</p>
-        <Pagination limit={CARD_LIMIT} offset={data.offset} sum={data.organizations.total} />
+        <Pagination limit={data.limit} offset={data.offset} sum={data.organizations.total} />
     </div>
 </Container>
 
diff --git a/src/routes/console/account/organizations/+page.ts b/src/routes/console/account/organizations/+page.ts
index b9860cfa5..90de71ddd 100644
--- a/src/routes/console/account/organizations/+page.ts
+++ b/src/routes/console/account/organizations/+page.ts
@@ -6,13 +6,15 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, CARD_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? CARD_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         organizations: await sdk.forConsole.teams.list([
             Query.offset(offset),
-            Query.limit(CARD_LIMIT),
+            Query.limit(limit),
             Query.orderDesc('$createdAt')
         ])
     };
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index 5b15c482c..2a0ee8fbf 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -7,7 +7,6 @@
     import CreateProject from './createProject.svelte';
     import CreateOrganization from '../createOrganization.svelte';
     import type { PageData } from './$types';
-    import { CARD_LIMIT } from '$lib/constants';
     import { page } from '$app/stores';
 
     export let data: PageData;
@@ -97,7 +96,7 @@
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.projects.total}</p>
-        <Pagination limit={CARD_LIMIT} offset={data.offset} sum={data.projects.total} />
+        <Pagination limit={data.limit} offset={data.offset} sum={data.projects.total} />
     </div>
 </Container>
 
diff --git a/src/routes/console/organization-[organization]/+page.ts b/src/routes/console/organization-[organization]/+page.ts
index 352b07550..5452f4bf8 100644
--- a/src/routes/console/organization-[organization]/+page.ts
+++ b/src/routes/console/organization-[organization]/+page.ts
@@ -6,13 +6,15 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, CARD_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? CARD_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         projects: await sdk.forConsole.projects.list([
             Query.offset(offset),
-            Query.limit(CARD_LIMIT),
+            Query.limit(limit),
             Query.equal('teamId', params.organization),
             Query.orderDesc('$createdAt')
         ])
diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/+page.svelte
index e183b57a4..043652c99 100644
--- a/src/routes/console/organization-[organization]/members/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/+page.svelte
@@ -3,7 +3,7 @@
     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 { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import {
@@ -112,7 +112,7 @@
         </TableScroll>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.organizationMembers.total}</p>
-            <Pagination offset={data.offset} limit={PAGE_LIMIT} sum={data.members.total} />
+            <Pagination offset={data.offset} limit={data.limit} sum={data.members.total} />
         </div>
     {/if}
 </Container>
diff --git a/src/routes/console/organization-[organization]/members/+page.ts b/src/routes/console/organization-[organization]/members/+page.ts
index 50fcadfd9..46f6ecbae 100644
--- a/src/routes/console/organization-[organization]/members/+page.ts
+++ b/src/routes/console/organization-[organization]/members/+page.ts
@@ -6,12 +6,14 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url, params }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         organizationMembers: await sdk.forConsole.teams.listMemberships(params.organization, [
-            Query.limit(PAGE_LIMIT),
+            Query.limit(limit),
             Query.offset(offset)
         ])
     };
diff --git a/src/routes/console/project-[project]/auth/+page.svelte b/src/routes/console/project-[project]/auth/+page.svelte
index f2fc2a466..f121db0e8 100644
--- a/src/routes/console/project-[project]/auth/+page.svelte
+++ b/src/routes/console/project-[project]/auth/+page.svelte
@@ -23,7 +23,6 @@
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { goto } from '$app/navigation';
-    import { PAGE_LIMIT } from '$lib/constants';
     import Create from './createUser.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
@@ -112,7 +111,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.users.total}</p>
-            <Pagination offset={data.offset} limit={PAGE_LIMIT} sum={data.users.total} />
+            <Pagination offset={data.offset} limit={data.limit} sum={data.users.total} />
         </div>
     {:else if data.search}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/auth/+page.ts b/src/routes/console/project-[project]/auth/+page.ts
index f79f537d3..0fca0d67f 100644
--- a/src/routes/console/project-[project]/auth/+page.ts
+++ b/src/routes/console/project-[project]/auth/+page.ts
@@ -6,15 +6,17 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
     const search = url.searchParams.get('search') ?? undefined;
 
     return {
         offset,
+        limit,
         search,
         page,
         users: await sdk.forProject.users.list(
-            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
             search
         )
     };
diff --git a/src/routes/console/project-[project]/auth/teams/+page.svelte b/src/routes/console/project-[project]/auth/teams/+page.svelte
index a8c3188ba..3b00a547b 100644
--- a/src/routes/console/project-[project]/auth/teams/+page.svelte
+++ b/src/routes/console/project-[project]/auth/teams/+page.svelte
@@ -18,7 +18,6 @@
     import { base } from '$app/paths';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
-    import { PAGE_LIMIT } from '$lib/constants';
 
     export let data: PageData;
 
@@ -64,7 +63,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.teams.total}</p>
-            <Pagination limit={PAGE_LIMIT} offset={data.offset} sum={data.teams.total} />
+            <Pagination limit={data.limit} offset={data.offset} sum={data.teams.total} />
         </div>
     {:else if data.search}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/auth/teams/+page.ts b/src/routes/console/project-[project]/auth/teams/+page.ts
index 76436bc84..7b222a0cc 100644
--- a/src/routes/console/project-[project]/auth/teams/+page.ts
+++ b/src/routes/console/project-[project]/auth/teams/+page.ts
@@ -6,15 +6,17 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
     const search = url.searchParams.get('search') ?? undefined;
 
     return {
         offset,
+        limit,
         search,
         page,
         teams: await sdk.forProject.teams.list(
-            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
             search
         )
     };
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.ts b/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.ts
index 07f39695e..173bd4d99 100644
--- a/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.ts
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/activity/+page.ts
@@ -6,12 +6,13 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
         logs: await sdk.forProject.teams.listLogs(params.team, [
-            Query.limit(PAGE_LIMIT),
+            Query.limit(limit),
             Query.offset(offset)
         ])
     };
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.svelte
index ff87dab89..8fd62a499 100644
--- a/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.svelte
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.svelte
@@ -19,7 +19,7 @@
     import type { PageData } from './$types';
     import CreateMember from '../createMembership.svelte';
     import DeleteMembership from '../deleteMembership.svelte';
-    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
 
     export let data: PageData;
@@ -82,7 +82,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.memberships.total}</p>
-            <Pagination limit={PAGE_LIMIT} offset={data.offset} sum={data.memberships.total} />
+            <Pagination limit={data.limit} offset={data.offset} sum={data.memberships.total} />
         </div>
     {:else if data.search}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.ts b/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.ts
index d3c0966ce..3e1c13cdf 100644
--- a/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.ts
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/members/+page.ts
@@ -8,15 +8,17 @@ export const load: PageLoad = async ({ params, depends, url }) => {
     depends(Dependencies.MEMBERSHIPS);
     const teamId = params.team;
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
     const search = url.searchParams.get('search') ?? undefined;
 
     return {
         offset,
         search,
+        limit,
         memberships: await sdk.forProject.teams.listMemberships(
             teamId,
-            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
             search
         )
     };
diff --git a/src/routes/console/project-[project]/auth/user-[user]/activity/+page.ts b/src/routes/console/project-[project]/auth/user-[user]/activity/+page.ts
index 24e3dba51..370d86bb4 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/activity/+page.ts
+++ b/src/routes/console/project-[project]/auth/user-[user]/activity/+page.ts
@@ -6,12 +6,14 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         logs: await sdk.forProject.users.listLogs(params.user, [
-            Query.limit(PAGE_LIMIT),
+            Query.limit(limit),
             Query.offset(offset)
         ])
     };
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index fa3f512e2..d149c4656 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -9,7 +9,6 @@
     import Create from './create.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
-    import { CARD_LIMIT } from '$lib/constants';
 
     export let data: PageData;
 
@@ -53,7 +52,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.databases.total}</p>
-            <Pagination limit={CARD_LIMIT} offset={data.offset} sum={data.databases.total} />
+            <Pagination limit={data.limit} offset={data.offset} sum={data.databases.total} />
         </div>
     {:else}
         <Empty
diff --git a/src/routes/console/project-[project]/databases/+page.ts b/src/routes/console/project-[project]/databases/+page.ts
index 7c213363a..1874362c5 100644
--- a/src/routes/console/project-[project]/databases/+page.ts
+++ b/src/routes/console/project-[project]/databases/+page.ts
@@ -6,12 +6,14 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, CARD_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? CARD_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         databases: await sdk.forProject.databases.list([
-            Query.limit(CARD_LIMIT),
+            Query.limit(limit),
             Query.offset(offset),
             Query.orderDesc('$createdAt')
         ])
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 4b9e9a64f..c9e6cae99 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/+page.svelte
@@ -11,7 +11,6 @@
     import type { PageData } from './$types';
     import type { Models } from '@aw-labs/appwrite-console';
     import Create from './create.svelte';
-    import { CARD_LIMIT } from '$lib/constants';
 
     export let data: PageData;
     let showCreate = false;
@@ -65,7 +64,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.collections.total}</p>
-            <Pagination limit={CARD_LIMIT} offset={data.offset} sum={data.collections.total} />
+            <Pagination limit={data.limit} offset={data.offset} sum={data.collections.total} />
         </div>
     {:else}
         <Empty
diff --git a/src/routes/console/project-[project]/databases/database-[database]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/+page.ts
index 4f0bc5ad1..91da72fa4 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/+page.ts
@@ -6,12 +6,14 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, CARD_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? CARD_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         collections: await sdk.forProject.databases.listCollections(params.database, [
-            Query.limit(CARD_LIMIT),
+            Query.limit(limit),
             Query.offset(offset),
             Query.orderDesc('$createdAt')
         ])
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 dfe97e381..0f379f461 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
@@ -17,7 +17,6 @@
     import type { PageData } from './$types';
     import { collection } from './store';
     import { page } from '$app/stores';
-    import { PAGE_LIMIT } from '$lib/constants';
     import CreateAttribute from './createAttribute.svelte';
     import { tooltip } from '$lib/actions/tooltip';
 
@@ -127,7 +126,7 @@
 
             <div class="u-flex common-section u-main-space-between">
                 <p class="text">Total results: {data.documents.total}</p>
-                <Pagination limit={PAGE_LIMIT} offset={data.offset} sum={data.documents.total} />
+                <Pagination limit={data.limit} offset={data.offset} sum={data.documents.total} />
             </div>
         {:else}
             <Empty
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts
index 0044d2cf2..8b4bc7bde 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts
@@ -6,16 +6,17 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, depends, url }) => {
     depends(Dependencies.DOCUMENTS);
-
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         documents: await sdk.forProject.databases.listDocuments(
             params.database,
             params.collection,
-            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')]
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')]
         )
     };
 };
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts
index 0d866caf5..b5c397870 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/+page.ts
@@ -6,14 +6,16 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         logs: await sdk.forProject.databases.listCollectionLogs(
             params.database,
             params.collection,
-            [Query.limit(PAGE_LIMIT), Query.offset(offset)]
+            [Query.limit(limit), Query.offset(offset)]
         )
     };
 };
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts
index 3ba5f81b3..d24d5e5e9 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/+page.ts
@@ -6,15 +6,17 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         logs: await sdk.forProject.databases.listDocumentLogs(
             params.database,
             params.collection,
             params.document,
-            [Query.limit(PAGE_LIMIT), Query.offset(offset)]
+            [Query.limit(limit), Query.offset(offset)]
         )
     };
 };
diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte
index aa8746f49..a7f9f7a6f 100644
--- a/src/routes/console/project-[project]/functions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/+page.svelte
@@ -12,7 +12,6 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Create from './createFunction.svelte';
     import type { PageData } from './$types';
-    import { CARD_LIMIT } from '$lib/constants';
 
     export let data: PageData;
 
@@ -83,7 +82,7 @@
         </CardContainer>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.functions.total}</p>
-            <Pagination limit={CARD_LIMIT} offset={data.offset} sum={data.functions.total} />
+            <Pagination limit={data.limit} offset={data.offset} sum={data.functions.total} />
         </div>
     {:else}
         <Empty
diff --git a/src/routes/console/project-[project]/functions/+page.ts b/src/routes/console/project-[project]/functions/+page.ts
index 00910a6bb..2cfe455ff 100644
--- a/src/routes/console/project-[project]/functions/+page.ts
+++ b/src/routes/console/project-[project]/functions/+page.ts
@@ -7,12 +7,14 @@ import type { PageLoad } from './$types';
 export const load: PageLoad = async ({ url, depends }) => {
     depends(Dependencies.FUNCTIONS);
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, CARD_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? CARD_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         functions: await sdk.forProject.functions.list([
-            Query.limit(CARD_LIMIT),
+            Query.limit(limit),
             Query.offset(offset),
             Query.orderDesc('$createdAt')
         ])
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
index c0f48df26..a0d2c0135 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
@@ -28,7 +28,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { log } from '$lib/stores/logs';
     import { invalidate } from '$app/navigation';
-    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
     import Delete from './delete.svelte';
@@ -281,7 +281,7 @@
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
         <p class="text">Total results: {data.deployments.total ? data.deployments.total - 1 : 0}</p>
         <Pagination
-            limit={PAGE_LIMIT}
+            limit={data.limit}
             offset={data.offset}
             sum={data.deployments.total ? data.deployments.total - 1 : 0} />
     </div>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/+page.ts
index 423b096d9..ea2184a0c 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.ts
@@ -7,12 +7,14 @@ import type { PageLoad } from './$types';
 export const load: PageLoad = async ({ params, depends, url }) => {
     depends(Dependencies.DEPLOYMENTS);
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         deployments: await sdk.forProject.functions.listDeployments(params.function, [
-            Query.limit(PAGE_LIMIT),
+            Query.limit(limit),
             Query.offset(offset),
             Query.orderDesc('$createdAt')
         ])
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
index a011ffb3c..10c5f3d88 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Copy, EmptySearch, Heading, Pagination, Status } from '$lib/components';
-    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import {
@@ -105,7 +105,7 @@
         </TableScroll>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.executions.total}</p>
-            <Pagination limit={PAGE_LIMIT} offset={data.offset} sum={data.executions.total} />
+            <Pagination limit={data.limit} offset={data.offset} sum={data.executions.total} />
         </div>
     {:else}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.ts
index eebbd4df3..4225637e8 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.ts
@@ -7,12 +7,14 @@ import type { PageLoad } from './$types';
 export const load: PageLoad = async ({ params, depends, url }) => {
     depends(Dependencies.EXECUTIONS);
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         executions: await sdk.forProject.functions.listExecutions(params.function, [
-            Query.limit(PAGE_LIMIT),
+            Query.limit(limit),
             Query.offset(offset),
             Query.orderDesc('$createdAt')
         ])
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte
index 59fe9c437..3b242c59c 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/+page.svelte
@@ -10,9 +10,9 @@
     import { tooltip } from '$lib/actions/tooltip';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
-    import { CARD_LIMIT } from '$lib/constants';
 
     export let data: PageData;
+
     let showCreate = false;
 
     const project = $page.params.project;
@@ -84,7 +84,7 @@
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.buckets.total}</p>
-            <Pagination limit={CARD_LIMIT} offset={data.offset} sum={data.buckets.total} />
+            <Pagination limit={data.limit} offset={data.offset} sum={data.buckets.total} />
         </div>
     {:else}
         <Empty
diff --git a/src/routes/console/project-[project]/storage/+page.ts b/src/routes/console/project-[project]/storage/+page.ts
index 7a23468a2..056e12182 100644
--- a/src/routes/console/project-[project]/storage/+page.ts
+++ b/src/routes/console/project-[project]/storage/+page.ts
@@ -6,12 +6,14 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url }) => {
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, CARD_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? CARD_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         buckets: await sdk.forProject.storage.listBuckets([
-            Query.limit(CARD_LIMIT),
+            Query.limit(limit),
             Query.offset(offset),
             Query.orderDesc('$createdAt')
         ])
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 966bea008..cc6ae29cb 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 { addNotification } from '$lib/stores/notifications';
     import type { PageData } from './$types';
     import { invalidate } from '$app/navigation';
-    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
 
     export let data: PageData;
@@ -185,7 +185,7 @@
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.files.total}</p>
-            <Pagination limit={PAGE_LIMIT} offset={data.offset} sum={data.files.total} />
+            <Pagination limit={data.limit} offset={data.offset} sum={data.files.total} />
         </div>
     {:else if data.search}
         <EmptySearch>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
index 06ff3956b..5eff8252d 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
@@ -7,15 +7,17 @@ import type { PageLoad } from './$types';
 export const load: PageLoad = async ({ params, depends, url }) => {
     depends(Dependencies.FILES);
     const page = Number(url.searchParams.get('page'));
-    const offset = pageToOffset(page, PAGE_LIMIT);
+    const limit = Number(url.searchParams.get('limit') ?? PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
     const search = url.searchParams.get('search') ?? undefined;
 
     return {
         offset,
+        limit,
         search,
         files: await sdk.forProject.storage.listFiles(
             params.bucket,
-            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
             search
         )
     };