theme conflicts notice in menu

repo/calendar-scroll/mod.js

@@ -14,7 +14,7 @@ module.exports = {
   name: 'calendar scroll',
   desc:
     'add a button to scroll down to the current week in fullpage/infinite-scroll calendars.',
-  version: '0.1.0',
+  version: '0.1.1',
   author: 'dragonwocky',
   hacks: {
     'renderer/preload.js'(store, __exports) {

repo/calendar-scroll/styles.css

@@ -13,6 +13,7 @@
   border-radius: 3px;
   line-height: 1.2;
   padding: 0 0.5em;
+  margin-right: 5px;
 }
 #calendar-scroll-to-week:hover {
   background: transparent;

repo/core/css/menu.css

@@ -181,7 +181,7 @@ s {
   text-decoration: underline;
 }
 
-[data-relaunch] {
+[data-action] {
   text-decoration: underline dotted;
   cursor: pointer;
 }
@@ -621,12 +621,16 @@ s {
 }
 
 .reorder #search #tags > span,
-.reorder #search #tags > span:hover {
+.reorder #search #tags > span:hover,
+.conflict #search #tags > span,
+.conflict #search #tags > span:hover {
   opacity: 0.7;
   background: var(--theme--option-background);
 }
 .reorder #search #tags > .selected,
-.reorder #search #tags > .selected:hover {
+.reorder #search #tags > .selected:hover,
+.conflict #search #tags > .selected,
+.conflict #search #tags > .selected:hover {
   background: var(--tag_color, var(--theme--option_active-background));
 }
 

repo/core/enhancerMenu.js

@@ -185,7 +185,78 @@ window['__start'] = async () => {
     })
   );
 
