goose.art
extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
Fix login UX issues
- Hide login button on homepage (avoid duplicate login UI)
- Add actor-typeahead to login modal for handle autocompletion
- Add z-index: 1000 to actor-typeahead for proper layering
- Add onchange handler to modal input for typeahead sync
Fixes:
- No more confusing dual login UI on homepage
- Modal now has same typeahead functionality as main form
- Typeahead dropdown renders above all page content
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
+21
-8
+6
src/app.css
+6
src/app.css
+15
-8
src/lib/components/Header.svelte
+15
-8
src/lib/components/Header.svelte
···
1
1
<script lang="ts">
2
2
import { onMount } from 'svelte';
3
+
import { page } from '$app/stores';
3
4
import { fetchUserProfile, type UserProfile } from '$lib/atproto-client';
4
5
import ProfileDropdown from './ProfileDropdown.svelte';
5
6
import { Card, Modal, Input, Button } from '$lib/components/ui';
···
12
13
let showLoginModal = $state(false);
13
14
let handle = $state('');
14
15
let isLoggingIn = $state(false);
16
+
17
+
// Don't show login button on homepage (login form is already there)
18
+
let isHomepage = $derived($page.url.pathname === '/');
15
19
16
20
onMount(async () => {
17
21
if (session) {
···
61
65
{:else if session}
62
66
<!-- Loading profile -->
63
67
<div class="avatar-placeholder"></div>
64
-
{:else}
68
+
{:else if !isHomepage}
65
69
<button class="login-link" onclick={() => showLoginModal = true}>Login</button>
66
70
{/if}
67
71
</div>
···
72
76
<div class="login-modal-content">
73
77
<h2>Login with @proto</h2>
74
78
<form onsubmit={(e) => { e.preventDefault(); login(); }}>
75
-
<Input
76
-
value={handle}
77
-
oninput={(e) => handle = e.currentTarget.value}
78
-
placeholder="your-handle.bsky.social"
79
-
disabled={isLoggingIn}
80
-
class="login-input"
81
-
/>
79
+
<actor-typeahead>
80
+
<Input
81
+
value={handle}
82
+
oninput={(e) => handle = e.currentTarget.value}
83
+
onchange={(e) => handle = e.currentTarget.value}
84
+
placeholder="your-handle.bsky.social"
85
+
disabled={isLoggingIn}
86
+
class="login-input"
87
+
/>
88
+
</actor-typeahead>
82
89
<Button type="submit" disabled={isLoggingIn} variant="primary" class="login-button">
83
90
{isLoggingIn ? 'Logging in...' : 'Login'}
84
91
</Button>