From 72e5302c61b254e640cef5a149c970b2c162aad1 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 29 May 2024 18:19:54 +1000
Subject: [PATCH] fix: position floating buttons correctly on load if help is
 hidden

---
 src/core/islands/FloatingButton.mjs | 16 +++++-----------
 src/core/islands/Panel.mjs          |  3 ++-
 src/load.mjs                        | 23 +++++++++++++++++------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/core/islands/FloatingButton.mjs b/src/core/islands/FloatingButton.mjs
index 61f9e44..7ca2db7 100644
--- a/src/core/islands/FloatingButton.mjs
+++ b/src/core/islands/FloatingButton.mjs
@@ -13,17 +13,10 @@ const setupWrapper = () => {
       const addToDom = () => {
         const $notionAi = document.querySelector(notionAi);
         if (!$notionAi) return;
-        const gap = 12,
-          computedStyles = getComputedStyle($notionAi),
-          visible = computedStyles.getPropertyValue("display") !== "none",
-          width = computedStyles.getPropertyValue("width"),
-          right = computedStyles.getPropertyValue("right"),
-          offset = visible ? parseInt(width) + parseInt(right) + gap : 26,
-          $wrapper = html`<div
-            class="notion-enhancer--floating-buttons z-50 gap-[${gap}px]
-            flex absolute bottom-[calc(26px+env(safe-area-inset-bottom))]"
-            style="right:${offset}px"
-          ></div>`;
+        const $wrapper = html`<div
+          class="notion-enhancer--floating-buttons z-50 gap-[12px]
+          flex absolute bottom-[calc(26px+env(safe-area-inset-bottom))]"
+        ></div>`;
         removeMutationListener(addToDom);
         $notionAi.after($wrapper);
         res($wrapper);
@@ -35,6 +28,7 @@ const setupWrapper = () => {
   addFloatingButton = async ($btn) => {
     if (document.contains($btn)) return;
     (await setupWrapper()).prepend($btn);
+    // button positioning is calculated by panel
   },
   removeFloatingButton = ($btn) => $btn.remove();
 
diff --git a/src/core/islands/Panel.mjs b/src/core/islands/Panel.mjs
index 26f00d0..02b8636 100644
--- a/src/core/islands/Panel.mjs
+++ b/src/core/islands/Panel.mjs
@@ -89,7 +89,7 @@ function Panel({
   transitionDuration = 300,
 }) {
   const { modDatabase, isEnabled } = globalThis.__enhancerApi,
-    { html, useState, addKeyListener } = globalThis.__enhancerApi,
+    { html, useState, addKeyListener, MODS_LOADED } = globalThis.__enhancerApi,
     { addMutationListener, removeMutationListener } = globalThis.__enhancerApi,
     $panelToggle = html`<button
       aria-label="Toggle side panel"
@@ -335,6 +335,7 @@ function Panel({
     };
   const corner = `${notionAi}, ${floatingButtons}`;
   addMutationListener(corner, repositionCorner, { subtree: false });
+  MODS_LOADED.then(() => repositionCorner());
 
   $panel.pin = () => {
     if (isPinned() || !panelViews.length) return;
diff --git a/src/load.mjs b/src/load.mjs
index e6ae126..196ce53 100644
--- a/src/load.mjs
+++ b/src/load.mjs
@@ -16,11 +16,19 @@ export default (async () => {
     IS_MENU = location.href.startsWith(enhancerUrl("core/menu/index.html")),
     IS_TABS = /\.webpack\/renderer\/tabs\/index.html$/.test(location.href),
     IS_ELECTRON = ['linux', 'win32', 'darwin'].includes(platform),
-    API_LOADED = new Promise((res, rej) => {
+    CORE_LOADED = new Promise((res, rej) => {
+      const onLoad = globalThis.__enhancerApi.onLoad;
+      globalThis.__enhancerApi.onLoad = () => (onLoad?.(), res());
+    }),
+    MODS_LOADED = new Promise((res, rej) => {
       const onReady = globalThis.__enhancerApi.onReady;
       globalThis.__enhancerApi.onReady = () => (onReady?.(), res());
     });
-  globalThis.IS_TABS = IS_TABS;
+  Object.assign((globalThis.__enhancerApi ??= {}), {
+    CORE_LOADED,
+    MODS_LOADED,
+    IS_TABS,
+  });
 
   if (!IS_MENU && !IS_TABS) {
     if (!signedIn || !pageLoaded) return;
@@ -69,16 +77,19 @@ export default (async () => {
     for (let script of mod.clientScripts ?? []) {
       // execute mod scripts after core has
       // loaded and api is ready to use
-      Promise.resolve(isCore || API_LOADED)
+      Promise.resolve(isCore || CORE_LOADED)
         .then(() => import(enhancerUrl(`${mod._src}/${script}`)))
         .then((script) => script.default(globalThis.__enhancerApi, db))
-        .then(() => !isCore || globalThis.__enhancerApi.onReady?.())
+        .then(() => !isCore || globalThis.__enhancerApi.onLoad?.())
         .catch((err) => console.error(err));
     }
   }
 
-  if (IS_MENU || IS_TABS) globalThis.__enhancerApi.onReady?.();
-  return API_LOADED.then(() => {
+  if (IS_MENU || IS_TABS) {
+    globalThis.__enhancerApi.onLoad?.();
+    globalThis.__enhancerApi.onReady?.();
+  }
+  return CORE_LOADED.then(() => {
     if (IS_MENU) console.log("notion-enhancer: ready");
     return globalThis.__enhancerApi;
   });