Merge pull request #16 from sameerasw/custom-styles #14

Implemented custom styles repository feature #14

5 files changed, 253 insertions, 34 deletions

diff --git a/background.js b/background.js
index 60fd68e..19ef0fe 100644
--- a/background.js
+++ b/background.js
@@ -818,11 +818,20 @@ function stopAutoUpdate() {
 async function refetchCSS() {
   if (logging) console.log("refetchCSS called");
   try {
-    const response = await fetch(
-      "https://sameerasw.github.io/my-internet/styles.json",
-      { headers: { "Cache-Control": "no-cache" } }
-    );
-    if (!response.ok) throw new Error("Failed to fetch styles.json");
+    // Get the repository URL from storage or use the default one
+    const DEFAULT_REPOSITORY_URL =
+      "https://sameerasw.github.io/my-internet/styles.json";
+    const repoUrlData = await browser.storage.local.get("stylesRepositoryUrl");
+    const repositoryUrl =
+      repoUrlData.stylesRepositoryUrl || DEFAULT_REPOSITORY_URL;
+
+    console.log("Background: Fetching styles from:", repositoryUrl);
+
+    const response = await fetch(repositoryUrl, {
+      headers: { "Cache-Control": "no-cache" },
+    });
+    if (!response.ok)
+      throw new Error(`Failed to fetch styles (Status: ${response.status})`);
     const styles = await response.json();
     await browser.storage.local.set({ styles });
 
@@ -849,7 +858,7 @@ async function refetchCSS() {
       await browser.storage.local.set({ lastFetchedTime: Date.now() });
     }
 
-    console.info("All styles refetched and updated from GitHub.");
+    console.info(`All styles refetched and updated from ${repositoryUrl}`);
 
     // Preload the new styles
     preloadStyles();
diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css
index 84f0131..17edbda 100644
--- a/data-viewer/data-viewer.css
+++ b/data-viewer/data-viewer.css
@@ -6,7 +6,7 @@
   background-color: var(--secondary-bg);
   border-radius: var(--radius-md);
   padding: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 4px;
   border-left: 3px solid var(--accent-color);
 }
 
@@ -14,7 +14,7 @@
   margin-top: 8px;
   color: var(--text-secondary);
   font-size: 13px;
-  padding-left: 58px;
+  /* padding-left: 58px; */
 }
 
 /* General layout adjustments */
@@ -36,7 +36,7 @@ body {
 
 /* Data section styling */
 .data-section {
-  margin-bottom: 24px;
+  margin-bottom: 4px;
   background-color: var(--secondary-bg);
   border-radius: var(--radius-md);
   padding: 16px;
@@ -109,7 +109,7 @@ body {
 }
 
 .website-panel {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   background-color: var(--bg-color);
   border-radius: var(--radius-md);
   overflow: hidden;
@@ -362,7 +362,7 @@ body {
 
 /* Danger zone styling */
 .danger-zone {
-  margin-top: 24px;
+  margin-top: 8px;
   padding: 16px;
   background-color: var(--danger-bg-color);
   border: 1px solid var(--danger-border-color);
@@ -524,7 +524,8 @@ body {
   margin-bottom: 16px;
 }
 
-.import-container, #export-settings {
+.import-container,
+#export-settings {
   flex: 1;
 }
 
@@ -552,10 +553,56 @@ body {
   font-weight: 500;
 }
 
+/* Repository URL styling */
+.repository-url-container {
+  background-color: var(--bg-color);
+  border-radius: var(--radius-sm);
+  padding: 16px;
+  border-left: 3px solid var(--accent-color);
+}
+
+.repository-url-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.repository-url-input {
+  /* width: 100%; */
+  padding: 10px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.repository-url-input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+}
+
+.repository-url-buttons {
+  display: flex;
+  gap: 12px;
+}
+
+.repository-url-status {
+  font-size: 14px;
+  margin-top: 8px;
+  padding: 8px 0;
+  border-radius: var(--radius-sm);
+}
+
 /* Add responsive adjustments for mobile */
 @media (max-width: 768px) {
-  .backup-actions {
+  .repository-url-buttons {
     flex-direction: column;
     gap: 8px;
   }
+
+  .repository-url-buttons button {
+    width: 100%;
+  }
 }
diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html
index 9400a53..5a7274e 100644
--- a/data-viewer/data-viewer.html
+++ b/data-viewer/data-viewer.html
@@ -27,11 +27,6 @@
         </header>
 
         <main class="app-content">
-            <div class="actions">
-                <button id="back-button" class="action-button secondary">
-                    <i class="fas fa-arrow-left"></i> Back to Extension
-                </button>
-            </div>
 
             <div class="toggle-setting-container">
                 <div class="toggle-container">
@@ -46,6 +41,32 @@
                 </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 -->
             <div class="data-section">
                 <h2 class="section-title">Backup & Restore ✨</h2>
diff --git a/data-viewer/data-viewer.js b/data-viewer/data-viewer.js
index 55ec808..fc76787 100644
--- a/data-viewer/data-viewer.js
+++ b/data-viewer/data-viewer.js
@@ -2,19 +2,29 @@ document.addEventListener("DOMContentLoaded", function () {
   const BROWSER_STORAGE_KEY = "transparentZenSettings";
   const SKIP_FORCE_THEMING_KEY = "skipForceThemingList";
   const SKIP_THEMING_KEY = "skipThemingList";
+  const REPOSITORY_URL_KEY = "stylesRepositoryUrl";
+  const DEFAULT_REPOSITORY_URL =
+    "https://sameerasw.github.io/my-internet/styles.json";
 
   const globalSettingsElement = document.getElementById("global-settings-data");
   const skipListElement = document.getElementById("skip-list-data");
   const combinedWebsitesElement = document.getElementById(
     "combined-websites-data"
   );
-  const backButton = document.getElementById("back-button");
   const deleteAllButton = document.getElementById("delete-all-data");
   const versionElement = document.getElementById("addon-version");
   const disableTransparencyToggle = document.getElementById(
     "disable-transparency"
   );
 
+  // Repository URL Elements
+  const repositoryUrlInput = document.getElementById("repository-url");
+  const setRepositoryUrlButton = document.getElementById("set-repository-url");
+  const resetRepositoryUrlButton = document.getElementById(
+    "reset-repository-url"
+  );
+  const repositoryUrlStatus = document.getElementById("repository-url-status");
+
   // Backup & Restore Elements
   const exportButton = document.getElementById("export-settings");
   const importFileInput = document.getElementById("import-file");
@@ -26,11 +36,6 @@ document.addEventListener("DOMContentLoaded", function () {
   // Display addon version
   displayAddonVersion();
 
-  // Event listener for the back button
-  backButton.addEventListener("click", function () {
-    window.close();
-  });
-
   // Event listener for disable transparency toggle
   disableTransparencyToggle.addEventListener("change", function () {
     saveTransparencySettings(this.checked);
@@ -47,10 +52,132 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   });
 
+  // Repository URL event listeners
+  setRepositoryUrlButton.addEventListener("click", setRepositoryUrl);
+  resetRepositoryUrlButton.addEventListener("click", resetRepositoryUrl);
+
   // New event listeners for export and import functionality
   exportButton.addEventListener("click", exportSettings);
   importFileInput.addEventListener("change", importSettings);
 
+  // Load the repository URL from storage
+  loadRepositoryUrl();
+
+  async function loadRepositoryUrl() {
+    try {
+      const data = await browser.storage.local.get(REPOSITORY_URL_KEY);
+      const repositoryUrl = data[REPOSITORY_URL_KEY] || DEFAULT_REPOSITORY_URL;
+      repositoryUrlInput.value = repositoryUrl;
+    } catch (error) {
+      console.error("Error loading repository URL:", error);
+      repositoryUrlInput.value = DEFAULT_REPOSITORY_URL;
+    }
+  }
+
+  async function setRepositoryUrl() {
+    try {
+      const newUrl = repositoryUrlInput.value.trim();
+
+      if (!newUrl) {
+        showRepositoryUrlStatus("Repository URL cannot be empty", "error");
+        return;
+      }
+
+      // Simple URL validation
+      try {
+        new URL(newUrl);
+      } catch (e) {
+        showRepositoryUrlStatus("Invalid URL format", "error");
+        return;
+      }
+
+      // Save the new URL to storage
+      await browser.storage.local.set({ [REPOSITORY_URL_KEY]: newUrl });
+
+      showRepositoryUrlStatus("Repository URL saved successfully", "success");
+
+      // Prompt the user to clear styles data
+      if (
+        confirm(
+          "Would you like to clear existing styles data to avoid conflicts with the new repository?\n\nThis will clear saved styles and website-specific settings, but keep your global settings."
+        )
+      ) {
+        await clearStylesData();
+      }
+    } catch (error) {
+      console.error("Error setting repository URL:", error);
+      showRepositoryUrlStatus(`Error saving URL: ${error.message}`, "error");
+    }
+  }
+
+  async function resetRepositoryUrl() {
+    try {
+      repositoryUrlInput.value = DEFAULT_REPOSITORY_URL;
+      await browser.storage.local.set({
+        [REPOSITORY_URL_KEY]: DEFAULT_REPOSITORY_URL,
+      });
+
+      showRepositoryUrlStatus("Repository URL reset to default", "success");
+
+      // Prompt to clear styles data
+      if (
+        confirm(
+          "Would you like to clear existing styles data to avoid conflicts?\n\nThis will clear saved styles and website-specific settings, but keep your global settings."
+        )
+      ) {
+        await clearStylesData();
+      }
+    } catch (error) {
+      console.error("Error resetting repository URL:", error);
+      showRepositoryUrlStatus(`Error resetting URL: ${error.message}`, "error");
+    }
+  }
+
+  async function clearStylesData() {
+    try {
+      // Get all storage data to filter what to keep and what to remove
+      const allData = await browser.storage.local.get(null);
+
+      // Create a new object with just the data we want to keep
+      const dataToKeep = {};
+
+      // Keep global settings
+      if (allData[BROWSER_STORAGE_KEY]) {
+        dataToKeep[BROWSER_STORAGE_KEY] = allData[BROWSER_STORAGE_KEY];
+      }
+
+      // Keep repository URL
+      if (allData[REPOSITORY_URL_KEY]) {
+        dataToKeep[REPOSITORY_URL_KEY] = allData[REPOSITORY_URL_KEY];
+      }
+
+      // Clear all storage first
+      await browser.storage.local.clear();
+
+      // Then restore the data we want to keep
+      await browser.storage.local.set(dataToKeep);
+
+      // Refresh the data display
+      loadAllData();
+
+      showRepositoryUrlStatus("Styles data cleared successfully", "success");
+    } catch (error) {
+      console.error("Error clearing styles data:", error);
+      showRepositoryUrlStatus(`Error clearing data: ${error.message}`, "error");
+    }
+  }
+
+  function showRepositoryUrlStatus(message, type) {
+    repositoryUrlStatus.textContent = message;
+    repositoryUrlStatus.className = `repository-url-status status-${type}`;
+
+    // Clear the message after 5 seconds
+    setTimeout(() => {
+      repositoryUrlStatus.textContent = "";
+      repositoryUrlStatus.className = "repository-url-status";
+    }, 5000);
+  }
+
   async function deleteAllData() {
     try {
       // Clear all storage data
@@ -103,6 +230,8 @@ document.addEventListener("DOMContentLoaded", function () {
         [BROWSER_STORAGE_KEY]: allData[BROWSER_STORAGE_KEY] || {},
         [SKIP_FORCE_THEMING_KEY]: allData[SKIP_FORCE_THEMING_KEY] || [],
         [SKIP_THEMING_KEY]: allData[SKIP_THEMING_KEY] || [],
+        [REPOSITORY_URL_KEY]:
+          allData[REPOSITORY_URL_KEY] || DEFAULT_REPOSITORY_URL,
       };
 
       // Also extract site-specific settings (keys that start with BROWSER_STORAGE_KEY.)
@@ -178,12 +307,15 @@ document.addEventListener("DOMContentLoaded", function () {
               `Are you sure you want to import settings from ${importData.exportDate}? This will overwrite your current settings.`
             )
           ) {
-            // First store the global settings and lists
+            // First store the global settings, lists, and repository URL
             const importOperations = {
               [BROWSER_STORAGE_KEY]: importData.settings[BROWSER_STORAGE_KEY],
               [SKIP_FORCE_THEMING_KEY]:
                 importData.settings[SKIP_FORCE_THEMING_KEY] || [],
               [SKIP_THEMING_KEY]: importData.settings[SKIP_THEMING_KEY] || [],
+              [REPOSITORY_URL_KEY]:
+                importData.settings[REPOSITORY_URL_KEY] ||
+                DEFAULT_REPOSITORY_URL,
             };
 
             // Then add any site-specific settings if they exist
diff --git a/popup/popup.js b/popup/popup.js
index 5f8071d..6844415 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -666,15 +666,24 @@ new (class ExtensionPopup {
     if (logging) console.log("refetchCSS called");
     this.refetchCSSButton.textContent = "Fetching...";
     try {
-      const response = await fetch(
-        "https://sameerasw.github.io/my-internet/styles.json",
-        {
-          headers: {
-            "Cache-Control": "no-cache",
-          },
-        }
+      // Get the repository URL from storage or use the default one
+      const DEFAULT_REPOSITORY_URL =
+        "https://sameerasw.github.io/my-internet/styles.json";
+      const repoUrlData = await browser.storage.local.get(
+        "stylesRepositoryUrl"
       );
-      if (!response.ok) throw new Error("Failed to fetch styles.json");
+      const repositoryUrl =
+        repoUrlData.stylesRepositoryUrl || DEFAULT_REPOSITORY_URL;
+
+      console.log("Fetching styles from:", repositoryUrl);
+
+      const response = await fetch(repositoryUrl, {
+        headers: {
+          "Cache-Control": "no-cache",
+        },
+      });
+      if (!response.ok)
+        throw new Error(`Failed to fetch styles (Status: ${response.status})`);
       const styles = await response.json();
       await browser.storage.local.set({ styles });
 
@@ -723,7 +732,7 @@ new (class ExtensionPopup {
       setTimeout(() => {
         this.refetchCSSButton.textContent = "Refetch latest styles";
       }, 2000);
-      console.info("All styles refetched and updated from GitHub." + styles);
+      console.info(`All styles refetched and updated from ${repositoryUrl}`);
       this.displayLastFetchedTime();
     } catch (error) {
       this.refetchCSSButton.textContent = "Error!";
@@ -731,6 +740,7 @@ new (class ExtensionPopup {
         this.refetchCSSButton.textContent = "Refetch latest styles";
       }, 2000);
       console.error("Error refetching styles:", error);
+      alert(`Error fetching styles: ${error.message}`);
     }
   }