DeviceManager/src/lib/title.ts

import type {Action} from "svelte/action"
import tippy from "tippy.js"
import type {SvelteComponent} from "svelte"
import Tooltip from "$lib/components/Tooltip.svelte"
import hotkeys from "hotkeys-js"

export const action: Action<Element, {title?: string; shortcut?: string}> = (
  node: Element,
  {title, shortcut},
) => {
  let component: SvelteComponent | undefined
  const tooltip = tippy(node, {
    arrow: false,
    theme: "tooltip",
    animation: "fade",
    onShow(instance) {
      component ??= new Tooltip({
        target: instance.popper.querySelector(".tippy-content") as Element,
        props: {title, shortcut},
      })
    },
    onHidden() {
      component?.$destroy()
      component = undefined
    },
  })

  if (shortcut && node instanceof HTMLElement) {
    hotkeys(shortcut, function (keyboardEvent) {
      keyboardEvent.preventDefault()
      node.click()
    })
  }

  return {
    destroy() {
      tooltip.destroy()
      hotkeys.unbind(shortcut)
    },
  }
}