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:
jay
2026-06-03 14:41:43 +00:00
parent bb008cfaa5
commit 15728c3bcb
11 changed files with 168 additions and 87 deletions
+3 -9
View File
@@ -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) {