From 036e7ed7e885d22d24294a69f51502990e792345 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Sun, 28 Jun 2026 15:42:40 -0400
Subject: [PATCH] /news: surface Saved + Boundaries in the view-head (don't
 bury them in Account)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per Codex: HubBar stays purely site-level, so the feed's own utilities live with
the feed. Beside the existing Search toggle (hub chrome only, so `/`'s Header
keeps its own — no duplication): a Saved button (opens the existing flyout) and a
Boundaries/Tune control with a visible active indicator (links to its account
section for now). Same pill styling as Search.

Also flagged the Back-condition trap in-code: once bare /news becomes Latest,
Back must be suppressed for 'latest' too (only genuine drill-ins show it) — to be
fixed at the behavior split, not now (would alter the frozen `/`).

32 tests green; build clean.

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

diff --git a/frontend/src/lib/components/NewsFeed.svelte b/frontend/src/lib/components/NewsFeed.svelte
index f48c8bd..f456371 100644
--- a/frontend/src/lib/components/NewsFeed.svelte
+++ b/frontend/src/lib/components/NewsFeed.svelte
@@ -666,12 +666,29 @@
           <button class="searchtoggle" class:on={searchOpen || selected === 'search'} onclick={toggleSearch} aria-label="Search articles" title="Search articles">
             <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="M21 21l-4.4-4.4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
           </button>
+          <!-- News-local utilities: HubBar stays purely site-level, so Saved + Boundaries
+               live here (where the legacy Header carried them) instead of being buried in Account. -->
+          {#if chrome === 'hub'}
+            {#if auth.user}
+              <button class="vh-util" onclick={() => (showSaved = true)} aria-label="Saved articles" title="Saved articles">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg>
+              </button>
+            {/if}
+            <a class="vh-util" class:on={filtersOn} href="/account?section=boundaries"
+               aria-label={filtersOn ? 'Boundaries are on' : 'Your boundaries'} title={filtersOn ? 'Boundaries are on' : 'Your boundaries'}>
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z" fill={filtersOn ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+            </a>
+          {/if}
           {#if auth.user && followTarget}
             <button class="followbtn" class:on={isFollowing(followTarget.kind, followTarget.value)}
                     onclick={() => toggleFollow(followTarget.kind, followTarget.value)}>
               {isFollowing(followTarget.kind, followTarget.value) ? '✓ Following' : 'Follow ' + followTarget.noun}
             </button>
           {/if}
+          <!-- TODO(latest-default): once bare /news becomes Latest, suppress Back for BOTH
+               'latest' and 'today'; show it only for genuine drill-ins (tag/source/search),
+               or Back lands on the top-level Latest page. Don't change this until then —
+               it would alter the frozen `/` feed. -->
           {#if selected !== 'today'}
             <button class="viewback" onclick={goBack} aria-label="Go back">
               <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>
@@ -908,6 +925,13 @@
   .searchtoggle:hover { border-color: var(--accent); }
   .searchtoggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }
   .searchtoggle svg { width: 17px; height: 17px; display: block; }
+  /* news-local Saved / Boundaries — same pill as the search toggle */
+  .vh-util { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
+             background: none; border: 1px solid var(--line); color: var(--accent-deep); border-radius: 999px;
+             cursor: pointer; text-decoration: none; transition: border-color 0.14s ease, background 0.14s ease; }
+  .vh-util:hover { border-color: var(--accent); }
+  .vh-util.on { background: var(--accent); border-color: var(--accent); color: #fff; }
+  .vh-util svg { width: 17px; height: 17px; display: block; }
   .searchbar { display: flex; gap: 8px; margin: 0 0 18px; }
   .searchbar input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 10px 14px;
                      border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }