From e2a835269babfbfae1e8e1226ffd5d5eed3c3536 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 13 May 2024 03:34:29 -0700
Subject: refactor(badges): move badges display to component

---
 src/routes/user/[user]/badges/+page.svelte | 109 +++--------------------------
 1 file changed, 11 insertions(+), 98 deletions(-)

(limited to 'src/routes/user')

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>
 
-- 
cgit v1.2.3