fix: do not save anything in list settings section until presses the apply button

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>
 

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) => {
+    // Apply button for list settings
-      if (e.key === 'Enter') {
+    document.getElementById('applyListSettingsBtn')?.addEventListener('click', () => {
-        this.lists[this.currentListIndex].name = listName.value;
+      this.applyListSettings();
-        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();
     });
 
     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,