fix: arrows sometimes disappears

package.json

@@ -1,6 +1,6 @@
 {
   "name": "logseq-plugin-favorite-tree",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "dist/index.html",
   "logseq": {
     "id": "_sethyuan-logseq-favorite-tree",
@@ -15,7 +15,7 @@
     "@logseq/libs": "^0.0.15",
     "immer": "^9.0.19",
     "logseq-l10n": "^0.2.0",
-    "preact": "^10.14.1",
+    "preact": "10.12.1",
     "rambdax": "^10.0.0",
     "reactutils": "^5.13.0"
   },

pnpm-lock.yaml

@@ -15,8 +15,8 @@ dependencies:
     specifier: ^0.2.0
     version: 0.2.0(@logseq/libs@0.0.15)
   preact:
-    specifier: ^10.14.1
+    specifier: 10.12.1
-    version: 10.17.0
+    version: 10.12.1
   rambdax:
     specifier: ^10.0.0
     version: 10.0.0
@@ -27,7 +27,7 @@ dependencies:
 devDependencies:
   '@preact/preset-vite':
     specifier: ^2.5.0
-    version: 2.5.0(@babel/core@7.22.10)(preact@10.17.0)(vite@4.4.8)
+    version: 2.5.0(@babel/core@7.22.10)(preact@10.12.1)(vite@4.4.8)
   '@types/node':
     specifier: ^18.15.11
     version: 18.15.11
@@ -531,7 +531,7 @@ packages:
       - supports-color
     dev: false
 
-  /@preact/preset-vite@2.5.0(@babel/core@7.22.10)(preact@10.17.0)(vite@4.4.8):
+  /@preact/preset-vite@2.5.0(@babel/core@7.22.10)(preact@10.12.1)(vite@4.4.8):
     resolution: {integrity: sha512-BUhfB2xQ6ex0yPkrT1Z3LbfPzjpJecOZwQ/xJrXGFSZD84+ObyS//41RdEoQCMWsM0t7UHGaujUxUBub7WM1Jw==}
     peerDependencies:
       '@babel/core': 7.x
@@ -540,7 +540,7 @@ packages:
       '@babel/core': 7.22.10
       '@babel/plugin-transform-react-jsx': 7.22.5(@babel/core@7.22.10)
       '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.22.10)
-      '@prefresh/vite': 2.4.1(preact@10.17.0)(vite@4.4.8)
+      '@prefresh/vite': 2.4.1(preact@10.12.1)(vite@4.4.8)
       '@rollup/pluginutils': 4.2.1
       babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.22.10)
       debug: 4.3.4
@@ -556,19 +556,19 @@ packages:
     resolution: {integrity: sha512-joAwpkUDwo7ZqJnufXRGzUb+udk20RBgfA8oLPBh5aJH2LeStmV1luBfeJTztPdyCscC2j2SmZ/tVxFRMIxAEw==}
     dev: true
 
-  /@prefresh/core@1.5.1(preact@10.17.0):
+  /@prefresh/core@1.5.1(preact@10.12.1):
     resolution: {integrity: sha512-e0mB0Oxtog6ZpKPDBYbzFniFJDIktuKMzOHp7sguntU+ot0yi6dbhJRE9Css1qf0u16wdSZjpL2W2ODWuU05Cw==}
     peerDependencies:
       preact: ^10.0.0
     dependencies:
-      preact: 10.17.0
+      preact: 10.12.1
     dev: true
 
   /@prefresh/utils@1.2.0:
     resolution: {integrity: sha512-KtC/fZw+oqtwOLUFM9UtiitB0JsVX0zLKNyRTA332sqREqSALIIQQxdUCS1P3xR/jT1e2e8/5rwH6gdcMLEmsQ==}
     dev: true
 
-  /@prefresh/vite@2.4.1(preact@10.17.0)(vite@4.4.8):
+  /@prefresh/vite@2.4.1(preact@10.12.1)(vite@4.4.8):
     resolution: {integrity: sha512-vthWmEqu8TZFeyrBNc9YE5SiC3DVSzPgsOCp/WQ7FqdHpOIJi7Z8XvCK06rBPOtG4914S52MjG9Ls22eVAiuqQ==}
     peerDependencies:
       preact: ^10.4.0
@@ -576,10 +576,10 @@ packages:
     dependencies:
       '@babel/core': 7.22.10
       '@prefresh/babel-plugin': 0.5.0
-      '@prefresh/core': 1.5.1(preact@10.17.0)
+      '@prefresh/core': 1.5.1(preact@10.12.1)
       '@prefresh/utils': 1.2.0
       '@rollup/pluginutils': 4.2.1
-      preact: 10.17.0
+      preact: 10.12.1
       vite: 4.4.8(@types/node@18.15.11)
     transitivePeerDependencies:
       - supports-color
@@ -886,8 +886,8 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /preact@10.17.0:
+  /preact@10.12.1:
-    resolution: {integrity: sha512-SNsI8cbaCcUS5tbv9nlXuCfIXnJ9ysBMWk0WnB6UWwcVA3qZ2O6FxqDFECMAMttvLQcW/HaNZUe2BLidyvrVYw==}
+    resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
 
   /process@0.11.10:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}

