Page Icon abbreviations for hierarchical links in logseq

custom.js

const pageIcons = new Map()

function abbreviateNamespace(selector) {
  const appContainer = document.getElementById("app-container");

  const handleNamespaceHover = (event) => {
    const namespaceRef = event.target.closest(selector);
    if (!namespaceRef) return;

    if (event.type === "mouseenter") {
      namespaceRef.textContent = namespaceRef.dataset.origText;
    } else if (event.type === "mouseleave") {
      namespaceRef.textContent = namespaceRef.dataset.abbreviatedText;
    }
  };

  appContainer.addEventListener("mouseenter", handleNamespaceHover, true);
  appContainer.addEventListener("mouseleave", handleNamespaceHover, true);

  const observer = new MutationObserver((mutationList) => {
    for (const mutation of mutationList) {
      for (const node of mutation.addedNodes) {
        if (!node.querySelectorAll) continue;

        const namespaceRefs = node.querySelectorAll(selector);
        for (const namespaceRef of namespaceRefs) {
          const text = namespaceRef.textContent;
          const isTag = namespaceRef.classList.contains("tag");
          const testText = isTag
            ? text.substring(1).toLowerCase()
            : text.toLowerCase();
          if (testText !== namespaceRef.dataset.ref) continue;

          const chars = Array.from(namespaceRef.textContent)
          let linkTextWithIcons = ''
          chars.forEach( (char, i) => {
            if (char === '/') {
              const pageName = chars.slice(0,i).join('')
              if (!pageIcons.has(pageName)) {
                const pageIcon = logseq.api.get_page(pageName)?.properties?.icon
                if (pageIcon) {
                  pageIcons.set(pageName, pageIcon)
                }
              }
              linkTextWithIcons += `${pageIcons.get(pageName) || pageName.split('/').at(-1)}/`
            }
          })

          linkTextWithIcons += namespaceRef.textContent.split('/').at(-1)

          namespaceRef.dataset.origText = text;
          namespaceRef.dataset.abbreviatedText = linkTextWithIcons;
          namespaceRef.textContent = linkTextWithIcons;
        }
      }
    }
  });

  observer.observe(appContainer, {
    subtree: true,
    childList: true,
  });
}

abbreviateNamespace(
  '.ls-block a.page-ref[data-ref*="/"], .foldable-title [data-ref*="/"], li[title*="root/"] .page-title, a.tag[data-ref*="/"], .title[data-ref*="/"]'
);