From cb0773b03e1ede99569b16bcc629e80b607386c5 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Fri, 9 Jan 2026 22:21:01 +0000
Subject: [PATCH 1/2] feat(#57): Replace 'mark box as' buttons with dropdown
 for better ux

---
 .../pokedex/PokedexViewBoxes.svelte           | 107 +++++++++++++++---
 1 file changed, 91 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/pokedex/PokedexViewBoxes.svelte b/src/lib/components/pokedex/PokedexViewBoxes.svelte
index f7d6837..fcbd22a 100644
--- a/src/lib/components/pokedex/PokedexViewBoxes.svelte
+++ b/src/lib/components/pokedex/PokedexViewBoxes.svelte
@@ -25,6 +25,17 @@
 	let filterInHome = false;
 	let filterNotInHome = false;
 
+	// Bulk actions menu state (one open menu at a time)
+	let openBulkMenuForBox: number | null = null;
+
+	onMount(() => {
+		const close = () => {
+			openBulkMenuForBox = null;
+		};
+		window.addEventListener('click', close);
+		return () => window.removeEventListener('click', close);
+	});
+
 	let filteredCombinedData: CombinedData[] = [];
 	let filteredTotal = 0;
 	let overallTotal = 0;
@@ -336,22 +347,86 @@
 				>
 					{#each boxNumbers as boxNumber}
 						<div class="mb-8">
-							<h2 class="text-xl font-bold mb-4">Box {boxNumber}</h2>
-							<button class="btn" on:click={() => markBoxAsNotCaught(boxNumber)}>
-								Mark box as not 'caught'
-							</button>
-							<button class="btn" on:click={() => markBoxAsCaught(boxNumber)}>
-								Mark box as 'caught'
-							</button>
-							<button class="btn" on:click={() => markBoxAsNeedsToEvolve(boxNumber)}>
-								Mark box as 'needs to evolve'
-							</button>
-							<button class="btn" on:click={() => markBoxAsInHome(boxNumber)}>
-								Mark box as 'in Home'
-							</button>
-							<button class="btn" on:click={() => markBoxAsNotInHome(boxNumber)}>
-								Mark box as not 'in Home'
-							</button>
+							<div class="flex flex-wrap items-center justify-between gap-3 mb-4 relative z-20">
+								<h2 class="text-xl font-bold">Box {boxNumber}</h2>
+								<div class="relative" on:click|stopPropagation>
+									<button
+										type="button"
+										class="btn btn-sm btn-outline relative z-[210]"
+										aria-label="Open bulk actions menu"
+										aria-haspopup="menu"
+										aria-expanded={openBulkMenuForBox === boxNumber}
+										on:click={(event) => {
+											event.stopPropagation();
+											openBulkMenuForBox = openBulkMenuForBox === boxNumber ? null : boxNumber;
+										}}
+										on:keydown={(event) => {
+											if (event.key === 'Escape') openBulkMenuForBox = null;
+										}}
+									>
+										⋯
+									</button>
+
+									{#if openBulkMenuForBox === boxNumber}
+										<ul
+											class="menu bg-base-100 rounded-box absolute right-0 mt-2 z-[220] w-56 p-2 shadow border border-base-300"
+											role="menu"
+											on:click|stopPropagation
+										>
+											<li>
+												<button
+													on:click={() => {
+														markBoxAsNotCaught(boxNumber);
+														openBulkMenuForBox = null;
+													}}
+												>
+													Mark box as Not caught
+												</button>
+											</li>
+											<li>
+												<button
+													on:click={() => {
+														markBoxAsCaught(boxNumber);
+														openBulkMenuForBox = null;
+													}}
+												>
+													Mark box as Caught
+												</button>
+											</li>
+											<li>
+												<button
+													on:click={() => {
+														markBoxAsNeedsToEvolve(boxNumber);
+														openBulkMenuForBox = null;
+													}}
+												>
+													Mark box as Needs to evolve
+												</button>
+											</li>
+											<li>
+												<button
+													on:click={() => {
+														markBoxAsInHome(boxNumber);
+														openBulkMenuForBox = null;
+													}}
+												>
+													Mark box as In HOME
+												</button>
+											</li>
+											<li>
+												<button
+													on:click={() => {
+														markBoxAsNotInHome(boxNumber);
+														openBulkMenuForBox = null;
+													}}
+												>
+													Mark box as Not in HOME
+												</button>
+											</li>
+										</ul>
+									{/if}
+								</div>
+							</div>
 							<div class="grid grid-cols-6">
 								{#each combinedData as { pokedexEntry, catchRecord }, index}
 									{@const placement = calculateBoxPlacement(index)}

From 789321ce0357224a7475078ceefd34f2e21f7348 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sat, 10 Jan 2026 10:12:22 +0000
Subject: [PATCH 2/2] feat(#57): Improve accessibility of dropdown

---
 src/lib/components/pokedex/PokedexViewBoxes.svelte | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/pokedex/PokedexViewBoxes.svelte b/src/lib/components/pokedex/PokedexViewBoxes.svelte
index fcbd22a..0ace37e 100644
--- a/src/lib/components/pokedex/PokedexViewBoxes.svelte
+++ b/src/lib/components/pokedex/PokedexViewBoxes.svelte
@@ -346,6 +346,7 @@
 					style="--boxes-per-row: {boxesPerRow}; --cell-padding: {cellPaddingRem}rem; --sprite-size: {spriteSizePx}px;"
 				>
 					{#each boxNumbers as boxNumber}
+						{@const bulkMenuId = `box-${boxNumber}-bulk-menu`}
 						<div class="mb-8">
 							<div class="flex flex-wrap items-center justify-between gap-3 mb-4 relative z-20">
 								<h2 class="text-xl font-bold">Box {boxNumber}</h2>
@@ -355,6 +356,7 @@
 										class="btn btn-sm btn-outline relative z-[210]"
 										aria-label="Open bulk actions menu"
 										aria-haspopup="menu"
+										aria-controls={bulkMenuId}
 										aria-expanded={openBulkMenuForBox === boxNumber}
 										on:click={(event) => {
 											event.stopPropagation();
@@ -369,12 +371,13 @@
 
 									{#if openBulkMenuForBox === boxNumber}
 										<ul
+											id={bulkMenuId}
 											class="menu bg-base-100 rounded-box absolute right-0 mt-2 z-[220] w-56 p-2 shadow border border-base-300"
-											role="menu"
 											on:click|stopPropagation
 										>
 											<li>
 												<button
+													type="button"
 													on:click={() => {
 														markBoxAsNotCaught(boxNumber);
 														openBulkMenuForBox = null;
@@ -385,6 +388,7 @@
 											</li>
 											<li>
 												<button
+													type="button"
 													on:click={() => {
 														markBoxAsCaught(boxNumber);
 														openBulkMenuForBox = null;
@@ -395,6 +399,7 @@
 											</li>
 											<li>
 												<button
+													type="button"
 													on:click={() => {
 														markBoxAsNeedsToEvolve(boxNumber);
 														openBulkMenuForBox = null;
@@ -405,6 +410,7 @@
 											</li>
 											<li>
 												<button
+													type="button"
 													on:click={() => {
 														markBoxAsInHome(boxNumber);
 														openBulkMenuForBox = null;
@@ -415,6 +421,7 @@
 											</li>
 											<li>
 												<button
+													type="button"
 													on:click={() => {
 														markBoxAsNotInHome(boxNumber);
 														openBulkMenuForBox = null;