From fa1e3d56d509025f06ffb3c102f1a4d10cc53f83 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Sat, 4 Oct 2025 17:23:57 -0400
Subject: [PATCH] Fix theme radio button localStorage synchronization

Fix radio buttons to properly reflect localStorage theme preference on page load.
Replaced unsupported :has() selector with closest() for better browser compatibility.
Added missing logic to sync radio button selection with stored theme preference.
---
 make_post_sell/templates/user_settings.j2 | 35 +++++++++++++++++------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/make_post_sell/templates/user_settings.j2 b/make_post_sell/templates/user_settings.j2
index 83ad9d9..e8df929 100644
--- a/make_post_sell/templates/user_settings.j2
+++ b/make_post_sell/templates/user_settings.j2
@@ -64,18 +64,35 @@
     <script>
       // Handle theme preference form specifically
       document.addEventListener('DOMContentLoaded', function() {
-        const themeForm = document.querySelector('form:has(input[name="theme_id"])');
         const themeRadios = document.querySelectorAll('input[name="theme_id"]');
         
-        if (themeForm && themeRadios.length > 0) {
-          themeForm.addEventListener('submit', function() {
-            // Set localStorage to match the selected theme preference
-            const selectedRadio = document.querySelector('input[name="theme_id"]:checked');
-            if (selectedRadio) {
-              const newTheme = selectedRadio.value === '0' ? 'dark' : 'light';
-              localStorage.setItem('theme-preference', newTheme);
+        if (themeRadios.length > 0) {
+          // Set radio button based on localStorage on page load
+          const storedTheme = localStorage.getItem('theme-preference');
+          if (storedTheme) {
+            const targetValue = storedTheme === 'dark' ? '0' : '1';
+            const targetRadio = document.querySelector(`input[name="theme_id"][value="${targetValue}"]`);
+            if (targetRadio) {
+              // Uncheck all first
+              themeRadios.forEach(radio => radio.checked = false);
+              // Check the one that matches localStorage
+              targetRadio.checked = true;
             }
-          });
+          }
+          
+          // Find the form containing theme radios (more compatible than :has())
+          const themeForm = themeRadios[0].closest('form');
+          
+          if (themeForm) {
+            themeForm.addEventListener('submit', function() {
+              // Set localStorage to match the selected theme preference
+              const selectedRadio = document.querySelector('input[name="theme_id"]:checked');
+              if (selectedRadio) {
+                const newTheme = selectedRadio.value === '0' ? 'dark' : 'light';
+                localStorage.setItem('theme-preference', newTheme);
+              }
+            });
+          }
           
           // Also update localStorage immediately when radio button changes
           themeRadios.forEach(function(radio) {