thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Back button: move inline-right; show on deep-linked source views; clean ?source

Browse 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>
This commit is contained in:
jay
2026-06-08 08:47:30 -04:00
parent 8c52582ae3
commit a8175db63e
1 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+page.svelte
+16 -5
View File
@@ -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;
}