src/comps/FavArrow.tsx

@@ -9,7 +9,7 @@ export default function FavArrow({
 }) {
   return (
     <span
-      class={cls("kef-ae-fav-arrow", expanded && "kef-ae-fav-arrow-expanded")}
+      class={cls("kef-ft-fav-arrow", expanded && "kef-ft-fav-arrow-expanded")}
       onClick={onToggle}
     >
       <svg

src/comps/FavList.tsx

@@ -115,7 +115,7 @@ function SubList({ items, shown }: { items: any[]; shown: boolean }) {
 
   return (
     <div
-      class={cls("kef-ae-fav-list", shown && "kef-ae-fav-expanded")}
+      class={cls("kef-ft-fav-list", shown && "kef-ft-fav-expanded")}
       onMouseDown={preventSideEffect}
     >
       {items.map((item) => {
@@ -126,17 +126,17 @@ function SubList({ items, shown }: { items: any[]; shown: boolean }) {
 
         return (
           <div key={item.name}>
-            <div class="kef-ae-fav-item" onClick={(e) => openPage(e, item)}>
+            <div class="kef-ft-fav-item" onClick={(e) => openPage(e, item)}>
               {item.filters ? (
-                <div class="kef-ae-fav-item-icon">
+                <div class="kef-ft-fav-item-icon">
                   {logseq.settings?.filterIcon ?? "🔎"}
                 </div>
               ) : item.properties?.icon ? (
-                <div class="kef-ae-fav-item-icon">{item.properties?.icon}</div>
+                <div class="kef-ft-fav-item-icon">{item.properties?.icon}</div>
               ) : (
-                <span class="ui__icon tie tie-page kef-ae-fav-item-icon"></span>
+                <span class="ui__icon tie tie-page kef-ft-fav-item-icon"></span>
               )}
-              <div class="kef-ae-fav-item-name" title={displayName}>
+              <div class="kef-ft-fav-item-name" title={displayName}>
                 {item.filters &&
                 displayName.toLowerCase().startsWith(`${item.name}/`)
                   ? displayName.substring(item.name.length + 1)

src/plugin.tsx

@@ -62,9 +62,12 @@ async function main() {
 
   const favoritesObserver = new MutationObserver(async (mutationList) => {
     const mutation = mutationList[0]
+    if (mutation?.target == null) return
+    const target = mutation.target as HTMLElement
+
     if (
-      (mutation?.target as any).classList?.contains("bd") ||
+      target.classList?.contains("bd") ||
-      (mutation?.target as any).classList?.contains("favorites")
+      target.classList?.contains("favorites")
     ) {
       await processFavorites()
     }
@@ -79,7 +82,7 @@ async function main() {
   await processFavorites()
 
   const graph = (await logseq.App.getCurrentGraph())!
-  const storedWidth = parent.localStorage.getItem(`kef-ae-lsw-${graph.name}`)
+  const storedWidth = parent.localStorage.getItem(`kef-ft-lsw-${graph.name}`)
   if (storedWidth) {
     parent.document.documentElement.style.setProperty(
       "--ls-left-sidebar-width",
@@ -88,13 +91,13 @@ async function main() {
   }
 
   logseq.provideUI({
-    key: "kef-ae-drag-handle",
+    key: "kef-ft-drag-handle",
     path: "#left-sidebar",
-    template: `<div class="kef-ae-drag-handle"></div>`,
+    template: `<div class="kef-ft-drag-handle"></div>`,
   })
   setTimeout(() => {
     dragHandle = parent.document.querySelector(
-      "#left-sidebar .kef-ae-drag-handle",
+      "#left-sidebar .kef-ft-drag-handle",
     )!
     dragHandle.addEventListener("pointerdown", onPointerDown)
   }, 0)
@@ -110,34 +113,34 @@ async function main() {
 
 function provideStyles() {
   logseq.provideStyle({
-    key: "kef-ae-fav",
+    key: "kef-ft-fav",
     style: `
-      .kef-ae-fav-list {
+      .kef-ft-fav-list {
         padding-left: 24px;
         display: none;
       }
-      .kef-ae-fav-expanded {
+      .kef-ft-fav-expanded {
         display: block;
       }
-      .kef-ae-fav-arrow {
+      .kef-ft-fav-arrow {
         flex: 0 0 auto;
         padding: 4px 20px 4px 10px;
         margin-right: -20px;
         opacity: ${logseq.settings?.hoverArrow ? 0 : 1};
         transition: opacity 0.3s;
       }
-      :is(.favorite-item, .recent-item):hover > a > .kef-ae-fav-arrow,
+      :is(.favorite-item, .recent-item):hover > a > .kef-ft-fav-arrow,
-      .kef-ae-fav-item:hover > .kef-ae-fav-arrow {
+      .kef-ft-fav-item:hover > .kef-ft-fav-arrow {
         opacity: 1;
       }
-      .kef-ae-fav-arrow svg {
+      .kef-ft-fav-arrow svg {
         transform: rotate(90deg) scale(0.8);
         transition: transform 0.04s linear;
       }
-      .kef-ae-fav-arrow-expanded svg {
+      .kef-ft-fav-arrow-expanded svg {
         transform: rotate(0deg) scale(0.8);
       }
-      .kef-ae-fav-item {
+      .kef-ft-fav-item {
         display: flex;
         align-items: center;
         padding: 0 24px;
@@ -145,23 +148,23 @@ function provideStyles() {
         color: var(--ls-header-button-background);
         cursor: pointer;
       }
-      .kef-ae-fav-item:hover {
+      .kef-ft-fav-item:hover {
         background-color: var(--ls-quaternary-background-color);
       }
-      .kef-ae-fav-item-icon {
+      .kef-ft-fav-item-icon {
         flex: 0 0 auto;
         margin-right: 5px;
         width: 16px;
         text-align: center;
       }
-      .kef-ae-fav-item-name {
+      .kef-ft-fav-item-name {
         flex: 1 1 auto;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
 
-      .kef-ae-drag-handle {
+      .kef-ft-drag-handle {
         content: "";
         position: absolute;
         top: 0;
@@ -170,15 +173,15 @@ function provideStyles() {
         width: 4px;
         z-index: 10;
       }
-      .kef-ae-drag-handle:hover,
+      .kef-ft-drag-handle:hover,
-      .kef-ae-dragging .kef-ae-drag-handle {
+      .kef-ft-dragging .kef-ft-drag-handle {
         cursor: col-resize;
         background: var(--ls-active-primary-color);
       }
-      .kef-ae-dragging {
+      .kef-ft-dragging {
         cursor: col-resize;
       }
-      .kef-ae-dragging :is(#left-sidebar, #main-content-container) {
+      .kef-ft-dragging :is(#left-sidebar, #main-content-container) {
         pointer-events: none;
       }
     `,
@@ -198,11 +201,10 @@ async function processFavorites() {
 }
 
 async function injectList(el: HTMLElement, items: any[]) {
-  const isFav = el.classList.contains("favorite-item")
+  const key = `kef-ft-f-${await hash(el.dataset.ref!)}`
-  const key = `kef-ae-${isFav ? "f" : "r"}-${await hash(el.dataset.ref!)}`
 
   const arrowContainer = el.querySelector("a")!
-  const arrow = arrowContainer.querySelector(".kef-ae-fav-arrow")
+  const arrow = arrowContainer.querySelector(".kef-ft-fav-arrow")
   if (arrow != null) {
     arrow.remove()
   }
@@ -210,9 +212,7 @@ async function injectList(el: HTMLElement, items: any[]) {
   if (parent.document.getElementById(key) == null) {
     logseq.provideUI({
       key,
-      path: `.${isFav ? "favorite" : "recent"}-item[data-ref="${
+      path: `.favorite-item[data-ref="${el.dataset.ref}"]`,
-        el.dataset.ref
-      }"]`,
       template: `<div id="${key}"></div>`,
     })
   }
@@ -268,7 +268,7 @@ function needsProcessing(txData: any[]) {
 
 function onPointerDown(e: Event) {
   e.preventDefault()
-  parent.document.documentElement.classList.add("kef-ae-dragging")
+  parent.document.documentElement.classList.add("kef-ft-dragging")
   parent.document.addEventListener("pointermove", onPointerMove)
   parent.document.addEventListener("pointerup", onPointerUp)
   parent.document.addEventListener("pointercancel", onPointerUp)
@@ -279,7 +279,7 @@ function onPointerUp(e: MouseEvent) {
   parent.document.removeEventListener("pointermove", onPointerMove)
   parent.document.removeEventListener("pointerup", onPointerUp)
   parent.document.removeEventListener("pointercancel", onPointerUp)
-  parent.document.documentElement.classList.remove("kef-ae-dragging")
+  parent.document.documentElement.classList.remove("kef-ft-dragging")
 
   const pos = e.clientX
   parent.document.documentElement.style.setProperty(
@@ -288,7 +288,7 @@ function onPointerUp(e: MouseEvent) {
   )
   ;(async () => {
     const graph = (await logseq.App.getCurrentGraph())!
-    parent.localStorage.setItem(`kef-ae-lsw-${graph.name}`, `${pos}`)
+    parent.localStorage.setItem(`kef-ft-lsw-${graph.name}`, `${pos}`)
   })()
 }