um

src/lib/api.ts

@@ -8,7 +8,13 @@ export const client = ky.create({
 
 export const api = {
 		file: async (uid: string) => await client.get<Blob>(uid),
-		list: async () => await client.get('list').json<StereoFile[]>(),
+		list: async (page?: number, size?: number) => {
+			const searchParams = new URLSearchParams();
+			if (page !== undefined) searchParams.append('page', String(page));
+			if (size !== undefined) searchParams.append('size', String(size));
+
+			return await client.get('list', { searchParams }).json<StereoFile[]>();
+		},
 		upload: async (file: File) => {
 				const formData = new FormData();
 				formData.append('file', file);

src/routes/api/[...path]/index.tsx

@@ -1,7 +1,7 @@
 import type { RequestEvent, RequestHandler } from '@builder.io/qwik-city';
 
 const proxy = async ({ send, url, pathname, request }: RequestEvent) => {
-  const targetUrl = new URL(`http://localhost:8081${pathname}`, url);
+  const targetUrl = new URL(`http://localhost:8081${pathname}${url.search}`, url);
   const headers = new Headers(request.headers);
 
   const fetchOptions: RequestInit = {

src/routes/dashboard/index.tsx

@@ -1,4 +1,4 @@
-import { component$, Signal, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
+import { $, component$, Signal, useSignal, useTask$, useVisibleTask$ } from "@builder.io/qwik";
 import { routeLoader$, type DocumentHead } from "@builder.io/qwik-city";
 import Actionbar from "~/components/dashboard/Actionbar";
 import Settings from "~/components/dashboard/Settings";
@@ -55,12 +55,14 @@ const Files = component$<{
 		type FileType = "image" | "video" | "audio" | "other";
 		const fileType: Signal<FileType> = useSignal<FileType>("other");
 		const type = file.Mime.split("/")[1];
+
 		useTask$(() => {
 			if (["jpeg", "jpg", "png", "gif", "webp"].includes(type)) fileType.value = "image";
 			else if (["mp4", "webm", "ogg", "avi", "mov"].includes(type)) fileType.value = "video";
 			else if (["mp3", "wav", "flac", "aac"].includes(type)) fileType.value = "audio";
 			else fileType.value = "other";
 		});
+
 		return (
 			<div class="w-full h-max object-cover flex-grow relative overflow-clip">
 			{fileType.value === "image" && (
@@ -116,8 +118,21 @@ const Files = component$<{
 		</div>
 		);
 	});
+
+	const loadingMore = useSignal(false);
+
+	const onScroll = $(async (e: Event) => {
+		const element = e.target as HTMLElement;
+		if (!element) return;
+
+		const isAtBottom = element.scrollHeight - element.scrollTop - element.clientHeight < threshold;
+		if (isAtBottom) {
+			console.log("Loading more files...");
+		}
+	});
+
 	return (
-	<div class="px-2 mb-6 flex-grow overflow-y-auto mask-clip-content rounded-3xl">
+		<div class="px-2 mb-6 flex-grow overflow-y-auto mask-clip-content rounded-3xl" onScroll$={onScroll}>
 			<div class="w-full columns-1 md:columns-2 lg:columns-4 gap-2 space-y-2">
 				{files.value.map((file) => (
 				<File key={file.ID} file={file} />