From 872a7121f86718828808db1b6f4e031aab859dd0 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Wed, 22 Apr 2026 15:43:12 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20cinema=20mode=20=E2=80=94=20hamburger?=
 =?UTF-8?q?=20+=20Edit=20into=20sidebar=20above=20Download?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two cinema-mode polishes:

1. Top task bar (hamburger / shop name / Edit button) relocates into
   .product-right above the .well on cinema-on. Cached original parent
   + next sibling at init lets us put it back on cinema-off. Moved
   within the same DOM subtree that survives SPA nav so it persists
   across product changes. CSS stacks its children vertically inside
   the sidebar instead of the horizontal strip shape up top.

2. The 'click image to open in new window' wrapper link on static
   products (images, PDFs) is redundant in cinema mode since media
   already fills the viewport. pointer-events:none disables the
   click without removing the anchor from the DOM.
---
 make_post_sell/static/css/common.css | 22 ++++++++++++++++++++++
 make_post_sell/static/js/watch.js    | 26 ++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index 5437558..a0161e5 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -1778,6 +1778,28 @@ section.two-column.cinema-mode .watch-audio-container > .product-main {
     margin-right: auto;
 }
 
+/* Cinema: the main media is already showing at full viewport width,
+   so the wrapping "click to open in new window" link is redundant
+   and just steals the click from scrolling and other interactions. */
+section.two-column.cinema-mode .product-images > a[target="_blank"] {
+    pointer-events: none;
+    cursor: default;
+}
+
+/* Cinema: task bar (hamburger + Edit) relocates into .product-right
+   above the well via JS. Stack its children vertically and make it
+   feel like part of the sidebar rather than a floating chrome strip. */
+section.two-column.cinema-mode section.product-right section.windows-95-task-bar {
+    grid-template-columns: 1fr;
+    padding: 0;
+    margin-bottom: 8px;
+}
+section.two-column.cinema-mode section.product-right section.windows-95-start-button,
+section.two-column.cinema-mode section.product-right section.call-to-action {
+    padding-left: 0;
+    padding-right: 0;
+}
+
 /*************************************************************
  *
  * for displays bigger than 800px which are "desktop-ish".
diff --git a/make_post_sell/static/js/watch.js b/make_post_sell/static/js/watch.js
index 8d2a8b4..1ee49b1 100644
--- a/make_post_sell/static/js/watch.js
+++ b/make_post_sell/static/js/watch.js
@@ -188,13 +188,39 @@
         if (savedCinema !== null) cinemaMode = savedCinema === '1';
     } catch (e) {}
 
+    // Cache the task bar's original position so we can put it back when
+    // cinema mode toggles off. Done once at init — before any relocation.
+    var _taskbarOriginalParent = null;
+    var _taskbarOriginalNextSibling = null;
+    (function cacheTaskbarHome() {
+        var tb = document.querySelector('section.windows-95-task-bar');
+        if (tb) {
+            _taskbarOriginalParent = tb.parentElement;
+            _taskbarOriginalNextSibling = tb.nextSibling;
+        }
+    })();
+
     function applyCinemaMode() {
         var section = document.querySelector('section.two-column');
         if (!section) return;
+        var taskbar = document.querySelector('section.windows-95-task-bar');
+        var productRight = document.querySelector('section.product-right');
+
         if (cinemaMode) {
             section.classList.add('cinema-mode');
+            // Move taskbar (hamburger + Edit) into the sidebar above the well.
+            if (taskbar && productRight) {
+                var well = productRight.querySelector('.well');
+                if (well && taskbar.parentElement !== productRight) {
+                    productRight.insertBefore(taskbar, well);
+                }
+            }
         } else {
             section.classList.remove('cinema-mode');
+            // Put taskbar back where it came from.
+            if (taskbar && _taskbarOriginalParent && taskbar.parentElement !== _taskbarOriginalParent) {
+                _taskbarOriginalParent.insertBefore(taskbar, _taskbarOriginalNextSibling);
+            }
         }
     }
     applyCinemaMode();