Swipe picker: Pick this one opens the theme full screen (Back / Esc / Go to the app), Open-your-pick button reopens it; fix filter wiring catching the pick button (TK-12343)

6286a2fb38152cf183e029a6a52b09ca66071ad0 · 2026-09-26 11:15:25 -0700 · Steve Abrams

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SC2DKkJkSNenmFz2Eqnvpk

Files touched

M public/pick.html

Diff

commit 6286a2fb38152cf183e029a6a52b09ca66071ad0
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat Sep 26 11:15:25 2026 -0700

    Swipe picker: Pick this one opens the theme full screen (Back / Esc / Go to the app), Open-your-pick button reopens it; fix filter wiring catching the pick button (TK-12343)
    
    Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01SC2DKkJkSNenmFz2Eqnvpk
---
 public/pick.html | 52 +++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 5 deletions(-)

diff --git a/public/pick.html b/public/pick.html
index 10868ca..8a442e1 100644
--- a/public/pick.html
+++ b/public/pick.html
@@ -47,6 +47,20 @@ footer{display:flex;align-items:center;gap:8px;padding:8px 16px max(12px,env(saf
 .pick.done{background:var(--good);color:#06240f}
 .hint{position:fixed;left:50%;top:140px;transform:translateX(-50%);background:#000c;color:#fff;padding:8px 14px;border-radius:999px;font-size:13px;pointer-events:none;transition:opacity .6s}
 @media (max-width:420px){.brand small{display:none}.try{padding:0 10px}}
+button.mine{background:none;border:0;padding:0 4px;min-height:36px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
+button.mine{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.filters{flex-wrap:wrap}
+@media (max-width:560px){button.mine{flex:1 0 100%;order:9;margin:0;text-align:left;padding:0}}
+/* Picked theme, opened full screen and ready to use */
+.full{position:fixed;inset:0;z-index:10;background:var(--bg);display:flex;flex-direction:column}
+.full[hidden]{display:none}
+.fullbar{display:flex;align-items:center;gap:8px;padding:max(8px,env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid var(--line)}
+.fullbar .back{background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:0 12px;white-space:nowrap}
+.fullbar .name{flex:1;min-width:0;text-align:center;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.fullbar .name span{color:var(--good)}
+.fullbar .go{padding:0 12px}
+.fullframe{flex:1;display:flex;justify-content:center;min-height:0;background:#000}
+.fullframe iframe{width:100%;max-width:480px;height:100%;border:0;background:#fff}
 </style>
 </head>
 <body>
@@ -58,7 +72,7 @@ footer{display:flex;align-items:center;gap:8px;padding:8px 16px max(12px,env(saf
   <button data-f="all" aria-pressed="true">All</button>
   <button data-f="figma" aria-pressed="false">Figma</button>
   <button data-f="photoshop" aria-pressed="false">Photoshop</button>
-  <span class="mine" id="mine" aria-live="polite"></span>
+  <button class="mine" id="mine" aria-live="polite" hidden></button>
 </div>
 <main class="track" id="track" aria-roledescription="carousel" aria-label="Theme versions"></main>
 <footer>
@@ -68,6 +82,14 @@ footer{display:flex;align-items:center;gap:8px;padding:8px 16px max(12px,env(saf
   <button class="try" id="try" aria-pressed="false" title="Let taps go into the mockup">Try it</button>
   <button class="pick" id="pick">Pick this one</button>
 </footer>
+<div class="full" id="full" role="dialog" aria-modal="true" aria-labelledby="fullName" hidden>
+  <div class="fullbar">
+    <button class="back" id="fullBack">← Themes</button>
+    <div class="name" id="fullName"></div>
+    <a class="btn go" href="/app">Go to the app →</a>
+  </div>
+  <div class="fullframe" id="fullFrame"></div>
+</div>
 <div class="hint" id="hint">Swipe left or right · or use the ‹ › buttons</div>
 <script>
 (function(){
@@ -138,7 +160,7 @@ footer{display:flex;align-items:center;gap:8px;padding:8px 16px max(12px,env(saf
       s.querySelector('p').textContent = t.idea;
       track.appendChild(s);
     });
-    document.querySelectorAll('.filters button').forEach(function(b){ b.setAttribute('aria-pressed', String(b.dataset.f === filter)); });
+    document.querySelectorAll('.filters button[data-f]').forEach(function(b){ b.setAttribute('aria-pressed', String(b.dataset.f === filter)); });
     size();
     var start = 0, want = (location.hash || '').slice(1) || (pick && pick.key);
     list.forEach(function(t, i){ if (t.key === want) start = i; });
@@ -180,7 +202,8 @@ footer{display:flex;align-items:center;gap:8px;padding:8px 16px max(12px,env(saf
     $('pick').textContent = isPick ? '★ Picked' : 'Pick this one';
     $('pick').classList.toggle('done', isPick);
     Array.prototype.forEach.call(track.children, function(s, i){ s.querySelector('.picked').hidden = !(pick && list[i].key === pick.key); });
-    $('mine').textContent = pick ? 'Your pick: ' + srcLabel(pick.src) + ' ' + pick.id + ' ' + pick.name : '';
+    $('mine').hidden = !pick;
+    $('mine').textContent = pick ? 'Open your pick: ' + srcLabel(pick.src) + ' ' + pick.id + ' ' + pick.name : '';
     setLive(false);
     history.replaceState(null, '', '#' + t.key);
     load();
@@ -201,6 +224,7 @@ footer{display:flex;align-items:center;gap:8px;padding:8px 16px max(12px,env(saf
   // scroll-snap lets a single strong swipe skip two themes, and a vertical-only mouse wheel does nothing.
   var wheelLock = 0, wheelSum = 0, wheelIdle;
   window.addEventListener('wheel', function(e){
+    if (!$('full').hidden) return;                    // full-screen theme open: leave its scrolling alone
     if (live && e.target.closest && e.target.closest('.phone.live')) return;   // "Try it" on: let the mockup scroll itself
     e.preventDefault();
     var d = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
@@ -216,13 +240,31 @@ footer{display:flex;align-items:center;gap:8px;padding:8px 16px max(12px,env(saf
   $('pick').onclick = function(){
     var t = list[cur];
     pick = { key: t.key, src: t.src, id: t.id, name: t.name, url: t.url, at: new Date().toISOString() };
-    set(KEY, JSON.stringify(pick)); update();
+    set(KEY, JSON.stringify(pick)); update(); openFull();
   };
-  document.querySelectorAll('.filters button').forEach(function(b){
+  // Picking opens that theme full screen, ready to use (Steve: "stuck on picked and nothing happened").
+  var lastFocus = null;
+  function openFull(){
+    if (!pick) return;
+    lastFocus = document.activeElement;
+    $('fullName').innerHTML = '<span>★</span> ';
+    $('fullName').appendChild(document.createTextNode(srcLabel(pick.src) + ' ' + pick.id + ' · ' + pick.name));
+    var f = document.createElement('iframe'); f.title = pick.name + ' (your pick)'; f.src = pick.url;
+    $('fullFrame').innerHTML = ''; $('fullFrame').appendChild(f);
+    $('full').hidden = false; $('fullBack').focus();
+  }
+  function closeFull(){
+    $('full').hidden = true; $('fullFrame').innerHTML = '';
+    if (lastFocus && lastFocus.focus) lastFocus.focus();
+  }
+  $('fullBack').onclick = closeFull;
+  $('mine').onclick = openFull;
+  document.querySelectorAll('.filters button[data-f]').forEach(function(b){
     b.onclick = function(){ filter = b.dataset.f; set(FKEY, filter); history.replaceState(null, '', location.pathname); build(); };
   });
   document.addEventListener('keydown', function(e){
     if (e.target.closest && e.target.closest('input,textarea')) return;
+    if (!$('full').hidden) { if (e.key === 'Escape') closeFull(); return; }
     if (e.key === 'ArrowRight') { e.preventDefault(); go(cur + 1); }
     else if (e.key === 'ArrowLeft') { e.preventDefault(); go(cur - 1); }
   });

← 28a1391 Swipe picker: one trackpad swipe/wheel flick = one theme (Sa · back to Dw Photo Capture · (newest)