From 8825332d04ec3bb11ad56abe1d93ba9f82018d8f Mon Sep 17 00:00:00 2001
From: Garry Tan <garrytan@gmail.com>
Date: Fri, 27 Mar 2026 09:59:50 -0600
Subject: [PATCH] fix: null-safe DOM selectors for post-submit and regenerating
 states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The user's layout restructure renamed .regenerate-bar → .regen-column,
.submit-bar → .submit-column, and .overall-section → .bottom-section.
The JS still referenced the old class names, causing querySelector to
return null and showPostSubmitState() / showRegeneratingState() to
silently crash. This meant Submit and Regenerate buttons appeared to
work (DOM elements updated, HTTP POST succeeded) but the visual
feedback (disabled inputs, spinner, success message) never appeared.

Fix: use fallback selectors that check both old and new class names,
with null guards so a missing element doesn't crash the function.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 design/src/compare.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/design/src/compare.ts b/design/src/compare.ts
index ca6bcec0..547c8555 100644
--- a/design/src/compare.ts
+++ b/design/src/compare.ts
@@ -483,7 +483,8 @@ export function generateCompareHtml(images: string[]): string {
 
   function showPostSubmitState() {
     disableAllInputs();
-    document.querySelector('.regenerate-bar').style.display = 'none';
+    var _regenBar = document.querySelector('.regenerate-bar') || document.querySelector('.regen-column');
+    if (_regenBar) _regenBar.style.display = 'none';
     document.getElementById('submit-btn').style.display = 'none';
     document.getElementById('success-msg').style.display = 'block';
     document.getElementById('success-msg').innerHTML =
@@ -498,9 +499,12 @@ export function generateCompareHtml(images: string[]): string {
       '<div style="font-size:24px;margin-bottom:12px;">Generating new designs...</div>' +
       '<div class="skeleton" style="width:60px;height:60px;border-radius:50%;margin:0 auto;"></div>' +
       '</div>';
-    document.querySelector('.regenerate-bar').style.display = 'none';
-    document.querySelector('.submit-bar').style.display = 'none';
-    document.querySelector('.overall-section').style.display = 'none';
+    var _regenBar = document.querySelector('.regenerate-bar') || document.querySelector('.regen-column');
+    if (_regenBar) _regenBar.style.display = 'none';
+    var _submitBar = document.querySelector('.submit-bar') || document.querySelector('.submit-column');
+    if (_submitBar) _submitBar.style.display = 'none';
+    var _overallSec = document.querySelector('.overall-section') || document.querySelector('.bottom-section');
+    if (_overallSec) _overallSec.style.display = 'none';
     startProgressPolling();
   }