From eebeaa378d49cc8adb597d00fd05bcc314779888 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 21 Apr 2024 19:51:49 -0700
Subject: refactor(lib): move componenets to modules

---
 src/lib/Announcement.svelte                 |   2 +-
 src/lib/Dropdown.svelte                     | 127 ----------------------------
 src/lib/Error/AnimeRateLimited.svelte       |   2 +-
 src/lib/Error/LogInRestricted.svelte        |   2 +-
 src/lib/FallbackBadge.svelte                | 120 --------------------------
 src/lib/FallbackImage.svelte                |  41 ---------
 src/lib/Image/FallbackImage.svelte          |  41 +++++++++
 src/lib/Image/ParallaxImage.svelte          |  45 ++++++++++
 src/lib/Layout/Dropdown.svelte              | 127 ++++++++++++++++++++++++++++
 src/lib/Layout/Popup.svelte                 |  59 +++++++++++++
 src/lib/Loading/Message.svelte              |   2 +-
 src/lib/ParallaxImage.svelte                |  45 ----------
 src/lib/Popup.svelte                        |  59 -------------
 src/lib/User/BadgeWall/FallbackBadge.svelte | 120 ++++++++++++++++++++++++++
 src/routes/+error.svelte                    |   2 +-
 src/routes/+layout.svelte                   |   2 +-
 src/routes/tools/[tool]/+page.svelte        |   2 +-
 src/routes/user/[user]/+page.svelte         |   2 +-
 src/routes/user/[user]/badges/+page.svelte  |   8 +-
 19 files changed, 404 insertions(+), 404 deletions(-)
 delete mode 100644 src/lib/Dropdown.svelte
 delete mode 100644 src/lib/FallbackBadge.svelte
 delete mode 100644 src/lib/FallbackImage.svelte
 create mode 100644 src/lib/Image/FallbackImage.svelte
 create mode 100644 src/lib/Image/ParallaxImage.svelte
 create mode 100644 src/lib/Layout/Dropdown.svelte
 create mode 100644 src/lib/Layout/Popup.svelte
 delete mode 100644 src/lib/ParallaxImage.svelte
 delete mode 100644 src/lib/Popup.svelte
 create mode 100644 src/lib/User/BadgeWall/FallbackBadge.svelte

diff --git a/src/lib/Announcement.svelte b/src/lib/Announcement.svelte
index 3b239a7c..64df48b7 100644
--- a/src/lib/Announcement.svelte
+++ b/src/lib/Announcement.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Popup from './Popup.svelte';
+	import Popup from './Layout/Popup.svelte';
 	import announcementHash from '$stores/announcementHash';
 	import { env } from '$env/dynamic/public';
 
