From 15feb89f0fa5dc83ac064e1e7312c2be4bcf3788 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 14 Jun 2024 00:49:23 -0700
Subject: feat(BadgePreview): move seek buttons to preview panel

---
 src/lib/User/BadgeWall/BadgePreview.svelte | 16 ++++++++++++++++
 src/routes/user/[user]/badges/+page.svelte | 26 ++++----------------------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte
index 7ba34843..f606cfc9 100644
--- a/src/lib/User/BadgeWall/BadgePreview.svelte
+++ b/src/lib/User/BadgeWall/BadgePreview.svelte
@@ -11,6 +11,8 @@
 	export let selectedBadge: Badge | undefined;
 	export let onNext: () => void = () => {};
 	export let onPrevious: () => void = () => {};
+	export let hasNext: boolean;
+	export let hasPrevious: boolean;
 
 	let source = cdn(thumbnail(selectedBadge?.image || '')) || '';
 	let badgeReference: HTMLImageElement;
@@ -195,6 +197,16 @@
 			<a href={`https://saucenao.com/search.php?url=${selectedBadge.image}`} target="_blank">
 				Search
 			</a>
+
+			<div class="badge-preview-seek">
+				{#if hasPrevious}
+					<button on:click={onPrevious}>Previous</button>
+				{/if}
+
+				{#if hasNext}
+					<button on:click={onNext} style="float: right;">Next</button>
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}
@@ -226,4 +238,8 @@
 			flex-direction: column;
 		}
 	}
+
+	.badge-preview-seek {
+		padding-top: 2rem;
+	}
 </style>
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 150f2167..e226fc8a 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -807,9 +807,9 @@
 					</div>
 
 					{#if isBadgeSelected}
-						{@const anyAdjacentBadgeExists =
+						<!-- {@const anyAdjacentBadgeExists =
 							adjacentBadgeExists(selectedBadge, ungroupedBadges, -1) ||
-							adjacentBadgeExists(selectedBadge, ungroupedBadges, 1)}
+							adjacentBadgeExists(selectedBadge, ungroupedBadges, 1)} -->
 
 						<Popup
 							fullscreen
@@ -822,29 +822,11 @@
 								bind:selectedBadge
 								onNext={() => setAdjacentCursor(ungroupedBadges, 1)}
 								onPrevious={() => setAdjacentCursor(ungroupedBadges, -1)}
+								hasNext={adjacentBadgeExists(selectedBadge, ungroupedBadges, 1) !== undefined}
+								hasPrevious={adjacentBadgeExists(selectedBadge, ungroupedBadges, -1) !== undefined}
 							/>
 
-							{#if anyAdjacentBadgeExists}
-								<p />
-							{/if}
-
-							{#if adjacentBadgeExists(selectedBadge, ungroupedBadges, -1)}
-								<button on:click={() => setAdjacentCursor(ungroupedBadges, -1)}>Previous</button>
-							{/if}
-
-							{#if adjacentBadgeExists(selectedBadge, ungroupedBadges, 1)}
-								<button
-									on:click={() => setAdjacentCursor(ungroupedBadges, 1)}
-									style="float: right;"
-								>
-									Next
-								</button>
-							{/if}
-
 							{#if authorised}
-								<br />
-								<br />
-
 								<button on:click={shadowHideBadge}>
 									{#if selectedBadge && selectedBadge.shadow_hidden}
 										Un-shadow
-- 
cgit v1.2.3