working menu search

mods/core/css/menu.css

@@ -22,11 +22,10 @@
   word-break: break-word;
   text-decoration: none;
   text-size-adjust: 100%;
+  color: var(--theme_local--text);
+  font-family: var(--theme_local--font_sans);
   outline-color: var(--theme_local--card-border);
 }
-*:active {
-  outline: none;
-}
 html,
 body {
   width: 100%;
@@ -65,12 +64,6 @@ main section {
 
 /* inline formatting */
 
-body,
-button {
-  color: var(--theme_local--text);
-  font-family: var(--theme_local--font_sans);
-}
-
 code {
   border-radius: 0.1em;
   padding: 0.2em 0.4em;
@@ -174,6 +167,62 @@ s {
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
+/* search */
+
+#search {
+  position: relative;
+  margin-bottom: 0.75em;
+}
+
+#search > svg {
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  top: 1.3em;
+  left: 1em;
+}
+#search > svg path {
+  fill: var(--theme_local--text_ui_info);
+}
+#search > input {
+  width: 100%;
+  padding: 1em 1.4em 1em 2.8em;
+  font: 1em var(--font);
+  background: var(--theme_local--card);
+  border: 1px solid var(--theme_local--table-border);
+  color: var(--theme_local--text);
+  border-radius: 2px;
+}
+#search > input::placeholder {
+  font-weight: bold;
+  color: var(--theme_local--text_ui_info);
+}
+#search > input:focus {
+  box-shadow: var(--theme_local--table-border) 0.04em 0.04em,
+    var(--theme_local--table-border) -0.04em -0.04em,
+    var(--theme_local--table-border) -0.04em 0.04em,
+    var(--theme_local--table-border) 0.04em -0.04em;
+  outline: none;
+}
+
+#search #tags > span {
+  cursor: pointer;
+  display: inline-block;
+  font-size: 0.8em;
+  padding: 0.2em 0.5em;
+  margin-top: 0.5em;
+  background: var(--theme_local--card);
+  border-radius: 2px;
+  transition: background 200ms;
+  user-select: none;
+}
+#search #tags > span:not(:last-child) {
+  margin-right: 0.5em;
+}
+#search #tags > .selected {
+  background: var(--tag_colour, var(--theme_local--primary_click));
+}
+
 /* module meta */
 
 #modules section {
@@ -193,13 +242,21 @@ s {
   font-size: 1rem;
 }
 
-/* #modules section .meta .toggle input + label .switch:before {
+/* #modules section .meta .toggle input + label .switch::before {
   background: linear-gradient(
     90deg,
     var(--theme_local--text_green),
     var(--theme_local--bg_green)
   );
+}
+#modules section .meta .toggle input + label .switch {
+  background: linear-gradient(
+    90deg,
+    var(--theme_local--text_red),
+    var(--theme_local--bg_red)
+  );
 } */
+
 #modules section .desc {
   margin: 0.3em 0 0.4em 0;
   font-size: 0.9em;
@@ -293,7 +350,10 @@ s {
 }
 .file input[type='file'],
 .toggle input[type='checkbox'] {
-  display: none;
+  opacity: 0;
+  width: 0.1px;
+  height: 0.1px;
+  position: fixed;
 }
 
 .input input[type='text'],
