feat(admin): unify context menu, add context menu to files tab

1 files changed, 18 insertions, 88 deletions

diff --git a/internal/admin/static/editor.js b/internal/admin/static/editor.js
index d5fb5c7..fe0ef10 100644
--- a/internal/admin/static/editor.js
+++ b/internal/admin/static/editor.js
@@ -271,48 +271,17 @@ function createNewDir() {
 }
 
 function showDirContextMenu(e, dir) {
-  e.preventDefault();
-  closeContextMenu();
   if (dir === 'Root') return;
-  var overlay = document.createElement('div');
-  overlay.className = 'cm-overlay';
-  overlay.id = '_ctxMenuOverlay';
-  overlay.onclick = function() { closeContextMenu(); };
-  overlay.addEventListener('contextmenu', function(ev) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    var cx = ev.clientX, cy = ev.clientY;
-    closeContextMenu();
-    var el = document.elementFromPoint(cx, cy);
-    if (el) el.dispatchEvent(new MouseEvent('contextmenu', {bubbles:true, cancelable:true, clientX:cx, clientY:cy, button:2}));
-  });
-
-  var menu = document.createElement('div');
-  menu.className = 'cm-menu';
-  menu.id = '_ctxMenu';
-  menu.style.left = e.clientX + 'px';
-  menu.style.top = e.clientY + 'px';
-  menu.oncontextmenu = function(ev) { ev.preventDefault(); };
-
-  function addBtn(label, cls, handler) {
-    var btn = document.createElement('button');
-    btn.textContent = label;
-    if (cls) btn.className = cls;
-    btn.onclick = function() { closeContextMenu(); handler(); };
-    menu.appendChild(btn);
-  }
-
-  addBtn('Rename Directory', '', function() { renameDirInline(dir); });
-  addBtn('Delete Directory', 'danger', function() {
-    API.post('/api/' + editorType + '/dirs', {action: 'delete', dir: dir}).then(function(r) {
-      notify('Deleted directory ' + dir + (r.moved ? ' (' + r.moved + ' files moved to root)' : ''), 'success');
-      updateUndoBar();
-      loadList();
-    }).catch(function(e) { notify('Delete failed: ' + e.message, 'error'); });
-  });
-
-  document.body.appendChild(overlay);
-  document.body.appendChild(menu);
+  openContextMenu(e, [
+    {label: 'Rename Directory', handler: function() { renameDirInline(dir); }},
+    {label: 'Delete Directory', cls: 'danger', handler: function() {
+      API.post('/api/' + editorType + '/dirs', {action: 'delete', dir: dir}).then(function(r) {
+        notify('Deleted directory ' + dir + (r.moved ? ' (' + r.moved + ' files moved to root)' : ''), 'success');
+        updateUndoBar();
+        loadList();
+      }).catch(function(e) { notify('Delete failed: ' + e.message, 'error'); });
+    }},
+  ]);
 }
 
 function renameDirInline(dir) {
@@ -325,44 +294,12 @@ function renameDirInline(dir) {
 }
 
 function showItemContextMenu(e, id) {
-  e.preventDefault();
-  e.stopPropagation();
-  closeContextMenu();
-
-  var overlay = document.createElement('div');
-  overlay.className = 'cm-overlay';
-  overlay.id = '_ctxMenuOverlay';
-  overlay.onclick = function() { closeContextMenu(); };
-  overlay.addEventListener('contextmenu', function(ev) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    var cx = ev.clientX, cy = ev.clientY;
-    closeContextMenu();
-    var el = document.elementFromPoint(cx, cy);
-    if (el) el.dispatchEvent(new MouseEvent('contextmenu', {bubbles:true, cancelable:true, clientX:cx, clientY:cy, button:2}));
-  });
-
-  var menu = document.createElement('div');
-  menu.className = 'cm-menu';
-  menu.id = '_ctxMenu';
-  menu.style.left = e.clientX + 'px';
-  menu.style.top = e.clientY + 'px';
-  menu.oncontextmenu = function(ev) { ev.preventDefault(); };
-
-  function addBtn(label, cls, handler) {
-    var btn = document.createElement('button');
-    btn.textContent = label;
-    if (cls) btn.className = cls;
-    btn.onclick = function() { closeContextMenu(); handler(); };
-    menu.appendChild(btn);
-  }
-
-  addBtn('Rename', '', function() { startInlineItemRename(id); });
-  addBtn('Duplicate', '', function() { duplicateFromMenu(id); });
-  addBtn('Remove', 'danger', function() { deleteItem(id); });
-
-  document.body.appendChild(overlay);
-  document.body.appendChild(menu);
+  var row = e.currentTarget;
+  openContextMenu(e, [
+    {label: 'Rename', handler: function() { startInlineItemRename(id, row); }},
+    {label: 'Duplicate', handler: function() { duplicateFromMenu(id); }},
+    {label: 'Remove', cls: 'danger', handler: function() { deleteItem(id); }},
+  ]);
 }
 
 function duplicateFromMenu(id) {
@@ -409,15 +346,8 @@ function duplicateFromMenu(id) {
   }).catch(function(e) { notify('Duplicate failed: ' + e.message, 'error'); });
 }
 
-function closeContextMenu() {
-  var o = document.getElementById('_ctxMenuOverlay');
-  var m = document.getElementById('_ctxMenu');
-  if (o) o.remove();
-  if (m) m.remove();
-}
-
-function startInlineItemRename(id) {
-  var el = document.querySelector('.item.active');
+function startInlineItemRename(id, row) {
+  var el = row;
   if (!el) return;
   var origHTML = el.innerHTML;
   el.innerHTML = '<input class="item-rename-input" value="' + escAttr(id) + '" maxlength="128">';