From 0734bf330824c60f0d5c4784e99660b9e652efd6 Mon Sep 17 00:00:00 2001
From: Daniel Dada <doesdeos@gmail.com>
Date: Wed, 8 Oct 2025 14:33:28 +0300
Subject: [PATCH] fix: do not save anything in list settings section until
 presses the apply button

---
 popup/popup.html             |  1 +
 src/popup/PopupController.ts | 41 +++++++++++++++---------------------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/popup/popup.html b/popup/popup.html
index 5e2e619..6950a99 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -90,6 +90,7 @@
           <span data-i18n="enable_highlight">Enable Highlighting</span>
           <input type="checkbox" class="switch" id="listActive" />
         </label>
+        <button id="applyListSettingsBtn"><i class="fa-solid fa-check"></i> <span data-i18n="apply">Apply</span></button>
       </div>
     </div>
 
diff --git a/src/popup/PopupController.ts b/src/popup/PopupController.ts
index 3b83ba3..3cb0880 100644
--- a/src/popup/PopupController.ts
+++ b/src/popup/PopupController.ts
@@ -132,10 +132,6 @@ export class PopupController {
 
   private setupListManagement(): void {
     const listSelect = document.getElementById('listSelect') as HTMLSelectElement;
-    const listName = document.getElementById('listName') as HTMLInputElement;
-    const listBg = document.getElementById('listBg') as HTMLInputElement;
-    const listFg = document.getElementById('listFg') as HTMLInputElement;
-    const listActive = document.getElementById('listActive') as HTMLInputElement;
 
     listSelect.addEventListener('change', () => {
       this.selectedCheckboxes.clear();
@@ -144,26 +140,9 @@ export class PopupController {
       this.updateListForm();
     });
 
-    listName.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') {
-        this.lists[this.currentListIndex].name = listName.value;
-        this.save();
-      }
-    });
-
-    listBg.addEventListener('input', () => {
-      this.lists[this.currentListIndex].background = listBg.value;
-      this.save();
-    });
-
-    listFg.addEventListener('input', () => {
-      this.lists[this.currentListIndex].foreground = listFg.value;
-      this.save();
-    });
-
-    listActive.addEventListener('change', () => {
-      this.lists[this.currentListIndex].active = listActive.checked;
-      this.save();
+    // Apply button for list settings
+    document.getElementById('applyListSettingsBtn')?.addEventListener('click', () => {
+      this.applyListSettings();
     });
 
     document.getElementById('newListBtn')?.addEventListener('click', () => {
@@ -465,6 +444,20 @@ export class PopupController {
     });
   }
 
+  private applyListSettings(): void {
+    const listName = document.getElementById('listName') as HTMLInputElement;
+    const listBg = document.getElementById('listBg') as HTMLInputElement;
+    const listFg = document.getElementById('listFg') as HTMLInputElement;
+    const listActive = document.getElementById('listActive') as HTMLInputElement;
+
+    this.lists[this.currentListIndex].name = listName.value;
+    this.lists[this.currentListIndex].background = listBg.value;
+    this.lists[this.currentListIndex].foreground = listFg.value;
+    this.lists[this.currentListIndex].active = listActive.checked;
+
+    this.save();
+  }
+
   private async save(): Promise<void> {
     await StorageService.set({
       lists: this.lists,