README feature list updates: new mods + options

repo/core/enhancerMenu.js

@@ -403,10 +403,10 @@ window['__start'] = async () => {
     ).toString();
   function createOption(opt, id) {
     let $opt;
-    const description = opt.description
+    const desc = opt.desc
       ? question_icon.replace(
           '<svg',
-          `<svg data-tooltip="${opt.description.replace(/"/g, '&quot;')}"`
+          `<svg data-tooltip="${opt.desc.replace(/"/g, '&quot;')}"`
         )
       : '';
     switch (opt.type) {
@@ -415,16 +415,14 @@ window['__start'] = async () => {
           <input type="checkbox" id="${opt.type}_${id}--${opt.key}"
           ${store(id, { [opt.key]: opt.value })[opt.key] ? 'checked' : ''}/>
           <label for="${opt.type}_${id}--${opt.key}">
-            <span class="name">${opt.label}${description}</span>
+            <span class="name">${opt.label}${desc}</span>
             <span class="switch"><span class="dot"></span></span>
           </label>
         `;
         break;
       case 'select':
         $opt = `
-          <label for="${opt.type}_${id}--${opt.key}">${
+          <label for="${opt.type}_${id}--${opt.key}">${opt.label}${desc}</label>
-          opt.label
-        }${description}</label>
           <select id="${opt.type}_${id}--${opt.key}">
             ${opt.value
               .map((val) => `<option value="${val}">${val}</option>`)
@@ -434,9 +432,7 @@ window['__start'] = async () => {
         break;
       case 'input':
         $opt = `
-          <label for="${opt.type}_${id}--${opt.key}">${
+          <label for="${opt.type}_${id}--${opt.key}">${opt.label}${desc}</label>
-          opt.label
-        }${description}</label>
           <input type="${typeof value === 'number' ? 'number' : 'text'}" id="${
           opt.type
         }_${id}--${opt.key}">
@@ -444,7 +440,7 @@ window['__start'] = async () => {
         break;
       case 'color':
         $opt = `
-          <label for="${opt.type}_${id}--${opt.key}">${opt.label}${description}</label>
+          <label for="${opt.type}_${id}--${opt.key}">${opt.label}${desc}</label>
           <input type="button" id="${opt.type}_${id}--${opt.key}">
         `;
         break;
@@ -460,7 +456,7 @@ window['__start'] = async () => {
           }>
           <label for="${opt.type}_${id}--${opt.key}">
             <span class="label">
-              <span class="name">${opt.label}${description}</span>
+              <span class="name">${opt.label}${desc}</span>
               <button class="clear"></button>
             </span>
             <span class="choose">
@@ -639,25 +635,6 @@ window['__start'] = async () => {
     .forEach((checkbox) =>
       checkbox.addEventListener('click', (event) => event.target.blur())
     );
-  const $tooltip = document.querySelector('#tooltip');
-  document.querySelectorAll('[data-tooltip]').forEach((el) => {
-    el.addEventListener('mouseenter', (e) => {
-      $tooltip.innerText = el.getAttribute('data-tooltip');
-      $tooltip.classList.add('active');
-    });
-    el.addEventListener('mouseover', (e) => {
-      $tooltip.style.top = e.clientY - $tooltip.clientHeight + 'px';
-      $tooltip.style.left =
-        e.clientX < window.innerWidth / 2 ? e.clientX + 'px' : '';
-      $tooltip.style.right =
-        e.clientX > window.innerWidth / 2
-          ? window.innerWidth - e.clientX + 'px'
-          : '';
-    });
-    el.addEventListener('mouseleave', (e) =>
-      $tooltip.classList.remove('active')
-    );
-  });
   conflicts.check();
 
   // draggable re-ordering
@@ -750,4 +727,24 @@ window['__start'] = async () => {
       .forEach((input) => (input.disabled = draggable.state));
     search();
   });
+
+  const $tooltip = document.querySelector('#tooltip');
+  document.querySelectorAll('[data-tooltip]').forEach((el) => {
+    el.addEventListener('mouseenter', (e) => {
+      $tooltip.innerText = el.getAttribute('data-tooltip');
+      $tooltip.classList.add('active');
+    });
+    el.addEventListener('mouseover', (e) => {
+      $tooltip.style.top = e.clientY - $tooltip.clientHeight + 'px';
+      $tooltip.style.left =
+        e.clientX < window.innerWidth / 2 ? e.clientX + 'px' : '';
+      $tooltip.style.right =
+        e.clientX > window.innerWidth / 2
+          ? window.innerWidth - e.clientX + 'px'
+          : '';
+    });
+    el.addEventListener('mouseleave', (e) =>
+      $tooltip.classList.remove('active')
+    );
+  });
 };

repo/core/mod.js

@@ -18,7 +18,7 @@ module.exports = {
     {
       key: 'autoresolve',
       label: 'auto-resolve theme conflicts',
-      description:
+      desc:
         'when a theme is enabled any other themes of the same mode (light/dark) will be disabled.',
       type: 'toggle',
       value: false,
@@ -26,7 +26,7 @@ module.exports = {
     {
       key: 'openhidden',
       label: 'hide app on open',
-      description:
+      desc:
         'app can be made visible by clicking the tray icon or using the hotkey.',
       type: 'toggle',
       value: false,
@@ -34,7 +34,7 @@ module.exports = {
     {
       key: 'maximized',
       label: 'auto-maximise windows',
-      description:
+      desc:
         'whenever a window is un-hidden or is created it will be maximised.',
       type: 'toggle',
       value: false,
@@ -42,7 +42,7 @@ module.exports = {
     {
       key: 'close_to_tray',
       label: 'close window to the tray',
-      description: `pressing the × close button will hide the app instead of quitting it.\
+      desc: `pressing the × close button will hide the app instead of quitting it.\
         it can be re-shown by clicking the tray icon or using the hotkey.`,
       type: 'toggle',
       value: true,
@@ -53,7 +53,7 @@ module.exports = {
     {
       key: 'frameless',
       label: 'integrated titlebar',
-      description: `replace the native titlebar with buttons inset into the app.`,
+      desc: `replace the native titlebar with buttons inset into the app.`,
       type: 'toggle',
       value: true,
       platformOverwrite: {
@@ -63,7 +63,7 @@ module.exports = {
     {
       key: 'tiling_mode',
       label: 'tiling window manager mode',
-      description: `completely remove the close/minimise/maximise buttons -
+      desc: `completely remove the close/minimise/maximise buttons -
         this is for a special type of window manager. if you don't understand it, don't use it.`,
       type: 'toggle',
       value: false,
@@ -71,22 +71,21 @@ module.exports = {
     {
       key: 'hotkey',
       label: 'window display hotkey:',
-      description: 'used to toggle hiding/showing all app windows.',
+      desc: 'used to toggle hiding/showing all app windows.',
       type: 'input',
       value: 'CommandOrControl+Shift+A',
     },
     {
       key: 'menu_toggle',
       label: 'open enhancements menu hotkey:',
-      description:
+      desc: 'used to toggle opening/closing this menu while notion is focused.',
-        'used to toggle opening/closing this menu while notion is focused.',
       type: 'input',
       value: 'Alt+E',
     },
     {
       key: 'default_page',
       label: 'default page id/url:',
-      description: `every new tab/window that isn't opening a url via the notion://\
+      desc: `every new tab/window that isn't opening a url via the notion://\
         protocol will load this page. to get a page link from within the app,\
         go to the triple-dot menu and click "copy link".\
         leave blank to just load the last page you opened.`,

repo/focus-mode/mod.js

@@ -19,8 +19,8 @@ module.exports = {
     {
       key: 'padded',
       label: 'add padding to bottom of the page',
-      description: `will only take effect when the sidebar is hidden. aims to make the canvas\
+      desc: `will only take effect when the sidebar is hidden. aims to make the canvas\
-        as symmetrical/consistent as possible: if there is empty space on 3 sides, the 4th should follow.z`,
+        as symmetrical/consistent as possible: if there is empty space on 3 sides, the 4th should follow.`,
       type: 'toggle',
       value: true,
     },

repo/tweaks/mod.js

@@ -18,7 +18,7 @@ module.exports = {
     {
       key: 'dragarea_height',
       label: 'height of frameless dragarea:',
-      description: `the rectangle added at the top of a window in "integrated titlebar" mode,\
+      desc: `the rectangle added at the top of a window in "integrated titlebar" mode,\
         used to drag/move the window.`,
       type: 'input',
       value: 15,
@@ -29,7 +29,7 @@ module.exports = {
     {
       key: 'responsive_breakpoint',
       label: 'width to wrap columns at:',
-      description: `the size in pixels below which in-page columns are resized to appear\
+      desc: `the size in pixels below which in-page columns are resized to appear\
         full width so content isn't squished.`,
       type: 'input',
       value: 600,
@@ -37,7 +37,7 @@ module.exports = {
     {
       key: 'smooth_scrollbars',
       label: 'integrated scrollbars',
-      description:
+      desc:
         "use scrollbars that fit better into notion's ui instead of the default chrome ones.",
       type: 'toggle',
       value: true,