Preserve settings across upgrades

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: nichu42

manifest.firefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Haiilo Enhancer",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Enhance your Haiilo experience - mute users, customize your feed, and more",
   "homepage_url": "https://github.com/nichu42/haiilo-enhancer",
   "permissions": [

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Haiilo Enhancer",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Enhance your Haiilo experience - mute users, customize your feed, and more",
   "homepage_url": "https://github.com/nichu42/haiilo-enhancer",
   "permissions": [

options.css

@@ -385,6 +385,38 @@ footer .donate-icon {
   border-radius: 4px;
 }
 
+.reauth-warning {
+  margin-top: 16px;
+  padding: 14px 16px;
+  background: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-border);
+  border-left: 4px solid var(--color-warning);
+  border-radius: 8px;
+  color: var(--color-text-primary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.reauth-warning strong {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--color-warning);
+}
+
+.reauth-warning p {
+  margin: 6px 0;
+}
+
+.reauth-warning ul {
+  margin: 6px 0 10px 20px;
+  padding: 0;
+}
+
+.reauth-warning li {
+  font-family: monospace;
+  font-size: 13px;
+}
+
 .domains-list {
   margin-bottom: 16px;
 }

options.html

@@ -252,13 +252,30 @@ <h2>Custom Haiilo Domains</h2>
 
     <section>
       <h2>Data Management</h2>
+      <div class="form-group checkbox-group">
+        <label>
+          <input type="checkbox" id="cloudSync">
+          <span>Sync settings and muted users via browser account</span>
+        </label>
+        <small class="help-text">When enabled, your settings and up to 50 muted users are stored in your browser's built-in sync storage (Google account for Chrome, Firefox account for Firefox) and roam across devices. Custom domains are excluded — re-add them manually on each device. Cloud sync is disabled automatically if your muted list exceeds 50 users.</small>
+        <div id="cloudSyncWarning" class="reauth-warning" style="display: none;">
+          <strong>⚠️ Cloud sync was automatically disabled</strong>
+          <p>Your muted users list exceeded the 50-user limit for cloud sync. Your data is still stored locally and nothing was lost. To re-enable cloud sync, reduce your muted users list to 50 or fewer.</p>
+        </div>
+      </div>
       <p class="description">Export your settings and muted users to a JSON file as a backup, or import a previous export to restore them. <strong>Reset to Defaults</strong> wipes everything; export first if you might want to undo it.</p>
       <div class="button-group">
         <button id="exportData" class="secondary">Export All Settings</button>
         <button id="importData" class="secondary">Import All Settings</button>
         <button id="clearAll" class="danger">Reset Everything to Defaults</button>
       </div>
       <input type="file" id="importFile" accept=".json" style="display: none;">
+      <div id="domainReauthWarning" class="reauth-warning" style="display: none;">
+        <strong>⚠️ Custom domains need permission re-grant</strong>
+        <p>The following domains were in your backup but could not be restored automatically — browser security requires you to grant access manually:</p>
+        <ul id="domainReauthList"></ul>
+        <p>To re-add them: scroll down to <strong>Custom Haiilo Domains</strong>, enter each domain, and click <strong>Add Domain</strong> to grant browser access.</p>
+      </div>
     </section>
 
     <div class="save-status" id="saveStatus"></div>

options.js

@@ -59,6 +59,26 @@ function debugLog(...args) {
   });
 }
 
