feat: local storage

src/lib/components/atoms/Button.svelte

@@ -1,7 +1,7 @@
 <script>
 	export let kind = 'secondary';
 	$: type = 'button-' + kind;
-	export let href = '#';
+	export let href = '';
 	export let maxWidth = false;
 	export let icon = '';
 	export let target = '';
@@ -21,11 +21,12 @@
 	a {
 		text-decoration: none;
 		border-radius: 16px;
+		transition: all 0.2s var(--bezier-one);
 	}
 
 	.unclickable {
-		pointer-events: none;
-		cursor:not-allowed;
+		cursor: not-allowed;
+		opacity: 0.4;
 	}
 	div,
 	.button-secondary {
@@ -37,7 +38,6 @@
 		border-radius: 12px;
 		padding: 1rem 1.75rem;
 		display: block;
-		cursor: pointer;
 		background-color: var(--grey-two);
 		transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
 		user-select: none;

src/lib/components/atoms/LogoOption.svelte

@@ -16,9 +16,9 @@
 			// the Updater
 			selected = selected;
 		}
-		console.log(selected)
+		console.log(selected);
+		localStorage.setItem("selected", JSON.stringify(selected));
 	};
-
 </script>
 
 <div on:click={handleClick} class:clicked>
@@ -33,30 +33,36 @@
 	div {
 		color: var(--white);
 		text-decoration: none;
-		padding: 1rem;
+		padding: 1.5rem;
 		width: 100%;
 		transition: all 0.3s var(--bezier-one);
-		border-radius: 8px;
+		border-radius: 4px;
 		display: flex;
 		gap: 1.5rem;
-		align-items: center;
 		background-color: var(--grey-six);
 		border: 1px solid var(--grey-three);
 		cursor: pointer;
+		align-items: center;
 	}
 
+
 	h2 {
 		font-size: 1rem;
 		font-weight: 500;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+		
 	}
 
 	h6 {
 		font-size: 0.9rem;
 	}
 
+	h2, h6 {
+		display: block;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
 	.text {
 		flex-direction: column;
 	}

src/routes/polling/+page.svelte

@@ -1,38 +1,54 @@
 <script lang="ts">
 	import LogoOption from '$lib/components/atoms/LogoOption.svelte';
 	import Button from '$lib/components/atoms/Button.svelte';
+
 	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { expoOut } from 'svelte/easing';
 
 	let selected: Array<string> = [];
 	let logos = [];
+	let logoAmount = 4;
 	let currentPage = 1;
 	let maxPages = 1;
-	let logoAmount = 4;
 	let min = 0;
-	let max = logoAmount;
+	let max = 4;
+	let transitionDirection = 5;
 
+	// you will never see shittier code tm
+	// will refactor later maybe idk
 	onMount(async () => {
 		const response = await fetch('https://poll.revanced.app/logos');
 		const json = await response.json();
+		currentPage = localStorage.getItem("currentPage");
+		min = (currentPage - 1) * logoAmount;
+		max = min + logoAmount;
+		selected = JSON.parse(localStorage.getItem("selected"));
 		// guh
 		for (const name of Object.keys(json)) {
 			logos.push({ name, ...json[name] });
 		}
+		maxPages = Math.floor(logos.length / logoAmount);
 		// update ui
 		logos = logos;
-		maxPages = Math.floor(logos.length / logoAmount);
 	});
 
 	function previousPage() {
-		min -= logoAmount;
-		max -= logoAmount;
+		if (currentPage <= 1) return null;
 		currentPage--;
+		min = (currentPage - 1) * logoAmount;
+		max = min + logoAmount;
+		localStorage.setItem("currentPage", currentPage.toString());
+		transitionDirection = -5;
 	}
 
 	function nextPage() {
-		min += logoAmount;
-		max += logoAmount;
+		if (currentPage >= maxPages) return null;
 		currentPage++;
+		min = (currentPage - 1) * logoAmount;
+		max = min + logoAmount;
+		localStorage.setItem("currentPage", currentPage.toString());
+		transitionDirection = 5;
 	}
 </script>
 
@@ -46,16 +62,26 @@
 	<div class="wrapper">
 		<div class="top-container">
 			<h1>ReVanced Logo Poll</h1>
-			<h2>{selected.length}/4 selected· Page {currentPage}/{maxPages}</h2>
+			<h2>{selected.length}/{logos.length} selected · Page {currentPage}/{maxPages}</h2>
 			<div class="top-custom-button-container">
 				<a href="https://hhh.com" target="_blank" rel="noreferrer"><button>Help</button></a>
 				<a href="https://revanced.app" target="_blank" rel="noreferrer"><button>Website</button></a>
 			</div>
 		</div>
+
 		<div class="options-grid">
 			{#each logos.slice(min, max) as { id, gdrive_direct_url, name, filename }}
 				{#key currentPage}
-					<LogoOption bind:selected clicked={selected.includes(id)} {id} logo={gdrive_direct_url} {name} {filename} />
+					<span in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
+						<LogoOption
+							bind:selected
+							clicked={selected.includes(id)}
+							{id}
+							logo={gdrive_direct_url}
+							{name}
+							{filename}
+						/>
+					</span>
 				{/key}
 			{/each}
 		</div>
@@ -126,7 +152,7 @@
 	}
 	@media screen and (max-width: 768px) {
 		h1 {
-			font-size: 1.5rem;
+			font-size: 1.75rem;
 		}
 
 		.options-grid {