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>

frontend/src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount, untrack } from 'svelte';
+  import { goto } from '$app/navigation';
   import { getJSON, postJSON, putJSON, delJSON } from '$lib/api.js';
   import * as P from '$lib/prefs.js';
   import Header from '$lib/components/Header.svelte';
@@ -8,8 +9,7 @@
   import ArticleCard from '$lib/components/ArticleCard.svelte';
   import BoundariesPanel from '$lib/components/BoundariesPanel.svelte';
   import SignIn from '$lib/components/SignIn.svelte';
-  import AccountPanel from '$lib/components/AccountPanel.svelte';
-  import { auth, savedIds, refresh as refreshAuth, logout as authLogout } from '$lib/auth.svelte.js';
+  import { auth, savedIds, refresh as refreshAuth } from '$lib/auth.svelte.js';
 
   let moods = $state([]);
   let topics = $state([]);
@@ -21,21 +21,14 @@
   let userPrefs = $state(P.blank());
   let showBoundaries = $state(false);
   let showHistory = $state(false);
-  let showYou = $state(false); // mobile "You" sheet
   let showSignIn = $state(false);
-  let showAccount = $state(false);
 
+  // Account/settings is its own page (/account) now — robust + scrolls to top.
   function openAccount() {
-    showYou = false;
-    if (auth.user) showYou = true; // account lives in the You sheet
+    if (auth.user) goto('/account');
     else showSignIn = true;
   }
-  async function signOut() {
-    await authLogout();
-    showYou = false;
-  }
   function openHistory() {
-    showYou = false;
     showHistory = true;
     loadServerHistory();
   }
@@ -164,7 +157,7 @@
           ? (tagFamily?.description ?? '')
           : (currentMood?.description ?? currentTopic?.description ?? '')
   );
-  let activeTab = $derived(showYou ? 'you' : selected === 'today' ? 'today' : 'browse');
+  let activeTab = $derived(selected === 'today' ? 'today' : 'browse');
 
   // The hero is the only image slot. Some sources hotlink-protect their images
   // (e.g. Guardian → 401), so if the lead's image won't load, promote the next
@@ -216,7 +209,6 @@
 
   async function select(key, fresh = false) {
     selected = key;
-    showYou = false;
     error = '';
     try {
       if (key === 'today') {
@@ -299,7 +291,6 @@
   }
 
   function browse() {
-    showYou = false;
     const go = () => document.getElementById('explore')?.scrollIntoView({ behavior: 'smooth' });
     if (selected !== 'today') select('today').then(go);
     else go();
@@ -318,7 +309,14 @@
       // isn't, the Explore-by-family section simply stays hidden and cards fall
       // back to the topic pill — the rest of the page works unchanged.
       try { families = await getJSON('/api/families'); } catch { families = []; }
-      await select('today');
+      // Intent from the /account quick links (Saved / History / Boundaries).
+      const params = new URLSearchParams(window.location.search);
+      const view = params.get('view');
+      const open = params.get('open');
+      await select(view === 'saved' ? 'saved' : 'today');
+      if (open === 'history') openHistory();
+      if (open === 'boundaries') showBoundaries = true;
+      if (view || open) window.history.replaceState({}, '', '/'); // tidy the URL
     } catch (e) {
       error = 'Could not reach Upbeat Bytes.';
     }
@@ -376,36 +374,6 @@
     </section>
   {/if}
 
-  {#if showYou}
-    <section class="panel rise youmenu">
-      <div class="phead"><h2>You</h2><button class="close" onclick={() => (showYou = false)}>done</button></div>
-      {#if auth.user}
-        <div class="acctline">Signed in as <strong>{auth.user.email}</strong></div>
-        <button class="yourow" onclick={() => { showYou = false; select('saved'); }}>
-          <span>Saved</span>{#if savedIds.size}<span class="dot">{savedIds.size}</span>{/if}
-        </button>
-      {/if}
-      <button class="yourow" onclick={() => { showYou = false; showBoundaries = true; }}>
-        <span>Your boundaries</span>{#if filtersOn}<span class="dot">on</span>{/if}
-      </button>
-      <button class="yourow" onclick={openHistory}>
-        <span>History</span>{#if historyItems.length}<span class="dot">{historyItems.length}</span>{/if}
-      </button>
-      {#if auth.user}
-        <button class="yourow" onclick={() => { showYou = false; showAccount = true; }}><span>Account</span></button>
-        <button class="yourow" onclick={signOut}><span>Sign out</span></button>
-      {:else}
-        <button class="yourow" onclick={() => { showYou = false; showSignIn = true; }}>
-          <span>Sign in</span><span class="dot">save & sync</span>
-        </button>
-      {/if}
-    </section>
-  {/if}
-
-  {#if showAccount}
-    <AccountPanel onclose={() => (showAccount = false)} />
-  {/if}
-
   {#if notice}<p class="notice rise">{notice}</p>{/if}
 
   {#if loading}
@@ -478,7 +446,7 @@
   {/if}
 </main>
 
-<BottomNav active={activeTab} onToday={() => select('today')} onBrowse={browse} onYou={() => (showYou = !showYou)} />
+<BottomNav active={activeTab} onToday={() => select('today')} onBrowse={browse} onYou={openAccount} user={auth.user} />
 
 <style>
   main.container { padding-top: 6px; padding-bottom: 40px; min-height: 60vh; }
@@ -531,15 +499,6 @@
   .reset { background: none; border: none; color: var(--muted); font-size: 0.82rem; text-decoration: underline; margin-top: 12px; }
   .reset:hover { color: var(--accent-deep); }
 
-  .youmenu .yourow {
-    width: 100%; display: flex; align-items: center; justify-content: space-between;
-    background: none; border: none; border-bottom: 1px solid var(--line);
-    padding: 14px 2px; font-size: 1rem; color: var(--ink); cursor: pointer; text-align: left;
-  }
-  .youmenu .yourow:last-child { border-bottom: none; }
-  .youmenu .dot { background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; }
-  .youmenu .acctline { color: var(--muted); font-size: 0.85rem; padding: 4px 2px 10px; border-bottom: 1px solid var(--line); }
-
   .notice {
     text-align: center; color: var(--accent-deep); background: var(--accent-soft);
     border-radius: 999px; padding: 8px 16px; margin: 10px auto 0; width: fit-content; font-size: 0.86rem;