feat: add collapsible sections

_locales/de/messages.json

@@ -115,5 +115,8 @@
   },
   "confirm_clear_exceptions": {
     "message": "Möchten Sie wirklich alle Ausnahmen löschen?"
+  },
+  "remove": {
+    "message": "Entfernen"
   }
 }

_locales/en/messages.json

@@ -121,5 +121,8 @@
   },
   "confirm_clear_exceptions": {
     "message": "Are you sure you want to clear all exceptions?"
+  },
+  "remove": {
+    "message": "Remove"
   }
 }

_locales/es/messages.json

@@ -121,5 +121,8 @@
   },
   "confirm_clear_exceptions": {
     "message": "¿Estás seguro de que deseas limpiar todas las excepciones?"
+  },
+  "remove": {
+    "message": "Eliminar"
   }
 }

_locales/fr/messages.json

@@ -121,5 +121,8 @@
     },
     "confirm_clear_exceptions": {
         "message": "Êtes-vous sûr de vouloir effacer toutes les exceptions ?"
+    },
+    "remove": {
+        "message": "Supprimer"
     }
 }

_locales/hi/messages.json

@@ -121,5 +121,8 @@
     },
     "confirm_clear_exceptions": {
         "message": "क्या आप वाकई सभी अपवादों को साफ करना चाहते हैं?"
+    },
+    "remove": {
+        "message": "हटाएं"
     }
 }

_locales/it/messages.json

@@ -121,5 +121,8 @@
     },
     "confirm_clear_exceptions": {
         "message": "Sei sicuro di voler cancellare tutte le eccezioni?"
+    },
+    "remove": {
+        "message": "Rimuovi"
     }
 }

_locales/ja/messages.json

@@ -121,5 +121,8 @@
     },
     "confirm_clear_exceptions": {
         "message": "すべての例外をクリアしてもよろしいですか？"
+    },
+    "remove": {
+        "message": "削除"
     }
 }

_locales/ko/messages.json

@@ -121,5 +121,8 @@
     },
     "confirm_clear_exceptions": {
         "message": "모든 예외를 지우시겠습니까?"
+    },
+    "remove": {
+        "message": "제거"
     }
 }

_locales/nl/messages.json

@@ -121,5 +121,8 @@
   },
   "confirm_clear_exceptions": {
     "message": "Weet je zeker dat je alle uitzonderingen wilt wissen?"
+  },
+  "remove": {
+    "message": "Verwijderen"
   }
 }

_locales/pl/messages.json

@@ -121,5 +121,8 @@
   },
   "confirm_clear_exceptions": {
     "message": "Czy na pewno chcesz wyczyścić wszystkie wyjątki?"
+  },
+  "remove": {
+    "message": "Usuń"
   }
 }

_locales/pt_BR/messages.json

@@ -115,5 +115,8 @@
   },
   "confirm_clear_exceptions": {
     "message": "Tem certeza de que deseja limpar todas as exceções?"
+  },
+  "remove": {
+    "message": "Remover"
   }
 }

_locales/ru/messages.json

@@ -121,5 +121,8 @@
   },
   "confirm_clear_exceptions": {
     "message": "Вы уверены, что хотите очистить все исключения?"
+  },
+  "remove": {
+    "message": "Удалить"
   }
 }

_locales/tr/messages.json

@@ -121,5 +121,8 @@
   },
   "confirm_clear_exceptions": {
     "message": "Tüm istisnaları temizlemek istediğinizden emin misiniz?"
+  },
+  "remove": {
+    "message": "Kaldır"
   }
 }

_locales/zh_CN/messages.json

@@ -121,5 +121,8 @@
   },
   "confirm_clear_exceptions": {
     "message": "您确定要清除所有例外吗？"
+  },
+  "remove": {
+    "message": "移除"
   }
 }

popup/popup.css

