4 files changed, 83 insertions, 14 deletions

diff --git a/background.js b/background.js
index 99948ab..e31e8c1 100644
--- a/background.js
+++ b/background.js
@@ -232,15 +232,15 @@ async function applyCSSToTab(tab) {
     const globalSettings = settings.transparentZenSettings || {};
     console.log("DEBUG: Global settings:", JSON.stringify(globalSettings));
 
-    const skipStyleListData = await browser.storage.local.get(
-      SKIP_THEMING_KEY
-    );
+    const skipStyleListData = await browser.storage.local.get(SKIP_THEMING_KEY);
     const skipStyleList = skipStyleListData[SKIP_THEMING_KEY] || [];
     const styleMode = globalSettings.whitelistStyleMode ?? true;
 
-    if (globalSettings.enableStyling === false || 
-      !styleMode && skipStyleList.includes(hostname) ||
-      styleMode && !skipStyleList.includes(hostname)) {
+    if (
+      globalSettings.enableStyling === false ||
+      (!styleMode && skipStyleList.includes(hostname)) ||
+      (styleMode && !skipStyleList.includes(hostname))
+    ) {
       console.log("DEBUG: Styling is disabled, exiting early");
       return;
     }
@@ -513,8 +513,34 @@ async function refetchCSS() {
       { headers: { "Cache-Control": "no-cache" } }
     );
     if (!response.ok) throw new Error("Failed to fetch styles.json");
-    const styles = await browser.storage.local.set({ styles });
-    await browser.storage.local.set({ lastFetchedTime: Date.now() });
+    const styles = await response.json();
+    await browser.storage.local.set({ styles });
+
+    // Check if we need to initialize default settings
+    const settingsData = await browser.storage.local.get(
+      "transparentZenSettings"
+    );
+    if (!settingsData.transparentZenSettings) {
+      // Initialize default settings if none exist
+      const defaultSettings = {
+        enableStyling: true,
+        autoUpdate: true,
+        forceStyling: false,
+        whitelistMode: false,
+        whitelistStyleMode: false,
+        lastFetchedTime: Date.now(),
+      };
+
+      // Save default settings
+      await browser.storage.local.set({
+        transparentZenSettings: defaultSettings,
+      });
+      console.info("Initialized default settings during first fetch");
+    } else {
+      // Just update the lastFetchedTime
+      await browser.storage.local.set({ lastFetchedTime: Date.now() });
+    }
+
     console.info("All styles refetched and updated from GitHub.");
 
     // Preload the new styles
diff --git a/popup/popup.css b/popup/popup.css
index 3ffd5cb..bab1b67 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -571,3 +571,9 @@ input:checked + .slider:before {
   vertical-align: bottom;

   margin-right: 4px;

 }

+

+/* Update the reload button styles to fit in the features container */

+.features-container #reload {

+  margin-top: 12px;

+  width: 100%;

+}

diff --git a/popup/popup.html b/popup/popup.html
index 1ab05c3..bc5b92b 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -41,6 +41,10 @@
           </label>
           <span id="whitelist-style-mode-label" class="toggle-label">Blacklist Mode</span>
         </div>
+        <!-- Moved reload button here -->
+        <button id="reload" class="action-button secondary">
+          Reload to apply <i class="fas fa-sync-alt"></i>
+        </button>
       </div>
 
       <!-- Current Site Features Section -->
@@ -61,10 +65,7 @@
         </div>
         <div id="current-site-toggles" class="features-list collapsed"></div>
         <div class="actions" id="current-site-actions">
-          <!-- reload botton -->
-          <button id="reload" class="action-button secondary">
-            Reload to apply <i class="fas fa-sync-alt"></i>
-          </button>
+          <!-- Reload button was here, now moved above -->
         </div>
       </div>
 
diff --git a/popup/popup.js b/popup/popup.js
index c86a882..d87debb 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -627,10 +627,46 @@ new (class ExtensionPopup {
       if (!response.ok) throw new Error("Failed to fetch styles.json");
       const styles = await response.json();
       await browser.storage.local.set({ styles });
-      await browser.storage.local.set({ lastFetchedTime: Date.now() });
+
+      // Check if we need to initialize default settings
+      const settingsData = await browser.storage.local.get(
+        this.BROWSER_STORAGE_KEY
+      );
+      if (!settingsData[this.BROWSER_STORAGE_KEY]) {
+        // Initialize default settings if none exist
+        const defaultSettings = {
+          enableStyling: true,
+          autoUpdate: true,
+          forceStyling: false,
+          whitelistMode: false,
+          whitelistStyleMode: false,
+          lastFetchedTime: Date.now(),
+        };
+
+        // Save default settings
+        await browser.storage.local.set({
+          [this.BROWSER_STORAGE_KEY]: defaultSettings,
+        });
+        console.info("Initialized default settings during first fetch");
+
+        // Update our internal global settings
+        this.globalSettings = defaultSettings;
+
+        // Update UI to reflect these defaults
+        this.enableStylingSwitch.checked = true;
+        this.autoUpdateSwitch.checked = false;
+        this.forceStylingSwitch.checked = false;
+        this.whitelistModeSwitch.checked = false;
+        this.whitelistStylingModeSwitch.checked = false;
+
+        // Update labels
+        this.updateModeLabels();
+      } else {
+        // Just update the lastFetchedTime
+        await browser.storage.local.set({ lastFetchedTime: Date.now() });
+      }
 
       this.loadCurrentSiteFeatures();
-      // this.loadWebsitesList();
       this.updateActiveTabStyling();
 
       this.refetchCSSButton.textContent = "Done!";