From f7d8597f2489bf9cfb04499f2f15c69c897cc06d Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Wed, 22 Oct 2025 09:22:12 +1100
Subject: [PATCH] feat: add reset button positions to settings

PROBLEM:
- Existing users with saved off-screen FAB positions can't see buttons
- No way to reset positions without clearing all extension settings
- Salixfire and other users on Xiaomi/other devices need safe positions

SOLUTION:
Added "Reset Button Positions" button in Advanced settings section

IMPLEMENTATION:

1. template.html (lines 241-249):
   - Added reset button in Advanced section after Clear Cache button
   - Blue-styled button with rotate icon
   - Help text explains it resets FAB positions to top-left

2. index.js (lines 361-390):
   - Added click handler for reset button
   - Resets all 3 FAB positions to safe top-left defaults:
     * Mobile toggle: top + 20px, left: 12px
     * Refresh: top + 80px, left: 12px
     * Debug: top + 140px, left: 12px
   - Saves settings immediately
   - Applies CSS positions to visible buttons (no page refresh needed)
   - Shows success toast notification

3. style.css (lines 2057-2083, 4123-4125):
   - Added .rpg-btn-reset-fab styles matching clear cache pattern
   - Blue color scheme (vs red for destructive clear cache)
   - Same sizing, padding, transitions as other buttons
   - Mobile responsive font-size with clamp()

USAGE:
Users experiencing off-screen buttons can now:
1. Open RPG Companion settings (gear icon)
2. Scroll to Advanced section
3. Click "Reset Button Positions"
4. All FAB buttons instantly move to safe top-left positions

This fixes the issue for Salixfire and any other users who:
- Have buttons saved in off-screen positions
- Can't scroll to find buttons
- Need to reset without clearing all settings

Works immediately without page refresh or extension reload.
---
 index.js      | 31 +++++++++++++++++++++++++++++++
 style.css     | 32 ++++++++++++++++++++++++++++++++
 template.html | 10 ++++++++++
 3 files changed, 73 insertions(+)

diff --git a/index.js b/index.js
index dd0e699..b5ae314 100644
--- a/index.js
+++ b/index.js
@@ -358,6 +358,37 @@ async function initUI() {
         }
     });
 
+    // Reset FAB positions button
+    $('#rpg-reset-fab-positions').on('click', function() {
+        console.log('[RPG Companion] Resetting FAB positions to defaults');
+
+        // Reset to defaults (top-left stacked)
+        extensionSettings.mobileFabPosition = {
+            top: 'calc(var(--topBarBlockSize) + 20px)',
+            left: '12px'
+        };
+        extensionSettings.mobileRefreshPosition = {
+            top: 'calc(var(--topBarBlockSize) + 80px)',
+            left: '12px'
+        };
+        extensionSettings.debugFabPosition = {
+            top: 'calc(var(--topBarBlockSize) + 140px)',
+            left: '12px'
+        };
+
+        // Save settings
+        saveSettings();
+
+        // Apply positions immediately to visible buttons
+        $('#rpg-mobile-toggle').css(extensionSettings.mobileFabPosition);
+        $('#rpg-manual-update-mobile').css(extensionSettings.mobileRefreshPosition);
+        $('#rpg-debug-toggle').css(extensionSettings.debugFabPosition);
+
+        // Show success feedback
+        toastr.success('Button positions reset to defaults', 'RPG Companion');
+        console.log('[RPG Companion] FAB positions reset successfully');
+    });
+
     $('#rpg-stat-bar-color-low').on('change', function() {
         extensionSettings.statBarColorLow = String($(this).val());
         saveSettings();
diff --git a/style.css b/style.css
index e947926..a03ec60 100644
--- a/style.css
+++ b/style.css
@@ -2054,6 +2054,34 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     transform: translateY(0);
 }
 
+.rpg-btn-reset-fab {
+    width: 100%;
+    padding: 0.625em;
+    background: rgba(52, 152, 219, 0.2);
+    border: 2px solid rgba(52, 152, 219, 0.5);
+    border-radius: 0.5em;
+    color: #5dade2;
+    font-size: 1.2vw;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    transition: all 0.3s ease;
+}
+
+.rpg-btn-reset-fab:hover {
+    background: rgba(52, 152, 219, 0.3);
+    border-color: rgba(52, 152, 219, 0.8);
+    color: #85c1e9;
+    transform: translateY(-0.062rem);
+}
+
+.rpg-btn-reset-fab:active {
+    transform: translateY(0);
+}
+
 /* ============================================
    THEME VARIATIONS
    ============================================ */
@@ -4091,6 +4119,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     .rpg-btn-clear-cache {
         font-size: clamp(13px, 3.3vw, 17px) !important;
     }
+
+    .rpg-btn-reset-fab {
+        font-size: clamp(13px, 3.3vw, 17px) !important;
+    }
 }
 
 /* Very narrow screens - single column layout for all stats */
diff --git a/template.html b/template.html
index b5c9247..b72fb5e 100644
--- a/template.html
+++ b/template.html
@@ -237,6 +237,16 @@
                         <i class="fa-solid fa-trash" aria-hidden="true"></i> Clear Extension Cache
                     </button>
                 </div>
+
+                <!-- Reset FAB Positions Button -->
+                <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
+                    <button id="rpg-reset-fab-positions" class="rpg-btn-reset-fab">
+                        <i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i> Reset Button Positions
+                    </button>
+                    <small style="display: block; margin-top: 8px; color: #888; font-size: 11px;">
+                        Resets all floating action buttons (toggle, refresh, debug) to default top-left positions. Useful if buttons are off-screen.
+                    </small>
+                </div>
             </div>
         </div>
     </div>