-  // search
+  const conflicts = {
+    relaunch: null,
+    detected: () =>
+      store('mods', {
+        conflicts: { dark: false, light: false },
+      }).conflicts,
+    alerts: [],
+    check() {
+      document.body.classList.remove('conflict');
+      conflicts.alerts.forEach((alert) => alert.resolve());
+      conflicts.alerts = [];
+      const enabled = modules.loaded.filter(
+          (mod) =>
+            store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled &&
+            mod.tags.includes('theme')
+        ),
+        dark = enabled.filter((mod) => mod.tags.includes('dark')),
+        light = enabled.filter((mod) => mod.tags.includes('light'));
+      for (let mode of [
+        [dark, 'dark'],
+        [light, 'light'],
+      ]) {
+        const conflictID = mode[0]
+          .map((mod) => mod.id)
+          .sort()
+          .join('||');
+        if (
+          conflicts.detected()[mode[1]] &&
+          conflicts.detected()[mode[1]][0] === conflictID &&
+          conflicts.detected()[mode[1]][1]
+        )
+          continue;
+        if (mode[0].length > 1) {
+          document.body.classList.add('conflict');
+          conflicts.detected()[mode[1]] = [conflictID, false];
+          const alert = createAlert(
+            'error',
+            `conflicting ${mode[1]} themes: ${mode[0]
+              .map((mod) => `<b>${mod.name}</b>`)
+              .join(
+                ', '
+              )}. <br> resolve or <span data-action="dismiss">dismiss</span> to continue.`
+          );
+          alert.el
+            .querySelector('[data-action="dismiss"]')
+            .addEventListener('click', (event) => {
+              conflicts.detected()[mode[1]] = [conflictID, true];
+              conflicts.check();
+            });
+          alert.append();
+          conflicts.alerts.push(alert);
+        } else conflicts.detected()[mode[1]] = false;
+      }
+      search();
+    },
+  };
+  function modified() {
+    conflicts.check();
+    if (conflicts.relaunch) return;
+    conflicts.relaunch = createAlert(
+      'info',
+      'changes may not fully apply until <span data-action="relaunch">app relaunch</span>.'
+    );
+    conflicts.relaunch.el
+      .querySelector('[data-action="relaunch"]')
+      .addEventListener('click', (event) => {
+        electron.remote.app.relaunch();
+        electron.remote.app.quit();
+      });
+    conflicts.relaunch.append();
+  }
+
   const search_filters = {
     enabled: true,
     disabled: true,
@@ -209,17 +280,30 @@ window['__start'] = async () => {
   }
   function search() {
     modules.loaded.forEach((mod) => {
-      const $search_input = document.querySelector('#search > input');
+      const $search_input = document.querySelector('#search > input'),
+        conflictingIDs = [conflicts.detected().dark, conflicts.detected().light]
+          .filter((conflict) => conflict && !conflict[1])
+          .map(([mods, dismissed]) => mods.split('||'))
+          .flat();
+      if (
+        conflictingIDs.length ||
+        document.body.classList.contains('reorder')
+      ) {
+        $search_input.disabled = true;
+      } else $search_input.disabled = false;
       if (
         !document.body.classList.contains('reorder') &&
-        ((mod.elem.classList.contains('enabled') && !search_filters.enabled) ||
+        (conflictingIDs.length
-          (mod.elem.classList.contains('disabled') &&
+          ? !conflictingIDs.some((id) => id.includes(mod.id))
-            !search_filters.disabled) ||
+          : (mod.elem.classList.contains('enabled') &&
-          !mod.tags.some((tag) => search_filters.tags.has(tag)) ||
+              !search_filters.enabled) ||
-          ($search_input.value &&
+            (mod.elem.classList.contains('disabled') &&
-            !innerText(mod.elem)
+              !search_filters.disabled) ||
-              .toLowerCase()
+            !mod.tags.some((tag) => search_filters.tags.has(tag)) ||
-              .includes($search_input.value.toLowerCase().trim())))
+            ($search_input.value &&
+              !innerText(mod.elem)
+                .toLowerCase()
+                .includes($search_input.value.toLowerCase().trim())))
       )
         return (mod.elem.style.display = 'none');
       mod.elem.style.display = 'block';
@@ -239,7 +323,10 @@ window['__start'] = async () => {
     );
     document.querySelector('#tags').append(el);
     el.addEventListener('click', (event) => {
-      if (!document.body.classList.contains('reorder')) {
+      if (
+        !document.body.classList.contains('reorder') &&
+        !document.body.classList.contains('conflict')
+      ) {
         el.className = el.className === 'selected' ? '' : 'selected';
         onclick(el.className === 'selected');
       }
@@ -299,22 +386,6 @@ window['__start'] = async () => {
     return parsed;
   }
 
-  let $modified_notice;
-  function modified() {
-    if ($modified_notice) return;
-    $modified_notice = createAlert(
-      'info',
-      `changes may not fully apply until <span data-relaunch>app relaunch</span>.`
-    );
-    $modified_notice.el
-      .querySelector('[data-relaunch]')
-      .addEventListener('click', (event) => {
-        electron.remote.app.relaunch();
-        electron.remote.app.quit();
-      });
-    $modified_notice.append();
-  }
-
   const file_icon = await fs.readFile(
     path.resolve(`${__dirname}/icons/file.svg`)
   );
@@ -406,11 +477,11 @@ window['__start'] = async () => {
   const $modules = document.querySelector('#modules');
 
   for (let mod of modules.loaded) {
-    for (let fonts of mod.fonts || []) {
+    for (let font of mod.fonts || []) {
       document
         .querySelector('head')
         .appendChild(
-          helpers.createElement(`<link rel="stylesheet" href="${fonts}">`)
+          helpers.createElement(`<link rel="stylesheet" href="${font}">`)
         );
     }
 
@@ -519,6 +590,7 @@ window['__start'] = async () => {
     .forEach((checkbox) =>
       checkbox.addEventListener('click', (event) => event.target.blur())
     );
+  conflicts.check();
 
   // draggable re-ordering
   const draggable = {

repo/core/render.js

@@ -9,7 +9,11 @@
 const url = require('url'),
   path = require('path'),
   electron = require('electron'),
-  { __notion } = require('../../pkg/helpers.js'),
+  {
+    __notion,
+    getEnhancements,
+    createElement,
+  } = require('../../pkg/helpers.js'),
   config = require(`${__notion}/app/config.js`),
   constants = require(`${__notion}/app/shared/constants.js`),
   notion_intl = require(`${__notion}/app/shared/notion-intl/index.js`),
@@ -968,6 +972,16 @@ module.exports = (store, __exports) => {
 
     window['__start'] = () => {
       document.head.innerHTML += `<link rel="stylesheet" href="${__dirname}/css/tabs.css" />`;
+      const modules = getEnhancements();
+      for (let mod of modules.loaded) {
+        for (let font of mod.fonts || []) {
+          document
+            .querySelector('head')
+            .appendChild(
+              createElement(`<link rel="stylesheet" href="${font}">`)
+            );
+        }
+      }
 
       // open menu on hotkey toggle
       document.addEventListener('keyup', (event) => {