@@ -80,6 +80,7 @@ h1 {
   border-radius: var(--border-radius);
   padding: 14px;
   box-shadow: var(--shadow);
+  transition: all 0.2s ease;
 }
 
 .section-header {
@@ -87,6 +88,60 @@ h1 {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
+  cursor: pointer;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.section-header:hover {
+  background: var(--highlight-tag);
+  border-radius: 6px;
+  transition: background 0.2s ease;
+}
+
+.collapse-toggle {
+  background: none !important;
+  border: none !important;
+  color: var(--text-color) !important;
+  padding: 4px !important;
+  margin: 0 !important;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.collapse-toggle:hover {
+  background: var(--button-hover) !important;
+  color: var(--accent) !important;
+}
+
+.collapse-toggle i {
+  transition: transform 0.2s ease;
+  font-size: 0.8em;
+}
+
+.section.collapsed .collapse-toggle i {
+  transform: rotate(180deg);
+}
+
+.section-content {
+  overflow: hidden;
+  max-height: 2000px;
+}
+
+.section.collapsed .section-content {
+  max-height: 0;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.section.collapsed .section-header {
+  margin-bottom: 0;
 }
 
 .section h2 {
@@ -96,6 +151,7 @@ h1 {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex: 1;
 }
 
 input[type="text"],

popup/popup.html

@@ -29,10 +29,14 @@
       </div>
     </div>
 
-    <div class="section">
+    <div class="section" data-section="exceptions">
       <div class="section-header">
         <h2><i class="fa-solid fa-ban"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h2>
+        <button class="collapse-toggle" data-target="exceptions">
+          <i class="fa-solid fa-chevron-up"></i>
+        </button>
       </div>
+      <div class="section-content" id="exceptions-content">
         <div class="button-row">
           <button id="toggleExceptionBtn"><i class="fa-solid fa-ban"></i> <span id="exceptionBtnText" data-i18n="add_exception">Add to Exceptions</span></button>
           <button id="manageExceptionsBtn"><i class="fa-solid fa-list"></i> <span data-i18n="manage_exceptions">Manage</span></button>
@@ -43,11 +47,16 @@
           <button id="clearExceptionsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span data-i18n="clear_all">Clear All</span></button>
         </div>
       </div>
+    </div>
 
-    <div class="section">
+    <div class="section" data-section="lists">
       <div class="section-header">
         <h2><i class="fa-solid fa-list"></i> <span data-i18n="highlight_lists">Highlight Lists</span></h2>
+        <button class="collapse-toggle" data-target="lists">
+          <i class="fa-solid fa-chevron-up"></i>
+        </button>
       </div>
+      <div class="section-content" id="lists-content">
         <label for="listSelect" data-i18n="select_list">Select List:</label>
         <select id="listSelect"></select>
         <div class="button-row">
@@ -56,9 +65,16 @@
               data-i18n="delete_list">Delete</span></button>
         </div>
       </div>
+    </div>
 
-    <div class="section">
+    <div class="section" data-section="settings">
+      <div class="section-header">
         <h2><i class="fa-solid fa-gear"></i> <span data-i18n="list_settings">List Settings</span></h2>
+        <button class="collapse-toggle" data-target="settings">
+          <i class="fa-solid fa-chevron-up"></i>
+        </button>
+      </div>
+      <div class="section-content" id="settings-content">
         <label><span data-i18n="list_name">List Name:</span> <input type="text" id="listName" /></label>
         <div class="color-row">
           <div class="color-label">
@@ -75,16 +91,30 @@
           <input type="checkbox" class="switch" id="listActive" />
         </label>
       </div>
+    </div>
 
-    <div class="section">
+    <div class="section" data-section="addwords">
+      <div class="section-header">
         <h2><i class="fa-solid fa-pen"></i> <span data-i18n="add_words">Add Words</span></h2>
+        <button class="collapse-toggle" data-target="addwords">
+          <i class="fa-solid fa-chevron-up"></i>
+        </button>
+      </div>
+      <div class="section-content" id="addwords-content">
         <textarea id="bulkPaste" data-i18n="paste_hint" placeholder="Paste words here..."></textarea>
         <button id="addWordsBtn"><span data-i18n="apply_paste">Add Words</span></button>
       </div>
+    </div>
 
-    <div class="section">
+    <div class="section" data-section="wordlist">
+      <div class="section-header">
         <h2><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span>(<span id="wordCount">0</span>)
         </h2>
+        <button class="collapse-toggle" data-target="wordlist">
+          <i class="fa-solid fa-chevron-up"></i>
+        </button>
+      </div>
+      <div class="section-content" id="wordlist-content">
         <div class="button-row wrap">
           <button id="selectAllBtn"><span data-i18n="select_all">Select All</span></button>
           <button id="deselectAllBtn"><span data-i18n="deselect_all">Clear</span></button>
@@ -95,9 +125,16 @@
         <input type="text" id="wordSearch" data-i18n="search_placeholder" placeholder="Search..." />
         <div id="wordList"></div>
       </div>
+    </div>
 
-    <div class="section">
+    <div class="section" data-section="options">
+      <div class="section-header">
         <h2><i class="fa-solid fa-sliders"></i> <span data-i18n="options">Options</span></h2>
+        <button class="collapse-toggle" data-target="options">
+          <i class="fa-solid fa-chevron-up"></i>
+        </button>
+      </div>
+      <div class="section-content" id="options-content">
         <div class="button-row" style="margin-bottom:8px;">
           <label><input type="checkbox" id="matchCase" /> <span data-i18n="match_case">Match Case</span></label>
           <label><input type="checkbox" id="matchWhole" /> <span data-i18n="match_whole">Match Whole Word</span></label>
@@ -109,6 +146,7 @@
         </div>
       </div>
     </div>
+  </div>
 
   <script src="../storage.js"></script>
   <script src="popup.js"></script>

popup/popup.js

@@ -17,6 +17,51 @@ let matchCaseEnabled = false;
 let matchWholeEnabled = false;
 let exceptionsList = [];
 let currentTabHost = '';
+let sectionStates = {};
+
+function loadSectionStates() {
+  const saved = localStorage.getItem('goose-highlighter-section-states');
+  if (saved) {
+    try {
+      sectionStates = JSON.parse(saved);
+    } catch {
+      sectionStates = {};
+    }
+  }
+}
+
+function saveSectionStates() {
+  localStorage.setItem('goose-highlighter-section-states', JSON.stringify(sectionStates));
+}
+
+function toggleSection(sectionName) {
+  const section = document.querySelector(`[data-section="${sectionName}"]`);
+  if (!section) return;
+  
+  const isCollapsed = section.classList.contains('collapsed');
+  
+  if (isCollapsed) {
+    section.classList.remove('collapsed');
+    sectionStates[sectionName] = false;
+  } else {
+    section.classList.add('collapsed');
+    sectionStates[sectionName] = true;
+  }
+  
+  saveSectionStates();
+}
+
+function initializeSectionStates() {
+  loadSectionStates();
+  
+  // Apply saved states
+  Object.keys(sectionStates).forEach(sectionName => {
+    const section = document.querySelector(`[data-section="${sectionName}"]`);
+    if (section && sectionStates[sectionName]) {
+      section.classList.add('collapsed');
+    }
+  });
+}
 
 function escapeHtml(str) {
   return str.replace(/[&<>"']/g, function (m) {
@@ -278,13 +323,39 @@ function renderExceptions() {
   container.innerHTML = exceptionsList.map(domain => 
     `<div class="exception-item">
       <span class="exception-domain">${escapeHtml(domain)}</span>
-      <button class="exception-remove" data-domain="${escapeHtml(domain)}">Remove</button>
+      <button class="exception-remove" data-domain="${escapeHtml(domain)}">${chrome.i18n.getMessage('remove')}</button>
     </div>`
   ).join('');
 }
 
 document.addEventListener('DOMContentLoaded', () => {
+  initializeSectionStates();
   localizePage();
+  
+  // Add event listeners for collapse toggles
+  document.querySelectorAll('.collapse-toggle').forEach(button => {
+    button.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const targetSection = button.getAttribute('data-target');
+      toggleSection(targetSection);
+    });
+  });
+  
+  // Also allow clicking section headers to toggle
+  document.querySelectorAll('.section-header').forEach(header => {
+    header.addEventListener('click', (e) => {
+      // Don't toggle if clicking on a button or input within the header
+      if (e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT' || e.target.closest('button')) {
+        return;
+      }
+      const section = header.closest('.section');
+      const sectionName = section.getAttribute('data-section');
+      if (sectionName) {
+        toggleSection(sectionName);
+      }
+    });
+  });
+
   document.getElementById('selectAllBtn').onclick = () => {
     const list = lists[currentListIndex];
     list.words.forEach((_, index) => {