+function updateCloudSyncWarning(settings) {
+  const warning = document.getElementById('cloudSyncWarning');
+  if (!warning) return;
+  // Show the warning if cloudSync was disabled externally (i.e. user limit exceeded)
+  // We detect this by checking if the checkbox is unchecked but the stored value was true
+  // The background sets cloudSync = false when limit exceeded and broadcasts settingsUpdated.
+  // The warning is shown only when explicitly triggered via cloudSyncDisabled message.
+  warning.style.display = 'none';
+}
+
+// Listen for cloudSyncDisabled broadcast from background
+browserAPI.runtime.onMessage.addListener((message) => {
+  if (message.action === 'cloudSyncDisabled') {
+    const warning = document.getElementById('cloudSyncWarning');
+    if (warning) warning.style.display = 'block';
+    const cloudSyncCheckbox = document.getElementById('cloudSync');
+    if (cloudSyncCheckbox) cloudSyncCheckbox.checked = false;
+  }
+});
+
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initOptions);
 } else {
@@ -127,6 +147,19 @@ async function loadSettings() {
   const scope = settings.autoExpandScope;
   document.getElementById('autoExpandScope').value = (scope === 'workspaces' || scope === 'pages') ? scope : 'both';
 
+  // Cloud sync
+  const cloudSyncCheckbox = document.getElementById('cloudSync');
+  if (cloudSyncCheckbox) {
+    cloudSyncCheckbox.checked = settings.cloudSync === true;
+    // Show warning if sync was previously enabled but muted list now exceeds limit
+    const mutedUsers = await browserAPI.runtime.sendMessage({ action: 'getMutedUsers' });
+    const warning = document.getElementById('cloudSyncWarning');
+    if (warning && !settings.cloudSync && Array.isArray(mutedUsers) && mutedUsers.length > 50) {
+      warning.style.display = 'block';
+    }
+    updateCloudSyncWarning(settings);
+  }
+
   // Show/hide channel avatar settings based on checkbox
   toggleChannelAvatarSettings();
   toggleStyleSettings();
@@ -334,6 +367,26 @@ function setupEventListeners() {
   // Auto-expand settings
   document.getElementById('autoExpandEnabled').addEventListener('change', saveSettings);
   document.getElementById('autoExpandScope').addEventListener('change', saveSettings);
+
+  // Cloud sync toggle
+  const cloudSyncCheckbox = document.getElementById('cloudSync');
+  if (cloudSyncCheckbox) {
+    cloudSyncCheckbox.addEventListener('change', async (e) => {
+      if (e.target.checked) {
+        // Test whether storage.sync is actually available before enabling
+        try {
+          await browserAPI.storage.sync.set({ __haiiloSyncTest: true });
+          await browserAPI.storage.sync.remove('__haiiloSyncTest');
+        } catch (err) {
+          // Sync not available — revert the checkbox and warn the user
+          e.target.checked = false;
+          showStatus('Cloud sync is not available. Make sure you are signed into your browser account.', 'error');
+          return;
+        }
+      }
+      saveSettings();
+    });
+  }
   document.getElementById('autoExpandClicksPerList').addEventListener('change', () => {
     // Clamp the value client-side as a safety net.
     const input = document.getElementById('autoExpandClicksPerList');
@@ -545,7 +598,8 @@ async function saveSettings() {
     autoExpandEnabled: document.getElementById('autoExpandEnabled').checked,
     autoExpandClicksPerList: parseInt(document.getElementById('autoExpandClicksPerList').value, 10) || 3,
     autoExpandDelayMs: parseInt(document.getElementById('autoExpandDelayMs').value, 10) || 300,
-    autoExpandScope: document.getElementById('autoExpandScope').value
+    autoExpandScope: document.getElementById('autoExpandScope').value,
+    cloudSync: document.getElementById('cloudSync') ? document.getElementById('cloudSync').checked : false
   };
 
   await browserAPI.runtime.sendMessage({ action: 'saveSettings', settings });
@@ -585,12 +639,16 @@ async function applyLocaleDefaults() {
 async function exportData() {
   const mutedUsers = await browserAPI.runtime.sendMessage({ action: 'getMutedUsers' });
   const settings = await browserAPI.runtime.sendMessage({ action: 'getSettings' });
+  const customDomains = await browserAPI.runtime.sendMessage({ action: 'getCustomDomains' });
+  const customHomepages = await browserAPI.runtime.sendMessage({ action: 'getCustomHomepages' });
 
   const exportObj = {
     version: '1.0',
     exportedAt: new Date().toISOString(),
     mutedUsers,
-    settings
+    settings,
+    customDomains: customDomains || [],
+    customHomepages: customHomepages || {}
   };
 
   const blob = new Blob([JSON.stringify(exportObj, null, 2)], { type: 'application/json' });
@@ -637,9 +695,36 @@ async function importData(e) {
       await loadSettings();
     }
 
+    // Custom domains are intentionally NOT restored — browser host permissions
+    // require a user gesture (click) and cannot be granted silently during import.
+    // Show a warning banner listing the domains the user must re-add manually.
+    const domainReauthWarning = document.getElementById('domainReauthWarning');
+    const domainReauthList = document.getElementById('domainReauthList');
+    if (data.customDomains && Array.isArray(data.customDomains) && data.customDomains.length > 0 && domainReauthWarning && domainReauthList) {
+      domainReauthList.textContent = '';
+      data.customDomains.forEach(domain => {
+        const li = document.createElement('li');
+        li.textContent = domain;
+        domainReauthList.appendChild(li);
+      });
+      domainReauthWarning.style.display = 'block';
+    } else if (domainReauthWarning) {
+      domainReauthWarning.style.display = 'none';
+    }
+
+    // Import custom homepages if present
+    if (data.customHomepages && typeof data.customHomepages === 'object') {
+      for (const [baseUrl, homepageUrl] of Object.entries(data.customHomepages)) {
+        await browserAPI.runtime.sendMessage({ action: 'setCustomHomepage', baseUrl, homepageUrl });
+      }
+      await loadCustomHomepages();
+    }
+
     const messages = [];
     if (userCount > 0) messages.push(`${userCount} muted users`);
     if (data.settings) messages.push('all settings');
+    if (data.customDomains && data.customDomains.length > 0) messages.push(`${data.customDomains.length} custom domain(s) need manual re-authorization (see warning above)`);
+    if (data.customHomepages && Object.keys(data.customHomepages).length > 0) messages.push(`${Object.keys(data.customHomepages).length} custom homepage(s)`);
 
     showStatus(`Imported ${messages.join(' and ')}`, 'success');
   } catch (err) {