refactor(badges): move badges display to component

3 files changed, 119 insertions, 98 deletions

diff --git a/src/lib/User/BadgeWall/Badges.svelte b/src/lib/User/BadgeWall/Badges.svelte
new file mode 100644
index 00000000..2821ae15
--- /dev/null
+++ b/src/lib/User/BadgeWall/Badges.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
+	import tooltip from '$lib/Tooltip/tooltip';
+	import locale from '$stores/locale';
+	import { databaseTimeToDate } from '$lib/Utility/time';
+	import FallbackImage from '$lib/Image/FallbackImage.svelte';
+	import { cdn, thumbnail } from '$lib/Utility/image';
+	import FallbackBadge from './FallbackBadge.svelte';
+	import type { UserPreferences } from '$lib/Database/userPreferences';
+	import { dev } from '$app/environment';
+	import type { IndexedBadge } from './badge';
+
+	export let ungroupedBadges: IndexedBadge[];
+	export let groupedBadges: [string, IndexedBadge[]][];
+	export let categoryFilter: string | null;
+	export let editMode: boolean;
+	export let preferences: UserPreferences;
+	export let selectedBadge: IndexedBadge | undefined = undefined;
+</script>
+
+{#if ungroupedBadges.length === 0}
+	<div class="card">
+		No due.moe registered badges found for this user. <a
+			href={'#'}
+			on:click={(e) => e.preventDefault()}
+			title="This alert does not include AWC badges."
+			use:tooltip>?</a
+		>
+	</div>
+{/if}
+
+{#each groupedBadges as [category, unsortedBadges]}
+	{@const badges = unsortedBadges.sort(
+		(a, b) => new Date(b.time || 0).getTime() - new Date(a.time || 0).getTime()
+	)}
+
+	<details open={categoryFilter ? categoryFilter === category : true}>
+		<summary>{category}</summary>
+
+		<p />
+
+		<div class="badges">
+			{#each badges as badge}
+				<div id={`badge-${badge.id}`}>
+					{#if editMode}
+						<LinkedTooltip
+							content={`${
+								badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
+							}${badge.description ? `\n${badge.description}` : ''}${
+								badge.designer ? `\nDesigner: ${badge.designer}` : ''
+							}${badge.source ? `\nSource: ${badge.source}` : ''}`}
+							pin={`badge-${badge.id}`}
+							pinPosition="top"
+							relative
+						>
+							<a
+								href={`#`}
+								on:click={() => {
+									selectedBadge = badge;
+
+									const hiddenInput = document.querySelector('input[name="hidden"]');
+
+									if (hiddenInput instanceof HTMLInputElement)
+										hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
+								}}
+								title={`${dev ? `${badge.id}\n` : ''}${
+									badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
+								}${badge.description ? `, ${badge.description}` : ''}${
+									badge.designer ? `\nDesigner: ${badge.designer}` : ''
+								}${badge.source ? `\nSource: ${badge.source}` : ''}`}
+							>
+								<FallbackImage
+									source={cdn(thumbnail(badge.image))}
+									alternative={badge.description}
+									fallback={thumbnail(badge.image)}
+									style={badge.hidden || badge.shadow_hidden
+										? 'filter: grayscale(100%); opacity: 50%;'
+										: ''}
+								/>
+							</a>
+						</LinkedTooltip>
+					{:else}
+						<FallbackBadge
+							{badge}
+							bind:selectedBadge
+							source={cdn(thumbnail(badge.image))}
+							alternative={badge.description}
+							fallback={thumbnail(badge.image)}
+							hideOnError={preferences.hide_missing_badges}
+							style={badge.hidden || badge.shadow_hidden
+								? 'filter: grayscale(100%); opacity: 50%;'
+								: ''}
+						/>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</details>
+
+	{#if groupedBadges[groupedBadges.length - 1][0] !== category}
+		<p />
+	{/if}
+{/each}
diff --git a/src/lib/User/BadgeWall/badge.ts b/src/lib/User/BadgeWall/badge.ts
new file mode 100644
index 00000000..7e6b7254
--- /dev/null
+++ b/src/lib/User/BadgeWall/badge.ts
@@ -0,0 +1,5 @@
+import type { Badge } from '$lib/Database/userBadges';
+
+export interface IndexedBadge extends Badge {
+	index: number;
+}
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index eb895dbd..2614cb13 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -8,9 +8,7 @@
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import { databaseTimeToDate, dateToInputTime, inputTimeToDatabaseTime } from '$lib/Utility/time';
 	import root from '$lib/Utility/root.js';
-	import tooltip from '$lib/Tooltip/tooltip.js';
 	import proxy from '$lib/Utility/proxy.js';
-	import { cdn } from '$lib/Utility/image';
 	import locale from '$stores/locale.js';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import Message from '$lib/Loading/Message.svelte';
@@ -19,18 +17,16 @@
 	import { activityText } from '$lib/Data/AniList/activity.js';
 	import SettingHint from '$lib/Settings/SettingHint.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';
+	import { browser } from '$app/environment';
 	// import { io } from 'socket.io-client';
-	import Tooltip from '$lib/Tooltip/LinkedTooltip.svelte';
 	import BadgePreview from '$lib/User/BadgeWall/BadgePreview.svelte';
-	import { thumbnail } from '$lib/Utility/image.js';
 	import authorisedJson from '$lib/Data/Static/authorised.json';
 	import identity from '$stores/identity';
 	import '$lib/User/BadgeWall/badges.css';
+	import Badges from '$lib/User/BadgeWall/Badges.svelte';
+	import type { IndexedBadge } from '$lib/User/BadgeWall/badge';
 
 	export let data;
 
@@ -70,10 +66,6 @@
 
 	type GroupedBadges = { [key: string]: IndexedBadge[] };
 
-	interface IndexedBadge extends Badge {
-		index: number;
-	}
-
 	const getBadges = () => (badgesPromise = fetch(root(`/api/badges?id=${badger.id}`)));
 
 	const setShadowHide = () =>
@@ -768,93 +760,14 @@
 
 							<p />
 
-							{#if ungroupedBadges.length === 0}
-								<div class="card">
-									No due.moe registered badges found for this user. <a
-										href={'#'}
-										on:click={(e) => e.preventDefault()}
-										title="This alert does not include AWC badges."
-										use:tooltip>?</a
-									>
-								</div>
-							{/if}
-
-							{#each groupedBadges as [category, unsortedBadges]}
-								{@const badges = unsortedBadges.sort(
-									(a, b) => new Date(b.time || 0).getTime() - new Date(a.time || 0).getTime()
-								)}
-
-								<details open={categoryFilter ? categoryFilter === category : true}>
-									<summary>{category}</summary>
-
-									<p />
-
-									<div class="badges">
-										{#each badges as badge}
-											<div id={`badge-${badge.id}`}>
-												{#if editMode}
-													<Tooltip
-														content={`${
-															badge.time
-																? $locale().dateFormatter(databaseTimeToDate(badge.time))
-																: ''
-														}${badge.description ? `\n${badge.description}` : ''}${
-															badge.designer ? `\nDesigner: ${badge.designer}` : ''
-														}${badge.source ? `\nSource: ${badge.source}` : ''}`}
-														pin={`badge-${badge.id}`}
-														pinPosition="top"
-														relative
-													>
-														<a
-															href={`#`}
-															on:click={() => {
-																selectedBadge = badge;
-
-																const hiddenInput = document.querySelector('input[name="hidden"]');
-
-																if (hiddenInput instanceof HTMLInputElement)
-																	hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
-															}}
-															title={`${dev ? `${badge.id}\n` : ''}${
-																badge.time
-																	? $locale().dateFormatter(databaseTimeToDate(badge.time))
-																	: ''
-															}${badge.description ? `, ${badge.description}` : ''}${
-																badge.designer ? `\nDesigner: ${badge.designer}` : ''
-															}${badge.source ? `\nSource: ${badge.source}` : ''}`}
-														>
-															<FallbackImage
-																source={cdn(thumbnail(badge.image))}
-																alternative={badge.description}
-																fallback={thumbnail(badge.image)}
-																style={badge.hidden || badge.shadow_hidden
-																	? 'filter: grayscale(100%); opacity: 50%;'
-																	: ''}
-															/>
-														</a>
-													</Tooltip>
-												{:else}
-													<FallbackBadge
-														{badge}
-														bind:selectedBadge
-														source={cdn(thumbnail(badge.image))}
-														alternative={badge.description}
-														fallback={thumbnail(badge.image)}
-														hideOnError={preferences.hide_missing_badges}
-														style={badge.hidden || badge.shadow_hidden
-															? 'filter: grayscale(100%); opacity: 50%;'
-															: ''}
-													/>
-												{/if}
-											</div>
-										{/each}
-									</div>
-								</details>
-
-								{#if groupedBadges[groupedBadges.length - 1][0] !== category}
-									<p />
-								{/if}
-							{/each}
+							<Badges
+								{ungroupedBadges}
+								{groupedBadges}
+								{categoryFilter}
+								{editMode}
+								{preferences}
+								bind:selectedBadge
+							/>
 						{/if}
 					</div>