From 8a79b14c801f7bcf7ea1542eb3a89cbb7ba86137 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Tue, 23 Jun 2026 09:38:54 -0400
Subject: [PATCH] /art: add a Back button (matches the hub's single-history
 behavior)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/routes/art/+page.svelte | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/frontend/src/routes/art/+page.svelte b/frontend/src/routes/art/+page.svelte
index b0bd6c1..a58af49 100644
--- a/frontend/src/routes/art/+page.svelte
+++ b/frontend/src/routes/art/+page.svelte
@@ -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;