From b8ac82e897bcab209bedb10591e981ed2ff3695e Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Mon, 29 Jun 2026 05:54:11 -0400
Subject: [PATCH] HubBar: show the signed-in profile picture in the account
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The cutover put HubBar on / and /news, but HubBar's account icon was a hardcoded
person SVG — so signed-in users lost the avatar the old `/` Header showed. Render
<Avatar> when auth.user.avatar_url exists (fills the circle, no tint peek); fall
back to the person glyph when signed out / no picture.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/components/HubBar.svelte | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/HubBar.svelte b/frontend/src/lib/components/HubBar.svelte
index 3b460bb..8a37c37 100644
--- a/frontend/src/lib/components/HubBar.svelte
+++ b/frontend/src/lib/components/HubBar.svelte
@@ -1,8 +1,10 @@
 <script>
-  // Shared editorial top bar for the hub (/home3) and its detail pages (/word, /quote,
-  // /onthisday). Full horizontal nav on wide screens; a hamburger + drop panel on phones
-  // so the bar stays clean. `active` highlights the current section.
+  // Shared editorial top bar for the hub (`/`) + its detail pages (/news, /word, /quote,
+  // /onthisday, /art, /play). Full horizontal nav on wide screens; a hamburger + drop panel
+  // on phones so the bar stays clean. `active` highlights the current section.
   // News now lives at /news (the hub is `/`). `newsHref` stays overridable for safety.
+  import { auth } from '$lib/auth.svelte.js';
+  import Avatar from './Avatar.svelte';
   let { active = '', newsHref = '/news' } = $props();
   let open = $state(false);
 
@@ -38,10 +40,14 @@
       <span class="nav-soon">Entertainment</span>
     </nav>
 
-    <a class="acct" href="/account" aria-label="Your account">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C98A2E" stroke-width="2" aria-hidden="true">
-        <circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" />
-      </svg>
+    <a class="acct" class:hasimg={auth.user?.avatar_url} href="/account" aria-label="Your account">
+      {#if auth.user?.avatar_url}
+        <Avatar user={auth.user} size={32} />
+      {:else}
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#C98A2E" stroke-width="2" aria-hidden="true">
+          <circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" />
+        </svg>
+      {/if}
     </a>
 
     <button class="burger" class:open aria-label="Menu" aria-expanded={open} aria-controls="hub-menu"
@@ -86,6 +92,8 @@
     width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #e6c9a0; background: #FCEFD7;
     display: flex; align-items: center; justify-content: center; flex: none;
   }
+  /* when showing the profile picture, let it fill the circle cleanly (no tint ring/peek) */
+  .acct.hasimg { background: none; overflow: hidden; padding: 0; }
   .acct:hover { background: #fbe6c4; }
 
   /* hamburger — phones only */