re-orderable mods: order is saved + mods are loaded according to priority

repo/core/css/menu.css

@@ -231,7 +231,7 @@ s {
   background: var(--theme--option-background);
   color: var(--theme--option-color);
   border-radius: 2px;
-  transition: color 200ms, background 200ms;
+  transition: color 200ms, background 200ms, opacity 200ms;
   user-select: none;
 }
 #search #tags > span:not(:last-child) {
@@ -618,37 +618,38 @@ s {
   font-weight: bold;
 }
 
-#modules.reorder section {
+.reorder #search #tags > span,
-  margin-bottom: 0.4em;
+.reorder #search #tags > span:hover {
+  opacity: 0.7;
+  background: var(--theme--option-background);
 }
-#modules.reorder [draggable] {
+.reorder #search #tags > .selected,
-  margin-bottom: 1.15em;
+.reorder #search #tags > .selected:hover {
+  background: var(--tag_color, var(--theme--option_active-background));
 }
-#modules.reorder [draggable]::after {
+
+.reorder #modules .dragged-over::after {
   content: '';
-  height: 0.3em;
+  height: 0.25em;
   width: 99%;
   position: absolute;
-  margin: 0.5em 0;
+  margin: 0.3em 0;
   opacity: 0.7;
-  background: var(--theme--table-border);
-}
-#modules.reorder [draggable].dragged-over::after {
   background: var(--theme--selected);
 }
 
-#modules.reorder .switch,
+.reorder #modules .switch,
-#modules.reorder .tags,
+.reorder #modules .tags,
-#modules.reorder .desc,
+.reorder #modules .desc,
-#modules.reorder .options,
+.reorder #modules .options,
-#modules.reorder .author,
+.reorder #modules .author,
-#modules.reorder .version {
+.reorder #modules .version {
   display: none;
 }
-#modules.reorder label {
+.reorder #modules label {
   cursor: pointer;
 }
-#modules.reorder label::before {
+.reorder #modules label::before {
   content: '::';
   margin-right: 0.4em;
   color: var(--theme--text_ui);

repo/core/menu.js

@@ -7,12 +7,10 @@
 'use strict';
 
 const store = require('../../pkg/store.js'),
-  { id } = require('./mod.js'),
   helpers = require('../../pkg/helpers.js'),
   fs = require('fs-extra'),
   path = require('path'),
