first time users are now prompted to fetch styles. version updated.

3 files changed, 54 insertions, 4 deletions

diff --git a/manifest.json b/manifest.json
index 8197932..9f94fdb 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Zen Internet",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "Inject custom css from my repository in real time",
   "browser_specific_settings": {
     "gecko": {
diff --git a/popup/popup.css b/popup/popup.css
index 6dd3829..761b154 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -509,3 +509,18 @@ input:checked + .slider:before {
 .disabled-toggle input:checked + .slider {

   background-color: rgba(var(--accent-color), 0.5) !important;

 }

+

+/* Add these styles for the disabled toggle */

+.toggle-switch.disabled {

+  opacity: 0.6;

+  cursor: not-allowed;

+}

+

+.toggle-switch.disabled .slider {

+  background-color: var(--border-color);

+  cursor: not-allowed;

+}

+

+.toggle-switch.disabled input:checked + .slider {

+  background-color: rgba(249, 135, 100, 0.5);

+}

diff --git a/popup/popup.js b/popup/popup.js
index 7b00bb5..9a13ce2 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -238,13 +238,38 @@ new (class ExtensionPopup {
         this.isCurrentSite(site.replace(".css", ""))
       );
 
+      // Check if we have any styles at all, including example.com
+      const hasExampleSite = "example.com.css" in styles;
+      const hasNoStyles = Object.keys(styles).length === 0;
+
+      // Disable the force styling toggle if we found a theme for this site
+      if (currentSiteKey && currentSiteKey !== "example.com.css") {
+        // We found a specific theme for this site, no need for force styling
+        // Disable the skip/enable toggle
+        this.skipForceThemingSwitch.disabled = true;
+        this.siteToggleLabel.innerHTML = `${
+          this.whitelistModeSwitch.checked ? "Enable" : "Skip Forcing"
+        } for this Site <span class="overridden-label">×</span>`;
+      } else {
+        // No specific theme found, enable the toggle
+        this.skipForceThemingSwitch.disabled = false;
+        this.siteToggleLabel.innerHTML = this.whitelistModeSwitch.checked
+          ? "Enable for this Site"
+          : "Skip Forcing for this Site";
+      }
+
       if (!currentSiteKey && this.globalSettings.forceStyling) {
         currentSiteKey = Object.keys(styles).find(
           (site) => site === "example.com.css"
         );
       }
 
-      if (!currentSiteKey || currentSiteKey === "example.com.css") {
+      // Only show the request theme button if we have at least the example.com style
+      // but no specific theme for this site
+      if (
+        (!currentSiteKey || currentSiteKey === "example.com.css") &&
+        hasExampleSite
+      ) {
         const requestThemeButton = document.createElement("button");
         requestThemeButton.className = "action-button primary";
         requestThemeButton.innerHTML = `Request Theme for ${this.currentSiteHostname}`;
@@ -254,6 +279,16 @@ new (class ExtensionPopup {
         });
 
         this.currentSiteFeatures.appendChild(requestThemeButton);
+      } else if (hasNoStyles) {
+        // No styles at all, suggest to fetch first
+        const fetchFirstMessage = document.createElement("div");
+        fetchFirstMessage.className = "toggle-container";
+        fetchFirstMessage.innerHTML = `
+          <div class="actions secondary">
+            <span class="toggle-label warning">Please fetch styles first using the "Refetch latest styles" button</span>
+          </div>
+        `;
+        this.currentSiteFeatures.appendChild(fetchFirstMessage);
       }
 
       if (!currentSiteKey) {
@@ -267,12 +302,12 @@ new (class ExtensionPopup {
 
       const features = styles[currentSiteKey];
 
-      if (!currentSiteKey || currentSiteKey === "example.com.css") {
+      if (currentSiteKey === "example.com.css") {
         const skipForceThemingToggle = document.createElement("div");
         skipForceThemingToggle.className = "toggle-container";
         skipForceThemingToggle.innerHTML = `
         <div class="actions secondary">
-          <span class="toggle-label warning">No themes found for this website ;(</span>
+          <span class="toggle-label warning">No specific theme found for this website. Using default styling.</span>
         </div>
         `;