extension: focus mode

+ only inject theming css if a theme is enabled, to reduce lag

repo/focus-mode/client.css

@@ -0,0 +1,21 @@
+/*
+ * notion-enhancer: focus mode
+ * (c) 2020 Arecsu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.notion-sidebar-container[style*='width: 0px;'] ~ div .notion-topbar > :first-child {
+  opacity: 0 !important;
+  transition: opacity 200ms ease-in-out !important;
+}
+.notion-sidebar-container[style*='width: 0px;'] ~ div .notion-topbar > :first-child:hover {
+  opacity: 1 !important;
+}
+
+[data-focus-mode='padded']
+  .notion-sidebar-container[style*='width: 0px;']
+  ~ div
+  .notion-frame {
+  height: calc(100vh - 90px) !important;
+}

repo/focus-mode/client.mjs

@@ -0,0 +1,12 @@
+/*
+ * notion-enhancer: focus mode
+ * (c) 2020 Arecsu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+export default async function (api, db) {
+  if (await db.get(['padded'])) document.body.dataset.focusMode = 'padded';
+}

repo/focus-mode/mod.json

@@ -0,0 +1,30 @@
+{
+  "name": "focus mode",
+  "id": "5a08598d-bfac-4167-9ae8-2bd0e2ef141e",
+  "version": "0.3.0",
+  "description": "hide the titlebar/menubar when the sidebar is closed (returns on hover).",
+  "tags": ["extension", "layout"],
+  "authors": [
+    {
+      "name": "arecsu",
+      "email": "alejandro9r@gmail.com",
+      "homepage": "https://github.com/Arecsu",
+      "avatar": "https://avatars.githubusercontent.com/u/12679098"
+    }
+  ],
+  "css": {
+    "client": ["client.css"]
+  },
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "options": [
+    {
+      "type": "toggle",
+      "key": "padded",
+      "label": "even padding",
+      "tooltip": "matches the empty space at the top and sides of the frame with **extra padding at the bottom when the sidebar is hidden**",
+      "value": true
+    }
+  ]
+}

repo/indentation-lines/client.css

@@ -1,6 +1,7 @@
 /*
  * notion-enhancer: indentation lines
  * (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 

repo/registry.json

@@ -22,5 +22,6 @@
   "font-chooser",
   "collapse-properties",
   "scroll-to-top",
-  "indentation-lines"
+  "indentation-lines",
+  "focus-mode"
 ]

repo/theming/client.mjs

@@ -6,7 +6,15 @@
 
 'use strict';
 
-export default function ({ web }, db) {
+export default async function ({ web, registry }, db) {
+  const enabledThemes = await registry.list(
+    async (m) => (await registry.enabled(m.id)) && m.tags.includes('theme')
+  );
+  if (enabledThemes.length) {
+    web.loadStylesheet('repo/theming/theme.css');
+    web.loadStylesheet('repo/theming/theme-colors.css');
+  }
+
   const updateTheme = () =>
     document.documentElement.classList[
       document.body.classList.contains('dark') ? 'add' : 'remove'

repo/theming/mod.json

@@ -14,7 +14,7 @@
   ],
   "css": {
     "frame": ["variables.css"],
-    "client": ["variables.css", "prism.css", "theme.css", "theme-colors.css"],
+    "client": ["variables.css", "prism.css"],
     "menu": ["variables.css", "prism.css"]
   },
   "js": {