george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-05 17:33:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move View Stats and Sign In/Out buttons into DevButtons

Browse Source 
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>
This commit is contained in:
George Powell
2026-03-13 11:47:03 -04:00
parent 884bbe65c7
commit ae4482a551
3 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/lib/components/DevButtons.svelte
View File

@@ -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"

4
src/lib/components/SocialLinks.svelte
View File

@@ -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"

38
src/routes/+page.svelte
View File

@@ -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}