[matrix] Add sans-serif font toggle to settings modal

* Add sans serif font toggle

* remove unnecessary boolean comparison from setFont

Co-authored-by: slice <ryaneft@gmail.com>

* Update checkbox title

Co-authored-by: slice <ryaneft@gmail.com>

* General cleanup of settings system

* Apply overflow hidden to modal

Co-authored-by: slice <ryaneft@gmail.com>

docs/_static/custom.js

@@ -3,7 +3,7 @@
 let activeModal = null;
 let activeLink = null;
 let bottomHeightThreshold, sections;
-let settings;
+let settingsModal;
 
 function closeModal(modal) {
   activeModal = null;
@@ -19,10 +19,29 @@ function openModal(modal) {
   modal.style.removeProperty('display');
 }
 
+function updateSetting(element) {
+  localStorage.setItem(element.name, element.checked);
+  if (element.name in settings) {
+    settings[element.name](element.checked);
+  }
+}
+
+function getBodyClassToggle(className) {
+  function toggleBodyClass(add) {
+    document.body.classList.toggle(className, add);
+  }
+  return toggleBodyClass;
+}
+
+const settings = {
+  useSansFont: getBodyClassToggle('sans')
+};
+
 document.addEventListener('DOMContentLoaded', () => {
+
   bottomHeightThreshold = document.documentElement.scrollHeight - 30;
   sections = document.querySelectorAll('div.section');
-  settings = document.querySelector('div#settings.modal')
+  settingsModal = document.querySelector('div#settings.modal')
 
   const tables = document.querySelectorAll('.py-attribute-table[data-move-to-id]');
   tables.forEach(table => {
@@ -31,6 +50,21 @@ document.addEventListener('DOMContentLoaded', () => {
     // insert ourselves after the element
     parent.insertBefore(table, element.nextSibling);
   });
+
+  Object.entries(settings).forEach(([name, setter]) => {
+    let value = JSON.parse(localStorage.getItem(name));
+
+    try {
+      setter(value);
+      let element = document.querySelector(`input[name=${name}]`);
+      if (element) {
+        element.checked = value === true;
+      }
+    } catch (error) {
+      console.error(`Failed to apply setting "${name}" With value:`, value);
+      console.error(error);
+    }
+  });
 });
 
 window.addEventListener('scroll', () => {