extension: topbar icons

repo/emoji-sets/client.mjs

@@ -11,7 +11,7 @@ export default async function ({ web, env }, db) {
     imgEmojiSelector = '.notion-emoji:not([data-emoji-sets-unsupported])',
     imgEmojiOverlaySelector = `${imgEmojiSelector} + [src*="notion-emojis"]`;
 
-  await web.whenReady();
+  await Promise.any([web.whenReady([nativeEmojiSelector]), web.whenReady([imgEmojiSelector])]);
 
   const nativeEmojis = document.querySelectorAll(nativeEmojiSelector).length,
     imgEmojis = document.querySelectorAll(imgEmojiSelector).length;

repo/registry.json

@@ -25,5 +25,6 @@
   "indentation-lines",
   "focus-mode",
   "word-counter",
-  "emoji-sets"
+  "emoji-sets",
+  "topbar-icons"
 ]

repo/topbar-icons/client.mjs

@@ -0,0 +1,57 @@
+/*
+ * notion-enhancer: topbar icons
+ * (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
+ * (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 ({ web, components }, db) {
+  await web.whenReady(['.notion-topbar-action-buttons']);
+
+  if ((await db.get(['share'])) === true) {
+    const $share = document.querySelector('.notion-topbar-share-menu');
+    $share.innerHTML = await components.feather('share-2', {
+      style: 'width:16px;height:16px;color:var(--theme--icon);',
+    });
+  }
+
+  const styleTextButton = ($btn) => {
+    $btn.style.width = 'auto';
+    $btn.style.fontSize = '14px';
+    $btn.style.lineHeight = '1.2';
+    $btn.style.paddingLeft = '8px';
+    $btn.style.paddingRight = '8px';
+  };
+
+  if ((await db.get(['comments'])) === false) {
+    const $comments = document.querySelector('.notion-topbar-comments-button');
+    styleTextButton($comments);
+    $comments.innerHTML = 'Comments';
+  }
+
+  if ((await db.get(['updates'])) === false) {
+    const $updates = document.querySelector('.notion-topbar-updates-button');
+    styleTextButton($updates);
+    $updates.innerHTML = 'Updates';
+  }
+
+  if ((await db.get(['favorite'])) === false) {
+    const $favorite = document.querySelector(
+      '.notion-topbar-updates-button + [aria-label^="Fav"]'
+    );
+    styleTextButton($favorite);
+    $favorite.innerHTML = $favorite.ariaLabel;
+    $favorite.addEventListener('click', async () => {
+      await new Promise((res, rej) => requestAnimationFrame(res));
+      $favorite.innerHTML = $favorite.ariaLabel;
+    });
+  }
+
+  if ((await db.get(['more'])) === false) {
+    const $more = document.querySelector('.notion-topbar-more-button');
+    styleTextButton($more);
+    $more.innerHTML = 'More';
+  }
+}

repo/topbar-icons/mod.json

@@ -0,0 +1,56 @@
+{
+  "name": "topbar icons",
+  "id": "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
+  "version": "0.3.0",
+  "description": "choose between text or icons for the topbar buttons.",
+  "tags": ["extension", "customisation"],
+  "authors": [
+    {
+      "name": "CloudHill",
+      "email": "rh.cloudhill@gmail.com",
+      "homepage": "https://github.com/CloudHill",
+      "avatar": "https://avatars.githubusercontent.com/u/54142180"
+    }
+  ],
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "css": {},
+  "options": [
+    {
+      "type": "toggle",
+      "key": "share",
+      "label": "share",
+      "tooltip": "**on = icon, off = text**",
+      "value": false
+    },
+    {
+      "type": "toggle",
+      "key": "comments",
+      "label": "comments",
+      "tooltip": "**on = icon, off = text**",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "updates",
+      "label": "updates",
+      "tooltip": "**on = icon, off = text**",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "favorite",
+      "label": "favorite",
+      "tooltip": "**on = icon, off = text**",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "more",
+      "label": "more (3 dots)",
+      "tooltip": "**on = icon, off = text**",
+      "value": true
+    }
+  ]
+}