-  electron = require('electron'),
+  electron = require('electron');
-  browser = electron.remote.getCurrentWindow();
 
 window['__start'] = async () => {
   const buttons = require('./buttons.js')(() => ({
@@ -197,13 +195,15 @@ window['__start'] = async () => {
     modules.loaded.forEach((mod) => {
       const $search_input = document.querySelector('#search > input');
       if (
-        (mod.elem.classList.contains('enabled') && !search_filters.enabled) ||
+        !document.body.classList.contains('reorder') &&
-        (mod.elem.classList.contains('disabled') && !search_filters.disabled) ||
+        ((mod.elem.classList.contains('enabled') && !search_filters.enabled) ||
-        !mod.tags.some((tag) => search_filters.tags.has(tag)) ||
+          (mod.elem.classList.contains('disabled') &&
-        ($search_input.value &&
+            !search_filters.disabled) ||
-          !innerText(mod.elem)
+          !mod.tags.some((tag) => search_filters.tags.has(tag)) ||
-            .toLowerCase()
+          ($search_input.value &&
-            .includes($search_input.value.toLowerCase().trim()))
+            !innerText(mod.elem)
+              .toLowerCase()
+              .includes($search_input.value.toLowerCase().trim())))
       )
         return (mod.elem.style.display = 'none');
       mod.elem.style.display = 'block';
@@ -223,21 +223,20 @@ window['__start'] = async () => {
     );
     document.querySelector('#tags').append(el);
     el.addEventListener('click', (event) => {
-      el.className = el.className === 'selected' ? '' : 'selected';
+      if (!document.body.classList.contains('reorder')) {
-      onclick(el.className === 'selected');
+        el.className = el.className === 'selected' ? '' : 'selected';
+        onclick(el.className === 'selected');
+      }
     });
     return el;
   }
-  createTag(
+  createTag('enabled', (state) => [
-    'enabled',
+    ((search_filters.enabled = state), search()),
-    (state) => [(search_filters.enabled = state), search()]
+  ]);
-    // 'var(--theme--bg_green)'
+  createTag('disabled', (state) => [
-  );
+    (search_filters.disabled = state),
-  createTag(
+    search(),
-    'disabled',
+  ]);
-    (state) => [(search_filters.disabled = state), search()]
-    // 'var(--theme--bg_red)'
-  );
   for (let tag of search_filters.tags)
     createTag(`#${tag}`, (state) => [
       state ? search_filters.tags.add(tag) : search_filters.tags.delete(tag),
@@ -541,9 +540,10 @@ window['__start'] = async () => {
     document
       .querySelectorAll('.dragged-over')
       .forEach((el) => el.classList.remove('dragged-over'));
-    const $node = draggable.list.find(
+    const $node = [
-      (node) => node.innerText === event.target.innerText
+      draggable.list[0].previousElementSibling,
-    );
+      ...draggable.list,
+    ].find((node) => node.innerText === event.target.innerText);
     if ($node) $node.classList.add('dragged-over');
   });
   document.addEventListener('drop', (event) => {
@@ -558,18 +558,21 @@ window['__start'] = async () => {
       const from = draggable.list.findIndex(
           (node) => node.innerText === draggable.target.innerText
         ),
-        to = draggable.list.findIndex(
+        to =
-          (node) => node.innerText === event.target.innerText
+          event.target.innerText ===
+          draggable.list[0].previousElementSibling.innerText
+            ? 0
+            : draggable.list.findIndex(
+                (node) => node.innerText === event.target.innerText
+              ) + 1;
+      if (to >= 0) {
+        draggable.list.splice(
+          to > from ? to - 1 : to,
+          0,
+          draggable.list.splice(from, 1)[0]
         );
-      // [draggable.list[from], draggable.list[to]] = [
+        store('mods').priority = draggable.list.map((m) => m.id);
-      //   draggable.list[to],
-      //   draggable.list[from],
-      // ]; -- swap
-      if (to >= draggable.list.length) {
-        let k = to - draggable.list.length;
-        while (k--) draggable.list.push(undefined);
       }
-      draggable.list.splice(to, 0, draggable.list.splice(from, 1)[0]);
     }
     draggable.render();
   });
@@ -582,9 +585,10 @@ window['__start'] = async () => {
       <${draggable.tags[0]} data-bolded="configure">configure</${draggable.tags[0]}> |
       <${draggable.tags[1]} data-bolded="reorder">reorder</${draggable.tags[1]}>
       `;
-    $modules.classList[draggable.state ? 'add' : 'remove']('reorder');
+    document.body.classList[draggable.state ? 'add' : 'remove']('reorder');
     $modules
       .querySelectorAll('input')
       .forEach((input) => (input.disabled = draggable.state));
+    search();
   });
 };

repo/custom-inserts/mod.js

@@ -12,8 +12,9 @@ module.exports = {
   id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb',
   tags: ['extension'],
   name: 'custom inserts',
-  desc: 'link files for small client-side tweaks.',
+  desc: `link files for small client-side tweaks. (not sure how to do something? check out the
-  version: '0.1.2',
+      [tweaks](https://github.com/dragonwocky/notion-enhancer/blob/master/TWEAKS.md) collection.)`,
+  version: '0.1.3',
   author: 'dragonwocky',
   options: [
     {

repo/material-ocean/mod.js

@@ -1,16 +1,16 @@
 /*
- * Material Ocean
+ * material ocean
  * (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk)
- * under GNU's GPL3 license
+ * under the MIT license
  */
 
-"use strict";
+'use strict';
 
 module.exports = {
-  id: "69e7ccb2-4aef-484c-876d-3de1b433d2b9",
+  id: '69e7ccb2-4aef-484c-876d-3de1b433d2b9',
-  tags: ["theme", "dark"],
+  tags: ['theme', 'dark'],
-  name: "Material Ocean",
+  name: 'material ocean',
-  desc: "a Material theme with oceanic colors",
+  desc: 'an oceanic colour palette.',
-  version: "0.1",
+  version: '0.1',
-  author: "blacksuan19",
+  author: 'blacksuan19',
 };

repo/material-ocean/styles.css

@@ -1,8 +1,10 @@
-/* Copyright © Blacksuan19 @ 2020 */
+/*
-/* part of Material Ocean Color Scheme */
+ * material ocean
+ * (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk)
+ * under the MIT license
+ */
 
 :root {
-  /* material ocean colors */
   --ocean-main: #0f111a;
   --ocean-sec: #00010a;
   --ocean-accent: #ff4151;

repo/night-shift/mod.js

@@ -12,7 +12,7 @@ module.exports = {
   name: 'night shift',
   desc:
     'sync dark/light theme with the system (overrides normal theme setting).',
-  version: '0.1.0',
+  version: '0.1.1',
   author: 'dragonwocky',
   hacks: {
     'renderer/preload.js'(store, __exports) {