chore: Merge branch dev to main (#304)

2026-01-10 21:26:18 +00:00 · 2025-06-26 16:51:52 +03:00
parent d29c29361c 7f12c3819e
commit 1162f6b43e
57 changed files with 1110 additions and 1164 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,5 @@
 RV_API_URL=https://api.revanced.app
+RV_STATUS_URL=https://status.revanced.app
+RV_EMAIL=contact@revanced.app
 RV_GOOGLE_TAG_MANAGER_ID=
 RV_DMCA_GUID=
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -34,6 +34,8 @@ jobs:
          RV_API_URL: ${{ vars.RV_API_URL }}
          RV_GOOGLE_TAG_MANAGER_ID: ${{ vars.RV_GOOGLE_TAG_MANAGER_ID }}
          RV_DMCA_GUID: ${{ vars.RV_DMCA_GUID }}
+          RV_STATUS_URL: ${{ vars.RV_STATUS_URL }}
+          RV_EMAIL: ${{ vars.RV_EMAIL }}
        run: npm run build

      - name: Deploy
--- a/src/app.html
+++ b/src/app.html
@@ -22,6 +22,6 @@
 	</head>

 	<body>
-		%sveltekit.body%
+		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/app.scss
+++ b/src/app.scss
@@ -143,7 +143,7 @@ p {
 	line-height: 1.75rem;
 }

-@media screen and (max-width: 767px) {
+@media (max-width: 768px) {
 	h1 {
 		font-size: 2.6rem;
 		line-height: 3.75rem;
--- a/src/data/api/settings.ts
+++ b/src/data/api/settings.ts
@@ -1,21 +1,13 @@
 import { browser } from '$app/environment';
-import { RV_API_URL } from '$env/static/public';
+import { RV_API_URL, RV_EMAIL, RV_STATUS_URL } from '$env/static/public';

 export const default_api_url = RV_API_URL;
+export const default_status_url = RV_STATUS_URL;
+export const default_email = RV_EMAIL;

 const URL_KEY = 'revanced_api_url';
 const STATUS_KEY = 'revanced_status_url';
-
-function set_status_url(apiUrl: string) {
-	fetch(`${apiUrl}/v4/about`)
-		.then((response) => (response.ok ? response.json() : null))
-		.then((data) => {
-			if (data?.status) {
-				localStorage.setItem(STATUS_KEY, data.status);
-				console.log('Status is now:', localStorage.getItem(STATUS_KEY));
-			}
-		});
-}
+const EMAIL_KEY = 'revanced_email';

 export const API_VERSION = 'v4';

@@ -24,9 +16,7 @@ export function api_base_url(): string {
 	if (browser) {
 		const apiUrl = localStorage.getItem(URL_KEY) || default_api_url;

-		if (!localStorage.getItem(STATUS_KEY)) {
-			set_status_url(apiUrl);
-		}
+		set_about_info(apiUrl);

 		return apiUrl;
 	}
@@ -34,12 +24,20 @@ export function api_base_url(): string {
 	return default_api_url;
 }

-export function status_url(): string | null {
+export function status_url(): string {
 	if (browser) {
-		return localStorage.getItem(STATUS_KEY) || null;
+		return localStorage.getItem(STATUS_KEY) || default_status_url;
 	}

-	return null;
+	return default_status_url;
+}
+
+export function email(): string {
+	if (browser) {
+		return localStorage.getItem(EMAIL_KEY) || default_email;
+	}
+
+	return default_email;
 }

 // (re)set base URL.
@@ -48,6 +46,21 @@ export function set_api_base_url(url?: string) {
 		localStorage.removeItem(URL_KEY);
 	} else {
 		localStorage.setItem(URL_KEY, url);
-		set_status_url(url);
+		set_about_info(url);
+	}
+}
+
+function set_about_info(apiUrl: string) {
+	if (!localStorage.getItem(STATUS_KEY) || !localStorage.getItem(EMAIL_KEY)) {
+		fetch(`${apiUrl}/v4/about`)
+			.then((response) => (response.ok ? response.json() : null))
+			.then((data) => {
+				if (data?.status) {
+					localStorage.setItem(STATUS_KEY, data.status);
+					localStorage.setItem(EMAIL_KEY, data.contact.email);
+					console.log('Status is now:', localStorage.getItem(STATUS_KEY));
+					console.log('Email is now:', localStorage.getItem(EMAIL_KEY));
+				}
+			});
 	}
 }
--- a/src/layout/Banners/AnnouncementBanner.svelte
+++ b/src/layout/Banners/AnnouncementBanner.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { read_announcements } from '$lib/stores';
+	import Banner from '$layout/Banners/Banner.svelte';
+	import { goto } from '$app/navigation';
+	import { createQuery } from '@tanstack/svelte-query';
+	import { queries } from '$data/api';
+	import moment from 'moment';
+
+	const query = createQuery(queries.announcements());
+
+	$: latestUnreadAnnouncement = (() => {
+		const announcements = $query.data?.announcements ?? [];
+
+		const nonArchived = announcements.filter(
+			(a) => !a.archived_at || moment(a.archived_at).isAfter(moment())
+		);
+
+		const announcement = nonArchived[0];
+
+		return announcement && !$read_announcements.has(announcement.id) ? announcement : undefined;
+	})();
+
+	function setAsRead() {
+		if (!latestUnreadAnnouncement) return;
+
+		read_announcements.update((set) => {
+			const updated = new Set(set);
+			updated.add(latestUnreadAnnouncement.id);
+			return updated;
+		});
+	}
+
+	function handleClick() {
+		if (!latestUnreadAnnouncement) return;
+
+		goto(`/announcements/${latestUnreadAnnouncement.id}`);
+		setAsRead();
+	}
+
+	function handleClose() {
+		if (!latestUnreadAnnouncement) return;
+
+		setAsRead();
+	}
+
+	function getBannerLevel(level: number | undefined): 'info' | 'caution' {
+		if (!level || level == 0) return 'info';
+		return 'caution';
+	}
+</script>
+
+{#if latestUnreadAnnouncement}
+	<Banner
+		title={'We have an announcement'}
+		description={`You can read more about "${latestUnreadAnnouncement.title}" in our latest post.`}
+		level={getBannerLevel(latestUnreadAnnouncement.level)}
+		buttonText="Read more"
+		buttonOnClick={handleClick}
+		onDismiss={handleClose}
+	/>
+{/if}
--- a/src/layout/Banners/Banner.svelte
+++ b/src/layout/Banners/Banner.svelte
@@ -2,7 +2,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import Close from 'svelte-material-icons/Close.svelte';
 	import ArrowRight from 'svelte-material-icons/ArrowRight.svelte';
-	import Button from './Button.svelte';
+	import Button from '$lib/components/Button.svelte';

 	export let title: string;
 	export let description: string | undefined = undefined;
@@ -83,7 +83,7 @@
 			color: #601410;
 		}

-		@media (max-width: 767px) {
+		@media (max-width: 768px) {
 			flex-direction: column;
 			padding: 1.1rem 1.3rem;
 		}
--- a/src/layout/Banners/StatusBanner.svelte
+++ b/src/layout/Banners/StatusBanner.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import Banner from '$lib/components/Banner.svelte';
+	import { email } from '$data/api/settings';
+	import Banner from '$layout/Banners/Banner.svelte';

 	export let statusUrl: string | null = null;

@@ -9,7 +10,7 @@

 <Banner
 	title="API service is currently down"
-	description="We're actively investigating and will update you shortly. We appreciate your patience."
+	description="Some features of the site might be impacted. If this issue persists, reach out to mailto:{email()}"
 	buttonText={statusUrl ? 'View status' : undefined}
 	buttonOnClick={statusUrl ? handleClick : undefined}
 	level="caution"
--- a/src/layout/Dialogs/ConsentDialog.svelte
+++ b/src/layout/Dialogs/ConsentDialog.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import Button from '$lib/components/Button.svelte';
+	import Dialog from '$layout/Dialogs/Dialog.svelte';
+	import { onMount } from 'svelte';
+	import { allowAnalytics } from '$lib/stores';
+	import { RV_GOOGLE_TAG_MANAGER_ID } from '$env/static/public';
+
+	let showConsentDialog = false;
+
+	function enableAnalytics() {
+		//@ts-ignore
+		window.dataLayer = window.dataLayer || [];
+		function gtag(...args: any[]) {
+			//@ts-ignore
+			window.dataLayer.push(args);
+		}
+		gtag('js', new Date());
+
+		const script = document.createElement('script');
+		script.src = `https://www.googletagmanager.com/gtm.js?id=${RV_GOOGLE_TAG_MANAGER_ID}`;
+		document.head.append(script);
+	}
+
+	function handleConsent(allowed: boolean) {
+		localStorage.setItem('analytics', allowed.toString());
+		allowAnalytics.set(allowed);
+		showConsentDialog = false;
+
+		if (allowed) enableAnalytics();
+	}
+
+	onMount(() => {
+		const savedConsent = localStorage.getItem('analytics');
+
+		if (savedConsent !== null) {
+			const allowed = savedConsent === 'true';
+			allowAnalytics.set(allowed);
+			if (allowed) enableAnalytics();
+		} else {
+			showConsentDialog = true;
+		}
+	});
+</script>
+
+<Dialog bind:dialogOpen={showConsentDialog} notDismissible>
+	<svelte:fragment slot="title">It's your choice</svelte:fragment>
+	<svelte:fragment slot="description">
+		We use analytics to improve your experience on this site. By clicking "Allow", you allow us to
+		collect anonymous data about your visit.
+	</svelte:fragment>
+	<svelte:fragment slot="buttons">
+		<Button type="text" on:click={() => handleConsent(false)}>Deny</Button>
+		<Button type="filled" on:click={() => handleConsent(true)}>Allow</Button>
+	</svelte:fragment>
+</Dialog>
--- a/src/layout/Dialogs/CryptoDialog.svelte
+++ b/src/layout/Dialogs/CryptoDialog.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+	import Button from '$lib/components/Button.svelte';
+	import Dialog from '$layout/Dialogs/Dialog.svelte';
+	import CircleMultipleOutline from 'svelte-material-icons/CircleMultipleOutline.svelte';
+	import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
+	import QRCode from '$lib/components/QRCode.svelte';
+	import WalletOutline from 'svelte-material-icons/WalletOutline.svelte';
+	import Snackbar from '$lib/components/Snackbar.svelte';
+
+	export let dialogOpen: boolean;
+	export let wallets;
+
+	let qrCodeValue = '';
+	let qrCodeDialogueName = '';
+	let qrCodeDialogue = false;
+	let addressSnackbar = false;
+
+	async function copyToClipboard(walletAddress: string) {
+		addressSnackbar = true;
+		qrCodeDialogue = false;
+
+		try {
+			await navigator.clipboard.writeText(walletAddress);
+		} catch (error) {
+			console.error('Failed to copy crypto wallet:', error);
+		}
+	}
+</script>
+
+<Dialog bind:dialogOpen>
+	<svelte:fragment slot="icon">
+		<CircleMultipleOutline size="32px" color="var(--surface-six)" />
+	</svelte:fragment>
+	<svelte:fragment slot="title">Cryptocurrencies</svelte:fragment>
+	<svelte:fragment slot="description">
+		<hr style="margin: 1rem 0;" />
+		<div class="wallets">
+			{#each wallets as wallet}
+				<button
+					on:click={() => {
+						qrCodeValue = wallet.address;
+						qrCodeDialogueName = wallet.currency_code;
+						qrCodeDialogue = !qrCodeDialogue;
+						// when the user clicks a wallet the crypto wallet goes away
+						// because multi page dialogues aren't implemented yet oops
+						dialogOpen = false;
+					}}
+				>
+					<div class="wallet-name">
+						<img
+							src="/donate/crypto/{wallet.currency_code}.svg"
+							onerror="this.onerror=null; this.src='/donate/fallback.svg'"
+							alt={`${wallet.network} icon.'`}
+						/>
+						{`${wallet.network} (${wallet.currency_code})`}
+					</div>
+					<div id="arrow">
+						<ChevronUp size="20px" color="var(--surface-six)" />
+					</div>
+				</button>
+			{/each}
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="buttons">
+		<Button type="filled" on:click={() => (dialogOpen = false)}>Close</Button>
+	</svelte:fragment>
+</Dialog>
+
+<Dialog bind:dialogOpen={qrCodeDialogue}>
+	<svelte:fragment slot="icon">
+		<WalletOutline size="32px" color="var(--surface-six)" />
+	</svelte:fragment>
+	<svelte:fragment slot="title">{qrCodeDialogueName} Wallet</svelte:fragment>
+	<svelte:fragment slot="description">
+		<div class="qr-code-body">
+			{qrCodeValue}
+			<QRCode codeValue={qrCodeValue} />
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="buttons">
+		<Button
+			type="text"
+			on:click={() => {
+				qrCodeDialogue = false;
+				dialogOpen = true;
+			}}>Back</Button
+		>
+		<Button type="filled" on:click={() => copyToClipboard(qrCodeValue)}>Copy Address</Button>
+	</svelte:fragment>
+</Dialog>
+
+<Snackbar bind:open={addressSnackbar}>
+	<svelte:fragment slot="text">Address copied to clipboard</svelte:fragment>
+</Snackbar>
+
+<style lang="scss">
+	.wallets {
+		// i just guessed this
+		width: clamp(200px, 75vw, 375px);
+		#arrow {
+			height: 20px;
+			transform: rotate(90deg);
+		}
+
+		button {
+			width: 100%;
+			font-size: 0.9rem;
+			background-color: transparent;
+			border: none;
+			color: var(--text-four);
+			cursor: pointer;
+			text-align: left;
+			display: flex;
+			justify-content: space-between;
+			background-color: var(--surface-seven);
+			padding: 0.75rem 1.25rem;
+			transition: filter 0.4s var(--bezier-one);
+
+			&:hover {
+				filter: brightness(85%);
+			}
+		}
+
+		.wallet-name {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+
+			// crypto icon
+			img {
+				height: 24px;
+				width: 24px;
+			}
+		}
+	}
+
+	.qr-code-body {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+		word-break: break-word;
+		text-align: center;
+	}
+</style>
--- a/src/lib/components/Dialogue.svelte
+++ b/src/lib/components/Dialogue.svelte
@@ -4,7 +4,7 @@

 	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';

-	export let modalOpen = false;
+	export let dialogOpen = false;
 	export let fullscreen = false;
 	export let notDismissible = false;

@@ -16,20 +16,20 @@
 	}
 </script>

-{#if modalOpen}
+{#if dialogOpen}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		class="overlay"
 		on:click={() => {
-			if (!notDismissible) modalOpen = !modalOpen;
+			if (!notDismissible) dialogOpen = !dialogOpen;
 		}}
 		on:keypress={() => {
-			if (!notDismissible) modalOpen = !modalOpen;
+			if (!notDismissible) dialogOpen = !dialogOpen;
 		}}
 		transition:fade={{ easing: quadInOut, duration: 150 }}
 	/>

 	<dialog
-		class="modal"
 		class:fullscreen
 		class:scrolled={y > 10}
 		aria-modal="true"
@@ -37,10 +37,9 @@
 		on:scroll={parseScroll}
 		transition:fade={{ easing: quadInOut, duration: 150 }}
 	>
-		<div class="top">
 		<div class="title" class:hasIcon={$$slots.icon}>
 			{#if fullscreen}
-					<button id="back-button" on:click={() => (modalOpen = !modalOpen)}>
+				<button id="back-button" on:click={() => (dialogOpen = !dialogOpen)}>
 					<ArrowLeft size="24px" color="var(--surface-six)" />
 				</button>
 			{/if}
@@ -67,11 +66,10 @@
 				<slot name="buttons" />
 			</div>
 		{/if}
-		</div>
 	</dialog>
 {/if}

-<style>
+<style lang="scss">
 	.overlay {
 		position: fixed;
 		top: 0;
@@ -82,11 +80,43 @@
 		z-index: 6;
 	}

-	.top {
+	dialog {
+		position: fixed;
+		width: min(85%, 425px);
+		max-height: 75%;
+		overflow-y: scroll;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		border: none;
+		border-radius: 26px;
+		background-color: var(--surface-seven);
+		display: flex;
+		gap: 5%;
+		white-space: normal;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		gap: 1rem;
+		z-index: 7;
+		padding: 32px;
+		box-shadow:
+			0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+			0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+			0px 2px 4px -1px rgba(0, 0, 0, 0.2);
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		#back-button {
+			cursor: pointer;
+		}
+
+		.hasIcon {
+			flex-direction: column;
 		}

 		.title {
@@ -104,39 +134,29 @@
 			width: 100%;
 		}

-	#back-button {
-		cursor: pointer;
+		&.fullscreen {
+			padding: 0;
+			max-height: 100%;
+			width: 100%;
+			border-radius: 0;
+
+			&.scrolled .title {
+				border-bottom: 1px solid var(--border);
 			}

-	.hasIcon {
-		flex-direction: column;
+			.slot {
+				padding: 0 32px 32px;
 			}

-	.modal {
-		position: fixed;
-		width: min(85%, 425px);
-		max-height: 75%;
-		overflow-y: scroll;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		border: none;
-		border-radius: 26px;
-		background-color: var(--surface-seven);
-		display: flex;
-		gap: 5%;
-		white-space: normal;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		z-index: 7;
+			.title {
+				justify-content: flex-start;
+				position: sticky;
 				padding: 32px;
-		box-shadow:
-			0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-			0px 1px 10px 0px rgba(0, 0, 0, 0.12),
-			0px 2px 4px -1px rgba(0, 0, 0, 0.2);
-		scrollbar-width: none;
-		-ms-overflow-style: none;
+				padding-bottom: 0.75rem;
+				top: 0;
+				left: 0;
+			}
+		}
 	}

 	button {
@@ -148,38 +168,10 @@
 		align-items: center;
 	}

-	.fullscreen {
-		padding: 0;
-		max-height: 100%;
-		width: 100%;
-		border-radius: 0;
-	}
-
-	.fullscreen .slot {
-		padding: 0 32px 32px;
-	}
-
-	.fullscreen .title {
-		justify-content: flex-start;
-		position: sticky;
-		padding: 32px;
-		padding-bottom: 0.75rem;
-		top: 0;
-		left: 0;
-	}
-
-	.fullscreen.scrolled .title {
-		border-bottom: 1px solid var(--border);
-	}
-
 	.slot {
 		display: flex;
 		flex-direction: column;
 		align-content: center;
 		width: 100%;
 	}
-
-	.modal::-webkit-scrollbar {
-		display: none;
-	}
 </style>
--- a/src/layout/Dialogs/DownloadCompatibilityWarningDialog.svelte
+++ b/src/layout/Dialogs/DownloadCompatibilityWarningDialog.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Button from '$lib/components/Button.svelte';
+	import { Query } from '@tanstack/query-core';
+	import Dialog from '$layout/Dialogs/Dialog.svelte';
+	import { queries } from '$data/api';
+	import { createQuery } from '@tanstack/svelte-query';
+
+	export let dialogOpen: boolean;
+	export let warning: string;
+
+	const query = createQuery(queries.manager());
+</script>
+
+<Dialog bind:dialogOpen>
+	<svelte:fragment slot="title">Warning</svelte:fragment>
+	<svelte:fragment slot="description">{warning} Do you still want to download?</svelte:fragment>
+	<svelte:fragment slot="buttons">
+		<Query {query} let:data>
+			<Button type="text" href={data.release.download_url} on:click={() => (dialogOpen = false)}>
+				Okay
+			</Button>
+		</Query>
+		<Button type="text" on:click={() => (dialogOpen = false)}>Cancel</Button>
+	</svelte:fragment>
+</Dialog>
--- a/src/layout/Dialogs/ImageDialog.svelte
+++ b/src/layout/Dialogs/ImageDialog.svelte
@@ -7,12 +7,12 @@

 	const dispatch = createEventDispatcher();

-	function closeModal() {
+	function closeDialog() {
 		dispatch('close');
 	}

 	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') closeModal();
+		if (event.key === 'Escape') closeDialog();
 	}
 </script>

@@ -20,16 +20,16 @@

 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="modal-overlay" on:click={closeModal} transition:fade={{ duration: 175 }}>
+<div class="dialog-overlay" on:click={closeDialog} transition:fade={{ duration: 175 }}>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div class="modal-content" on:click|stopPropagation transition:fade={{ duration: 175 }}>
-		<button class="close-button" on:click={closeModal}>×</button>
+	<div class="dialog-content" on:click|stopPropagation transition:fade={{ duration: 175 }}>
+		<button class="close-button" on:click={closeDialog}>×</button>
 		<img {src} {alt} />
 	</div>
 </div>

 <style>
-	.modal-overlay {
+	.dialog-overlay {
 		position: fixed;
 		top: 0;
 		left: 0;
@@ -44,7 +44,7 @@
 		box-sizing: border-box;
 	}

-	.modal-content {
+	.dialog-content {
 		position: relative;
 		max-width: 90vw;
 		max-height: 90vh;
--- a/src/layout/Navbar/Modals/LoginModal.svelte
+++ b/src/layout/Navbar/Modals/LoginModal.svelte
@@ -3,10 +3,10 @@

 	import Input from '$lib/components/Input.svelte';
 	import Button from '$lib/components/Button.svelte';
-	import Modal from '$lib/components/Dialogue.svelte';
+	import Dialog from '$layout/Dialogs/Dialog.svelte';
 	import { passed_login_with_creds } from '$lib/stores';

-	export let modalOpen: boolean;
+	export let dialogOpen: boolean;

 	let loginForm: HTMLFormElement;
 	let wrong_credentials = false;
@@ -19,15 +19,14 @@

 		const success = await login(username, password);

-		modalOpen = !success;
-		console.log(success);
+		dialogOpen = !success;
 		passed_login_with_creds.set(success);
 		wrong_credentials = !success;
 	}
 </script>

-<Modal bind:modalOpen>
-	<div class="admin-modal-content">
+<Dialog bind:dialogOpen>
+	<div class="container">
 		<h2>Login</h2>
 		<p>This login is reserved for site administrators. Go back!</p>
 		{#if wrong_credentials}
@@ -46,14 +45,14 @@
 		</form>
 	</div>
 	<svelte:fragment slot="buttons">
-		<Button type="text" on:click={() => (modalOpen = !modalOpen)}>Cancel</Button>
+		<Button type="text" on:click={() => (dialogOpen = !dialogOpen)}>Cancel</Button>
 		<!-- first paragraph of https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit -->
 		<Button type="filled" on:click={() => loginForm.requestSubmit()}>Login</Button>
 	</svelte:fragment>
-</Modal>
+</Dialog>

 <style lang="scss">
-	.admin-modal-content {
+	.container {
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
--- a/src/layout/Navbar/Modals/LoginSuccessfulModal.svelte
+++ b/src/layout/Navbar/Modals/LoginSuccessfulModal.svelte
@@ -3,26 +3,26 @@
 	import { admin_login, passed_login_with_creds } from '$lib/stores';

 	import Button from '$lib/components/Button.svelte';
-	import Modal from '$lib/components/Dialogue.svelte';
+	import Dialog from '$layout/Dialogs/Dialog.svelte';
 </script>

-<Modal bind:modalOpen={$passed_login_with_creds}>
+<Dialog bind:dialogOpen={$passed_login_with_creds}>
 	<svelte:fragment slot="title">Successfully logged in!</svelte:fragment>
-	<div class="login-success">
+	<div>
 		This session will expire in
-		<span class="exp-date">{$admin_login.logged_in ? fromNow($admin_login.expires) : '...'}</span>
+		<span>{$admin_login.logged_in ? fromNow($admin_login.expires) : '...'}</span>
 	</div>
 	<svelte:fragment slot="buttons">
 		<Button type="filled" on:click={() => passed_login_with_creds.set(false)}>OK</Button>
 	</svelte:fragment>
-</Modal>
+</Dialog>

-<style>
-	.login-success {
+<style lang="scss">
+	div {
 		color: var(--text-one);
-	}

-	.exp-date {
+		span {
 			color: var(--primary);
 		}
+	}
 </style>
--- a/src/layout/Dialogs/MobilePatchesPackagesDialog.svelte
+++ b/src/layout/Dialogs/MobilePatchesPackagesDialog.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Package from '../../routes/patches/Package.svelte';
+	import Dialog from '$layout/Dialogs/Dialog.svelte';
+
+	export let dialogOpen: boolean;
+	export let searchTerm: string;
+	export let data;
+	export let selectedPkg;
+</script>
+
+<Dialog bind:dialogOpen fullscreen>
+	<svelte:fragment slot="title">Packages</svelte:fragment>
+	<div class="mobile-packages">
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<span
+			on:click={() => (dialogOpen = !dialogOpen)}
+			on:keypress={() => (dialogOpen = !dialogOpen)}
+		>
+			<Package {selectedPkg} name="All packages" bind:searchTerm />
+		</span>
+		{#each data.packages as pkg}
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<span
+				on:click={() => (dialogOpen = !dialogOpen)}
+				on:keypress={() => (dialogOpen = !dialogOpen)}
+			>
+				<Package {selectedPkg} name={pkg} bind:searchTerm />
+			</span>
+		{/each}
+	</div>
+</Dialog>
+
+<style lang="scss">
+	.mobile-packages {
+		margin-bottom: -1px;
+		overflow: hidden;
+		border-radius: 12px;
+		border: 1px solid var(--border);
+	}
+</style>
--- a/src/layout/Navbar/Modals/SessionExpiredModal.svelte
+++ b/src/layout/Navbar/Modals/SessionExpiredModal.svelte
@@ -3,7 +3,7 @@
 	import { admin_login } from '$lib/stores';

 	import Button from '$lib/components/Button.svelte';
-	import Modal from '$lib/components/Dialogue.svelte';
+	import Dialog from '$layout/Dialogs/Dialog.svelte';

 	export let loginOpen: boolean;

@@ -15,9 +15,9 @@
 	}
 </script>

-<Modal modalOpen={session_expired}>
+<Dialog dialogOpen={session_expired}>
 	<svelte:fragment slot="title">Expired session</svelte:fragment>
-	<div class="session-expired">
+	<div>
 		This session has expired, log in again to renew or lose all access to administrative power.
 	</div>
 	<svelte:fragment slot="buttons">
@@ -26,10 +26,10 @@
 			Login
 		</Button>
 	</svelte:fragment>
-</Modal>
+</Dialog>

 <style>
-	.session-expired {
+	div {
 		color: var(--text-four);
 	}
 </style>
--- a/src/layout/Navbar/Modals/SettingsModal.svelte
+++ b/src/layout/Navbar/Modals/SettingsModal.svelte
@@ -5,12 +5,12 @@
 	import { useQueryClient } from '@tanstack/svelte-query';

 	import Button from '$lib/components/Button.svelte';
-	import Modal from '$lib/components/Dialogue.svelte';
+	import Dialog from '$layout/Dialogs/Dialog.svelte';
 	import Replay from 'svelte-material-icons/Replay.svelte';
 	import Cog from 'svelte-material-icons/Cog.svelte';

 	export let loginOpen: boolean;
-	export let modalOpen: boolean;
+	export let dialogOpen: boolean;

 	const client = useQueryClient();

@@ -38,7 +38,7 @@
 	}
 </script>

-<Modal bind:modalOpen>
+<Dialog bind:dialogOpen>
 	<svelte:fragment slot="icon">
 		<Cog size="24px" color="var(--surface-six)" />
 	</svelte:fragment>
@@ -58,7 +58,7 @@
 			<Button
 				type="text"
 				disabled={$admin_login.logged_in}
-				on:click={() => ((loginOpen = !loginOpen), (modalOpen = !modalOpen))}
+				on:click={() => ((loginOpen = !loginOpen), (dialogOpen = !dialogOpen))}
 			>
 				{$admin_login.logged_in ? `Logged in for ${fromNow($admin_login.expires)}` : 'Login'}
 			</Button>
@@ -68,7 +68,7 @@
 			</div>
 		</div>
 	</svelte:fragment>
-</Modal>
+</Dialog>

 <style lang="scss">
 	input {
@@ -106,7 +106,8 @@
 		justify-content: space-between;
 		flex-wrap: wrap;
 		gap: 1rem;
-		div {
+
+		.buttons {
 			display: flex;
 			justify-content: flex-end;
 			flex-wrap: wrap;
--- a/src/layout/Footer/FooterHost.svelte
+++ b/src/layout/Footer/FooterHost.svelte
@@ -9,6 +9,8 @@
 	import FooterSection from './FooterSection.svelte';
 	import { RV_DMCA_GUID } from '$env/static/public';
 	import { onMount } from 'svelte';
+	import Divider from '$lib/components/Divider.svelte';
+	import { email } from '$data/api/settings';

 	const aboutQuery = createQuery(queries.about());

@@ -20,35 +22,17 @@
 	});
 </script>

+<Divider horizontalPadding={'15px'} />
 <footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-	<svg
-		aria-hidden="true"
-		width="100%"
-		height="8"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		in:fly={{ y: 10, easing: quintOut, duration: 750 }}
-	>
-		<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
-			<path
-				d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
-				stroke-linecap="square"
-			/>
-		</pattern>
-		<rect width="100%" height="100%" fill="url(#a)" />
-	</svg>
-	<div class="footer-wrapper">
-		<div class="footer-top">
+	<div class="top">
 		<section class="main-content">
 			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
 			<Query query={aboutQuery} let:data>
-					{#if data}
 				<div>
 					<p>
 						{data.about.about}
 					</p>
 				</div>
-					{/if}
 			</Query>
 		</section>

@@ -73,14 +57,11 @@
 			</Query>
 		</section>
 	</div>
-		<div class="footer-bottom">
+
+	<div class="bottom">
 		<div id="logo-name"><span>Re</span>Vanced</div>
 		<a href="/donate"><div>Donate</div></a>
-			<Query query={aboutQuery} let:data>
-				{#if data}
-					<a href="mailto:{data.about.contact.email}"><div>Email</div></a>
-				{/if}
-			</Query>
+		<a href="mailto:{email()}"><div>Email</div></a>
 		<!-- DMCA Protection Badge -->
 		<a
 			href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}"
@@ -90,34 +71,46 @@
 			<img
 				src="https://images.dmca.com/Badges/dmca-badge-w150-5x1-08.png?ID={RV_DMCA_GUID}"
 				alt="DMCA.com Protection Status"
-				/></a
-			>
-		</div>
+			/>
+		</a>
 	</div>
 </footer>

-<style>
+<style lang="scss">
 	footer {
 		background-color: var(--background-one);
-	}
-
-	.footer-wrapper {
 		max-width: min(87%, 100rem);
 		padding: 5rem 0rem;
 		margin: 0 auto;
-	}

-	.footer-top {
+		.top {
 			display: flex;
 			gap: 8rem;
 			justify-content: space-between;
 			margin-bottom: 4rem;
+
+			@media (max-width: 1050px) {
+				flex-direction: column;
+				gap: 2rem;
+			}
 		}

-	.footer-bottom {
+		.bottom {
 			display: flex;
 			gap: 2rem;
 			align-items: center;
+
+			a {
+				text-decoration: none;
+				color: var(--text-four);
+				font-weight: 600;
+			}
+
+			@media (max-width: 768px) {
+				flex-wrap: wrap;
+				gap: 1rem;
+			}
+		}
 	}

 	.dmca-badge {
@@ -125,27 +118,14 @@
 		align-items: center;
 	}

-	@media screen and (max-width: 768px) {
-		.footer-bottom {
-			flex-wrap: wrap;
-			gap: 1rem;
-		}
-	}
-
 	#logo-name {
 		font-size: 1.4rem;
 		color: var(--text-one);
 		font-weight: 600;
-	}

-	#logo-name span {
+		span {
 			color: var(--primary);
 		}
-
-	.footer-bottom a {
-		text-decoration: none;
-		color: var(--text-four);
-		font-weight: 600;
 	}

 	li {
@@ -153,16 +133,12 @@
 		color: var(--text-four);
 		font-size: 0.9rem;
 		font-weight: 500;
-	}

-	li a {
+		a {
 			color: var(--primary);
 			font-weight: 600;
 			font-size: 0.95rem;
 		}
-
-	path {
-		stroke: var(--border);
 	}

 	.main-content {
@@ -178,42 +154,28 @@

 	a {
 		text-decoration: none;
-	}

-	a:hover {
+		&:hover {
 			text-decoration: underline var(--secondary);
 			color: var(--text-one);
 		}
+	}

 	.links-container {
 		display: flex;
 		gap: 10rem;
 		margin-top: 1rem;
-	}

-	@media screen and (max-width: 1050px) {
-		.footer-top {
-			flex-direction: column;
-			gap: 2rem;
-		}
-
-		.links-container {
+		@media (max-width: 1050px) {
 			display: grid;
 			gap: 2rem;
 			grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
 		}
-	}

-	@media screen and (max-width: 768px) {
-		.links-container {
+		@media (max-width: 768px) {
 			display: flex;
 			flex-direction: column;
 			gap: initial;
 		}
 	}
-
-	svg {
-		padding-left: 15px;
-		padding-right: 15px;
-	}
 </style>
--- a/src/layout/Footer/FooterSection.svelte
+++ b/src/layout/Footer/FooterSection.svelte
@@ -2,19 +2,10 @@
 	export let title: string;
 </script>

-<div class="desktop-only">
-	<span>{title}</span>
-	<ul>
-		<slot />
-	</ul>
-</div>
-
-<div class="mobile-only">
-	<button class="title">
+<div>
 	<span>
 		{title}
 	</span>
-	</button>
 	<ul>
 		<slot />
 	</ul>
@@ -22,49 +13,23 @@

 <style lang="scss">
 	span {
-		list-style: none;
-		color: var(--text-four);
+		display: flex;
+		margin: 1.5rem 0;
 		font-size: 0.9rem;
 		font-weight: 600;
+		color: var(--text-four);
 	}

 	ul {
-		margin: 1.25rem 0rem;
 		display: flex;
-		gap: 1rem;
 		flex-direction: column;
-		width: max-content;
+		margin: 1.25rem 0rem;
+		gap: 1rem;
 	}

-	.title {
-		display: flex;
-		justify-content: space-between;
-		background-color: transparent;
-		border: none;
-		width: 100%;
-		margin: 1.5rem 0;
-		cursor: pointer;
-	}
-
-	.mobile-only:not(:last-child) {
+	@media (max-width: 768px) {
+		div:not(:last-child) {
 			border-bottom: 1px solid var(--border);
 		}
-
-	.mobile-only {
-		display: none;
-	}
-
-	.arrow {
-		transition: all 0.2s var(--bezier-one);
-		user-select: none;
-	}
-
-	@media screen and (max-width: 768px) {
-		.mobile-only {
-			display: block;
-		}
-		.desktop-only {
-			display: none;
-		}
 	}
 </style>
--- a/src/layout/Hero/HeroImage.svelte
+++ b/src/layout/Hero/HeroImage.svelte
@@ -7,17 +7,17 @@
 	<Picture data={manager_screenshot} alt="Screenshot of ReVanced Manager" />
 </div>

-<style>
-	.hero-img :global(img) {
-		height: 100%;
-		border-radius: 1.75rem;
-	}
-
+<style lang="scss">
 	.hero-img {
 		height: max(100vh, 600px);
 		padding: 0.5rem 0.5rem;
 		border-radius: 1.75rem;
 		background-color: var(--surface-seven);
 		user-select: none;
+
+		:global(img) {
+			height: 100%;
+			border-radius: 1.75rem;
+		}
 	}
 </style>
--- a/src/layout/Hero/HeroSection.svelte
+++ b/src/layout/Hero/HeroSection.svelte
@@ -17,7 +17,7 @@
 	<p>
 		Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
 	</p>
-	<div class="hero-buttons-container">
+	<div class="buttons-container">
 		<div class="hero-buttons internal-buttons">
 			<Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
 			<Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
@@ -34,22 +34,44 @@
 	</div>
 </section>

-<style>
+<style lang="scss">
+	.hero {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+
+		@media (min-width: 1100px) {
+			padding-top: 10vh;
+		}
+
 		h1 {
 			color: var(--text-one);
 		}

-	.hero-buttons-container {
+		span {
+			color: var(--primary);
+		}
+
+		.buttons-container {
 			display: flex;
 			flex-direction: column;
-		gap: 1.5rem;
-	}
+			gap: 2.5rem;

 			.social-buttons {
 				max-width: 30rem;
 				position: absolute;
 				bottom: 1rem;
 				transition: opacity 0.1s var(--bezier-one);
+
+				@media (max-width: 450px) {
+					justify-content: center;
+					left: 0;
+				}
+
+				@media (max-height: 600px), (max-width: 450px) and (max-height: 780px) {
+					position: static;
+					opacity: 100% !important;
+				}
 			}

 			.hero-buttons {
@@ -57,60 +79,14 @@
 				display: flex;
 				user-select: none;
 				gap: 1rem;
-	}

-	.hero {
-		padding-top: 10vh;
-		display: flex;
+				@media (max-width: 450px) {
+					&.internal-buttons {
 						flex-direction: column;
 						gap: 1rem;
 					}
-
-	span {
-		color: var(--primary);
-	}
-
-	@media screen and (max-width: 1100px) {
-		.hero {
-			padding-top: initial;
 				}
 			}
-
-	@media screen and (max-width: 450px) {
-		.internal-buttons {
-			flex-direction: column;
-			gap: 1rem;
-		}
-
-		.social-buttons {
-			left: 50%;
-			transform: translateX(-50%);
-			justify-content: center;
-			width: 100%;
-		}
-
-		.hero {
-			height: initial;
-		}
-	}
-
-	@media screen and (max-width: 1100px) or (min-height: 780px) {
-		.social-buttons {
-			transform: translateX(-50%);
-			width: 90%;
-			position: absolute;
-			left: initial;
-			transform: initial;
-		}
-	}
-
-	@media screen and (max-height: 780px) {
-		.social-buttons {
-			transform: initial;
-			left: initial;
-			position: initial;
-			width: initial;
-			opacity: 100% !important;
 		}
 	}
 </style>
--- a/src/layout/Hero/SocialButton.svelte
+++ b/src/layout/Hero/SocialButton.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Social } from '$lib/types';
+
 	export let social: Social;
 </script>

@@ -7,8 +8,11 @@
 	<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
 </a>

-<style>
+<style lang="scss">
 	a {
+		display: flex;
+		justify-content: center;
+
 		border: 0;
 		width: 60px;
 		height: 60px;
@@ -19,11 +23,9 @@
 		background-color: var(--surface-four);
 		color: var(--text-one);
 		user-select: none;
-	}

-	a {
-		display: flex;
-		justify-content: center;
+		&:hover {
+			transform: translateY(-5%);
 		}

 		img {
@@ -31,11 +33,8 @@
 			width: 30px;
 		}

-	a:hover {
-		transform: translateY(-5%);
-	}
-
-	a:hover img {
+		&:hover img {
 			filter: brightness(1.2);
 		}
+	}
 </style>
--- a/src/layout/Navbar/NavButton.svelte
+++ b/src/layout/Navbar/NavButton.svelte
@@ -74,13 +74,16 @@
 	}
 	
 	span {
+		display: flex;
+		justify-content: center;
+		
 		font-weight: 400;
 		font-size: 0.9rem;
 		letter-spacing: 0.02rem;
 		color: var(--text-four);
 	}

-	@media (max-width: 767px) {
+	@media (max-width: 768px) {
 		a {
 			padding: 0.75rem 1.25rem;
 			justify-content: left;
--- a/src/layout/Navbar/NavHost.svelte
+++ b/src/layout/Navbar/NavHost.svelte
@@ -5,9 +5,9 @@
 	import { expoOut } from 'svelte/easing';
 	import { createQuery } from '@tanstack/svelte-query';

-	import Navigation from './NavButton.svelte';
+	import Navigation from '$layout/Navbar/NavButton.svelte';
 	import Query from '$lib/components/Query.svelte';
-	import AnnouncementBanner from '../../routes/announcements/AnnouncementBanner.svelte';
+	import AnnouncementBanner from '$layout/Banners/AnnouncementBanner.svelte';

 	import Cog from 'svelte-material-icons/Cog.svelte';

@@ -15,17 +15,17 @@
 	import RouterEvents from '$data/RouterEvents';
 	import { queries } from '$data/api';

-	import StatusBanner from './StatusBanner.svelte';
-	import SettingsModal from './Modals/SettingsModal.svelte';
-	import LoginModal from './Modals/LoginModal.svelte';
-	import LoginSuccessfulModal from './Modals/LoginSuccessfulModal.svelte';
-	import SessionExpiredModal from './Modals/SessionExpiredModal.svelte';
+	import StatusBanner from '$layout/Banners/StatusBanner.svelte';
+	import SettingsDialog from '$layout/Dialogs/SettingsDialog.svelte';
+	import LoginDialog from '$layout/Dialogs/LoginDialog.svelte';
+	import LoginSuccessfulDialog from '$layout/Dialogs/LoginSuccessfulDialog.svelte';
+	import SessionExpiredDialog from '$layout/Dialogs/SessionExpiredDialog.svelte';

 	const ping = createQuery(queries.ping());
 	const statusUrl = status_url();

 	let menuOpen = false;
-	const modals: Record<string, boolean> = {
+	const dialogs: Record<string, boolean> = {
 		settings: false,
 		login: false
 	};
@@ -75,6 +75,7 @@
 						<Navigation href="/" label="Home">Home</Navigation>
 						<Navigation queryKey="manager" href="/download" label="Download">Download</Navigation>
 						<Navigation queryKey="patches" href="/patches" label="Patches">Patches</Navigation>
+						<span class="mobile-only">
 							<Navigation
 								queryKey={['announcements', 'announcementTags']}
 								href="/announcements"
@@ -82,6 +83,7 @@
 							>
 								Announcements
 							</Navigation>
+						</span>
 						<Navigation queryKey="contributors" href="/contributors" label="Contributors">
 							Contributors
 						</Navigation>
@@ -91,12 +93,31 @@
 					</ul>
 				</div>
 				<div id="secondary-navigation">
+					<span class="desktop-only">
+						<Navigation
+							queryKey={['announcements', 'announcementTags']}
+							href="/announcements"
+							label="Announcements"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								height="24px"
+								viewBox="0 -960 960 960"
+								width="24px"
+								fill="currentColor"
+							>
+								<path
+									d="M720-440v-80h160v80H720Zm48 280-128-96 48-64 128 96-48 64Zm-80-480-48-64 128-96 48 64-128 96ZM200-200v-160h-40q-33 0-56.5-23.5T80-440v-80q0-33 23.5-56.5T160-600h160l200-120v480L320-360h-40v160h-80Zm360-146v-268q27 24 43.5 58.5T620-480q0 41-16.5 75.5T560-346Z"
+								/>
+							</svg>
+						</Navigation>
+					</span>
 					<button
-							on:click={() => (modals.settings = !modals.settings)}
-							class:selected={modals.settings}
+						on:click={() => (dialogs.settings = !dialogs.settings)}
+						class:selected={dialogs.settings}
 						aria-label="Settings"
 					>
-							<Cog size="20px" color={modals.settings ? 'var(--primary)' : 'var(--surface-six)'} />
+						<Cog size="20px" color={dialogs.settings ? 'var(--primary)' : 'var(--surface-six)'} />
 					</button>
 				</div>
 			</div>
@@ -114,18 +135,18 @@
 	{/if}
 </nav>

-<SettingsModal bind:modalOpen={modals.settings} bind:loginOpen={modals.login} />
+<SettingsDialog bind:dialogOpen={dialogs.settings} bind:loginOpen={dialogs.login} />

-<LoginModal bind:modalOpen={modals.login} />
+<LoginDialog bind:dialogOpen={dialogs.login} />

-<LoginSuccessfulModal />
+<LoginSuccessfulDialog />

-<SessionExpiredModal bind:loginOpen={modals.login} />
+<SessionExpiredDialog bind:loginOpen={dialogs.login} />

 <style lang="scss">
 	#secondary-navigation {
 		display: flex;
-
+		gap: 1rem;
 		button {
 			border-radius: 10px;
 			padding: 10px 16px;
@@ -213,7 +234,7 @@
 		width: 100%;
 	}

-	@media (max-width: 767px) {
+	@media (max-width: 768px) {
 		#nav-wrapper-container {
 			overflow: hidden;
 			position: fixed;
@@ -256,7 +277,7 @@
 		}
 	}

-	@media screen and (min-width: 768px) {
+	@media (min-width: 768px) {
 		.mobile-only {
 			display: none !important;
 		}
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import ToolTip from './ToolTip.svelte';
+
 	export let type: 'filled' | 'tonal' | 'text' | 'outlined' | 'icon' = 'filled';
 	export let variant: 'default' | 'danger' | 'onDangerBackground' = 'default';
 	export let functionType: typeof HTMLButtonElement.prototype.type = 'button';
@@ -9,16 +11,18 @@
 	export let target: string = '';
 	export let label: string = '';
 	export let disabled: boolean = false;
+	export let toolTipText: string | undefined = undefined;

 	$: type = $$slots.default ? type : 'icon';
 </script>

-{#if href}
+<ToolTip content={toolTipText} html={false}>
+	{#if href}
 		<a {href} {target} aria-label={label} class={`${type} ${variant}`} class:disabled>
 			<svelte:component this={icon} size={iconSize} color={iconColor} />
 			<slot />
 		</a>
-{:else}
+	{:else}
 		<button
 			on:click
 			class={`${type} ${variant}`}
@@ -30,7 +34,8 @@
 			<svelte:component this={icon} size={iconSize} color={iconColor} />
 			<slot />
 		</button>
-{/if}
+	{/if}
+</ToolTip>

 <style lang="scss">
 	a,
--- a/src/lib/components/Divider.svelte
+++ b/src/lib/components/Divider.svelte
@@ -1,4 +1,15 @@
-<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<script>
+	export let horizontalPadding;
+</script>
+
+<svg
+	style:padding-inline={horizontalPadding}
+	aria-hidden="true"
+	width="100%"
+	height="8"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
 	<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
 		<path
 			d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
--- a/src/lib/components/FilterChip.svelte
+++ b/src/lib/components/FilterChip.svelte
@@ -17,7 +17,7 @@
 	{/if}
 </button>

-<style>
+<style lang="scss">
 	button {
 		font-family: var(--font-two);
 		border: none;
@@ -32,18 +32,11 @@
 		display: flex;
 		align-items: center;
 		gap: 8px;
-	}
 		
-	.selected {
+		&.selected {
 			background-color: var(--tertiary);
 			color: var(--primary);
 		}
-
-	#dropdown {
-		margin-right: -6px;
 	}

-	#check {
-		margin-left: -6px;
-	}
 </style>
--- a/src/lib/components/Gallery.svelte
+++ b/src/lib/components/Gallery.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ImageModal from '$lib/components/ImageModal.svelte';
+	import ImageDialog from '$layout/Dialogs/ImageDialog.svelte';

 	export let images: string[];
 	export let columns: number = 3;
@@ -7,14 +7,14 @@

 	let selectedImage: { src: string; alt: string } | null = null;

-	function openModal(image: string, index: number) {
+	function openDialog(image: string, index: number) {
 		selectedImage = {
 			src: image,
 			alt: `Gallery image ${index + 1}`
 		};
 	}

-	function closeModal() {
+	function closeDialog() {
 		selectedImage = null;
 	}
 </script>
@@ -28,8 +28,8 @@
 				src={image}
 				alt={`Gallery image ${i + 1}`}
 				loading="lazy"
-				on:click={() => openModal(image, i)}
-				on:keydown={(e) => e.key === 'Enter' && openModal(image, i)}
+				on:click={() => openDialog(image, i)}
+				on:keydown={(e) => e.key === 'Enter' && openDialog(image, i)}
 				tabindex="0"
 			/>
 		</div>
@@ -37,7 +37,7 @@
 </div>

 {#if selectedImage}
-	<ImageModal src={selectedImage.src} alt={selectedImage.alt} on:close={closeModal} />
+	<ImageDialog src={selectedImage.src} alt={selectedImage.alt} on:close={closeDialog} />
 {/if}

 <style>
--- a/src/lib/components/QRCode.svelte
+++ b/src/lib/components/QRCode.svelte
--- a/src/lib/components/Snackbar.svelte
+++ b/src/lib/components/Snackbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { slide, fade } from 'svelte/transition';
-	import { expoOut } from 'svelte/easing';
+	import { backIn, expoOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';

 	export let open = false;
 	export let dismissTime = 3000;
@@ -13,47 +13,32 @@
 </script>

 {#if open}
-	<div
-		class="snackbar"
-		in:slide={{ duration: 400, easing: expoOut }}
-		out:fade={{ duration: 300, easing: expoOut }}
-	>
-		<div class="text">
+	<div id="snackbar" in:slide={{ duration: 400, easing: expoOut }} out:slide={{ duration: 300, easing: backIn }}>
 		<slot name="text" />
 	</div>
-	</div>
 {/if}

-<style lang="scss">
-	.snackbar {
+<style>
+	#snackbar {
 		display: flex;
-		box-sizing: border-box;
-		justify-content: space-between;
-		padding-top: 0.25rem;
-		padding-bottom: 0.25rem;
-		padding-left: 1rem;
-		padding-right: 0.5rem;
-		height: 3rem;
-		gap: 1.5rem;
 		align-items: center;
+
+		position: fixed;
+		bottom: 2rem;
+		left: 2rem;
+		padding: 0.5rem 1rem;
 		border-radius: 0.25rem;
+
 		min-width: 12.5rem;
 		max-width: 35rem;
-		position: fixed;
-		margin-left: 2.25rem;
-		margin-right: 2.25rem;
-		z-index: 8;
-		left: 0;
-		right: 0;
-		bottom: 2rem;
-		background-color: var(--surface-one);
-		transition: all 0.4s var(--bezier-one);
-		box-shadow: var(--drop-shadow-one);
-	}
+		height: 3rem;

-	.text {
+		background: var(--surface-one);
 		color: var(--text-two);
-		font-weight: 500;
+		box-shadow: var(--drop-shadow-one);
+
 		font-size: 14px;
+		font-weight: 500;
+		z-index: 10;
 	}
 </style>
--- a/src/lib/components/Spinner.svelte
+++ b/src/lib/components/Spinner.svelte
@@ -1,22 +1,21 @@
-<div class="spinner" />
+<div id="spinner" />

-<style>
+<style lang="scss">
 	@keyframes spinner {
 		to {
 			transform: rotate(360deg);
 		}
 	}

-	.spinner {
+	#spinner {
 		position: fixed;
 		top: 50%;
 		left: 50%;
 		width: 50px;
 		height: 50px;
 		transform: translate(-50%, -50%);
-	}

-	.spinner:before {
+		&:before {
 			content: '';
 			box-sizing: border-box;
 			position: absolute;
@@ -27,4 +26,5 @@
 			border-top-color: var(--primary);
 			animation: spinner 0.6s linear infinite;
 		}
+	}
 </style>
--- a/src/lib/components/ToolTip.svelte
+++ b/src/lib/components/ToolTip.svelte
@@ -2,18 +2,22 @@
 	import { tooltip } from 'svooltip';
 	import '../styles/ToolTip.scss';

-	export let content: string;
+	export let content: string | undefined;
 	export let html: boolean = false;
 </script>

-<div
+{#if content}
+	<div
 		use:tooltip={{
 			content: content,
 			html: html
 		}}
->
+	>
 		<slot />
-</div>
+	</div>
+{:else}
+	<slot />
+{/if}

 <style>
 	:root {
--- a/src/lib/components/Wave.svelte
+++ b/src/lib/components/Wave.svelte
@@ -7,7 +7,7 @@
 	viewBox="0 0 1440 500"
 	xmlns="http://www.w3.org/2000/svg"
 	preserveAspectRatio="none"
-	style="opacity: {visibility ? '100%' : '0'}"
+	style="opacity: {visibility ? '100%' : '0'}; height: {visibility ? '40vh' : '0px'}"
 >
 	<path class="wave" />
 </svg>
@@ -19,10 +19,9 @@
 		bottom: -1px;
 		z-index: -1;
 		width: 100%;
-		height: 40vh;
 	}

-	@media screen and (max-height: 780px) {
+	@media (max-height: 780px) {
 		svg {
 			opacity: 0 !important;
 		}
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -63,4 +63,12 @@ export const read_announcements = writable<Set<number>>(new Set(), (set) => {
 	};
 });

+read_announcements.subscribe((value) => {
+	if (!browser) return;
+
+	localStorage.setItem('read_announcements', JSON.stringify(Array.from(value)));
+});
+
 export const passed_login_with_creds = writable(false); // will only change when the user INPUTS the credentials, not if the session is just valid
+
+export const allowAnalytics = writable(false);
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -18,13 +18,11 @@

 	import NavHost from '$layout/Navbar/NavHost.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
-	import Dialogue from '$lib/components/Dialogue.svelte';
-	import Button from '$lib/components/Button.svelte';
+	import ConsentDialog from '$layout/Dialogs/ConsentDialog.svelte';
 	import { staleTime } from '$data/api';
 	import RouterEvents from '$data/RouterEvents';
 	import { events as themeEvents } from '$util/themeEvents';

-	import { RV_GOOGLE_TAG_MANAGER_ID } from '$env/static/public';
 	import FooterHost from '$layout/Footer/FooterHost.svelte';

 	const queryClient = new QueryClient({
@@ -36,50 +34,6 @@
 		}
 	});

-	let showConsentModal = false;
-	let allowAnalytics = false;
-
-	function enableAnalytics() {
-		window.dataLayer = window.dataLayer || [];
-		function gtag() {
-			dataLayer.push(arguments);
-		}
-		gtag('js', new Date());
-		gtag('config', RV_GOOGLE_TAG_MANAGER_ID);
-		var s = document.createElement('script');
-		s.src = `https://www.googletagmanager.com/gtm.js?id=${RV_GOOGLE_TAG_MANAGER_ID}`;
-		document.head.append(s);
-	}
-
-	function rememberChoice(allow: boolean) {
-		localStorage.setItem('analytics', allow.toString());
-		showConsentModal = false;
-		allowAnalytics = allow;
-
-		if (allowAnalytics) enableAnalytics();
-	}
-
-	onMount(() => {
-		// Check if the user has already decided
-		const hasDecided = localStorage.getItem('analytics') !== null;
-		if (hasDecided) {
-			allowAnalytics = localStorage.getItem('analytics') === 'true';
-			if (allowAnalytics) enableAnalytics();
-		} else {
-			showConsentModal = true;
-		}
-
-		new DateTriggerEventHandler(themeEvents);
-
-		isRestoring.set(true);
-		const [unsubscribe, promise] = persistQueryClient({
-			queryClient,
-			persister: createSyncStoragePersister({ storage: localStorage })
-		});
-		promise.then(() => isRestoring.set(false));
-		return unsubscribe;
-	});
-
 	// Just like the set/clearInterval example found here: https://svelte.dev/docs#run-time-svelte-store-derived
 	const show_loading_animation = derived(
 		RouterEvents,
@@ -94,32 +48,22 @@
 		},
 		false
 	);
+
+	onMount(() => {
+		new DateTriggerEventHandler(themeEvents);
+
+		isRestoring.set(true);
+		const [unsubscribe, promise] = persistQueryClient({
+			queryClient,
+			persister: createSyncStoragePersister({ storage: localStorage })
+		});
+		promise.then(() => isRestoring.set(false));
+		return unsubscribe;
+	});
 </script>

-{#if allowAnalytics}
-	<!-- Google Tag Manager (noscript) -->
-	<noscript>
-		<!-- svelte-ignore a11y-missing-attribute -->
-		<iframe
-			src="https://www.googletagmanager.com/ns.html?id={RV_GOOGLE_TAG_MANAGER_ID}"
-			height="0"
-			width="0"
-			style="display: none; visibility: hidden"
-		></iframe>
-	</noscript>
-{/if}
+<ConsentDialog />

-<Dialogue bind:modalOpen={showConsentModal} notDismissible>
-	<svelte:fragment slot="title">It's your choice</svelte:fragment>
-	<svelte:fragment slot="description">
-		We use analytics to improve your experience on this site. By clicking "Allow", you allow us to
-		collect anonymous data about your visit.
-	</svelte:fragment>
-	<svelte:fragment slot="buttons">
-		<Button type="text" on:click={() => rememberChoice(false)}>Deny</Button>
-		<Button type="filled" on:click={() => rememberChoice(true)}>Allow</Button>
-	</svelte:fragment>
-</Dialogue>
 <QueryClientProvider client={queryClient}>
 	<NavHost />
 	<div id="skiptab">
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,20 +7,13 @@

 	let bottomVisibility = true;

-	onMount(() => {
 	const checkVisibility = () => {
 		const wave = document.querySelector('.wave');
 		bottomVisibility = !(wave && wave.getBoundingClientRect().bottom < window.innerHeight - 1);
 	};

-		window.addEventListener('scroll', checkVisibility, { passive: true });
-		window.addEventListener('resize', checkVisibility);
-
+	onMount(() => {
 		checkVisibility(); // Initial check
-		return () => {
-			window.removeEventListener('scroll', checkVisibility);
-			window.removeEventListener('resize', checkVisibility);
-		};
 	});
 </script>

@@ -135,7 +128,9 @@
 	]}
 />

-<main>
+<svelte:window on:scroll={checkVisibility} on:resize={checkVisibility} />
+
+<main class:visibility={!bottomVisibility}>
 	<div class="content">
 		<Home socialsVisibility={bottomVisibility} />
 		<div class="hero-img-container">
@@ -160,21 +155,25 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+
+		@media (max-height: 600px), (max-width: 450px) and (max-height: 780px) {
+			min-height: initial;
+		}
+
+		@media (max-width: 335px) {
+			padding: 2rem 0 !important;
+		}
+
+		&.visibility {
+			min-height: initial;
+		}
 	}

 	.hero-img-container {
 		z-index: 0;
-	}

-	@media screen and (max-width: 1100px) {
-		.hero-img-container {
+		@media (max-width: 1100px) {
 			display: none;
 		}
 	}
-
-	@media screen and (max-width: 335px) {
-		main {
-			padding: 2rem 0 !important;
-		}
-	}
 </style>
--- a/src/routes/announcements/+page.svelte
+++ b/src/routes/announcements/+page.svelte
@@ -13,7 +13,7 @@
 	import Search from '$lib/components/Search.svelte';
 	import { onMount } from 'svelte';
 	import type { ResponseAnnouncement } from '$lib/types';
-	import { admin_login } from '$lib/stores';
+	import { admin_login, read_announcements } from '$lib/stores';
 	import Button from '$lib/components/Button.svelte';
 	import moment from 'moment';
 	import { debounce } from '$util/debounce';
@@ -22,52 +22,61 @@
 	import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
 	import Create from 'svelte-material-icons/Plus.svelte';

-	let searchParams: Readable<URLSearchParams>;
+	let expanded = false;

-	if (building) searchParams = readable(new URLSearchParams());
-	else searchParams = derived(page, ($page) => $page.url.searchParams);
+	const searchParams: Readable<URLSearchParams> = building
+		? readable(new URLSearchParams())
+		: derived(page, ($page) => $page.url.searchParams);

 	let searchTerm = $searchParams.get('s') || '';
+	let displayedTerm = '';

 	$: query = createQuery(queries.announcements());
 	$: tagsQuery = createQuery(queries.announcementTags());
 	$: selectedTags = $searchParams.getAll('tag');

-	let expanded = false;
-
-	function filterAnnouncements(
-		announcements: Iterable<ResponseAnnouncement>,
-		search: string,
-		selectedTags: string[]
-	): ResponseAnnouncement[] {
-		const announcementFilter = createFilter(Array.from(announcements), {
-			searcherOptions: {
-				keys: ['title', 'content']
-			},
-			additionalFilter: (announcement: ResponseAnnouncement, tags: string[]): boolean => {
-				return (
-					tags.length === 0 ||
-					tags.some((tag) => announcement.tags && announcement.tags.includes(tag))
-				);
-			}
-		});
-
-		return announcementFilter(selectedTags, search);
-	}
-
-	// Make sure we don't have to filter the announcements after every key press
-	let displayedTerm = '';
 	const update = () => {
 		displayedTerm = searchTerm;

 		const url = new URL(window.location.href);
 		url.pathname = '/announcements';

-		if (searchTerm) url.searchParams.set('s', searchTerm);
-		else url.searchParams.delete('s');
+		searchTerm ? url.searchParams.set('s', searchTerm) : url.searchParams.delete('s');
 	};

-	onMount(update);
+	const archivedAnnouncements = (announcements: ResponseAnnouncement[]) =>
+		announcements.filter((a) => a.archived_at && moment(a.archived_at).isBefore(moment()));
+	const activeAnnouncements = (announcements: ResponseAnnouncement[]) =>
+		announcements.filter((a) => !a.archived_at || moment(a.archived_at).isAfter(moment()));
+
+	const filterAnnouncements = (
+		announcements: ResponseAnnouncement[],
+		search: string,
+		tags: string[]
+	): ResponseAnnouncement[] => {
+		const announcementFilter = createFilter(announcements, {
+			searcherOptions: { keys: ['title', 'content'] },
+
+			additionalFilter: (a: ResponseAnnouncement, tags: string[]) =>
+				tags.length === 0 || tags.some((tag) => a.tags?.includes(tag))
+		});
+
+		return announcementFilter(tags, search);
+	};
+
+	onMount(() => {
+		debounce(update)();
+
+		if ($read_announcements.size === 0) {
+			query.subscribe((data) => {
+				read_announcements.update((set) => {
+					const updated = new Set(set);
+					data.data?.announcements.forEach((a) => updated.add(a.id));
+					return updated;
+				});
+			});
+		}
+	});
 </script>

 <div class="search">
@@ -92,30 +101,28 @@
 	</Query>

 	<Query {query} let:data>
+		{#if activeAnnouncements(filterAnnouncements(data.announcements, displayedTerm, selectedTags)).length}
 			<div class="cards">
-			{#each filterAnnouncements(data.announcements, displayedTerm, selectedTags) as announcement}
-				{#if !announcement.archived_at || moment(announcement.archived_at).isAfter(moment())}
-					{#key selectedTags || displayedTerm}
+				{#each activeAnnouncements(filterAnnouncements(data.announcements, displayedTerm, selectedTags)) as announcement}
 					<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 						<AnnouncementCard {announcement} />
 					</div>
-					{/key}
-				{/if}
 				{/each}
 			</div>
+		{/if}

+		{#if archivedAnnouncements(filterAnnouncements(data.announcements, displayedTerm, selectedTags)).length}
 			<div
 				role="button"
 				class="expand-archived"
 				aria-expanded={expanded}
-			class:closed={!expanded}
 				on:click={() => (expanded = !expanded)}
 				on:keypress={() => (expanded = !expanded)}
 				tabindex="0"
 			>
-			<h4>Archived announcements</h4>
+				<h4>Archive</h4>

-			<div id="arrow" style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}>
+				<div id="arrow" style:transform={expanded ? 'rotate(-180deg)' : 'rotate(0deg)'}>
 					<ChevronDown size="24px" color="var(--surface-six)" />
 				</div>
 			</div>
@@ -126,26 +133,29 @@
 					in:slide={{ easing: quintIn, duration: 250 }}
 					out:slide={{ easing: quintOut, duration: 250 }}
 				>
-				{#each filterAnnouncements(data.announcements, displayedTerm, selectedTags) as announcement}
-					{#if announcement.archived_at && moment(announcement.archived_at).isBefore(moment())}
-						{#key selectedTags || displayedTerm}
+					{#each archivedAnnouncements(filterAnnouncements(data.announcements, displayedTerm, selectedTags)) as announcement}
 						<AnnouncementCard {announcement} />
-						{/key}
-					{/if}
 					{/each}
 				</div>
 			{/if}
+		{/if}
 	</Query>
 </main>

 <style lang="scss">
+	main {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
 	.expand-archived {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		cursor: pointer;
 		user-select: none;
-		padding: 0rem 0.25rem;
+		padding-inline: 0.25rem;

 		#arrow {
 			height: 1.5rem;
@@ -174,14 +184,10 @@
 	.cards {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
-		padding: 16px 0;
-		min-width: 0;
 		width: 100%;
 		gap: 16px;
-	}

-	@media (max-width: 767px) {
-		.cards {
+		@media (max-width: 768px) {
 			display: flex;
 			flex-direction: column;
 		}
--- a/src/routes/announcements/AnnouncementBanner.svelte
+++ b/src/routes/announcements/AnnouncementBanner.svelte
@@ -1,65 +0,0 @@
-<script lang="ts">
-	import { read_announcements } from '$lib/stores';
-	import Banner from '$lib/components/Banner.svelte';
-	import { goto } from '$app/navigation';
-	import type { ResponseAnnouncement } from '$lib/types';
-	import { browser } from '$app/environment';
-	import { createQuery } from '@tanstack/svelte-query';
-	import { queries } from '$data/api';
-	import moment from 'moment';
-
-	let latestUnreadAnnouncement: ResponseAnnouncement | undefined = undefined;
-
-	const query = createQuery(queries.announcements());
-
-	$: {
-		if ($query.data?.announcements && $query.data.announcements.length > 0) {
-			const nonArchived = $query.data.announcements.filter(
-				(a) => !a.archived_at || moment(a.archived_at).isAfter(moment())
-			);
-			const announcement = nonArchived[0];
-
-			if (announcement && !$read_announcements.has(announcement.id)) {
-				latestUnreadAnnouncement = announcement;
-			} else {
-				latestUnreadAnnouncement = undefined;
-			}
-		}
-	}
-
-	function setAsRead() {
-		if (!latestUnreadAnnouncement) return;
-		$read_announcements.add(latestUnreadAnnouncement.id);
-		localStorage.setItem('read_announcements', JSON.stringify(Array.from($read_announcements)));
-		latestUnreadAnnouncement = undefined;
-	}
-
-	function handleClick() {
-		if (latestUnreadAnnouncement) {
-			goto(`/announcements/${latestUnreadAnnouncement.id}`);
-			setAsRead();
-		}
-	}
-
-	function handleClose() {
-		if (latestUnreadAnnouncement && browser) {
-			setAsRead();
-		}
-	}
-
-	function getBannerLevel(level: number | undefined): 'info' | 'caution' {
-		if (!level || level == 0) return 'info';
-		return 'caution';
-	}
-</script>
-
-{#if latestUnreadAnnouncement}
-	<Banner
-		title={'We have an announcement'}
-		description={`You can read more about "${latestUnreadAnnouncement.title}" in our latest post.`}
-		level={getBannerLevel(latestUnreadAnnouncement.level)}
-		buttonText="Read more"
-		buttonOnClick={handleClick}
-		onDismiss={handleClose}
-	/>
-{/if}
--- a/src/routes/announcements/AnnouncementCard.svelte
+++ b/src/routes/announcements/AnnouncementCard.svelte
@@ -18,7 +18,7 @@

 	const client = useQueryClient();

-	let isRead: boolean;
+	$: isRead = $read_announcements.has(announcement.id);

 	function prefetch() {
 		const query = queries['announcementById'](announcement.id);
@@ -27,10 +27,11 @@
 	}

 	function setAnnouncementRead() {
-		isRead = true;
-
-		$read_announcements.add(announcement.id);
-		localStorage.setItem('read_announcements', JSON.stringify(Array.from($read_announcements)));
+		read_announcements.update((set) => {
+			const updated = new Set(set);
+			updated.add(announcement.id);
+			return updated;
+		});
 	}

 	function generateSlug(title: string) {
@@ -39,10 +40,6 @@
 			.replace(/[^a-z0-9]+/g, '-')
 			.replace(/^-+|-+$/g, '');
 	}
-
-	onMount(() => {
-		isRead = $read_announcements.has(announcement.id);
-	});
 </script>

 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -88,11 +85,7 @@
 				{/if}
 				{#if announcement.tags && announcement.tags.length > 0}
 					<hr />
-					<TagsHost
-						tags={announcement.tags.map((tag) => ({ name: tag }))}
-						expandable={false}
-						clickable={false}
-					/>
+					<TagsHost tags={announcement.tags.map((tag) => ({ name: tag }))} clickable={false} />
 				{/if}
 			</div>
 		</div>
--- a/src/routes/announcements/TagChip.svelte
+++ b/src/routes/announcements/TagChip.svelte
@@ -26,7 +26,7 @@

 		gap: 8px;
 		height: 32px;
-		padding: 0 16px;
+		padding: 0 12px;

 		border-radius: 8px;
 		border: none;
--- a/src/routes/announcements/TagsHost.svelte
+++ b/src/routes/announcements/TagsHost.svelte
@@ -50,7 +50,7 @@
 	{/each}

 	{#if expandable && tags.length > 1}
-		<li class="button">
+		<li>
 			<Button type="text" on:click={() => (showAllTags = !showAllTags)}>
 				<div
 					class="expand-arrow"
@@ -67,9 +67,11 @@
 	div {
 		display: flex;
 		align-items: center;
+		flex-wrap: wrap;
+		white-space: nowrap;
 		gap: 4px;

-		.button {
+		li {
 			display: flex;
 			align-items: center;
 		}
@@ -79,9 +81,5 @@
 			user-select: none;
 			height: 1.5rem;
 		}
-
-		.rotate .expand-arrow {
-			transform: rotate(180deg);
-		}
 	}
 </style>
--- a/src/routes/announcements/[slug]/+page.svelte
+++ b/src/routes/announcements/[slug]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Footer from '$layout/Footer/FooterHost.svelte';
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 	import { createQuery } from '@tanstack/svelte-query';
@@ -47,5 +46,3 @@
 		<Announcement {isCreating} {announcement} {announcementIdNumber} />
 	{/if}
 </main>
-
-<Footer />
--- a/src/routes/announcements/[slug]/AdminButtons.svelte
+++ b/src/routes/announcements/[slug]/AdminButtons.svelte
@@ -3,7 +3,7 @@
 	import { admin, queries } from '$data/api';
 	import { goto } from '$app/navigation';
 	import Button from '$lib/components/Button.svelte';
-	import Dialogue from '$lib/components/Dialogue.svelte';
+	import Dialog from '$layout/Dialogs/Dialog.svelte';
 	import type { Announcement, ResponseAnnouncement } from '$lib/types';
 	import moment from 'moment';
 	import { isValidUrl } from '$util/isValidUrl';
@@ -97,29 +97,34 @@

 <svelte:window on:beforeunload={handleUnload} />

-<Dialogue bind:modalOpen={showDeleteConfirm}>
+<Dialog bind:dialogOpen={showDeleteConfirm}>
 	<svelte:fragment slot="title">Confirm?</svelte:fragment>
 	<svelte:fragment slot="description">Do you want to delete this announcement?</svelte:fragment>
 	<svelte:fragment slot="buttons">
 		<Button type="text" on:click={() => (showDeleteConfirm = !showDeleteConfirm)}>Cancel</Button>
 		<Button type="filled" on:click={deleteAnnouncement}>OK</Button>
 	</svelte:fragment>
-</Dialogue>
+</Dialog>

 <div>
 	{#if isEditing || isCreating}
 		<Button
+			toolTipText={isPreviewing ? 'Hide preview' : 'Show preview'}
 			icon={isPreviewing ? Hide : Show}
 			iconColor="var(--secondary)"
 			on:click={() => (isPreviewing = !isPreviewing)}
 		/>
+
 		<Button
+			toolTipText={archivedAtInput ? 'Disable archive field' : 'Enable archive field'}
 			icon={archivedAtInput ? Unarchive : Archive}
 			iconColor="var(--secondary)"
 			on:click={toggleArchived}
 		/>
+
 		{#if isEditing}
 			<Button
+				toolTipText="Cancel editing"
 				icon={Close}
 				iconColor="var(--secondary)"
 				on:click={() => {
@@ -128,18 +133,27 @@
 				}}
 			/>
 		{/if}
+
 		<Button
+			toolTipText={isEditing ? 'Save changes' : 'Create announcement'}
 			icon={Check}
 			iconColor="var(--secondary)"
 			on:click={isEditing ? save : createAnnouncement}
 		/>
 	{:else}
 		<Button
+			toolTipText="Delete announcement"
 			icon={Delete}
 			iconColor="var(--secondary)"
 			on:click={() => (showDeleteConfirm = !showDeleteConfirm)}
 		/>
-		<Button icon={Edit} iconColor="var(--secondary)" on:click={() => (isEditing = !isEditing)} />
+
+		<Button
+			toolTipText="Edit announcement"
+			icon={Edit}
+			iconColor="var(--secondary)"
+			on:click={() => (isEditing = !isEditing)}
+		/>
 	{/if}
 </div>

--- a/src/routes/announcements/[slug]/Announcement.svelte
+++ b/src/routes/announcements/[slug]/Announcement.svelte
@@ -111,7 +111,7 @@
 		gap: 2rem;
 	}

-	@media (max-width: 767px) {
+	@media (max-width: 768px) {
 		.card {
 			background-color: initial;
 			padding: 0;
--- a/src/routes/announcements/[slug]/Date.svelte
+++ b/src/routes/announcements/[slug]/Date.svelte
@@ -18,7 +18,11 @@
 	}

 	$: displayCreatedAt = isPreviewing ? createdAtInput : createdAt;
-	$: displayArchivedAt = isPreviewing ? archivedAtInput : archivedAt;
+
+	$: displayArchivedAt = (() => {
+		const date = isPreviewing ? archivedAtInput : archivedAt;
+		return date && moment(date).isBefore() ? date : null;
+	})();
 </script>

 {#if (isEditing || isCreating) && !isPreviewing}
--- a/src/routes/contributors/+page.svelte
+++ b/src/routes/contributors/+page.svelte
@@ -37,18 +37,18 @@
 	]}
 />

-<main>
-	<div class="wrapper">
+<div class="wrapper">
 	<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 		<h2>Made possible by the community.</h2>
 		<p>
-				Want to show up here? <span
-					><a href="https://github.com/revanced" target="_blank" rel="noreferrer"
-						>Become a contributor</a
-					></span
-				>
+			Want to show up here? <span>
+				<a href="https://github.com/revanced" target="_blank" rel="noreferrer"
+					>Become a contributor
+				</a>
+			</span>
 		</p>
 	</div>
+
 	<div class="repos">
 		<Query {query} let:data>
 			{#each data.contributables as { name, url, contributors }}
@@ -58,15 +58,17 @@
 			{/each}
 		</Query>
 	</div>
-	</div>
-</main>
+</div>

 <style>
+	.wrapper {
+		margin-bottom: 5rem;
+	}
+
 	.repos {
 		display: flex;
 		flex-direction: column;
 		gap: 2rem;
-		margin-bottom: 4rem;
 	}

 	h2 {
@@ -109,7 +111,7 @@
 	a:hover::after {
 		transform: translateX(5px);
 	}
-	@media screen and (max-width: 767px) {
+	@media (max-width: 768px) {
 		.text-container {
 			padding: 2rem 1.75rem;
 		}
--- a/src/routes/contributors/ContributorPerson.svelte
+++ b/src/routes/contributors/ContributorPerson.svelte
@@ -10,7 +10,7 @@
 	<h5>{name}</h5>
 </a>

-<style>
+<style lang="scss">
 	a {
 		color: var(--text-one);
 		text-decoration: none;
@@ -23,13 +23,13 @@
 		align-items: center;
 		border-right: 1px solid var(--border);
 		border-bottom: 1px solid var(--border);
-	}

-	a:hover {
+		&:hover {
 			background: var(--surface-three);
 			text-decoration: underline var(--primary);
 			color: var(--text-one);
 		}
+	}

 	h5 {
 		white-space: nowrap;
@@ -47,7 +47,7 @@
 		user-select: none;
 	}

-	@media (max-width: 767px) {
+	@media (max-width: 768px) {
 		h5 {
 			display: none;
 		}
--- a/src/routes/contributors/ContributorSection.svelte
+++ b/src/routes/contributors/ContributorSection.svelte
@@ -15,7 +15,8 @@
 	let bots = ['semantic-release-bot', 'revanced-bot'];
 </script>

-<div class="section-container">
+<div class="container">
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		class="title"
 		class:closed={!expanded}
@@ -31,7 +32,7 @@
 	</div>

 	{#if expanded}
-		<div class="contrib-host" transition:slide={{ easing: quintOut, duration: 500 }}>
+		<div class="contributors" transition:slide={{ easing: quintOut, duration: 500 }}>
 			{#each contributors as { name, avatar_url, url }}
 				{#if !bots.includes(name)}
 					<ContributorButton {name} pfp={avatar_url} {url} />
@@ -42,6 +43,11 @@
 </div>

 <style lang="scss">
+	.container {
+		border-radius: 20px;
+		overflow: hidden;
+		border: 1px solid var(--border);
+
 		.title {
 			display: flex;
 			align-items: center;
@@ -55,48 +61,41 @@
 			&:hover {
 				background-color: var(--surface-three);
 			}
-	}

-	.closed {
+			&.closed {
 				border-bottom: none;
 			}

-	#arrow {
-		transition: all 0.2s var(--bezier-one);
-		user-select: none;
-	}
-
-	.section-container {
-		border-radius: 20px;
-		overflow: hidden;
-		border: 1px solid var(--border);
-	}
-
 			a {
 				display: flex;
 				text-decoration: none;
 				width: max-content;
 				border-radius: 8px;
-	}

-	a:hover {
+				&:hover {
 					text-decoration: underline var(--primary);
 					color: var(--text-one);
 				}
+			}

-	.contrib-host {
+			#arrow {
+				transition: all 0.2s var(--bezier-one);
+				user-select: none;
+			}
+		}
+
+		.contributors {
 			margin-right: -1px;
 			margin-bottom: -1px;
 			display: grid;
 			justify-items: center;
 			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-	}

-	@media (max-width: 767px) {
-		.contrib-host {
+			@media (max-width: 768px) {
 				padding: 0.75rem;
 				gap: 0.25rem;
 				grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
 			}
 		}
+	}
 </style>
--- a/src/routes/donate/+page.svelte
+++ b/src/routes/donate/+page.svelte
@@ -6,40 +6,18 @@
 	import { createQuery } from '@tanstack/svelte-query';

 	import Head from '$lib/components/Head.svelte';
-	import Button from '$lib/components/Button.svelte';
-	import Snackbar from '$lib/components/Snackbar.svelte';
 	import Query from '$lib/components/Query.svelte';
-	import Dialogue from '$lib/components/Dialogue.svelte';
+	import CryptoDialog from '$layout/Dialogs/CryptoDialog.svelte';

-	import QRCode from './QRCode.svelte';
 	import DonateHeartAnimation from './DonateHeartAnimation.svelte';
 	import TeamMember from './TeamMember.svelte';

-	import CircleMultipleOutline from 'svelte-material-icons/CircleMultipleOutline.svelte';
-	import WalletOutline from 'svelte-material-icons/WalletOutline.svelte';
-	import ChevronUp from 'svelte-material-icons/ChevronUp.svelte';
-
 	import { supportsWebP } from '$util/supportsWebP';

 	const teamQuery = createQuery(queries.team());
 	const aboutQuery = createQuery(queries.about());

-	let qrCodeDialogue = false;
 	let cryptoDialogue = false;
-	let addressSnackbar = false;
-	let qrCodeValue = '';
-	let qrCodeDialogueName = '';
-
-	async function copyToClipboard(walletAddress: string) {
-		addressSnackbar = true;
-		qrCodeDialogue = false;
-
-		try {
-			await navigator.clipboard.writeText(walletAddress);
-		} catch (error) {
-			console.error('Failed to copy crypto wallet:', error);
-		}
-	}

 	const shuffle = <T,>(array: T[]) =>
 		array
@@ -136,86 +114,22 @@
 	</Query>
 </main>

-<Dialogue bind:modalOpen={cryptoDialogue}>
-	<svelte:fragment slot="icon">
-		<CircleMultipleOutline size="32px" color="var(--surface-six)" />
-	</svelte:fragment>
-	<svelte:fragment slot="title">Cryptocurrencies</svelte:fragment>
-	<svelte:fragment slot="description">
-		<hr style="margin: 1rem 0;" />
-		<div class="wallets">
-			<Query query={aboutQuery} let:data>
-				{#each data.about.donations.wallets as wallet}
-					<button
-						on:click={() => {
-							qrCodeValue = wallet.address;
-							qrCodeDialogueName = wallet.currency_code;
-							qrCodeDialogue = !qrCodeDialogue;
-							// when the user clicks a wallet the crypto wallet goes away
-							// because multi page dialogues aren't implemented yet oops
-							cryptoDialogue = false;
-						}}
-					>
-						<div class="wallet-name">
-							<img
-								src="/donate/crypto/{wallet.currency_code}.svg"
-								onerror="this.onerror=null; this.src='/donate/fallback.svg'"
-								alt={`${wallet.network} icon.'`}
-							/>
-							{`${wallet.network} (${wallet.currency_code})`}
-						</div>
-						<div id="arrow">
-							<ChevronUp size="20px" color="var(--surface-six)" />
-						</div>
-					</button>
-				{/each}
-			</Query>
-		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="buttons">
-		<Button type="filled" on:click={() => (cryptoDialogue = false)}>Close</Button>
-	</svelte:fragment>
-</Dialogue>
-
-<Dialogue bind:modalOpen={qrCodeDialogue}>
-	<svelte:fragment slot="icon">
-		<WalletOutline size="32px" color="var(--surface-six)" />
-	</svelte:fragment>
-	<svelte:fragment slot="title">{qrCodeDialogueName} Wallet</svelte:fragment>
-	<svelte:fragment slot="description">
-		<div class="qr-code-body">
-			{qrCodeValue}
-			<QRCode codeValue={qrCodeValue} />
-		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="buttons">
-		<Button
-			type="text"
-			on:click={() => {
-				qrCodeDialogue = false;
-				cryptoDialogue = true;
-			}}>Back</Button
-		>
-		<Button type="filled" on:click={() => copyToClipboard(qrCodeValue)}>Copy Address</Button>
-	</svelte:fragment>
-</Dialogue>
-
-<Snackbar bind:open={addressSnackbar}>
-	<svelte:fragment slot="text">Address copied to clipboard</svelte:fragment>
-</Snackbar>
+<Query query={aboutQuery} let:data>
+	<CryptoDialog bind:dialogOpen={cryptoDialogue} wallets={data.about.donations.wallets} />
+</Query>

 <style lang="scss">
 	main {
 		display: flex;
 		flex-direction: column;
+		margin-bottom: 5rem;

-		// support revanced and heart thingy
 		section {
 			display: flex;
 			justify-content: center;
 			align-items: center;

-			@media screen and (max-width: 768px) {
+			@media (max-width: 768px) {
 				flex-direction: column-reverse;
 			}
 		}
@@ -234,17 +148,16 @@
 		margin-bottom: 2rem;
 		width: 60%;

-		@media screen and (max-width: 1200px) {
+		@media (max-width: 1200px) {
 			width: 90%;
 		}

-		@media screen and (max-width: 768px) {
+		@media (max-width: 768px) {
 			width: 100%;
 		}
 	}

-	// COPEEEE
-	@media screen and (max-width: 768px) {
+	@media (max-width: 768px) {
 		#heart {
 			display: none;
 		}
@@ -255,7 +168,7 @@
 		gap: 1rem;
 		margin-bottom: 3rem;

-		@media screen and (max-width: 768px) {
+		@media (max-width: 768px) {
 			flex-direction: column;
 		}
 	}
@@ -297,55 +210,6 @@
 		}
 	}

-	.wallets {
-		// i just guessed this
-		width: clamp(200px, 75vw, 375px);
-		#arrow {
-			height: 20px;
-			transform: rotate(90deg);
-		}
-
-		button {
-			width: 100%;
-			font-size: 0.9rem;
-			background-color: transparent;
-			border: none;
-			color: var(--text-four);
-			cursor: pointer;
-			text-align: left;
-			display: flex;
-			justify-content: space-between;
-			background-color: var(--surface-seven);
-			padding: 0.75rem 1.25rem;
-			transition: filter 0.4s var(--bezier-one);
-
-			&:hover {
-				filter: brightness(85%);
-			}
-		}
-	}
-
-	.wallet-name {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-
-		// crypto icon
-		img {
-			height: 24px;
-			width: 24px;
-		}
-	}
-
-	.qr-code-body {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 1rem;
-		word-break: break-word;
-		text-align: center;
-	}
-
 	.team {
 		width: 100%;
 		display: grid;
@@ -353,6 +217,5 @@
 		justify-content: space-between;
 		align-items: stretch;
 		gap: 1rem;
-		margin-bottom: 4rem;
 	}
 </style>
--- a/src/routes/donate/DonateHeartAnimation.svelte
+++ b/src/routes/donate/DonateHeartAnimation.svelte
@@ -68,6 +68,7 @@
 </script>

 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	id="pulsating-image"
 	on:mousemove={(e) => showHeart(e, false)}
--- a/src/routes/donate/TeamMember.svelte
+++ b/src/routes/donate/TeamMember.svelte
@@ -93,7 +93,7 @@
 				.mobile {
 					display: none;
 				}
-				@media screen and (width <= 768px) {
+				@media (max-width: 768px) {
 					.desktop {
 						display: none;
 					}
@@ -117,7 +117,7 @@
 		user-select: none;
 		margin-bottom: 1rem;

-		@media screen and (max-width: 768px) {
+		@media (max-width: 768px) {
 			margin-bottom: 0;
 			height: 48px;
 			width: 48px;
--- a/src/routes/download/+page.svelte
+++ b/src/routes/download/+page.svelte
@@ -13,7 +13,7 @@
 	import Query from '$lib/components/Query.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import Picture from '$lib/components/Picture.svelte';
-	import Dialogue from '$lib/components/Dialogue.svelte';
+	import DownloadCompatibilityWarningDialog from '$layout/Dialogs/DownloadCompatibilityWarningDialog.svelte';
 	import { onMount } from 'svelte';

 	const query = createQuery(queries.manager());
@@ -69,21 +69,6 @@
 	]}
 />

-<Dialogue bind:modalOpen={warningDialogue}>
-	<svelte:fragment slot="title">Warning</svelte:fragment>
-	<svelte:fragment slot="description">{warning} Do you still want to download?</svelte:fragment>
-	<svelte:fragment slot="buttons">
-		<Query {query} let:data>
-			<Button
-				type="text"
-				href={data.release.download_url}
-				on:click={() => (warningDialogue = false)}>Okay</Button
-			>
-		</Query>
-		<Button type="text" on:click={() => (warningDialogue = false)}>Cancel</Button>
-	</svelte:fragment>
-</Dialogue>
-
 <main class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<h2>ReVanced <span>Manager</span></h2>
 	<p>Patch your favourite apps, right on your device.</p>
@@ -113,6 +98,8 @@
 	</div>
 </main>

+<DownloadCompatibilityWarningDialog bind:dialogOpen={warningDialogue} {warning} />
+
 <style>
 	.center {
 		display: flex;
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@@ -16,7 +16,7 @@
 	import PatchItem from './PatchItem.svelte';
 	import Search from '$lib/components/Search.svelte';
 	import FilterChip from '$lib/components/FilterChip.svelte';
-	import Dialogue from '$lib/components/Dialogue.svelte';
+	import MobilePatchesPackagesDialog from '$layout/Dialogs/MobilePatchesPackagesDialog.svelte';
 	import Query from '$lib/components/Query.svelte';
 	import Fuse from 'fuse.js';
 	import { onMount } from 'svelte';
@@ -25,8 +25,6 @@

 	const query = createQuery(queries.patches());

-	let searcher: Fuse<Patch> | undefined;
-
 	let searchParams: Readable<URLSearchParams>;
 	if (building) {
 		searchParams = readable(new URLSearchParams());
@@ -124,32 +122,15 @@
 		>
 			{selectedPkg || 'Packages'}
 		</FilterChip>
-		<!-- <FilterChip check>Universal</FilterChip>
-		<FilterChip>Patch options</FilterChip> -->
 	</div>

 	<Query {query} let:data>
-		<div class="mobile-packages-Dialogue">
-			<Dialogue bind:modalOpen={mobilePackages} fullscreen>
-				<svelte:fragment slot="title">Packages</svelte:fragment>
-				<div class="mobile-packages">
-					<span
-						on:click={() => (mobilePackages = !mobilePackages)}
-						on:keypress={() => (mobilePackages = !mobilePackages)}
-					>
-						<Package {selectedPkg} name="All packages" bind:searchTerm />
-					</span>
-					{#each data.packages as pkg}
-						<span
-							on:click={() => (mobilePackages = !mobilePackages)}
-							on:keypress={() => (mobilePackages = !mobilePackages)}
-						>
-							<Package {selectedPkg} name={pkg} bind:searchTerm />
-						</span>
-					{/each}
-				</div>
-			</Dialogue>
-		</div>
+		<MobilePatchesPackagesDialog
+			bind:dialogOpen={mobilePackages}
+			bind:searchTerm
+			{data}
+			{selectedPkg}
+		/>

 		<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 			<PackageMenu>
@@ -164,7 +145,6 @@

 		<div class="patches-container">
 			{#each filterPatches(data.patches, selectedPkg || '', displayedTerm) as patch}
-				<!-- Trigger new animations when package or search changes (I love Svelte) -->
 				{#key selectedPkg || displayedTerm}
 					<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 						<PatchItem {patch} bind:showAllVersions />
@@ -213,19 +193,7 @@
 		display: none;
 	}

-	.mobile-packages {
-		margin-bottom: -1px;
-		overflow: hidden;
-		border-radius: 12px;
-		border: 1px solid var(--border);
-	}
-
-	@media (min-width: 768px) {
-		.mobile-packages-Dialogue {
-			display: none;
-		}
-	}
-	@media (max-width: 767px) {
+	@media (max-width: 768px) {
 		main {
 			grid-template-columns: none;
 			flex-direction: column;
--- a/src/routes/patches/Package.svelte
+++ b/src/routes/patches/Package.svelte
@@ -25,6 +25,7 @@
 </script>

 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="package"
 	class:selected={selectedPkg === name || (name === 'All packages' && !selectedPkg)}
@@ -33,57 +34,39 @@
 	{name}
 </div>

-<style>
+<style lang="scss">
 	.package {
 		padding: 0.75rem 1rem;
+		border-radius: 100px;
+
 		font-size: 0.85rem;
 		font-weight: 500;
-		border-radius: 100px;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		gap: 0.6rem;
-		width: 100%;
-		user-select: none;
-		transition: background-color 0.4s var(--bezier-one);
 		color: var(--text-four);
-		transition: color 0.3s var(--bezier-one);
-	}

-	.selected {
-		color: var(--primary);
-		transition: color 0.3s var(--bezier-one);
-		background-color: var(--tertiary);
-	}
-	.package:hover:not(.selected) {
-		background-color: var(--surface-seven);
-	}
+		cursor: pointer;
+		user-select: none;
+		transition:
+			background-color 0.4s var(--bezier-one),
+			color 0.3s var(--bezier-one);

-	.package:not(.selected):hover {
-		color: var(--text-one);
-	}
-
-	@media (max-width: 767px) {
-		.package {
+		@media (max-width: 768px) {
 			border-radius: 0px;
 			font-size: 0.9rem;
-			padding: 1rem 1rem;
-			width: 100%;
-			background-color: transparent;
+			padding: 1rem;
 			word-break: break-all;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			color: var(--text-four);
 			border-bottom: 1px solid var(--border);
 		}

-		.selected {
+		&.selected {
 			color: var(--primary);
 			background-color: var(--tertiary);
 		}

-		.package:not(.selected):hover {
-			color: var(--text-four);
+		&:hover:not(.selected) {
+			background-color: var(--surface-seven);
+			color: var(--text-one);
 		}
 	}
 </style>
--- a/src/routes/patches/PackageMenu.svelte
+++ b/src/routes/patches/PackageMenu.svelte
@@ -1,37 +1,33 @@
-<div class="menu">
+<div>
 	<h6>Packages</h6>
 	<hr />
-	<div class="slot">
+	<span>
 		<slot />
-	</div>
+	</span>
 </div>

-<style>
-	.menu {
-		height: calc(100vh - 60px);
-		width: 100%;
-		padding: 0px 30px 30px 10px;
+<style lang="scss">
+	div {
 		display: flex;
 		flex-direction: column;
 		position: sticky;
-		top: 60px;
-		padding-top: calc(6rem - 60px);
-		overflow-y: scroll;
-	}

-	.menu::-webkit-scrollbar-thumb {
+		height: calc(100vh - 60px);
+		top: 60px;
+		padding: calc(6rem - 60px) 30px 30px 10px;
+
+		overflow-y: scroll;
+
+		&::-webkit-scrollbar-thumb {
 			background-color: transparent;
 		}
-	.menu:hover::-webkit-scrollbar-thumb {
+		&:hover::-webkit-scrollbar-thumb {
 			background-color: var(--primary);
 		}
+	}

-	.slot {
+	span {
 		margin-top: 0.75rem;
-		display: flex;
-		gap: 1rem;
-		flex-direction: column;
-		white-space: normal;
 		word-break: break-all;
 	}

@@ -39,16 +35,4 @@
 		margin-bottom: 1rem;
 		color: var(--primary);
 	}
-
-	@media (max-width: 767px) {
-		.menu {
-			padding: 0.75rem;
-			height: unset;
-		}
-
-		h6,
-		hr {
-			display: none;
-		}
-	}
 </style>
--- a/src/routes/patches/PatchItem.svelte
+++ b/src/routes/patches/PatchItem.svelte
@@ -19,6 +19,7 @@
 </script>

 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="patch-container"
 	class:expanded={hasPatchOptions}
@@ -99,6 +100,7 @@
 		<span transition:fade={{ easing: quintOut, duration: 1000 }}>
 			<div class="options" transition:slide={{ easing: quintOut, duration: 500 }}>
 				{#each options as option}
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
 					<div class="option" on:click|stopPropagation>
 						<h5 id="option-title">{option.title}</h5>
 						<h5>