/art: add a Back button (matches the hub's single-history behavior)

Daily Art had no Back. Add a top-left "‹ Back" in its own gallery bar styling:
history.back() when arrived via in-app nav, else goto('/home3', {replaceState})
on a cold deep-link — same rule as the hub detail pages.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-23 09:38:54 -04:00
parent eaeb8d3139
commit 8a79b14c80
+28
View File
@@ -1,6 +1,7 @@
<script>
import { onMount } from 'svelte';
import { getJSON } from '$lib/api.js';
import { afterNavigate, goto } from '$app/navigation';
// Virtual frames the viewer can switch between — remembered locally, no account needed.
const FRAMES = [
@@ -30,6 +31,15 @@
// Move focus to the lightbox when it opens, so Escape/Enter work and focus is trapped sanely.
$effect(() => { if (zoom && lightboxEl) lightboxEl.focus(); });
// Same single-history Back as the hub pages: return to where you came from (the hub),
// or fall back to it on a cold deep-link without pushing a new entry.
let cameFromApp = $state(false);
afterNavigate(({ from }) => { if (from) cameFromApp = true; });
function goBack() {
if (cameFromApp && typeof history !== 'undefined') history.back();
else goto('/home3', { replaceState: true });
}
let who = $derived(
art ? [art.artist || 'Unknown artist', art.date_text].filter(Boolean) : []
);
@@ -95,6 +105,12 @@
</header>
<main class="gallery">
<button class="back" onclick={goBack} aria-label="Go back">
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M15 18l-6-6 6-6" />
</svg>
Back
</button>
<div class="intro">
<h1>Daily Art</h1>
<p>A masterwork a day, from the world's open collections.</p>
@@ -211,6 +227,18 @@
box-sizing: border-box;
display: flex; flex-direction: column; align-items: center;
}
/* top-left Back (the gallery centers its children, so pin this one to the left) */
.back {
align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
margin: 0 0 clamp(10px, 2vw, 18px); padding: 6px 10px 6px 0;
background: none; border: none; cursor: pointer; font: inherit; font-size: 14px;
font-weight: 600; color: var(--muted); transition: color 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.back:hover { color: var(--accent); }
.back svg { transition: transform 0.15s ease; }
.back:hover svg { transform: translateX(-2px); }
.intro { text-align: center; margin-bottom: clamp(18px, 3.5vw, 30px); }
.intro h1 {
font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;