Keep the open model in the address too

Opening a model adds /model/<id> to the address (#collection/12/model/34),
so a refresh or bookmark reopens it and Back closes it. Moving from one
model to the next doesn't add Back steps, and closing takes back the step
opening added. A model that's gone is dropped from the address.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

public/app.js

@@ -72,7 +72,12 @@ function startApp() {
   document.querySelector('.container').style.display = '';
   if (!appStarted) { setupEventListeners(); appStarted = true; }
   selectedScope = scopeFromHash();
-  loadData();
+  const model = modelFromHash(); // read now: drawing the page rewrites the address
+  loadData().then(() => {
+    if (!model) return;
+    if (findModel(model)) openModelDetail(model, { push: false });
+    else syncAddress(); // gone, or in the trash: drop it from the address
+  });
 }
 
 function showAuth(mode) {
@@ -979,25 +984,38 @@ function setupEventListeners() {
   document.getElementById('addFilesInput').addEventListener('change', handleAddFiles);
 }
 
-// The page you're on lives in the address — #filament, #collection/12 — so a
+// The page you're on lives in the address — #filament, #collection/12, and
-// refresh or a bookmark comes back to it, and Back and Forward move between pages.
+// /model/34 on the end while a model is open — so a refresh or a bookmark comes
-function scopeHash(scope) {
+// back to it, and Back and Forward move between pages and models.
-  if (scope === 'all') return '';
+let shownModelId = null;     // the model open in the detail view
-  return SPECIAL_SCOPES.includes(scope) ? `#${scope}` : `#collection/${scope}`;
+let modelStepPushed = false; // opening it here added a Back step
+
+function scopeHash(scope, modelId = null) {
+  const page = scope === 'all' ? '' : SPECIAL_SCOPES.includes(scope) ? scope : `collection/${scope}`;
+  const parts = [page, modelId ? `model/${modelId}` : ''].filter(Boolean);
+  return parts.length ? `#${parts.join('/')}` : '';
+}
+
+function hashParts() {
+  const h = decodeURIComponent(location.hash.slice(1));
+  const m = h.match(/^(.*?)\/?model\/(\d+)$/);
+  return { page: m ? m[1] : h, model: m ? Number(m[2]) : null };
 }
 
 function scopeFromHash() {
-  const h = decodeURIComponent(location.hash.slice(1));
+  const { page } = hashParts();
-  const collection = h.match(/^collection\/(\d+)$/);
+  const collection = page.match(/^collection\/(\d+)$/);
   if (collection) return collection[1];
-  return SPECIAL_SCOPES.includes(h) ? h : 'all';
+  return SPECIAL_SCOPES.includes(page) ? page : 'all';
 }
 
-// Keeps the address in step with the page shown; `push` makes a Back step.
+const modelFromHash = () => hashParts().model;
+
+// Keeps the address in step with what's shown; `push` makes a Back step.
 function syncAddress(push = false) {
-  const hash = scopeHash(String(selectedScope));
+  const hash = scopeHash(String(selectedScope), shownModelId);
   if (location.hash === hash || (!hash && !location.hash)) return;
-  history[push ? 'pushState' : 'replaceState'](null, '', `${location.pathname}${location.search}${hash}`);
+  history[push ? 'pushState' : 'replaceState']({ model: shownModelId }, '', `${location.pathname}${location.search}${hash}`);
 }
 
 async function selectScope(scope, { push = true } = {}) {
@@ -1010,7 +1028,14 @@ async function selectScope(scope, { push = true } = {}) {
 window.addEventListener('popstate', () => {
   if (!appStarted) return;
   const scope = scopeFromHash();
+  const model = modelFromHash();
   if (String(scope) !== String(selectedScope)) selectScope(scope, { push: false });
+  if (model && model !== shownModelId) {
+    openModelDetail(model, { push: false });
+  } else if (!model && shownModelId) {
+    modelStepPushed = false; // Back already took the step away
+    closeModal(fileDetailModal);
+  }
 });
 
 // Tracks the file currently shown in the detail viewer (for thumbnail regen).
@@ -1020,6 +1045,13 @@ let currentDetailThumb = null; // model image, used as a viewer fallback
 function closeModal(modal) {
   modal.classList.remove('active');
   if (modal === slicerModal) pendingHandoff = null;
+  if (modal === fileDetailModal && shownModelId) {
+    shownModelId = null;
+    // Undo the step opening it added, so Back doesn't reopen what was just closed.
+    if (modelStepPushed && history.state && history.state.model) history.back();
+    else syncAddress();
+    modelStepPushed = false;
+  }
   if (modal === fileDetailModal) {
     hideSlicerNotice();
     flushNotes();
@@ -1155,9 +1187,16 @@ function openImportModal() {
   importModal.classList.add('active');
 }
 
-function openModelDetail(modelId) {
+function openModelDetail(modelId, { push = true } = {}) {
   const model = findModel(modelId);
   if (!model) return;
+  // Reopening the same model (to refresh it) leaves the address alone.
+  if (shownModelId !== Number(model.id)) {
+    const replacing = shownModelId !== null; // one model to the next: no extra Back step
+    shownModelId = Number(model.id);
+    syncAddress(push && !replacing);
+    if (push && !replacing) modelStepPushed = true;
+  }
   flushNotes(); // save any edit still pending for the previously open model
   fileDetailModal.dataset.currentModelId = modelId;
   currentDetailThumb = model.thumbnailUrl || null;