Enhance carpeater filter UI: improve checkmark visibility on load and toggle

Author: MrAlders0n

content/wardrive.js

@@ -6735,13 +6735,24 @@ export async function onLoad() {
     carpeaterInput.value = savedId;
     carpeaterInput.disabled = !savedEnabled; // Enable/disable input based on checkbox
 
+    // Update checkmark visibility on load
+    const checkmarkSvg = document.querySelector('.checkmark-svg');
+    if (checkmarkSvg) {
+      checkmarkSvg.style.opacity = savedEnabled ? '1' : '0';
+    }
+    
     // Checkbox toggle event
     carpeaterCheckbox.addEventListener('change', (e) => {
       const isEnabled = e.target.checked;
       carpeaterInput.disabled = !isEnabled;
       localStorage.setItem('carpeaterFilterEnabled', isEnabled);
       debugLog(`[SETTINGS] Carpeater filter ${isEnabled ? 'enabled' : 'disabled'}`);
 
+      // Update checkmark visibility
+      if (checkmarkSvg) {
+        checkmarkSvg.style.opacity = isEnabled ? '1' : '0';
+      }
+      
       // Focus input when enabled
       if (isEnabled) {
         carpeaterInput.focus();

index.html

@@ -169,8 +169,8 @@ <h2 class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings<
             <!-- Custom styled checkbox -->
             <label class="relative inline-flex items-center cursor-pointer">
               <input type="checkbox" id="carpeaterFilterEnabled" class="sr-only peer">
-              <div class="w-5 h-5 bg-slate-700 border border-slate-600 rounded peer-checked:bg-emerald-600 peer-checked:border-emerald-600 peer-focus:ring-2 peer-focus:ring-emerald-500 peer-focus:ring-offset-1 peer-focus:ring-offset-slate-800 transition-all flex items-center justify-center">
-                <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div class="w-5 h-5 bg-slate-700 border border-slate-600 rounded peer-checked:bg-emerald-600 peer-checked:border-emerald-600 peer-focus:ring-2 peer-focus:ring-emerald-500 peer-focus:ring-offset-1 peer-focus:ring-offset-slate-800 transition-all flex items-center justify-center group">
+                <svg class="w-3 h-3 text-white opacity-0 transition-opacity checkmark-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                 </svg>
               </div>