From ae4482a55143ddf6547a11a28f40d1d5729c6906 Mon Sep 17 00:00:00 2001
From: George Powell <geohpowell@gmail.com>
Date: Fri, 13 Mar 2026 11:47:03 -0400
Subject: [PATCH] refactor: move View Stats and Sign In/Out buttons into
 DevButtons

Consolidates the dev-only stats and auth buttons into the DevButtons
component, passing user and onSignIn as props. Also comments out the
Twitter link in SocialLinks.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/components/DevButtons.svelte  | 44 ++++++++++++++++++++++++++-
 src/lib/components/SocialLinks.svelte |  4 +--
 src/routes/+page.svelte               | 38 +----------------------
 3 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/DevButtons.svelte b/src/lib/components/DevButtons.svelte
index 919c579..5361a3e 100644
--- a/src/lib/components/DevButtons.svelte
+++ b/src/lib/components/DevButtons.svelte
@@ -1,8 +1,21 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
+	import { enhance } from "$app/forms";
 	import Button from "$lib/components/Button.svelte";
 
-	let { anonymousId }: { anonymousId: string | null } = $props();
+	type User = {
+		id: string;
+		email?: string | null;
+		firstName?: string | null;
+		lastName?: string | null;
+		appleId?: string | null;
+	} | null;
+
+	let {
+		anonymousId,
+		user,
+		onSignIn,
+	}: { anonymousId: string | null; user: User; onSignIn: () => void } = $props();
 
 	let seeding = $state(false);
 
@@ -46,6 +59,35 @@
 	<div class="border-t-2 border-gray-400"></div>
 </div>
 <div class="flex flex-col gap-3">
+	<a
+		href="/stats?{user
+			? `userId=${user.id}`
+			: `anonymousId=${anonymousId}`}&tz={encodeURIComponent(
+			Intl.DateTimeFormat().resolvedOptions().timeZone,
+		)}"
+		class="inline-flex items-center justify-center w-full px-4 py-4 md:py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md"
+	>
+		📊 View Stats
+	</a>
+
+	{#if user}
+		<form method="POST" action="/auth/logout" use:enhance class="w-full">
+			<button
+				type="submit"
+				class="inline-flex items-center justify-center w-full px-4 py-4 md:py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium shadow-md"
+			>
+				🚪 Sign Out
+			</button>
+		</form>
+	{:else}
+		<button
+			onclick={onSignIn}
+			class="inline-flex items-center justify-center w-full px-4 py-4 md:py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium shadow-md"
+		>
+			🔐 Sign In
+		</button>
+	{/if}
+
 	<div class="flex flex-col md:flex-row gap-3 md:gap-2">
 		<Button
 			variant="secondary"
diff --git a/src/lib/components/SocialLinks.svelte b/src/lib/components/SocialLinks.svelte
index 5fa3497..f944978 100644
--- a/src/lib/components/SocialLinks.svelte
+++ b/src/lib/components/SocialLinks.svelte
@@ -18,7 +18,7 @@
 
 	<div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div>
 
-	<a
+	<!-- <a
 		href="https://x.com/pupperpowell"
 		target="_blank"
 		rel="noopener noreferrer"
@@ -30,7 +30,7 @@
 		<img src={TwitterLogo} alt="Twitter" class="w-8 h-8" />
 	</a>
 
-	<div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div>
+	<div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div> -->
 
 	<a
 		href="mailto:george+bibdle@silentsummit.co"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b6a1152..622d356 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -343,42 +343,6 @@
 		</div>
 		{#if isDev}
 			<div class="mt-8 flex flex-col items-stretch md:items-center gap-3">
-				<div class="flex flex-col md:flex-row gap-3">
-					<a
-						href="/stats?{user
-							? `userId=${user.id}`
-							: `anonymousId=${persistence.anonymousId}`}&tz={encodeURIComponent(
-							Intl.DateTimeFormat().resolvedOptions().timeZone,
-						)}"
-						class="inline-flex items-center justify-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md"
-					>
-						📊 View Stats
-					</a>
-
-					{#if user}
-						<form
-							method="POST"
-							action="/auth/logout"
-							use:enhance
-							class="w-full md:w-auto"
-						>
-							<button
-								type="submit"
-								class="inline-flex items-center justify-center w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium shadow-md"
-							>
-								🚪 Sign Out
-							</button>
-						</form>
-					{:else}
-						<button
-							onclick={() => (authModalOpen = true)}
-							class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium shadow-md"
-						>
-							🔐 Sign In
-						</button>
-					{/if}
-				</div>
-
 				<div
 					class="text-xs text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded border dark:border-gray-700"
 				>
@@ -412,7 +376,7 @@
 					<div>Daily Verse Date: {dailyVerse.date}</div>
 					<div>Streak: {streak}</div>
 				</div>
-				<DevButtons anonymousId={persistence.anonymousId} />
+				<DevButtons anonymousId={persistence.anonymousId} {user} onSignIn={() => (authModalOpen = true)} />
 			</div>
 		{/if}