feat: global on off toggle

2026-04-08 20:19:06 +03:00 · 2025-06-23 11:20:51 +03:00
parent 2d0878f562
commit 428c97b3c5
7 changed files with 176 additions and 15 deletions
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -6,7 +6,7 @@
  --button-bg: #222;
  --button-hover: #444;
  --button-text: white;
-  --accent: #ffeb3b;
+  --accent: #ec9c23;
  --accent-text: #000;
  --highlight-tag: #292929;
  --highlight-tag-border: #444;
@@ -16,7 +16,7 @@
  --border-radius: 12px;
  --section-bg: #111;
  --switch-bg: #444;
-  --checkbox-accent: #ffeb3b;
+  --checkbox-accent: #ec9c23;
  --checkbox-border: #666;
 }

@@ -298,4 +298,86 @@ input[type="file"] {
  font-weight: normal;
  margin-left: -8px;
  margin-right: -8px;
+}
+
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--bg-color);
+  border-radius: 12px;
+  color: var(--fg-color);
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+
+.icon-toggles {
+  display: flex;
+  gap: 12px;
+}
+
+.icon-toggle {
+  cursor: pointer;
+  font-size: 18px;
+  color: #ffa500;
+  display: flex;
+  align-items: center;
+  transition: color 0.2s;
+}
+
+.icon-toggle:hover {
+  color: #ffd580;
+}
+
+.hidden-toggle {
+  display: none;
+}
+
+.icon-toggle {
+  cursor: pointer;
+  font-size: 18px;
+  color: #ffa500;
+  display: flex;
+  align-items: center;
+  transition: color 0.2s;
+}
+
+.icon-toggle:hover {
+  color: #ffd580;
+}
+
+/* GLOBAL HIGHLIGHT ICON: toggle-on/off */
+.global-icon::before {
+  content: "\f204";
+  /* fa-toggle-off (default) */
+}
+
+#globalHighlightToggle:checked+.global-icon::before {
+  content: "\f205";
+  /* fa-toggle-on */
+}
+
+/* THEME ICON: sun/moon */
+.theme-icon::before {
+  content: "\f185";
+  /* fa-sun (light mode) */
+}
+
+#themeToggle:checked+.theme-icon::before {
+  content: "\f186";
+  /* fa-moon (dark mode) */
+}
+
+/* Font Awesome fallback settings */
+.toggle-icon {
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+}
+
+label:has(input.switch) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -12,15 +12,26 @@

 <body class="dark">
  <div class="container">
-    <h1><i class="fa-solid fa-marker"></i> <span data-i18n="extension_name">Goose Highlighter</span></h1>
+
+    <div class="header-bar">
+      <span class="title">
+        <i class="fa-solid fa-highlighter"></i> Goose Highlighter
+      </span>
+      <div class="icon-toggles">
+        <label class="icon-toggle" title="Toggle highlighting">
+          <input type="checkbox" class="hidden-toggle" id="globalHighlightToggle" />
+          <i class="toggle-icon global-icon fa-solid"></i>
+        </label>
+        <label class="icon-toggle" title="Toggle dark mode">
+          <input type="checkbox" class="hidden-toggle" id="themeToggle" />
+          <i class="toggle-icon theme-icon fa-solid"></i>
+        </label>
+      </div>
+    </div>

    <div class="section">
      <div class="section-header">
        <h2><i class="fa-solid fa-list"></i> <span data-i18n="highlight_lists">Highlight Lists</span></h2>
-        <label>
-          <input type="checkbox" id="themeToggle" />
-          <i class="fa-solid fa-moon"></i> <span data-i18n="dark_mode">Dark Mode</span>
-        </label>
      </div>
      <label for="listSelect" data-i18n="select_list">Select List:</label>
      <select id="listSelect"></select>
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -6,11 +6,11 @@ const listActive = document.getElementById("listActive");
 const bulkPaste = document.getElementById("bulkPaste");
 const wordList = document.getElementById("wordList");
 const importInput = document.getElementById("importInput");
-
 let lists = [];
 let currentListIndex = 0;
 let saveTimeout;
 let selectedCheckboxes = new Set();
+let globalHighlightEnabled = true;

 async function debouncedSave() {
  clearTimeout(saveTimeout);
@@ -20,7 +20,10 @@ async function debouncedSave() {
 }

 async function save() {
-  await chrome.storage.local.set({ lists });
+  await chrome.storage.local.set({
+    lists: lists,
+    globalHighlightEnabled: globalHighlightEnabled
+  });
  renderLists();
  renderWords();

@@ -28,14 +31,37 @@ async function save() {
    for (let tab of tabs) {
      if (tab.id) {
        chrome.tabs.sendMessage(tab.id, { type: "WORD_LIST_UPDATED" });
+        chrome.tabs.sendMessage(tab.id, {
+          type: "GLOBAL_TOGGLE_UPDATED",
+          enabled: globalHighlightEnabled
+        });
+      }
+    }
+  });
+}
+
+async function updateGlobalToggleState() {
+  await chrome.storage.local.set({ globalHighlightEnabled: globalHighlightEnabled });
+  chrome.tabs.query({}, function (tabs) {
+    for (let tab of tabs) {
+      if (tab.id) {
+        chrome.tabs.sendMessage(tab.id, {
+          type: "GLOBAL_TOGGLE_UPDATED",
+          enabled: globalHighlightEnabled
+        });
      }
    }
  });
 }

 async function load() {
-  const res = await chrome.storage.local.get("lists");
-  lists = res.lists || [];
+  const res = await chrome.storage.local.get({
+    lists: [],
+    globalHighlightEnabled: true
+  });
+  lists = res.lists;
+  globalHighlightEnabled = res.globalHighlightEnabled !== false; // Default to true if undefined
+
  if (!lists.length) {
    lists.push({
      id: Date.now(),
@@ -48,6 +74,8 @@ async function load() {
  }
  renderLists();
  renderWords();
+
+  document.getElementById("globalHighlightToggle").checked = globalHighlightEnabled;
 }

 function renderLists() {
@@ -179,6 +207,12 @@ document.addEventListener('DOMContentLoaded', () => {
    renderWords();
  };

+  // Add event listener for the global toggle
+  document.getElementById("globalHighlightToggle").addEventListener('change', function () {
+    globalHighlightEnabled = this.checked;
+    updateGlobalToggleState();
+  });
+
  wordList.addEventListener("change", e => {
    if (e.target.type === "checkbox") {
      if (e.target.dataset.index != null) {