@@ -344,6 +404,7 @@ s {
   width: 2em;
   background: var(--theme_local--main);
   border-radius: 5px;
+  transition: background 300ms;
 }
 .toggle input[type='checkbox'] + label .switch::before {
   content: '';
@@ -372,6 +433,13 @@ s {
   background: var(--theme_local--todo_ticked-fill);
   box-shadow: 2px 1px 4px var(--theme_local--table-border);
 }
+.toggle input[type='checkbox']:checked:focus + label .switch {
+  background: none !important;
+}
+.toggle input[type='checkbox']:focus + label .switch::before,
+.toggle input[type='checkbox']:focus + label .switch .dot {
+  border: 1px solid var(--theme_local--card-border);
+}
 .toggle input[type='checkbox']:checked + label {
   --menu--toggle_offset: 1em;
   --menu--toggle_opacity: 1;

mods/core/menu.html

@@ -11,6 +11,15 @@
     <header id="menu-titlebar"></header>
     <main>
       <div id="alerts"></div>
+      <div id="search">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path
+            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+          ></path>
+        </svg>
+        <input type="text" placeholder="search ('/' to focus)" />
+        <div id="tags"></div>
+      </div>
       <div id="modules"></div>
     </main>
     <script>

mods/core/menu.js

@@ -20,6 +20,25 @@ window['__start'] = async () => {
   document.defaultView.addEventListener('keyup', (event) => {
     if (event.code === 'F5') window.reload();
     if ((event.ctrlKey || event.metaKey) && event.key === 'e') browser.close();
+    if (!(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey) {
+      if (
+        document.activeElement.parentElement.id === 'tags' &&
+        event.key === 'Enter'
+      )
+        document.activeElement.click();
+      if (document.activeElement.tagName.toLowerCase() === 'input') {
+        if (document.activeElement.type === 'checkbox' && event.key === 'Enter')
+          document.activeElement.checked = !document.activeElement.checked;
+        if (
+          ['Escape', 'Enter'].includes(event.key) &&
+          document.activeElement.type !== 'checkbox' &&
+          (document.activeElement.parentElement.id !== 'search' ||
+            event.key === 'Escape')
+        )
+          document.activeElement.blur();
+      } else if (event.key === '/')
+        document.querySelector('#search > input').focus();
+    }
   });
 
   electron.ipcRenderer.on('enhancer:set-theme', (event, theme) => {
@@ -34,7 +53,8 @@ window['__start'] = async () => {
     return template.content.firstElementChild;
   }
   function createAlert(type, message) {
-    if (!type) throw Error('<notion-enhancer>: no alert type specified');
+    if (!type)
+      throw Error('<notion-enhancer> @ createAlert: no alert type specified');
     const el = createElement(`
       <section class="${type}" role="alert">
         <p>${message}</p>
@@ -110,6 +130,70 @@ window['__start'] = async () => {
     ).append();
   }
 
+  // search
+  const search_query = {
+    enabled: true,
+    disabled: true,
+    tags: new Set(
+      modules.loaded
+        .map((mod) => mod.tags)
+        .flat()
+        .sort()
+    ),
+  };
+  function search() {
+    modules.loaded.forEach((mod) => {
+      const $search_input = document.querySelector('#search > input');
+      if (
+        (mod.elem.classList.contains('enabled') && !search_query.enabled) ||
+        (mod.elem.classList.contains('disabled') && !search_query.disabled) ||
+        !mod.tags.some((tag) => search_query.tags.has(tag)) ||
+        ($search_input.value &&
+          !(
+            mod.name +
+            mod.tags.map((tag) => `#${tag}`).join(' ') +
+            mod.desc
+          ).includes($search_input.value))
+      )
+        return (mod.elem.style.display = 'none');
+      mod.elem.style.display = 'block';
+    });
+  }
+  document.querySelector('#search > input').addEventListener('input', search);
+
+  function createTag(tagname, onclick, colour) {
+    if (!tagname)
+      throw Error('<notion-enhancer> @ createTag: no tagname specified');
+    if (!onclick)
+      throw Error('<notion-enhancer> @ createTag: no action specified');
+    const el = createElement(
+      `<span class="selected" ${
+        colour ? `style="--tag_colour: ${colour}" ` : ''
+      }tabindex="0">${tagname}</span>`
+    );
+    document.querySelector('#tags').append(el);
+    el.addEventListener('click', (event) => {
+      el.className = el.className === 'selected' ? '' : 'selected';
+      onclick(el.className === 'selected');
+    });
+    return el;
+  }
+  createTag(
+    'enabled',
+    (state) => [(search_query.enabled = state), search()],
+    'var(--theme_local--bg_green)'
+  );
+  createTag(
+    'disabled',
+    (state) => [(search_query.disabled = state), search()],
+    'var(--theme_local--bg_red)'
+  );
+  for (let tag of search_query.tags)
+    createTag(`#${tag}`, (state) => [
+      state ? search_query.tags.add(tag) : search_query.tags.delete(tag),
+      search(),
+    ]);
+
   // mod info + options
   function markdown(string) {
     const parsed = string
@@ -135,7 +219,7 @@ window['__start'] = async () => {
           // ![image_title](source)
           .replace(
             /([^\\])?\!\[([^\]]*[^\\\]]?)\]\(([^)]*[^\\)])\)/g,
-            '$1<img alt="$2" src="$3">'
+            `$1<img alt="$2" src="$3" onerror="this.outerHTML=''">`
           )
           // [link](destination)
           .replace(
@@ -195,7 +279,9 @@ window['__start'] = async () => {
           <div class="desc">${markdown(mod.desc)}</div>
           <p>
             <a href="https://github.com/${mod.author}" class="author">
-              <img src="https://github.com/${mod.author}.png">
+              <img src="https://github.com/${
+                mod.author
+              }.png" onerror="this.src='./icons/user.png'">
               ${mod.author}
             </a>
             <span class="version">v${mod.version}</span>
@@ -211,6 +297,7 @@ window['__start'] = async () => {
       $enable.addEventListener('click', (event) => {
         menuStore[mod.id].enabled = $enable.checked;
         mod.elem.className = menuStore[mod.id].enabled ? 'enabled' : 'disabled';
+        search();
       });
 
     const $options = mod.elem.querySelector('.options');
@@ -326,4 +413,10 @@ window['__start'] = async () => {
       }
     $modules.append(mod.elem);
   }
+
+  document
+    .querySelectorAll('input[type="checkbox"]')
+    .forEach((checkbox) =>
+      checkbox.addEventListener('click', (event) => event.target.blur())
+    );
 };

mods/core/mod.js

@@ -8,9 +8,9 @@
 
 module.exports = {
   id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082',
-  tags: ['core', 'extension'],
+  tags: ['core'],
   name: 'notion-enhancer core',
-  desc: 'what makes this whole thing possible: cli, modloader, menu, & tray.',
+  desc: 'the cli, modloader, menu, & tray.',
   version: require('../../package.json').version,
   author: 'dragonwocky',
   options: [

mods/custom-inserts/mod.js

@@ -10,7 +10,7 @@ module.exports = {
   id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb',
   tags: ['extension'],
   name: 'custom inserts',
-  desc: 'directly link files for small client-side tweaks.',
+  desc: 'link files for small client-side tweaks.',
   version: '0.0.2',
   author: 'dragonwocky',
   options: [
@@ -27,4 +27,31 @@ module.exports = {
       extensions: ['js'],
     },
   ],
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      const fs = require('fs-extra');
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        if (store().css) {
+          try {
+            const style = document.createElement('style');
+            style.type = 'text/css';
+            style.innerHTML = fs.readFileSync(store().css);
+            document.querySelector('head').appendChild(style);
+          } catch (err) {
+            console.warn('<custom-inserts> invalid css file... unsetting.');
+            store().css = '';
+          }
+        }
+        if (store().js) {
+          try {
+            require(store().js);
+          } catch (err) {
+            console.warn('<custom-inserts> invalid js file... unsetting.');
+            store().js = '';
+          }
+        }
+      });
+    },
+  },
 };