feat: add limit

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}

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)])
     };
 };

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>
 

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')
         ])
     };

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>
 

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')
         ])

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>

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)
         ])
     };

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>

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
         )
     };

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>

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
         )
     };

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)
         ])
     };

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>

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
         )
     };

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)
         ])
     };

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

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')
         ])

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

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')
         ])

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

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')]
         )
     };
 };

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)]
         )
     };
 };

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)]
         )
     };
 };

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

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')
         ])

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>

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')
         ])

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>

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')
         ])

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

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')
         ])

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>

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
         )
     };