global: add custom context menu, fix js not working when swapping through htmx

static/contextmenu.js

@@ -0,0 +1,42 @@
+(function() {
+  if (window._contextMenuInitialized) return;
+  window._contextMenuInitialized = true;
+
+  const menu = document.createElement('div');
+  menu.className = 'context-menu';
+  menu.innerHTML = `
+  <img src="/static/assets/gifs/helo.gif"/>
+  `;
+  menu.style.display = 'none';
+  document.body.appendChild(menu);
+
+  const showMenu = (x, y) => {
+    menu.style.display = 'block';
+    menu.style.left = `${x}px`;
+    menu.style.top = `${y}px`;
+
+    const rect = menu.getBoundingClientRect();
+    if (x + rect.width > window.innerWidth) {
+      menu.style.left = `${window.innerWidth - rect.width - 10}px`;
+    }
+    if (y + rect.height > window.innerHeight) {
+      menu.style.top = `${window.innerHeight - rect.height - 10}px`;
+    }
+  };
+
+  const hideMenu = () => {
+    menu.style.display = 'none';
+  };
+
+  document.addEventListener('contextmenu', (e) => {
+    e.preventDefault();
+    showMenu(e.clientX, e.clientY);
+  }, false);
+
+  document.addEventListener('click', hideMenu);
+  document.addEventListener('scroll', hideMenu);
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') hideMenu();
+  });
+
+})();