add search, footer, css correction

app/src/routes/+page.svelte

@@ -10,6 +10,7 @@
 	import { toast } from 'svelte-sonner';
 	import Filters from './filters.svelte';
 	import Loading from './loading.svelte';
+	import Input from '$lib/components/ui/input/input.svelte';
 
 	type Wallpaper = {
 		name: string;
@@ -23,12 +24,15 @@
 		sha256: string;
 	};
 
+	const version = 'v0.1.0';
 	const owner = 'anotherhadi';
 	const repo = 'awesome-wallpapers';
 	const path = 'wallpapers';
 	const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;
 
+	let search: string = $state('');
 	let wallpapers: Wallpaper[] = $state([]);
+	const batchSize = 10;
 
 	let allTags: string[] = $state([]);
 	let selectedTags: string[] = $state([]);
@@ -40,7 +44,6 @@
 			.catch(() => toast.error('Failed to copy'));
 	};
 
-	onMount(() => {
 	const fetchWallpapers = async () => {
 		try {
 			const response = await axios.get(apiUrl, {
@@ -48,10 +51,18 @@
 			});
 
 			if (Array.isArray(response.data)) {
-					const promises = response.data.map(async (file) => {
+				const files = response.data;
+				// Traitement par lots
+				for (let i = 0; i < files.length; i += batchSize) {
+					const batch = files.slice(i, i + batchSize);
+					const batchResults = await Promise.all(
+						batch.map(async (file) => {
+							console.log(file);
 							let [namePart, ...tagsArray] = file.name.split('.')[0].split('_');
 							let tagsPart = tagsArray.join('_');
-						let name = namePart.replace(/-/g, ' ').replace(/\b\w/, (l: string) => l.toUpperCase());
+							let name = namePart
+								.replace(/-/g, ' ')
+								.replace(/\b\w/, (l: string) => l.toUpperCase());
 							let tags = tagsPart ? tagsPart.split('_') : [];
 							let size = (file.size / 1024 / 1024).toFixed(2);
 
@@ -79,9 +90,12 @@
 									});
 								};
 							});
-					});
+						})
-
+					);
-					wallpapers = await Promise.all(promises);
+					wallpapers = [...wallpapers, ...batchResults];
+					// Optionnel : attendre un peu avant de charger le batch suivant
+					await new Promise((r) => setTimeout(r, 100));
+				}
 			} else {
 				console.error('Error');
 			}
@@ -90,11 +104,11 @@
 		}
 	};
 
-		fetchWallpapers();
+	onMount(fetchWallpapers);
-	});
 </script>
 
-<div class="flex min-h-[100vh] flex-col gap-5 bg-background">
+<div class="relative flex min-h-[100vh] flex-col gap-5 bg-background">
+	<p class="absolute right-0 top-0 m-2 text-muted-foreground">{version}</p>
 	<header class="flex h-96 w-full flex-col items-center justify-center gap-5 bg-primary/20">
 		<Badge class="gap-2" href={'https://github.com/' + owner + '/' + repo} target="_blank"
 			>Check the github repo <ChevronRight size={16} /></Badge
@@ -103,16 +117,18 @@
 		<p class="text-muted-foreground">Open-source wallpapers collection from {owner}/{repo}</p>
 	</header>
 
-	<main class="mx-10">
+	<main class="px-10">
-		<div class="px-2 py-4">
+		<div class="flex gap-5 px-2 py-4">
+			<Input class="h-8" placeholder="Search..." bind:value={search} />
 			<Filters title="Tags" options={allTags} bind:selectedValues={selectedTags} />
 		</div>
 		{#if wallpapers.length === 0}
 			<Loading />
 		{:else}
-			<div class="grid grid-cols-2 gap-5">
+			<div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
 				{#each wallpapers as wallpaper}
 					{#if selectedTags.length === 0 || selectedTags.some( (tag) => wallpaper.tags.includes(tag) )}
+						{#if wallpaper.name.toLowerCase().includes(search.toLowerCase())}
 							<div class="rounded-t-md bg-muted/5">
 								<div class="relative">
 									<AspectRatio
@@ -123,7 +139,7 @@
 									>
 										{#if wallpaper.hovered}
 											<div
-											class="absolute bottom-0 left-0 right-0 top-0 z-[10] flex items-center justify-center bg-primary/20"
+												class="absolute bottom-0 left-0 right-0 top-0 z-[10] flex items-center justify-center bg-primary/50"
 											>
 												<Button
 													href={`https://raw.githubusercontent.com/${owner}/${repo}/main/${path}/${wallpaper.filename}`}
@@ -199,7 +215,7 @@ image = pkgs.fetchurl {
 image = pkgs.fetchurl &lbrace;
   url = "https://raw.githubusercontent.com/{owner}/{repo}/refs/heads/main/{path}/{wallpaper.filename}";
   sha256 = "{wallpaper.sha256}";
-&rbrace;</pre>
+&rbrace;;</pre>
 														</div>
 													</div>
 													<Drawer.Footer>
@@ -245,9 +261,13 @@ image = pkgs.fetchurl &lbrace;
 								{/if}
 							</div>
 						{/if}
+					{/if}
 				{/each}
 			</div>
 		{/if}
 	</main>
 </div>
-
+<div class="mt-5 flex h-32 w-full flex-col items-center justify-center gap-4 bg-primary/20">
+	<img src="/favicon.png" alt="logo" class="w-5 rounded-md" />
+	<p class="text-muted-foreground">@anotherhadi</p>
+</div>

netlify.toml

@@ -2,3 +2,4 @@
   base = "app"
   publish = "build"
   command = "pnpm build"
+  ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ."