From 7a4986e27c84664b0fc5e2c3d7e97829e7e25084 Mon Sep 17 00:00:00 2001
From: throwaway96 <68320646+throwaway96@users.noreply.github.com>
Date: Thu, 28 Mar 2024 14:50:42 -0400
Subject: [PATCH 1/3] rename getConfigDesc() to configGetDesc()

All other functions exported by config.js have a "config" prefix.

There is also currently no need to export configOptions.
---
 src/config.js | 4 ++--
 src/ui.js     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/config.js b/src/config.js
index 49f9c485..a42be99c 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,6 +1,6 @@
 const CONFIG_KEY = 'ytaf-configuration';
 
-export const configOptions = new Map([
+const configOptions = new Map([
   ['enableAdBlock', { default: true, desc: 'Enable ad blocking' }],
   ['enableSponsorBlock', { default: true, desc: 'Enable SponsorBlock' }],
   [
@@ -63,7 +63,7 @@ function configExists(key) {
   return configOptions.has(key);
 }
 
-export function getConfigDesc(key) {
+export function configGetDesc(key) {
   if (!configExists(key)) {
     throw new Error('tried to get desc for unknown config key: ' + key);
   }
diff --git a/src/ui.js b/src/ui.js
index 16dcf4cc..544ef44c 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -1,7 +1,7 @@
 /*global navigate*/
 import './spatial-navigation-polyfill.js';
 import './ui.css';
-import { configRead, configWrite, getConfigDesc } from './config.js';
+import { configRead, configWrite, configGetDesc } from './config.js';
 
 // We handle key events ourselves.
 window.__spatialNavigation__.keyMode = 'NONE';
@@ -48,7 +48,7 @@ function createConfigCheckbox(key) {
   const elmLabel = document.createElement('label');
   elmLabel.appendChild(elmInput);
   // Use non-breaking space (U+00A0)
-  elmLabel.appendChild(document.createTextNode('\u00A0' + getConfigDesc(key)));
+  elmLabel.appendChild(document.createTextNode('\u00A0' + configGetDesc(key)));
 
   return elmLabel;
 }

From 711dd34e309a79f6b88f1d0d1bb53f83bd0109a0 Mon Sep 17 00:00:00 2001
From: throwaway96 <68320646+throwaway96@users.noreply.github.com>
Date: Wed, 27 Mar 2024 04:10:46 -0400
Subject: [PATCH 2/3] config.js: config change event listeners

---
 src/config.js | 42 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/config.js b/src/config.js
index a42be99c..3a6e976f 100644
--- a/src/config.js
+++ b/src/config.js
@@ -40,6 +40,15 @@ const defaultConfig = (() => {
   return ret;
 })();
 
+/** @type {Record<string, DocumentFragment>} as const */
+const configFrags = (() => {
+  let ret = {};
+  for (const k of configOptions.keys()) {
+    ret[k] = new DocumentFragment();
+  }
+  return ret;
+})();
+
 function loadStoredConfig() {
   const storage = window.localStorage.getItem(CONFIG_KEY);
 
@@ -95,7 +104,38 @@ export function configWrite(key, value) {
     throw new Error('tried to write unknown config key: ' + key);
   }
 
-  console.info('Setting key', key, 'to', value);
+  const oldValue =
+    localConfig[key] !== undefined ? localConfig[key] : defaultConfig[key];
+
+  console.info('Changing key', key, 'from', oldValue, 'to', value);
   localConfig[key] = value;
   window.localStorage[CONFIG_KEY] = JSON.stringify(localConfig);
+
+  configFrags[key].dispatchEvent(
+    new CustomEvent('ytafConfigChange', {
+      detail: { key, newValue: value, oldValue }
+    })
+  );
+}
+
+/**
+ * Add a listener for changes in the value of a specified config option
+ * @param {string} key Config option to monitor
+ * @param {(evt: Event) => void} callback Function to be called on change
+ */
+export function configAddChangeListener(key, callback) {
+  const frag = configFrags[key];
+
+  frag.addEventListener('ytafConfigChange', callback);
+}
+
+/**
+ * Remove a listener for changes in the value of a specified config option
+ * @param {string} key Config option to monitor
+ * @param {(evt: Event) => void} callback Function to be called on change
+ */
+export function configRemoveChangeListener(key, callback) {
+  const frag = configFrags[key];
+
+  frag.removeEventListener('ytafConfigChange', callback);
 }

From a8ed86be5ce7c4ee673609163cac69678ee9483f Mon Sep 17 00:00:00 2001
From: throwaway96 <68320646+throwaway96@users.noreply.github.com>
Date: Wed, 27 Mar 2024 04:21:10 -0400
Subject: [PATCH 3/3] automatic option panel UI update

---
 src/ui.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/ui.js b/src/ui.js
index 544ef44c..94e5ba01 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -41,8 +41,16 @@ function createConfigCheckbox(key) {
   const elmInput = document.createElement('input');
   elmInput.type = 'checkbox';
   elmInput.checked = configRead(key);
-  elmInput.addEventListener('change', (evt) => {
+
+  /** @type {(evt: Event) => void} */
+  const changeHandler = (evt) => {
     configWrite(key, evt.target.checked);
+  };
+
+  elmInput.addEventListener('change', changeHandler);
+
+  configAddChangeListener(key, (evt) => {
+    elmInput.checked = evt.detail.newValue;
   });
 
   const elmLabel = document.createElement('label');