User avatar (Google picture), avatar in mobile You tab, /account page
- Capture the Google profile picture (picture claim) into users.avatar_url; an Avatar component shows it, falling back to the initial. Used in the desktop header and the mobile "You" tab (which now shows the user when signed in). - Move account/settings to its own route /account (robust + scrolls to top), reached by the desktop avatar and the mobile You tab; drop the inline "You" sheet. AccountPanel gains a Sign out action; the page links to Saved/History/ Boundaries via home intent params (?view= / ?open=). - db: users.avatar_url (schema + idempotent migration). 118 tests pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Avatar from './Avatar.svelte';
|
||||
let { onBoundaries, onHistory, onaccount, user = null, filtersOn = false } = $props();
|
||||
let initial = $derived((user?.display_name || user?.email || '?').trim()[0].toUpperCase());
|
||||
</script>
|
||||
|
||||
<header class="appbar">
|
||||
@@ -23,7 +23,7 @@
|
||||
</button>
|
||||
{#if user}
|
||||
<button class="acct" onclick={onaccount} title={user.email} aria-label="Your account">
|
||||
<span class="avatar">{initial}</span>
|
||||
<Avatar {user} size={30} />
|
||||
</button>
|
||||
{:else}
|
||||
<button class="signin" onclick={onaccount}>Sign in</button>
|
||||
@@ -59,13 +59,7 @@
|
||||
.utils button.on { color: var(--accent-deep); }
|
||||
.utils .signin { border-color: var(--line); color: var(--accent-deep); }
|
||||
.utils .signin:hover { background: var(--accent-soft); }
|
||||
.acct { padding: 4px; }
|
||||
.avatar {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 30px; height: 30px; border-radius: 999px;
|
||||
background: var(--accent); color: #fff; font-weight: 600; font-size: 0.8rem;
|
||||
font-family: var(--label);
|
||||
}
|
||||
.acct { padding: 4px; display: inline-flex; }
|
||||
|
||||
/* On phones the utilities live in the bottom tab bar ("You") instead. */
|
||||
@media (max-width: 720px) {
|
||||
|
||||
Reference in New Issue
Block a user