re-ordered the advanced settings and removed annoying pop-ups

3 files changed, 107 insertions, 105 deletions

diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css
index 17edbda..6b058a1 100644
--- a/data-viewer/data-viewer.css
+++ b/data-viewer/data-viewer.css
@@ -606,3 +606,35 @@ body {
     width: 100%;
   }
 }
+
+/* Global toggles container styling */
+.global-toggles-container {
+  background-color: var(--bg-color);
+  border-radius: var(--radius-sm);
+  padding: 16px;
+  border-left: 3px solid var(--accent-color);
+}
+
+.toggle-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.toggle-row .toggle-container {
+  flex: 1;
+  min-width: 180px;
+  margin-bottom: 0;
+}
+
+@media (max-width: 768px) {
+  .toggle-row {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .toggle-row .toggle-container {
+    margin-bottom: 4px;
+  }
+}
diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html
index 1d921f5..eff98df 100644
--- a/data-viewer/data-viewer.html
+++ b/data-viewer/data-viewer.html
@@ -27,75 +27,7 @@
         </header>
 
         <main class="app-content">
-
-            <div class="toggle-setting-container">
-                <div class="toggle-container">
-                    <label class="toggle-switch">
-                        <input type="checkbox" id="disable-transparency">
-                        <span class="slider round"></span>
-                    </label>
-                    <span class="toggle-label">Disable Transparency Globally</span>
-                </div>
-                <div class="setting-description">
-                    This will disable all transparency features while keeping other styling effects active
-                </div>
-            </div>
-
-            <!-- New toggles for hover and footer effects -->
-            <div class="toggle-setting-container">
-                <div class="toggle-container">
-                    <label class="toggle-switch">
-                        <input type="checkbox" id="disable-hover">
-                        <span class="slider round"></span>
-                    </label>
-                    <span class="toggle-label">Disable Hover Effects Globally</span>
-                </div>
-                <div class="setting-description">
-                    This will disable all hover animation features while keeping other styling effects active
-                </div>
-            </div>
-
-            <div class="toggle-setting-container">
-                <div class="toggle-container">
-                    <label class="toggle-switch">
-                        <input type="checkbox" id="disable-footer">
-                        <span class="slider round"></span>
-                    </label>
-                    <span class="toggle-label">Hide Footers Globally</span>
-                </div>
-                <div class="setting-description">
-                    This will hide page footers on websites where the feature is available
-                </div>
-            </div>
-            
-
-            <!-- New section for custom repository URL -->
-            <div class="data-section">
-                <h2 class="section-title">Custom Styles Repository ✨</h2>
-                <div class="repository-url-container">
-                    <p class="setting-description">
-                        Change the URL where styles are fetched from. Use this if you want to use a different styles
-                        repository.
-                        <br><strong>Note:</strong> After changing the URL, you should clear existing styles data for
-                        best results.
-                    </p>
-                    <div class="repository-url-controls">
-                        <input type="text" id="repository-url" class="repository-url-input"
-                            placeholder="Enter repository URL...">
-                        <div class="repository-url-buttons">
-                            <button id="set-repository-url" class="action-button primary">
-                                <i class="fas fa-save"></i> Set URL
-                            </button>
-                            <button id="reset-repository-url" class="action-button secondary">
-                                <i class="fas fa-undo"></i> Reset to Default
-                            </button>
-                        </div>
-                    </div>
-                    <div id="repository-url-status" class="repository-url-status"></div>
-                </div>
-            </div>
-
-            <!-- New section for backup/restore -->
+            <!-- Backup & Restore section moved to top -->
             <div class="data-section">
                 <h2 class="section-title">Backup & Restore ✨</h2>
                 <div class="backup-restore-container">
@@ -119,6 +51,40 @@
                 </div>
             </div>
 
+            <!-- Global toggles grouped into a single section with a heading -->
+            <div class="data-section">
+                <h2 class="section-title">Global Feature Controls ✨</h2>
+                <div class="global-toggles-container">
+                    <div class="toggle-row">
+                        <div class="toggle-container">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="disable-transparency">
+                                <span class="slider round"></span>
+                            </label>
+                            <span class="toggle-label">Disable Transparency</span>
+                        </div>
+                        <div class="toggle-container">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="disable-hover">
+                                <span class="slider round"></span>
+                            </label>
+                            <span class="toggle-label">Disable Hover Effects</span>
+                        </div>
+                        <div class="toggle-container">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="disable-footer">
+                                <span class="slider round"></span>
+                            </label>
+                            <span class="toggle-label">Keep Footers</span>
+                        </div>
+                    </div>
+                    <div class="setting-description">
+                        These settings control specific feature types across all websites.
+                        Changes apply immediately to all open tabs and future browsing sessions.
+                    </div>
+                </div>
+            </div>
+
             <div class="data-section">
                 <h2 class="section-title">Global Settings</h2>
                 <div id="global-settings-data" class="data-container"></div>
@@ -129,6 +95,32 @@
                 <div id="skip-list-data" class="data-container"></div>
             </div>
 
+            <!-- Repository URL section moved above danger zone -->
+            <div class="data-section">
+                <h2 class="section-title">Custom Styles Repository ✨</h2>
+                <div class="repository-url-container">
+                    <p class="setting-description">
+                        Change the URL where styles are fetched from. Use this if you want to use a different styles
+                        repository.
+                        <br><strong>Note:</strong> After changing the URL, you should clear existing styles data for
+                        best results.
+                    </p>
+                    <div class="repository-url-controls">
+                        <input type="text" id="repository-url" class="repository-url-input"
+                            placeholder="Enter repository URL...">
+                        <div class="repository-url-buttons">
+                            <button id="set-repository-url" class="action-button primary">
+                                <i class="fas fa-save"></i> Set URL
+                            </button>
+                            <button id="reset-repository-url" class="action-button secondary">
+                                <i class="fas fa-undo"></i> Reset to Default
+                            </button>
+                        </div>
+                    </div>
+                    <div id="repository-url-status" class="repository-url-status"></div>
+                </div>
+            </div>
+
             <div class="danger-zone">
                 <h3 class="danger-title">Danger Zone</h3>
                 <div class="danger-actions">
@@ -142,17 +134,18 @@
                 <h2 class="section-title">Websites and CSS</h2>
                 <div id="combined-websites-data" class="data-container"></div>
             </div>
-        </main>
 
-        <footer class="app-footer">
-            <a href="https://sameerasw.github.io/my-internet/" class="footer-link" target="_blank">
-                <i class="fas fa-book"></i> Styles Repository
-            </a>
-            <div class="footer-divider"></div>
-            <a href="https://github.com/sameerasw/zeninternet" class="footer-link" target="_blank">
-                <i class="fa-brands fa-github"></i> Project Repository
-            </a>
-        </footer>
+
+            <footer class="app-footer">
+                <a href="https://sameerasw.github.io/my-internet/" class="footer-link" target="_blank">
+                    <i class="fas fa-book"></i> Styles Repository
+                </a>
+                <div class="footer-divider"></div>
+                <a href="https://github.com/sameerasw/zeninternet" class="footer-link" target="_blank">
+                    <i class="fa-brands fa-github"></i> Project Repository
+                </a>
+            </footer>
+        </main>
     </div>
     <script src="data-viewer.js"></script>
 </body>
diff --git a/data-viewer/data-viewer.js b/data-viewer/data-viewer.js
index 89f5b2e..c1b3fec 100644
--- a/data-viewer/data-viewer.js
+++ b/data-viewer/data-viewer.js
@@ -217,17 +217,9 @@ document.addEventListener("DOMContentLoaded", function () {
       settings.disableTransparency = isDisabled;
 
       await browser.storage.local.set({ [BROWSER_STORAGE_KEY]: settings });
-      alert(
-        `Transparency has been ${
-          isDisabled ? "disabled" : "enabled"
-        } globally. This will affect all websites.`
-      );
+      // No notification - just save the setting silently
     } catch (error) {
       console.error("Error saving transparency settings:", error);
-      alert(
-        "An error occurred while saving the transparency setting: " +
-          error.message
-      );
     }
   }
 
@@ -241,17 +233,9 @@ document.addEventListener("DOMContentLoaded", function () {
       settings.disableHover = isDisabled;
 
       await browser.storage.local.set({ [BROWSER_STORAGE_KEY]: settings });
-      alert(
-        `Hover effects have been ${
-          isDisabled ? "disabled" : "enabled"
-        } globally. This will affect all websites.`
-      );
+      // No notification - just save the setting silently
     } catch (error) {
       console.error("Error saving hover settings:", error);
-      alert(
-        "An error occurred while saving the hover effects setting: " +
-          error.message
-      );
     }
   }
 
@@ -264,16 +248,9 @@ document.addEventListener("DOMContentLoaded", function () {
       settings.disableFooter = isDisabled;
 
       await browser.storage.local.set({ [BROWSER_STORAGE_KEY]: settings });
-      alert(
-        `Footers have been ${
-          isDisabled ? "hidden" : "shown"
-        } globally. This will affect all websites.`
-      );
+      // No notification - just save the setting silently
     } catch (error) {
       console.error("Error saving footer settings:", error);
-      alert(
-        "An error occurred while saving the footer setting: " + error.message
-      );
     }
   }