refactor: keyboard nav as primary feature, design tweaks behind experimental toggle

popup/popup.js

@@ -3,14 +3,22 @@
 (function () {
   'use strict';
 
-  // We need access to DEFAULTS and DENSITY_PRESETS from settings-defaults.js,
-  // but popup runs in its own context. Duplicate the defaults here.
-  // (Content scripts and popup don't share a JS context.)
+  // Defaults — must stay in sync with content/settings-defaults.js
+  // (popup runs in its own JS context, no access to content script globals)
 
   var DEFAULTS = {
+    // Primary feature
+    keyboardMultiSelect: true,
+
+    // Design tweaks master toggle
+    enableDesignTweaks: false,
+
+    // Theme & Appearance
     theme: 'swiss',
     colorScheme: 'system',
     accentColor: '',
+
+    // Density & Spacing
     densityPreset: 'compact',
     compactTopBar: true,
     compactCommandBar: true,
@@ -21,6 +29,8 @@
     compressComposeToolbar: true,
     readingPaneMaxWidth: true,
     unifiedHeader: false,
+
+    // Hide Elements
     hideCopilot: true,
     hideSuggestedReplies: true,
     hidePromoBanners: true,
@@ -33,11 +43,15 @@
     hideVivaInsights: true,
     hideUnreadOtherBanner: true,
     hideActivityFeed: true,
+
+    // Readability
     unreadDistinction: true,
     previewOwnLine: false,
     normalizeFontWeight: true,
     darkModeEmailFix: true,
     messageListFontSize: 'medium',
+
+    // Behavior
     autoCollapseRibbon: true,
     rememberSidebarState: true,
     suppressContactHover: true,
@@ -47,7 +61,8 @@
     stickyReplyBar: true,
     autoResizeCompose: true,
     throttleNotifications: false,
-    keyboardMultiSelect: true,
+
+    // Quick Actions
     markAllReadButton: true,
     quickFolderJump: true,
   };
@@ -85,6 +100,13 @@
     },
   };
 
+  // --- Design sections visibility ---
+  var designSections = document.getElementById('designSections');
+
+  function updateDesignSectionsVisibility(enabled) {
+    designSections.style.display = enabled ? 'block' : 'none';
+  }
+
   // --- Load settings and populate UI ---
   function loadUI() {
     chrome.storage.sync.get(DEFAULTS, function (settings) {
@@ -117,6 +139,9 @@
       // Version
       var manifest = chrome.runtime.getManifest();
       document.getElementById('version').textContent = 'v' + manifest.version;
+
+      // Show/hide design sections
+      updateDesignSectionsVisibility(settings.enableDesignTweaks);
     });
   }
 
@@ -140,6 +165,11 @@
   for (var c = 0; c < checkboxes.length; c++) {
     checkboxes[c].addEventListener('change', function () {
       saveSetting(this.dataset.setting, this.checked);
+
+      // Toggle design sections visibility when master toggle changes
+      if (this.dataset.setting === 'enableDesignTweaks') {
+        updateDesignSectionsVisibility(this.checked);
+      }
     });
   }
 
@@ -155,7 +185,6 @@
       if (settingKey === 'densityPreset' && DENSITY_PRESETS[value]) {
         var preset = DENSITY_PRESETS[value];
         chrome.storage.sync.set(preset);
-        // Update checkboxes in the UI
         var toggleKeys = Object.keys(preset);
         for (var p = 0; p < toggleKeys.length; p++) {
           var checkbox = document.getElementById(toggleKeys[p]);
@@ -213,7 +242,6 @@
     reader.onload = function (event) {
       try {
         var imported = JSON.parse(event.target.result);
-        // Only import known keys
         var cleaned = {};
         var defaultKeys = Object.keys(DEFAULTS);
         for (var i = 0; i < defaultKeys.length; i++) {