From a8175db63e02e2d0cfab35ea2e58e7103a2ce110 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Mon, 8 Jun 2026 08:47:30 -0400
Subject: [PATCH] Back button: move inline-right; show on deep-linked source
 views; clean ?source

* Position the in-feed Back button to the right of the view title (inline with
  it) instead of stacked above; the accent underline moves under the title text.
* Deep-linking a source feed from an article page (/?source=<id>) now seeds the
  back history so the Back button appears (returns to Highlights).
* Strip the ?source= param after consuming it (replaceState) so it can't linger
  and make the browser back/forward behave oddly.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/routes/+page.svelte | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index a80ebab..2b69dd6 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -341,6 +341,10 @@
       const srcParam = typeof location !== 'undefined' && new URLSearchParams(location.search).get('source');
       if (srcParam && /^\d+$/.test(srcParam)) {
         await select('source:' + srcParam);
+        // Seed the back history so the in-feed Back returns to Highlights, and
+        // strip the ?source= param so it can't linger and confuse browser back.
+        navStack = [{ key: 'today', source: null }];
+        if (typeof history !== 'undefined') history.replaceState(null, '', location.pathname);
       } else {
         await select('today');
       }
@@ -373,14 +377,16 @@
   {:else}
     {#key selected}
       <header class="view-head rise">
+        <div class="vh-text">
+          <h1>{viewLabel}</h1>
+          {#if viewSubtitle}<p class="sub">{viewSubtitle}</p>{/if}
+        </div>
         {#if navStack.length}
           <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>
             Back
           </button>
         {/if}
-        <h1>{viewLabel}</h1>
-        {#if viewSubtitle}<p class="sub">{viewSubtitle}</p>{/if}
       </header>
 
       {#if selected === 'today'}
@@ -448,9 +454,14 @@
 <style>
   main.container { padding-top: 6px; padding-bottom: 40px; min-height: 60vh; }
 
-  .view-head { margin: 18px 0 18px; }
+  .view-head {
+    margin: 18px 0 18px; display: flex; align-items: flex-start;
+    justify-content: space-between; gap: 16px;
+  }
+  .view-head .vh-text { flex: 1; min-width: 0; }
   .viewback {
-    display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px;
+    flex-shrink: 0; margin-top: 8px;
+    display: inline-flex; align-items: center; gap: 5px;
     background: none; border: 1px solid var(--line); color: var(--accent-deep);
     border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; cursor: pointer;
     transition: border-color 0.14s ease;
@@ -459,7 +470,7 @@
   .viewback svg { width: 16px; height: 16px; display: block; }
   .view-head h1 { font-size: clamp(2.1rem, 5.5vw, 2.8rem); line-height: 1.05; text-transform: capitalize; }
   .view-head .sub { margin: 8px 0 0; color: var(--muted); font-size: 1.02rem; }
-  .view-head::after {
+  .view-head .vh-text::after {
     content: ''; display: block; width: 46px; height: 3px;
     background: var(--accent); border-radius: 2px; margin-top: 14px; opacity: 0.8;
   }