From cafb72254edec018461faf6c9cbaaa19988b14a2 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Wed, 22 Oct 2025 07:31:21 +1100
Subject: [PATCH] fix: move debug mode toggle to proper settings location

The debug toggle was incorrectly added to settings.html (SillyTavern Extensions tab).
It should be in template.html (RPG Companion Settings popup) where all the
other extension settings are.

Changes:
- template.html: Added debug mode checkbox in Display Options section
- index.js: Added event listener and initial state setter
- settings.html: Removed incorrect debug toggle placement

Now users can find the debug toggle by clicking the gear icon in the RPG panel,
under Display Options, right below "Show Plot Progression Buttons".
---
 index.js      | 14 +++++++-------
 settings.html |  6 ------
 template.html |  8 ++++++++
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/index.js b/index.js
index f91172b..6bbc55d 100644
--- a/index.js
+++ b/index.js
@@ -193,13 +193,6 @@ function addExtensionSettings() {
             updateChatThoughts(); // This will re-create the thought bubble if data exists
         }
     });
-
-    // Set up the debug mode toggle
-    $('#rpg-debug-mode').prop('checked', extensionSettings.debugMode).on('change', function() {
-        extensionSettings.debugMode = $(this).prop('checked');
-        saveSettings();
-        updateDebugUIVisibility();
-    });
 }
 
 /**
@@ -310,6 +303,12 @@ async function initUI() {
         togglePlotButtons();
     });
 
+    $('#rpg-toggle-debug-mode').on('change', function() {
+        extensionSettings.debugMode = $(this).prop('checked');
+        saveSettings();
+        updateDebugUIVisibility();
+    });
+
     $('#rpg-toggle-animations').on('change', function() {
         extensionSettings.enableAnimations = $(this).prop('checked');
         saveSettings();
@@ -421,6 +420,7 @@ async function initUI() {
     $('#rpg-toggle-thoughts-in-chat').prop('checked', extensionSettings.showThoughtsInChat);
     $('#rpg-toggle-html-prompt').prop('checked', extensionSettings.enableHtmlPrompt);
     $('#rpg-toggle-plot-buttons').prop('checked', extensionSettings.enablePlotButtons);
+    $('#rpg-toggle-debug-mode').prop('checked', extensionSettings.debugMode);
     $('#rpg-toggle-animations').prop('checked', extensionSettings.enableAnimations);
     $('#rpg-stat-bar-color-low').val(extensionSettings.statBarColorLow);
     $('#rpg-stat-bar-color-high').val(extensionSettings.statBarColorHigh);
diff --git a/settings.html b/settings.html
index 069a9fe..a6d40ea 100644
--- a/settings.html
+++ b/settings.html
@@ -11,12 +11,6 @@
             </label>
             <small class="notes">Toggle to enable/disable the RPG Companion extension. Configure additional settings within the panel itself.</small>
 
-            <label class="checkbox_label" for="rpg-debug-mode" style="margin-top: 10px;">
-                <input type="checkbox" id="rpg-debug-mode" />
-                <span>🔍 Debug Mode (Mobile-Friendly)</span>
-            </label>
-            <small class="notes">Enable debug logging visible in UI. Useful for troubleshooting parsing issues on mobile devices. Shows a red bug button to view parser logs.</small>
-
             <div style="margin-top: 10px; display: flex; gap: 10px;">
                 <a href="https://discord.com/invite/KdAkTg94ME" target="_blank" class="menu_button" style="flex: 1; text-align: center; text-decoration: none;">
                     <i class="fa-brands fa-discord"></i> Discord
diff --git a/template.html b/template.html
index 8d24685..89cb99e 100644
--- a/template.html
+++ b/template.html
@@ -195,6 +195,14 @@
                 <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
                     Display buttons above chat input for plot progression prompts
                 </small>
+
+                <label class="checkbox_label">
+                    <input type="checkbox" id="rpg-toggle-debug-mode" />
+                    <span>🔍 Enable Debug Mode (Mobile-Friendly)</span>
+                </label>
+                <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                    Shows parser logs in a mobile-friendly UI panel. Useful for troubleshooting. Look for the red bug button.
+                </small>
             </div>
 
             <div class="rpg-settings-group">