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();
+  });
+
+})();

static/style.css

@@ -923,4 +923,23 @@ mini-player {
       width: 90%;
     }
   }
+}
+
+/* Context Menu */
+.context-menu {
+  position: fixed;
+  background: var(--win-bg-grey);
+  border: 2px solid;
+  border-color: #ffffff #808080 #808080 #ffffff;
+  box-shadow: 2px 2px 0 #000;
+  border-radius: 4px;
+  padding: 0.5rem 0;
+  min-width: 150px;
+  z-index: 9999;
+  font-family: 'VT323', monospace;
+  font-size: 1.2rem;
+
+  img {
+    width: 10svw;
+  }
 }