update pagination

package-lock.json

@@ -8,7 +8,7 @@
 			"name": "@appwrite/console",
 			"version": "0.0.1",
 			"dependencies": {
-				"aw-labs-ui": "^0.0.4"
+				"aw-labs-ui": "^0.0.5"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "1.0.0-next.31",
@@ -1995,9 +1995,9 @@
 			}
 		},
 		"node_modules/aw-labs-ui": {
-			"version": "0.0.4",
-			"resolved": "https://registry.npmjs.org/aw-labs-ui/-/aw-labs-ui-0.0.4.tgz",
-			"integrity": "sha512-2NCjlOrN6m+OQzAyHLImzBvHANpyr3MBwFFmJIy/biF/KECXLnBb5ihef2/tmaJUGtNSOS5kEnwlPWAHokhVHA==",
+			"version": "0.0.5",
+			"resolved": "https://registry.npmjs.org/aw-labs-ui/-/aw-labs-ui-0.0.5.tgz",
+			"integrity": "sha512-ifzmzzGRC7TONPCU8YEx+CJ03Q6UwXkIkq1hOk7OUqeeB6Vritk2TCpxs+wrX+M8oI4SV/WDnkS5VtjHWH7ZKQ==",
 			"dependencies": {
 				"prettier": "^2.5.1",
 				"sass": "^1.49.7"
@@ -8609,9 +8609,9 @@
 			"dev": true
 		},
 		"aw-labs-ui": {
-			"version": "0.0.4",
-			"resolved": "https://registry.npmjs.org/aw-labs-ui/-/aw-labs-ui-0.0.4.tgz",
-			"integrity": "sha512-2NCjlOrN6m+OQzAyHLImzBvHANpyr3MBwFFmJIy/biF/KECXLnBb5ihef2/tmaJUGtNSOS5kEnwlPWAHokhVHA==",
+			"version": "0.0.5",
+			"resolved": "https://registry.npmjs.org/aw-labs-ui/-/aw-labs-ui-0.0.5.tgz",
+			"integrity": "sha512-ifzmzzGRC7TONPCU8YEx+CJ03Q6UwXkIkq1hOk7OUqeeB6Vritk2TCpxs+wrX+M8oI4SV/WDnkS5VtjHWH7ZKQ==",
 			"requires": {
 				"prettier": "^2.5.1",
 				"sass": "^1.49.7"

package.json

@@ -20,7 +20,7 @@
 		"vitebook:preview": "vitebook preview"
 	},
 	"dependencies": {
-		"aw-labs-ui": "^0.0.4"
+		"aw-labs-ui": "^0.0.5"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "1.0.0-next.31",

src/lib/components/collapsible.svelte

@@ -0,0 +1,21 @@
+<ul class="collapsible">
+	<li class="collapsible-item">
+		<details class="collapsible-wrapper">
+			<summary class="collapsible-button">
+				<span class="text">
+					<slot name="header" />
+				</span>
+				<span class="collapsible-button-optional">
+					<slot name="subheader" />
+				</span>
+				<div class="icon">
+					<span class="icon-plus" aria-hidden="true" />
+					<span class="icon-minus" aria-hidden="true" />
+				</div>
+			</summary>
+			<p class="collapsible-content">
+				<slot />
+			</p>
+		</details>
+	</li>
+</ul>

src/lib/components/index.ts

@@ -12,3 +12,4 @@ export { default as Empty } from './empty.svelte';
 export { default as DropList } from './dropList.svelte';
 export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
+export { default as Collapsible } from './collapsible.svelte';

src/lib/components/pagination.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 
-	import { Button } from '$lib/elements/forms';
-
 	export let limit: number;
 	export let offset: number;
 	export let sum: number;
@@ -26,11 +24,33 @@
 		}
 		dispatch('change');
 	};
+
+	$: noPrev = offset === 0;
+	$: noNext = sum - limit < offset;
+	$: currentPage = offset / limit + 1;
+	$: totalPages = Math.ceil(sum / limit);
 </script>
 
 {#if sum >= limit}
-	<div class="grid">
-		<Button on:click={prev} disabled={offset === 0} outline>{'<'}</Button>
-		<Button on:click={next} disabled={sum - limit < offset} outline>{'>'}</Button>
-	</div>
+	<nav class="pagination">
+		<span
+			on:click={prev}
+			disabled={noPrev}
+			class:is-disabled={noPrev}
+			class="button is-only-icon"
+			aria-label="previous page"
+		>
+			<span class="icon-left-open" aria-hidden="true" />
+		</span>
+		<span class="pagination-info">{currentPage} / {totalPages}</span>
+		<span
+			on:click={next}
+			disabled={noNext}
+			class:is-disabled={noNext}
+			class="button is-only-icon"
+			aria-label="next page"
+		>
+			<span class="icon-right-open" aria-hidden="true" />
+		</span>
+	</nav>
 {/if}

src/lib/layout/footer.svelte

@@ -1,37 +1,31 @@
-<ul class="copyright">
-	<li>
-		<a class="link" href="https://github.com/appwrite/appwrite" target="_blank" rel="noopener">
-			<i class="icon-github-circled" />
-			GitHub
-		</a>
-	</li>
-	<li>
-		<a class="link" href="https://appwrite.io/discord" target="_blank" rel="noopener">
-			<i class="icon-discord" />
-			Discord
-		</a>
-	</li>
-	<li>
-		<a
-			class="link"
-			href="https://github.com/appwrite/appwrite/issues/new"
-			target="_blank"
-			rel="noopener"
-		>
-			Open an Issue
-		</a>
-	</li>
-	<li>
-		<a class="link" href="https://appwrite.io/docs" target="_blank" rel="noopener">Docs</a>
-	</li>
-	<li>API:0.13.2</li>
-</ul>
-
-<style lang="scss">
-	.copyright {
-		display: flex;
-		justify-content: center;
-		gap: 1rem;
-		font-size: 0.8rem;
-	}
-</style>
+<footer class="main-footer">
+	<div class="container">
+		<ul class="inline-links is-center">
+			<li class="inline-links-item">
+				<a class="link" href="https://github.com/appwrite/appwrite" target="_blank">
+					<span class="icon-github-circled" aria-hidden="true" />
+					<span class="text">GitHun</span>
+				</a>
+			</li>
+			<li class="inline-links-item">
+				<a class="link" href="https://appwrite.io/discord" target="_blank">
+					<span class="icon-discord" aria-hidden="true" />
+					<span class="text">Discord</span>
+				</a>
+			</li>
+			<li class="inline-links-item">
+				<a class="link" href="https://github.com/appwrite/appwrite/issues/new" target="_blank">
+					<span class="text">Open an Issue</span>
+				</a>
+			</li>
+			<li class="inline-links-item">
+				<a class="link" href="https://appwrite.io/docs" target="_blank">
+					<span class="text">Docs</span>
+				</a>
+			</li>
+			<li class="inline-links-item">
+				<span class="text">API:0.13.2</span>
+			</li>
+		</ul>
+	</div>
+</footer>

src/lib/layout/shell.svelte

@@ -23,7 +23,9 @@
 		<slot name="side" />
 	</nav>
 	<section class="main-content">
-		<slot />
+		<div class="container">
+			<slot />
+		</div>
 	</section>
 </main>
 
@@ -32,15 +34,6 @@
 		min-height: 100vh;
 	}
 
-	.main-content {
-		max-width: 64rem;
-		width: 100%;
-		margin: 0 auto;
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
 	.main-side {
 		z-index: 25;
 	}

src/routes/console/[project]/database/collection/[collection]/document/[document]/index.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { Card, Copy } from '$lib/components';
+	import { Card, Collapsible, Copy } from '$lib/components';
 	import { Button, Form, InputTags } from '$lib/elements/forms';
 	import { sdkForProject } from '$lib/stores/sdk';
 	import { onMount } from 'svelte';
@@ -71,21 +71,23 @@
 					/>
 				{/if}
 			{/each}
-			<h1>Permissions</h1>
-			<InputTags
-				id="read"
-				label="Read Permissions"
-				bind:tags={$doc.$read}
-				helper="Add 'role:all' for wildcard access"
-				placeholder="User ID, Team ID or Role"
-			/>
-			<InputTags
-				id="write"
-				label="Write Permissions"
-				bind:tags={$doc.$write}
-				helper="Add 'role:all' for wildcard access"
-				placeholder="User ID, Team ID or Role"
-			/>
+			<Collapsible>
+				<svelte:fragment slot="header">Permissions</svelte:fragment>
+				<InputTags
+					id="read"
+					label="Read Permissions"
+					bind:tags={$doc.$read}
+					helper="Add 'role:all' for wildcard access"
+					placeholder="User ID, Team ID or Role"
+				/>
+				<InputTags
+					id="write"
+					label="Write Permissions"
+					bind:tags={$doc.$write}
+					helper="Add 'role:all' for wildcard access"
+					placeholder="User ID, Team ID or Role"
+				/>
+			</Collapsible>
 			<Button submit>Update</Button>
 		</Form>
 	{:else}

src/routes/console/[project]/database/collection/[collection]/index.svelte

@@ -14,9 +14,10 @@
 
 	let offset = 0;
 
-	const limit = 25;
+	const limit = 12;
 	const project = $page.params.project;
 
+	$: request = sdkForProject.database.listDocuments($collection.$id, [], limit, offset);
 	$: columns = [
 		{ key: '$id', title: 'ID' },
 		...$collection.attributes.map((attribute) => ({
@@ -24,8 +25,6 @@
 			title: attribute.key
 		}))
 	];
-
-	$: request = sdkForProject.database.listDocuments($collection.$id, [], limit, offset);
 </script>
 
 <h1>Documents</h1>