From ce5cd9f5d44477e8d3e6ae80bae6001d698db629 Mon Sep 17 00:00:00 2001
From: digital-garbage <133010426+digital-garbage@users.noreply.github.com>
Date: Wed, 1 Jul 2026 15:10:32 +0300
Subject: [PATCH] editor: fix Models +Add buttons doing nothing on an empty
 project
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The composer was already being pre-selected on click, but nothing scrolled
it into view or signaled the change — on a fresh project all essentials
show as missing and push the composer off-screen, so the click looked
like a no-op. Now scrolls the composer into view and flashes it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 movie_editor/frontend/models.js  | 15 ++++++++++++---
 movie_editor/frontend/styles.css |  2 ++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/movie_editor/frontend/models.js b/movie_editor/frontend/models.js
index 88e1d582..8a87b346 100644
--- a/movie_editor/frontend/models.js
+++ b/movie_editor/frontend/models.js
@@ -793,9 +793,18 @@
         if (req.role_hint) {
           const addBtn = el("button", "btn ghost tiny req-add", "+ Add");
           addBtn.onclick = () => {
-            // pre-scroll the composer to the right role and expand it
-            const typeSelEl = document.querySelector(".composer select");
-            if (typeSelEl) { typeSelEl.value = req.role_hint; typeSelEl.dispatchEvent(new Event("change")); }
+            // Pre-select the composer's Model Type to this role. On a fresh/empty
+            // project the composer sits below the (all-missing) requirements list and
+            // scrolls out of the modal's visible area, so the selection alone was
+            // invisible — scroll it into view and flash it so the click is felt.
+            const composerEl = document.querySelector(".composer");
+            const typeSelEl = composerEl && composerEl.querySelector("select");
+            if (typeSelEl) {
+              typeSelEl.value = req.role_hint;
+              typeSelEl.dispatchEvent(new Event("change"));
+              composerEl.scrollIntoView({ behavior: "smooth", block: "center" });
+              composerEl.classList.remove("flash"); void composerEl.offsetWidth; composerEl.classList.add("flash");
+            }
           };
           row.append(addBtn);
         }
diff --git a/movie_editor/frontend/styles.css b/movie_editor/frontend/styles.css
index 93789226..b3e3b42a 100644
--- a/movie_editor/frontend/styles.css
+++ b/movie_editor/frontend/styles.css
@@ -1168,6 +1168,8 @@ body.tl-spacing { cursor: grabbing; user-select: none; }
 .modal-content { padding: 16px; overflow: auto; }
 
 .composer { background: var(--ink-0); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 18px; }
+.composer.flash { animation: composer-flash .9s ease; }
+@keyframes composer-flash { 0%, 100% { box-shadow: none; border-color: var(--line); } 25% { box-shadow: 0 0 0 2px var(--amber); border-color: var(--amber); } }
 .composer-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
 .composer-row { display: flex; gap: 10px; align-items: center; }
 .composer-row select { flex: 1; }