From 43692ae4e9d68ff9529062e543d81a35a6c18ff2 Mon Sep 17 00:00:00 2001
From: Stan Runge <stan@stanrunge.dev>
Date: Sat, 7 Mar 2026 03:14:34 +0100
Subject: [PATCH] add queue button in sidebar

---
 src/lib/components/Sidebar.svelte | 48 ++++++++++++++++++-
 src/lib/stores/queue.svelte.ts    | 77 +++++++++++++++++++++++++++++++
 src/routes/(app)/+layout.svelte   |  8 ++++
 src/routes/(app)/+page.svelte     | 76 ++++--------------------------
 4 files changed, 142 insertions(+), 67 deletions(-)
 create mode 100644 src/lib/stores/queue.svelte.ts

diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 2ca1376..17c7afb 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import {
+		queue,
+		joinQueue,
+		leaveQueue
+	} from '$lib/stores/queue.svelte';
 
 	const user = $derived(page.data?.user);
+	const activeMatch = $derived(page.data?.activeMatch);
 
 	let { open = $bindable(false) } = $props();
 
@@ -57,8 +63,47 @@
 		<span class="font-700 font-bold text-base tracking-tight text-text-primary">Vash Esports</span>
 	</a>
 
+	<!-- Queue Button -->
+	<div class="px-3 pb-4">
+		{#if activeMatch}
+			<a
+				href="/matches/{activeMatch.id}"
+				class="flex w-full items-center justify-center gap-2 rounded-lg border border-yellow-500/30 bg-yellow-500/10 px-3 py-2.5 text-sm font-600 text-yellow-300 transition-colors hover:bg-yellow-500/20"
+			>
+				<div class="relative h-2 w-2">
+					<div class="absolute inset-0 animate-ping rounded-full bg-yellow-400 opacity-75"></div>
+					<div class="h-2 w-2 rounded-full bg-yellow-400"></div>
+				</div>
+				Go to Match
+			</a>
+		{:else if queue.status?.inQueue}
+			<div class="flex flex-col gap-1.5">
+				<div class="flex items-center justify-center gap-2 rounded-lg border border-yellow-500/30 bg-yellow-500/10 px-3 py-2.5 text-sm font-600 text-yellow-300">
+					<span class="h-1.5 w-1.5 animate-pulse rounded-full bg-yellow-400"></span>
+					In Queue ({queue.status.queueSize})
+				</div>
+				<button
+					onclick={leaveQueue}
+					disabled={queue.loading}
+					class="flex w-full items-center justify-center rounded-md px-3 py-1.5 text-xs text-red-400 transition-colors hover:bg-red-500/10 disabled:opacity-50"
+				>
+					Leave Queue
+				</button>
+			</div>
+		{:else}
+			<button
+				onclick={joinQueue}
+				disabled={queue.loading}
+				class="flex w-full items-center justify-center gap-2 rounded-lg bg-accent px-3 py-2.5 text-sm font-600 text-surface-900 transition-colors hover:bg-accent-hover disabled:opacity-50"
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 17.5 3 6V3h3l11.5 11.5"/><path d="m13 19 3.5-3.5"/><path d="m16.5 22 5-5"/><path d="M10 5.5 6 2H3v3l4 4"/></svg>
+				{queue.loading ? 'Joining...' : 'Find Match'}
+			</button>
+		{/if}
+	</div>
+
 	<!-- Nav -->
-	<nav class="mt-2 flex flex-1 flex-col gap-0.5 px-3">
+	<nav class="mt-0 flex flex-1 flex-col gap-0.5 px-3">
 		{#each [
 			{ href: '/', label: 'Dashboard', icon: 'dashboard' },
 			{ href: '/matches', label: 'Matches', icon: 'matches' },
@@ -91,6 +136,7 @@
 				Admin
 			</a>
 		{/if}
+
 	</nav>
 
 	<!-- Bottom -->
diff --git a/src/lib/stores/queue.svelte.ts b/src/lib/stores/queue.svelte.ts
new file mode 100644
index 0000000..ecfd530
--- /dev/null
+++ b/src/lib/stores/queue.svelte.ts
@@ -0,0 +1,77 @@
+// Shared queue state — used by Sidebar and Dashboard
+import { invalidateAll } from '$app/navigation';
+
+type QueueStatus = {
+	inQueue: boolean;
+	queueSize: number;
+	matchedMatchId?: string | null;
+};
+
+const queue = $state({
+	status: null as QueueStatus | null,
+	loading: false
+});
+
+let pollInterval: ReturnType<typeof setInterval> | null = null;
+
+async function fetchQueueStatus() {
+	try {
+		const res = await fetch('/api/queue');
+		if (res.ok) {
+			const status: QueueStatus = await res.json();
+			const wasInQueue = queue.status?.inQueue;
+			queue.status = status;
+
+			if (wasInQueue && !status.inQueue && status.matchedMatchId) {
+				await invalidateAll();
+			}
+		}
+	} catch {}
+}
+
+async function joinQueue() {
+	queue.loading = true;
+	try {
+		const res = await fetch('/api/queue', { method: 'POST' });
+		const result = await res.json();
+		if (result.matched && result.match) {
+			await invalidateAll();
+			queue.status = { inQueue: false, queueSize: 0, matchedMatchId: result.match.id };
+			queue.loading = false;
+			return;
+		}
+		await fetchQueueStatus();
+	} catch {}
+	queue.loading = false;
+}
+
+async function leaveQueue() {
+	queue.loading = true;
+	try {
+		await fetch('/api/queue', { method: 'DELETE' });
+		await fetchQueueStatus();
+	} catch {}
+	queue.loading = false;
+}
+
+function startPolling() {
+	if (pollInterval) return;
+	fetchQueueStatus();
+	pollInterval = setInterval(fetchQueueStatus, 4000);
+}
+
+function stopPolling() {
+	if (pollInterval) {
+		clearInterval(pollInterval);
+		pollInterval = null;
+	}
+}
+
+export {
+	queue,
+	fetchQueueStatus,
+	joinQueue,
+	leaveQueue,
+	startPolling,
+	stopPolling
+};
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 83f7a81..5813181 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -3,6 +3,8 @@
 	import Sidebar from '$lib/components/Sidebar.svelte';
 	import Header from '$lib/components/Header.svelte';
 	import { page } from '$app/state';
+	import { onMount } from 'svelte';
+	import { startPolling, stopPolling } from '$lib/stores/queue.svelte';
 
 	let { children } = $props();
 
@@ -18,6 +20,12 @@
 		PICKING: 'Picking',
 		PLAYING: 'Playing'
 	};
+
+	onMount(() => {
+		if (!user) return;
+		startPolling();
+		return () => stopPolling();
+	});
 </script>
 
 {#if user}
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 7acbd14..dde8a45 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
-	import { invalidateAll } from '$app/navigation';
 	import { page } from '$app/state';
-	import { onMount } from 'svelte';
+	import {
+		queue,
+		joinQueue,
+		leaveQueue
+	} from '$lib/stores/queue.svelte';
 
 	let { data } = $props();
 
@@ -17,65 +20,6 @@
 		CANCELLED: { label: 'Cancelled', color: 'text-red-400' }
 	};
 
-	// Queue state
-	let queueStatus = $state<{
-		inQueue: boolean;
-		queueSize: number;
-		matchedMatchId?: string | null;
-	} | null>(null);
-	let queueLoading = $state(false);
-
-	async function fetchQueueStatus() {
-		try {
-			const res = await fetch('/api/queue');
-			if (res.ok) {
-				const status = await res.json();
-				const wasInQueue = queueStatus?.inQueue;
-				queueStatus = status;
-
-				// If we were in queue and now got matched, refresh the layout to show the active match banner
-				if (wasInQueue && !status.inQueue && status.matchedMatchId) {
-					await invalidateAll();
-				}
-			}
-		} catch {}
-	}
-
-	async function joinQueue() {
-		queueLoading = true;
-		try {
-			const res = await fetch('/api/queue', { method: 'POST' });
-			const result = await res.json();
-			if (result.matched && result.match) {
-				// Refresh layout to show banner instead of hard redirecting
-				await invalidateAll();
-				queueStatus = { inQueue: false, queueSize: 0, matchedMatchId: result.match.id };
-				queueLoading = false;
-				return;
-			}
-			await fetchQueueStatus();
-		} catch {}
-		queueLoading = false;
-	}
-
-	async function leaveQueue() {
-		queueLoading = true;
-		try {
-			await fetch('/api/queue', { method: 'DELETE' });
-			await fetchQueueStatus();
-		} catch {}
-		queueLoading = false;
-	}
-
-	// Poll queue status with a plain setInterval — no reactive dependencies,
-	// so Svelte can never re-trigger it and cause a request flood.
-	onMount(() => {
-		if (!data.user) return;
-		fetchQueueStatus();
-		const id = setInterval(fetchQueueStatus, 4000);
-		return () => clearInterval(id);
-	});
-
 	function avgSR(mappool: any): string | null {
 		const slots = mappool?.slots;
 		if (!slots?.length) return null;
@@ -217,15 +161,15 @@
 					<h2 class="text-sm font-600">Ranked Queue</h2>
 					<p class="mt-0.5 text-xs text-text-secondary">Find a match at your skill level</p>
 				</div>
-				{#if queueStatus?.inQueue}
+				{#if queue.status?.inQueue}
 					<div class="flex items-center gap-3">
 						<span class="flex items-center gap-2 text-xs text-yellow-400">
 							<span class="h-1.5 w-1.5 animate-pulse rounded-full bg-yellow-400"></span>
-							In queue ({queueStatus.queueSize} searching)
+							In queue ({queue.status.queueSize} searching)
 						</span>
 						<button
 							onclick={leaveQueue}
-							disabled={queueLoading}
+							disabled={queue.loading}
 							class="rounded-md border border-red-500/30 px-3 py-1.5 text-xs text-red-400 hover:bg-red-500/10 disabled:opacity-50"
 						>
 							Leave Queue
@@ -241,10 +185,10 @@
 				{:else}
 					<button
 						onclick={joinQueue}
-						disabled={queueLoading}
+						disabled={queue.loading}
 						class="rounded-md bg-accent px-4 py-2 text-sm font-600 text-surface-900 transition-colors hover:bg-accent-hover disabled:opacity-50"
 					>
-						{queueLoading ? 'Joining...' : 'Find Match'}
+						{queue.loading ? 'Joining...' : 'Find Match'}
 					</button>
 				{/if}
 			</div>