feat: add pagination

src/svelte/app/components/grid-view.svelte

@@ -3,23 +3,33 @@
 	import GridCard from "./grid-card.svelte";
 
 	export let data: MarkdownFileRenderData[];
+	export let currentPage: number;
+	export let pageSize: number;
+
+	// Calculate the items to display based on the current page
+	$: displayedItems = Array.from({ length: pageSize }, (_, i) => ({
+		id: (currentPage - 1) * pageSize + i + 1,
+		...data[(currentPage - 1) * pageSize + i],
+	}));
 </script>
 
 <div class="vault-explorer-grid-view">
-	{#each data as file}
-		<GridCard
-			name={file.name}
-			path={file.path}
-			url={file.url}
-			tags={file.tags}
-			source={file.source}
-			status={file.status}
-		/>
-	{/each}
+	<div class="vault-explorer-grid-view__container">
+		{#each displayedItems as file (file.id)}
+			<GridCard
+				name={file.name}
+				path={file.path}
+				url={file.url}
+				tags={file.tags}
+				source={file.source}
+				status={file.status}
+			/>
+		{/each}
+	</div>
 </div>
 
 <style>
-	.vault-explorer-grid-view {
+	.vault-explorer-grid-view__container {
 		display: grid;
 		row-gap: 2rem;
 		column-gap: 2rem;

src/svelte/app/components/list-view.svelte

@@ -4,10 +4,18 @@
 	import { MarkdownFileRenderData } from "../types";
 
 	export let data: MarkdownFileRenderData[];
+	export let currentPage: number;
+	export let pageSize: number;
+
+	// Calculate the items to display based on the current page
+	$: displayedItems = Array.from({ length: pageSize }, (_, i) => ({
+		id: (currentPage - 1) * pageSize + i + 1,
+		...data[(currentPage - 1) * pageSize + i],
+	}));
 </script>
 
 <div class="vault-explorer-list-view">
-	{#each data as file}
+	{#each displayedItems as file (file.id)}
 		<ListItem name={file.name} path={file.path} />
 	{/each}
 </div>

src/svelte/app/index.svelte

@@ -50,15 +50,6 @@
 		onlyFavorites = value;
 	}, 300);
 
-	$: folderFiles = markdownFiles.filter((file) => {
-		if (folderPath === "") {
-			return true;
-		} else if (folderPath === "/") {
-			return true;
-		}
-		return file.path.startsWith(folderPath ?? "/");
-	});
-
 	$: sorted = [...markdownFiles].sort((a, b) => {
 		if (sortFilter === "file-name-asc") {
 			return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
@@ -217,6 +208,15 @@
 		const value = (nativeEvent.target as HTMLInputElement).checked;
 		debounceFavoriteFilter(value);
 	}
+
+	let currentPage = 1;
+	const pageSize = 50;
+	$: totalItems = renderData.length;
+	$: totalPages = Math.floor(totalItems / pageSize);
+
+	function changePage(newPage: number) {
+		currentPage = newPage;
+	}
 </script>
 
 <div class="vault-explorer">
@@ -260,9 +260,33 @@
 					/>
 				</Flex>
 			</Stack>
-			<div>
-				Showing {renderData.length} out of {folderFiles.length}
-			</div>
+			<Stack justify="flex-end" align="center">
+				<Flex>
+					<IconButton
+						iconId="chevrons-left"
+						ariaLabel="First page"
+						on:click={() => changePage(1)}
+					/>
+					<IconButton
+						iconId="chevron-left"
+						ariaLabel="Previous page"
+						disabled={currentPage === 1}
+						on:click={() => changePage(currentPage - 1)}
+					/>
+					<IconButton
+						iconId="chevron-right"
+						ariaLabel="Next page"
+						disabled={currentPage === totalPages}
+						on:click={() => changePage(currentPage + 1)}
+					/>
+					<IconButton
+						iconId="chevrons-right"
+						ariaLabel="Last page"
+						on:click={() => changePage(totalPages)}
+					/>
+				</Flex>
+				{currentPage} / {totalPages}
+			</Stack>
 		</Flex>
 		<Stack spacing="sm">
 			<TabList>
@@ -271,9 +295,9 @@
 			</TabList>
 		</Stack>
 		{#if currentView === "grid"}
-			<GridView data={renderData} />
+			<GridView data={renderData} {currentPage} {pageSize} />
 		{:else}
-			<ListView data={renderData} />
+			<ListView data={renderData} {currentPage} {pageSize} />
 		{/if}
 	</div>
 </div>