diff --git a/src/lib/Dropdown.svelte b/src/lib/Dropdown.svelte
deleted file mode 100644
index dd48af45..00000000
--- a/src/lib/Dropdown.svelte
+++ /dev/null
@@ -1,127 +0,0 @@
-<script lang="ts">
-	interface Item {
-		name: string;
-		url: string;
-		onClick?: () => void;
-		preventDefault?: boolean;
-	}
-
-	export let items: Item[] = [];
-	export let title: string | undefined = undefined;
-	export let header = true;
-	export let center = false;
-
-	let open = false;
-
-	const handleClickOutside = (event: any) => {
-		if (!event.target.closest('.dropdown')) open = false;
-	};
-</script>
-
-<svelte:window on:click={handleClickOutside} />
-
-<div
-	class="dropdown"
-	id="dropdown"
-	style={`--dropdown-left: ${center ? '50%' : 'unset'}; --dropdown-transform: ${
-		center ? 'translateX(-50%)' : 'unset'
-	};`}
->
-	<span
-		class={`${header ? 'header-item' : ''} dropdown-toggle`}
-		id="dropdown-toggle"
-		on:click|preventDefault={() => (open = !open)}
-		on:keydown={() => {}}
-		role="button"
-		tabindex="0"
-	>
-		{#if title}
-			{title}
-		{:else}
-			<slot name="title" />
-		{/if}
-	</span>
-
-	<div class={`dropdown-content card card-small ${open ? 'dropdown-open' : ''}`}>
-		{#each items as item}
-			<a
-				href={item.url}
-				class="header-item"
-				on:click={(e) => {
-					if (item.preventDefault) e.preventDefault();
-					if (item.onClick) item.onClick();
-				}}
-			>
-				{item.name}
-			</a>
-		{/each}
-	</div>
-</div>
-
-<style lang="scss">
-	a {
-		color: var(--base06);
-	}
-
-	.header-item {
-		margin: 0 0.5rem;
-	}
-
-	.header-item:hover {
-		text-decoration: none;
-	}
-
-	.header-item:active {
-		outline: none;
-	}
-
-	.dropdown {
-		position: relative;
-		display: inline-block;
-	}
-
-	.dropdown-content {
-		display: block;
-		position: absolute;
-		min-width: max-content;
-		padding: 0.5em 0;
-		opacity: 0;
-		transform: translateY(-20px);
-		visibility: hidden;
-		$delay: 0.25s;
-		transition: opacity $delay ease, transform $delay ease, visibility 0s linear $delay;
-		left: var(--dropdown-left);
-		transform: var(--dropdown-transform);
-		z-index: 1;
-	}
-
-	.dropdown-open {
-		opacity: 1;
-		transform: translateY(0);
-		visibility: visible;
-		transition-delay: 0s, 0s, 0s;
-		left: var(--dropdown-left);
-		transform: var(--dropdown-transform);
-	}
-
-	.dropdown:hover .dropdown-content {
-		opacity: 1;
-		transform: translateY(0);
-		visibility: visible;
-		transition-delay: 0s, 0s, 0s;
-		left: var(--dropdown-left);
-		transform: var(--dropdown-transform);
-	}
-
-	.dropdown-content a {
-		padding: 0.5em 0.75em;
-		text-decoration: none;
-		display: block;
-	}
-
-	.dropdown-content a:hover {
-		border-radius: 8px;
-		backdrop-filter: blur(160px);
-		background-color: var(--base01);
-	}
-</style>
diff --git a/src/lib/Error/AnimeRateLimited.svelte b/src/lib/Error/AnimeRateLimited.svelte
index a6ab056d..89b7ede2 100644
--- a/src/lib/Error/AnimeRateLimited.svelte
+++ b/src/lib/Error/AnimeRateLimited.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Popup from '$lib/Popup.svelte';
+	import Popup from '$lib/Layout/Popup.svelte';
 </script>
 
 <Popup locked fullscreen>
diff --git a/src/lib/Error/LogInRestricted.svelte b/src/lib/Error/LogInRestricted.svelte
index 353a941d..76799da1 100644
--- a/src/lib/Error/LogInRestricted.svelte
+++ b/src/lib/Error/LogInRestricted.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Popup from '$lib/Popup.svelte';
+	import Popup from '$lib/Layout/Popup.svelte';
 	import { env } from '$env/dynamic/public';
 </script>
 
diff --git a/src/lib/FallbackBadge.svelte b/src/lib/FallbackBadge.svelte
deleted file mode 100644
index 77ff1fbb..00000000
--- a/src/lib/FallbackBadge.svelte
+++ /dev/null
@@ -1,120 +0,0 @@
-<script lang="ts">
-	import locale from '$stores/locale';
-	import { tweened } from 'svelte/motion';
-	import type { Badge } from './Database/userBadges';
-	import Tooltip from './Tooltip/LinkedTooltip.svelte';
-	import { databaseTimeToDate } from './Utility/time';
-	import { cubicOut } from 'svelte/easing';
-	import { dev } from '$app/environment';
-
-	export let source: string | null | undefined;
-	export let alternative: string | null | undefined;
-	export let fallback: string | null | undefined;
-	export let maxReplaceCount = 1;
-	export let replaceDelay = 1000;
-	export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
-	export let hideOnError = false;
-	export let badge: Badge;
-	export let style = '';
-	export let selectedBadge: Badge | null = null;
-
-	let replaceCount = 0;
-	let badgeReference: HTMLImageElement;
-	const mouse = tweened(
-		{ x: 0, y: 0 },
-		{
-			duration: 75,
-			easing: cubicOut
-		}
-	);
-
-	const delayedReplace = (event: Event, image: string | undefined | null) => {
-		if (replaceCount >= maxReplaceCount) return;
-
-		setTimeout(() => {
-			(event.target as HTMLImageElement).src = image || '';
-
-			replaceCount += 1;
-		}, replaceDelay);
-	};
-
-	const handleMouseMove = (event: MouseEvent) => {
-		const boundingRectangle = badgeReference.getBoundingClientRect();
-		const factor = 1.25;
-		const limit = 50;
-
-		if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY };
-
-		$mouse.x +=
-			(-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor;
-		$mouse.y +=
-			(-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor;
-		$mouse.x = Math.max(Math.min($mouse.x, limit), -limit);
-		$mouse.y = Math.max(Math.min($mouse.y, limit), -limit);
-	};
-
-	const handleMouseLeave = () => {
-		$mouse = { x: 0, y: 0 };
-	};
-</script>
-
-{#if replaceCount < maxReplaceCount}
-	<Tooltip
-		content={`${dev ? `${badge.id}\n` : ''}${
-			badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
-		}${badge.description ? `\n${badge.description}` : ''}${
-			badge.designer ? `\nDesigner: ${badge.designer}` : ''
-		}${badge.source ? `\nSource: ${badge.source}` : ''}`}
-		id={`badge-${badge.id}`}
-		pin={`badge-${badge.id}`}
-		pinPosition="top"
-		relative
-	>
-		<a
-			href={'#'}
-			target="_blank"
-			class="badge-container badge"
-			on:mousemove={handleMouseMove}
-			on:mouseleave={handleMouseLeave}
-			on:click={(e) => {
-				e.preventDefault();
-
-				selectedBadge = badge;
-			}}
-		>
-			<img
-				src={source}
-				alt={alternative}
-				loading="lazy"
-				class="badge"
-				bind:this={badgeReference}
-				style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
-					10}deg); ${style}"
-				on:error={(e) => delayedReplace(e, fallback)}
-			/>
-		</a>
-	</Tooltip>
-{:else if !hideOnError}
-	<img src={error} alt="Not found" loading="lazy" class="badge" />
-{/if}
-
-<style lang="scss">
-	$transition: transform 0.325s ease;
-
-	.badge {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		transition: $transition;
-		box-sizing: border-box;
-		border-radius: 8px;
-	}
-
-	.badge:hover {
-		transform: scale(1.075);
-		position: relative;
-		z-index: 2;
-		transition: $transition;
-	}
-</style>
diff --git a/src/lib/FallbackImage.svelte b/src/lib/FallbackImage.svelte
deleted file mode 100644
index 3f5e8758..00000000
--- a/src/lib/FallbackImage.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-	export let source: string | undefined | null;
-	export let alternative: string | undefined | null;
-	export let fallback: string | undefined | null;
-	export let maxReplaceCount = 1;
-	export let replaceDelay = 1000;
-	export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
-	export let hideOnError = false;
-	export let style = '';
-
-	let replaceCount = 0;
-
-	const delayedReplace = (event: Event, image: string | undefined | null) => {
-		if (replaceCount >= maxReplaceCount) return;
-
-		setTimeout(() => {
-			(event.target as HTMLImageElement).src = image || '';
-
-			replaceCount += 1;
-		}, replaceDelay);
-	};
-</script>
-
-{#if replaceCount < maxReplaceCount}
-	<img
-		src={source}
-		alt={alternative}
-		loading="lazy"
-		class="badge"
-		on:error={(e) => delayedReplace(e, fallback)}
-		{style}
-	/>
-{:else if !hideOnError}
-	<img src={error} alt="Not found" loading="lazy" class="badge" />
-{/if}
-
-<style>
-	.badge {
-		border-radius: 8px;
-	}
-</style>
diff --git a/src/lib/Image/FallbackImage.svelte b/src/lib/Image/FallbackImage.svelte
new file mode 100644
index 00000000..3f5e8758
--- /dev/null
+++ b/src/lib/Image/FallbackImage.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	export let source: string | undefined | null;
+	export let alternative: string | undefined | null;
+	export let fallback: string | undefined | null;
+	export let maxReplaceCount = 1;
+	export let replaceDelay = 1000;
+	export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
+	export let hideOnError = false;
+	export let style = '';
+
+	let replaceCount = 0;
+
+	const delayedReplace = (event: Event, image: string | undefined | null) => {
+		if (replaceCount >= maxReplaceCount) return;
+
+		setTimeout(() => {
+			(event.target as HTMLImageElement).src = image || '';
+
+			replaceCount += 1;
+		}, replaceDelay);
+	};
+</script>
+
+{#if replaceCount < maxReplaceCount}
+	<img
+		src={source}
+		alt={alternative}
+		loading="lazy"
+		class="badge"
+		on:error={(e) => delayedReplace(e, fallback)}
+		{style}
+	/>
+{:else if !hideOnError}
+	<img src={error} alt="Not found" loading="lazy" class="badge" />
+{/if}
+
+<style>
+	.badge {
+		border-radius: 8px;
+	}
+</style>
diff --git a/src/lib/Image/ParallaxImage.svelte b/src/lib/Image/ParallaxImage.svelte
new file mode 100644
index 00000000..cebbfa2b
--- /dev/null
+++ b/src/lib/Image/ParallaxImage.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cubicOut } from 'svelte/easing';
+	import { tweened } from 'svelte/motion';
+
+	export let source: string;
+	export let duration = 300 * 1.75;
+	export let easing = cubicOut;
+	export let alternativeText: string;
+	export let classes = '';
+	export let style = '';
+	export const factor = 1.25;
+	const limit = 300 * 1.75;
+
+	let badgeReference: HTMLImageElement;
+	const mouse = tweened({ x: 0, y: 0 }, { duration, easing });
+
+	const handleMouseMove = (event: MouseEvent) => {
+		const boundingRectangle = badgeReference.getBoundingClientRect();
+
+		if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY };
+
+		$mouse.x +=
+			(-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor;
+		$mouse.y +=
+			(-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor;
+		$mouse.x = Math.max(Math.min($mouse.x, limit), -limit);
+		$mouse.y = Math.max(Math.min($mouse.y, limit), -limit);
+	};
+
+	const handleMouseLeave = () => {
+		$mouse = { x: 0, y: 0 };
+	};
+</script>
+
+<img
+	src={source}
+	bind:this={badgeReference}
+	style={`transform: perspective(1000px) rotateX(${$mouse.y / 10}deg) rotateY(${
+		-$mouse.x / 10
+	}deg); ${style}`}
+	alt={alternativeText}
+	on:mousemove={handleMouseMove}
+	on:mouseleave={handleMouseLeave}
+	class={classes}
+/>
diff --git a/src/lib/Layout/Dropdown.svelte b/src/lib/Layout/Dropdown.svelte
new file mode 100644
index 00000000..dd48af45
--- /dev/null
+++ b/src/lib/Layout/Dropdown.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+	interface Item {
+		name: string;
+		url: string;
+		onClick?: () => void;
+		preventDefault?: boolean;
+	}
+
+	export let items: Item[] = [];
+	export let title: string | undefined = undefined;
+	export let header = true;
+	export let center = false;
+
+	let open = false;
+
+	const handleClickOutside = (event: any) => {
+		if (!event.target.closest('.dropdown')) open = false;
+	};
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+<div
+	class="dropdown"
+	id="dropdown"
+	style={`--dropdown-left: ${center ? '50%' : 'unset'}; --dropdown-transform: ${
+		center ? 'translateX(-50%)' : 'unset'
+	};`}
+>
+	<span
+		class={`${header ? 'header-item' : ''} dropdown-toggle`}
+		id="dropdown-toggle"
+		on:click|preventDefault={() => (open = !open)}
+		on:keydown={() => {}}
+		role="button"
+		tabindex="0"
+	>
+		{#if title}
+			{title}
+		{:else}
+			<slot name="title" />
+		{/if}
+	</span>
+
+	<div class={`dropdown-content card card-small ${open ? 'dropdown-open' : ''}`}>
+		{#each items as item}
+			<a
+				href={item.url}
+				class="header-item"
+				on:click={(e) => {
+					if (item.preventDefault) e.preventDefault();
+					if (item.onClick) item.onClick();
+				}}
+			>
+				{item.name}
+			</a>
+		{/each}
+	</div>
+</div>
+
+<style lang="scss">
+	a {
+		color: var(--base06);
+	}
+
+	.header-item {
+		margin: 0 0.5rem;
+	}
+
+	.header-item:hover {
+		text-decoration: none;
+	}
+
+	.header-item:active {
+		outline: none;
+	}
+
+	.dropdown {
+		position: relative;
+		display: inline-block;
+	}
+
+	.dropdown-content {
+		display: block;
+		position: absolute;
+		min-width: max-content;
+		padding: 0.5em 0;
+		opacity: 0;
+		transform: translateY(-20px);
+		visibility: hidden;
+		$delay: 0.25s;
+		transition: opacity $delay ease, transform $delay ease, visibility 0s linear $delay;
+		left: var(--dropdown-left);
+		transform: var(--dropdown-transform);
+		z-index: 1;
+	}
+
+	.dropdown-open {
+		opacity: 1;
+		transform: translateY(0);
+		visibility: visible;
+		transition-delay: 0s, 0s, 0s;
+		left: var(--dropdown-left);
+		transform: var(--dropdown-transform);
+	}
+
+	.dropdown:hover .dropdown-content {
+		opacity: 1;
+		transform: translateY(0);
+		visibility: visible;
+		transition-delay: 0s, 0s, 0s;
+		left: var(--dropdown-left);
+		transform: var(--dropdown-transform);
+	}
+
+	.dropdown-content a {
+		padding: 0.5em 0.75em;
+		text-decoration: none;
+		display: block;
+	}
+
+	.dropdown-content a:hover {
+		border-radius: 8px;
+		backdrop-filter: blur(160px);
+		background-color: var(--base01);
+	}
+</style>
diff --git a/src/lib/Layout/Popup.svelte b/src/lib/Layout/Popup.svelte
new file mode 100644
index 00000000..be55adf0
--- /dev/null
+++ b/src/lib/Layout/Popup.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+
+	export let onLeave = () => {
+		return;
+	};
+	export let card = true;
+	export let smallCard = false;
+	export let fullscreen = false;
+	export let show = true;
+	export let locked = false;
+	export let center = false;
+
+	const handleClickOutside = (event: any) => {
+		if (!locked && event.target.classList.contains('popup')) {
+			show = false;
+
+			onLeave();
+		}
+	};
+
+	onMount(() => {
+		if (browser) document.body.style.overflow = 'auto';
+	});
+
+	$: {
+		if (browser) {
+			document.body.style.overflow = 'auto';
+
+			if (show) document.body.style.overflow = 'hidden';
+			else document.body.style.overflow = 'auto';
+		}
+	}
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+{#if show}
+	<div class={`popup ${fullscreen ? 'popup-fullscreen' : ''}`}>
+		<span
+			class={`${card ? `card ${smallCard ? 'card-small' : ''}` : ''} ${center ? 'centered' : ''}`}
+		>
+			<slot />
+		</span>
+	</div>
+{/if}
+
+<style>
+	.popup {
+		z-index: 3;
+	}
+
+	.centered {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
diff --git a/src/lib/Loading/Message.svelte b/src/lib/Loading/Message.svelte
index 14c74b5a..38794702 100644
--- a/src/lib/Loading/Message.svelte
+++ b/src/lib/Loading/Message.svelte
@@ -2,7 +2,7 @@
 	import Ellipsis from './Ellipsis.svelte';
 	import Ripple from './Ripple.svelte';
 	import Grid from './Grid.svelte';
-	import Popup from '$lib/Popup.svelte';
+	import Popup from '$lib/Layout/Popup.svelte';
 
 	export let message: string | undefined = undefined;
 	export let loader: 'ellipsis' | 'ripple' | 'grid' = 'ellipsis';
diff --git a/src/lib/ParallaxImage.svelte b/src/lib/ParallaxImage.svelte
deleted file mode 100644
index cebbfa2b..00000000
--- a/src/lib/ParallaxImage.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-	import { cubicOut } from 'svelte/easing';
-	import { tweened } from 'svelte/motion';
-
-	export let source: string;
-	export let duration = 300 * 1.75;
-	export let easing = cubicOut;
-	export let alternativeText: string;
-	export let classes = '';
-	export let style = '';
-	export const factor = 1.25;
-	const limit = 300 * 1.75;
-
-	let badgeReference: HTMLImageElement;
-	const mouse = tweened({ x: 0, y: 0 }, { duration, easing });
-
-	const handleMouseMove = (event: MouseEvent) => {
-		const boundingRectangle = badgeReference.getBoundingClientRect();
-
-		if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY };
-
-		$mouse.x +=
-			(-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor;
-		$mouse.y +=
-			(-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor;
-		$mouse.x = Math.max(Math.min($mouse.x, limit), -limit);
-		$mouse.y = Math.max(Math.min($mouse.y, limit), -limit);
-	};
-
-	const handleMouseLeave = () => {
-		$mouse = { x: 0, y: 0 };
-	};
-</script>
-
-<img
-	src={source}
-	bind:this={badgeReference}
-	style={`transform: perspective(1000px) rotateX(${$mouse.y / 10}deg) rotateY(${
-		-$mouse.x / 10
-	}deg); ${style}`}
-	alt={alternativeText}
-	on:mousemove={handleMouseMove}
-	on:mouseleave={handleMouseLeave}
-	class={classes}
-/>
diff --git a/src/lib/Popup.svelte b/src/lib/Popup.svelte
deleted file mode 100644
index be55adf0..00000000
--- a/src/lib/Popup.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts">
-	import { browser } from '$app/environment';
-	import { onMount } from 'svelte';
-
-	export let onLeave = () => {
-		return;
-	};
-	export let card = true;
-	export let smallCard = false;
-	export let fullscreen = false;
-	export let show = true;
-	export let locked = false;
-	export let center = false;
-
-	const handleClickOutside = (event: any) => {
-		if (!locked && event.target.classList.contains('popup')) {
-			show = false;
-
-			onLeave();
-		}
-	};
-
-	onMount(() => {
-		if (browser) document.body.style.overflow = 'auto';
-	});
-
-	$: {
-		if (browser) {
-			document.body.style.overflow = 'auto';
-
-			if (show) document.body.style.overflow = 'hidden';
-			else document.body.style.overflow = 'auto';
-		}
-	}
-</script>
-
-<svelte:window on:click={handleClickOutside} />
-
-{#if show}
-	<div class={`popup ${fullscreen ? 'popup-fullscreen' : ''}`}>
-		<span
-			class={`${card ? `card ${smallCard ? 'card-small' : ''}` : ''} ${center ? 'centered' : ''}`}
-		>
-			<slot />
-		</span>
-	</div>
-{/if}
-
-<style>
-	.popup {
-		z-index: 3;
-	}
-
-	.centered {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
diff --git a/src/lib/User/BadgeWall/FallbackBadge.svelte b/src/lib/User/BadgeWall/FallbackBadge.svelte
new file mode 100644
index 00000000..f6eee93f
--- /dev/null
+++ b/src/lib/User/BadgeWall/FallbackBadge.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+	import locale from '$stores/locale';
+	import { tweened } from 'svelte/motion';
+	import type { Badge } from '../../Database/userBadges';
+	import Tooltip from '../../Tooltip/LinkedTooltip.svelte';
+	import { databaseTimeToDate } from '../../Utility/time';
+	import { cubicOut } from 'svelte/easing';
+	import { dev } from '$app/environment';
+
+	export let source: string | null | undefined;
+	export let alternative: string | null | undefined;
+	export let fallback: string | null | undefined;
+	export let maxReplaceCount = 1;
+	export let replaceDelay = 1000;
+	export let error = 'https://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
+	export let hideOnError = false;
+	export let badge: Badge;
+	export let style = '';
+	export let selectedBadge: Badge | null = null;
+
+	let replaceCount = 0;
+	let badgeReference: HTMLImageElement;
+	const mouse = tweened(
+		{ x: 0, y: 0 },
+		{
+			duration: 75,
+			easing: cubicOut
+		}
+	);
+
+	const delayedReplace = (event: Event, image: string | undefined | null) => {
+		if (replaceCount >= maxReplaceCount) return;
+
+		setTimeout(() => {
+			(event.target as HTMLImageElement).src = image || '';
+
+			replaceCount += 1;
+		}, replaceDelay);
+	};
+
+	const handleMouseMove = (event: MouseEvent) => {
+		const boundingRectangle = badgeReference.getBoundingClientRect();
+		const factor = 1.25;
+		const limit = 50;
+
+		if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY };
+
+		$mouse.x +=
+			(-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor;
+		$mouse.y +=
+			(-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor;
+		$mouse.x = Math.max(Math.min($mouse.x, limit), -limit);
+		$mouse.y = Math.max(Math.min($mouse.y, limit), -limit);
+	};
+
+	const handleMouseLeave = () => {
+		$mouse = { x: 0, y: 0 };
+	};
+</script>
+
+{#if replaceCount < maxReplaceCount}
+	<Tooltip
+		content={`${dev ? `${badge.id}\n` : ''}${
+			badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
+		}${badge.description ? `\n${badge.description}` : ''}${
+			badge.designer ? `\nDesigner: ${badge.designer}` : ''
+		}${badge.source ? `\nSource: ${badge.source}` : ''}`}
+		id={`badge-${badge.id}`}
+		pin={`badge-${badge.id}`}
+		pinPosition="top"
+		relative
+	>
+		<a
+			href={'#'}
+			target="_blank"
+			class="badge-container badge"
+			on:mousemove={handleMouseMove}
+			on:mouseleave={handleMouseLeave}
+			on:click={(e) => {
+				e.preventDefault();
+
+				selectedBadge = badge;
+			}}
+		>
+			<img
+				src={source}
+				alt={alternative}
+				loading="lazy"
+				class="badge"
+				bind:this={badgeReference}
+				style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
+					10}deg); ${style}"
+				on:error={(e) => delayedReplace(e, fallback)}
+			/>
+		</a>
+	</Tooltip>
+{:else if !hideOnError}
+	<img src={error} alt="Not found" loading="lazy" class="badge" />
+{/if}
+
+<style lang="scss">
+	$transition: transform 0.325s ease;
+
+	.badge {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		transition: $transition;
+		box-sizing: border-box;
+		border-radius: 8px;
+	}
+
+	.badge:hover {
+		transform: scale(1.075);
+		position: relative;
+		z-index: 2;
+		transition: $transition;
+	}
+</style>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index cf0dc34e..9e1bca13 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { closest } from '$lib/Error/path';
-	import Popup from '$lib/Popup.svelte';
+	import Popup from '$lib/Layout/Popup.svelte';
 
 	$: suggestion = closest($page.url.pathname.replace('/', ''), [
 		'birthdays',
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9416e1d4..2bda9e50 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,7 +21,7 @@
 	import locale from '$stores/locale';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import subsPlease from '$stores/subsPlease';
-	import Dropdown from '$lib/Dropdown.svelte';
+	import Dropdown from '$lib/Layout/Dropdown.svelte';
 	import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
 	import subtitles from '$lib/Data/Static/subtitles.json';
 	import settingsSyncPulled from '$stores/settingsSyncPulled';
diff --git a/src/routes/tools/[tool]/+page.svelte b/src/routes/tools/[tool]/+page.svelte
index e56ca6e3..63596844 100644
--- a/src/routes/tools/[tool]/+page.svelte
+++ b/src/routes/tools/[tool]/+page.svelte
@@ -16,7 +16,7 @@
 	import Picker from '$lib/Tools/Picker.svelte';
 	import Likes from '$lib/Tools/Likes.svelte';
 	import root from '$lib/Utility/root.js';
-	import Popup from '$lib/Popup.svelte';
+	import Popup from '$lib/Layout/Popup.svelte';
 	import HololiveBirthdays from '$lib/Tools/HololiveBirthdays.svelte';
 
 	export let data;
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index fb55a6f0..222e044f 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ParallaxImage from './../../../lib/ParallaxImage.svelte';
+	import ParallaxImage from '../../../lib/Image/ParallaxImage.svelte';
 	import { typeSchedule, type ParseResult } from '$lib/Hololive/hololive';
 	import { user, type User } from '$lib/Data/AniList/user';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 60453f65..5dd2d554 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -13,13 +13,13 @@
 	import locale from '$stores/locale.js';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import Message from '$lib/Loading/Message.svelte';
-	import Dropdown from '$lib/Dropdown.svelte';
+	import Dropdown from '$lib/Layout/Dropdown.svelte';
 	import AnimeRateLimited from '$lib/Error/AnimeRateLimited.svelte';
 	import { activityText } from '$lib/Data/AniList/activity.js';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
-	import Popup from '$lib/Popup.svelte';
-	import FallbackImage from '$lib/FallbackImage.svelte';
-	import FallbackBadge from '$lib/FallbackBadge.svelte';
+	import Popup from '$lib/Layout/Popup.svelte';
+	import FallbackImage from '$lib/Image/FallbackImage.svelte';
+	import FallbackBadge from '$lib/User/BadgeWall/FallbackBadge.svelte';
 	import { page } from '$app/stores';
 	import type { UserPreferences } from '$lib/Database/userPreferences.js';
 	import { browser, dev } from '$app/environment';
-- 
cgit v1.2.3