Add Pod lifecycle management, fix nav registration and context-menu bugs

Pods panel could previously only list pods - there was no way to create
one, start/stop/restart it, or attach a container to it from the UI.
Adds a "New Pod" modal (name + port mappings), a per-pod lifecycle menu
(start/stop/restart/remove), and an optional "Pod" field on the Create
Container modal to join an existing pod's network namespace. Backend
verified live against the real podman socket (/pods/create, /pods/{name}/
restart, container "pod" field).

Also fixes three real bugs found via live testing:
- Podman.page used Menu="Podman" instead of Menu="Tasks:<rank>", so the
  plugin never actually appeared in Unraid's top navigation (traced through
  PageBuilder.php/DefaultPageLayout.php/Navigation/Main.php - only pages
  registered under "Tasks" become top-level tabs).
- app.js's shared context-menu component mis-mapped every item positioned
  after a 'separator' entry to the wrong DOM element (an off-by-one against
  menu.children, which includes the separator <div>s) - so "Remove", which
  always sits after a separator, silently did nothing when clicked. Fixed
  by indexing into querySelectorAll('button') instead.
- That same menu was positioned via "position: absolute" math that assumed
  a viewport-relative containing block, but Unraid's own page wrapper
  (webGui/styles/default-base.css's ".content") sets position:relative,
  so the menu rendered far from its anchor button. Switched to
  "position: fixed" with viewport-relative coordinates.

Incidentally, pods add a hidden "infra" container that was leaking into
the plain Containers list with no working lifecycle of its own (always
"running", so its own Remove was permanently disabled) - now filtered out
via libpod's IsInfra flag. And every action-buttons table cell used
"display: flex" directly on the <td>, which browsers can size
inconsistently row to row - moved onto an inner wrapper div instead, and
bumped .podman-btn-icon's touch target size.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

webui/plugins/podman/javascript/app.js

@@ -252,15 +252,25 @@ window.Podman = (function () {
         (item.disabled ? ' disabled' : '') + '>' + escapeHtml(item.label) + '</button>';
     }).join('');
 
+    // Viewport-relative (see the "position: fixed" comment on
+    // .podman-context-menu in podman.css) — no scrollY/scrollX added.
     const rect = anchorEl.getBoundingClientRect();
-    menu.style.top = (rect.bottom + window.scrollY + 4) + 'px';
-    menu.style.left = (rect.right + window.scrollX - 180) + 'px';
+    menu.style.top = (rect.bottom + 4) + 'px';
+    menu.style.left = (rect.right - 180) + 'px';
     (document.querySelector('.podman-plugin') || document.body).appendChild(menu);
 
+    // menu.children includes the separator <div>s too, so indexing into it
+    // directly (by a counter that only advances for real items) drifts by
+    // one after every separator — e.g. "Remove" (after a separator) ended
+    // up wired to the separator <div> instead of its own <button>, so
+    // clicking it did nothing. querySelectorAll('button') only ever
+    // returns the actual buttons, in the same order as the non-separator
+    // items, so indexing into that stays aligned regardless of separators.
+    const buttons = menu.querySelectorAll('button');
     let buttonIndex = 0;
     items.forEach(function (item) {
       if (item === 'separator') return;
-      const btn = menu.children[buttonIndex];
+      const btn = buttons[buttonIndex];
       buttonIndex++;
       if (item.disabled) return;
       btn.addEventListener('click', function (e) {

webui/plugins/podman/javascript/containers.js

@@ -29,7 +29,7 @@
       '<td>' + cpuMem + '</td>' +
       '<td class="mono podman-row-sub">' + P.escapeHtml(c.ports.join(', ') || '&mdash;') + '</td>' +
       '<td class="tnum">' + P.formatDuration(c.uptimeSeconds) + '</td>' +
-      '<td class="podman-actions">' + actionButtons(c) + '</td>' +
+      '<td class="podman-actions"><div class="podman-actions-row">' + actionButtons(c) + '</div></td>' +
       '</tr>';
   }
 
@@ -325,6 +325,9 @@
       '<div class="podman-modal-field"><label>Network</label>' +
       '<select id="cc-network"><option value="bridge">Bridge (default)</option>' +
       '<option value="host">Host</option><option value="none">None</option></select></div>' +
+      '<div class="podman-modal-field"><label>Pod (optional)</label>' +
+      '<select id="cc-pod"><option value="">None</option></select>' +
+      '<div class="hint">Joins the pod\'s shared network namespace instead of the setting above.</div></div>' +
       '<div class="podman-modal-field"><label>Port mappings</label>' +
       '<div class="podman-row-group" id="cc-ports"></div>' +
       '<button type="button" class="podman-btn podman-btn-ghost" data-add="port">+ Add port</button></div>' +
@@ -388,6 +391,16 @@
       });
     }).catch(function () { /* built-in modes still usable */ });
 
+    P.get('pods', 'list').then(function (pods) {
+      const select = backdrop.querySelector('#cc-pod');
+      pods.forEach(function (p) {
+        const opt = document.createElement('option');
+        opt.value = p.name;
+        opt.textContent = p.name;
+        select.appendChild(opt);
+      });
+    }).catch(function () { /* pod selection stays optional */ });
+
     backdrop.querySelector('#cc-image').focus();
 
     backdrop.querySelector('#cc-save-template').addEventListener('change', function (e) {
@@ -440,6 +453,7 @@
         image: image,
         name: backdrop.querySelector('#cc-name').value.trim(),
         networkMode: networkMode,
+        pod: backdrop.querySelector('#cc-pod').value,
         ports: ports,
         volumes: volumes,
         env: env,

webui/plugins/podman/javascript/images.js

@@ -18,8 +18,8 @@
       '<td class="tnum">' + P.escapeHtml(img.sizeFormatted) + '</td>' +
       '<td class="tnum">' + created + '</td>' +
       '<td class="tnum">' + img.usedBy + '</td>' +
-      '<td class="podman-actions"><button class="podman-btn podman-btn-icon" data-action="remove"' +
-      (img.usedBy > 0 ? ' disabled title="In use by a container"' : ' title="Remove"') + '>&#128465;</button></td>' +
+      '<td class="podman-actions"><div class="podman-actions-row"><button class="podman-btn podman-btn-icon" data-action="remove"' +
+      (img.usedBy > 0 ? ' disabled title="In use by a container"' : ' title="Remove"') + '>&#128465;</button></div></td>' +
       '</tr>';
   }
 

webui/plugins/podman/javascript/networks.js

@@ -20,8 +20,8 @@
       '<td class="mono">' + P.escapeHtml(n.subnet || '&mdash;') + '</td>' +
       '<td class="mono">' + P.escapeHtml(n.gateway || '&mdash;') + '</td>' +
       '<td class="tnum">' + n.containers + '</td>' +
-      '<td class="podman-actions"><button class="podman-btn podman-btn-icon" data-action="remove"' +
-      (removeDisabled ? ' disabled' : '') + ' title="Remove">&#128465;</button></td>' +
+      '<td class="podman-actions"><div class="podman-actions-row"><button class="podman-btn podman-btn-icon" data-action="remove"' +
+      (removeDisabled ? ' disabled' : '') + ' title="Remove">&#128465;</button></div></td>' +
       '</tr>';
   }
 

webui/plugins/podman/javascript/pods.js

@@ -8,6 +8,107 @@
 (function () {
   'use strict';
   const P = window.Podman;
+  let allPods = [];
+
+  function portRowHtml() {
+    return '' +
+      '<div class="podman-row-group-item">' +
+      '<input type="text" class="mono podman-input-narrow" data-field="hostPort" placeholder="Host port">' +
+      '<span>&rarr;</span>' +
+      '<input type="text" class="mono podman-input-narrow" data-field="containerPort" placeholder="Container port">' +
+      '<select data-field="protocol"><option value="tcp">TCP</option><option value="udp">UDP</option></select>' +
+      '<button type="button" class="podman-btn podman-btn-icon podman-row-remove-btn" data-remove-row title="Remove">&times;</button>' +
+      '</div>';
+  }
+
+  function addRow(groupEl) {
+    const div = document.createElement('div');
+    div.innerHTML = portRowHtml();
+    const row = div.firstElementChild;
+    row.querySelector('[data-remove-row]').addEventListener('click', function () { row.remove(); });
+    groupEl.appendChild(row);
+  }
+
+  function readRows(groupEl) {
+    return Array.from(groupEl.children).map(function (row) {
+      const values = {};
+      row.querySelectorAll('[data-field]').forEach(function (input) {
+        values[input.dataset.field] = input.value.trim();
+      });
+      return values;
+    });
+  }
+
+  function openCreatePodModal() {
+    const backdrop = document.createElement('div');
+    backdrop.className = 'podman-modal-backdrop';
+    backdrop.innerHTML = '' +
+      '<div class="podman-modal" role="dialog" aria-modal="true">' +
+      '<div class="podman-modal-head"><h3>New Pod</h3></div>' +
+      '<form class="podman-modal-body">' +
+      '<div class="podman-modal-field"><label>Name</label>' +
+      '<input type="text" id="cp-name" placeholder="my-pod">' +
+      '<div class="hint">Letters, digits, ".", "_", "-" only — no spaces.</div></div>' +
+      '<div class="podman-modal-field"><label>Port mappings</label>' +
+      '<div class="podman-row-group" id="cp-ports"></div>' +
+      '<button type="button" class="podman-btn podman-btn-ghost" data-add="port">+ Add port</button>' +
+      '<div class="hint">Shared by every container later added to this pod.</div></div>' +
+      '</form>' +
+      '<div class="podman-modal-actions">' +
+      '<button type="button" class="podman-btn podman-btn-ghost" data-role="cancel">Cancel</button>' +
+      '<button type="button" class="podman-btn podman-btn-primary" data-role="submit">Create</button>' +
+      '</div></div>';
+
+    (document.querySelector('.podman-plugin') || document.body).appendChild(backdrop);
+
+    const portsGroup = backdrop.querySelector('#cp-ports');
+    addRow(portsGroup);
+    backdrop.querySelector('[data-add="port"]').addEventListener('click', function () { addRow(portsGroup); });
+    backdrop.querySelector('#cp-name').focus();
+
+    function close() { backdrop.remove(); }
+
+    function showError(message) {
+      let box = backdrop.querySelector('.podman-modal-error');
+      if (!box) {
+        box = document.createElement('div');
+        box.className = 'podman-modal-error';
+        backdrop.querySelector('.podman-modal-body').appendChild(box);
+      }
+      box.textContent = message;
+    }
+
+    function submit() {
+      const name = backdrop.querySelector('#cp-name').value.trim();
+      if (!name) {
+        showError('"Name" is required.');
+        return;
+      }
+      if (!/^[a-zA-Z0-9][a-zA-Z0-9_.-]*$/.test(name)) {
+        showError('"Name" can only contain letters, digits, ".", "_", "-" — no spaces. Try "' + name.replace(/[^a-zA-Z0-9_.-]+/g, '-') + '" instead.');
+        return;
+      }
+      const ports = readRows(portsGroup).filter(function (r) { return r.hostPort && r.containerPort; });
+
+      const submitBtn = backdrop.querySelector('[data-role="submit"]');
+      submitBtn.disabled = true;
+      P.post('pods', 'create', { name: name, ports: ports }).then(function () {
+        close();
+        return load();
+      }).catch(function (err) {
+        submitBtn.disabled = false;
+        showError(err.message);
+      });
+    }
+
+    backdrop.querySelector('[data-role="cancel"]').addEventListener('click', close);
+    backdrop.querySelector('[data-role="submit"]').addEventListener('click', submit);
+    backdrop.querySelector('form').addEventListener('submit', function (e) { e.preventDefault(); submit(); });
+    backdrop.addEventListener('click', function (e) { if (e.target === backdrop) close(); });
+    document.addEventListener('keydown', function onKey(e) {
+      if (e.key === 'Escape') { close(); document.removeEventListener('keydown', onKey); }
+    });
+  }
 
   function memberRow(m) {
     return '' +
@@ -24,27 +125,77 @@
       : '<tr><td colspan="3" class="podman-empty-note">No member containers</td></tr>';
 
     return '' +
-      '<div class="podman-pod-card">' +
+      '<div class="podman-pod-card" data-name="' + P.escapeHtml(pod.name) + '">' +
       '<div class="podman-pod-head">' +
       '<span class="podman-chip ' + P.stateChipClass(pod.status) + '"><span class="d"></span>' + P.escapeHtml(pod.status) + '</span>' +
       '<span class="name">' + P.escapeHtml(pod.name) + '</span>' +
       '<span class="infra">' + pod.containersTotal + ' container(s)</span>' +
+      '<button type="button" class="podman-btn podman-btn-icon" data-action="menu" title="More">&#8942;</button>' +
       '</div>' +
       '<div class="podman-table-wrap"><table><thead><tr><th>Container</th><th>Image</th><th>Status</th></tr></thead>' +
       '<tbody>' + members + '</tbody></table></div>' +
       '</div>';
   }
 
+  function render() {
+    const grid = P.el('pods-grid');
+    grid.innerHTML = allPods.length
+      ? allPods.map(podCard).join('')
+      : '<div class="podman-empty-note">No pods yet — create one, or run a container with a "pod" set from the Create Container form.</div>';
+  }
+
   function load() {
     const container = P.el('podman-panel-pods');
-    return P.get('pods', 'list').then(function (pods) {
-      container.innerHTML = pods.length
-        ? pods.map(podCard).join('')
-        : '<div class="podman-card"><div class="podman-empty-note">No pods yet.</div></div>';
+    if (!P.el('pods-grid')) {
+      container.innerHTML = '' +
+        '<div class="podman-card">' +
+        '<div class="podman-toolbar">' +
+        '<strong style="flex:1;">Group containers sharing network/storage namespaces</strong>' +
+        '<button class="podman-btn podman-btn-primary" id="pods-create-btn">+ New Pod</button>' +
+        '</div>' +
+        '<div id="pods-grid"></div>' +
+        '</div>';
+      P.el('pods-create-btn').addEventListener('click', openCreatePodModal);
+      P.el('pods-grid').addEventListener('click', handleCardClick);
+    }
+    return P.get('pods', 'list').then(function (data) {
+      allPods = data;
+      render();
     }).catch(function (err) {
-      container.innerHTML = '<div class="podman-card"><div class="podman-error">' + P.escapeHtml(err.message) + '</div></div>';
+      P.el('pods-grid').innerHTML = '<div class="podman-error">' + P.escapeHtml(err.message) + '</div>';
     });
   }
 
+  function handleAction(name, action, extra) {
+    return P.post('pods', action, Object.assign({ name: name }, extra)).then(load).catch(function (err) {
+      alert('Action failed: ' + err.message);
+    });
+  }
+
+  function handleCardClick(e) {
+    const btn = e.target.closest('button[data-action="menu"]');
+    if (!btn) return;
+    const pod = allPods.find(function (p) { return p.name === btn.closest('.podman-pod-card').dataset.name; });
+    if (!pod) return;
+
+    const items = [];
+    if (pod.status === 'running') {
+      items.push({ label: 'Stop', onClick: function () { handleAction(pod.name, 'stop', { timeout: 10 }); } });
+      items.push({ label: 'Restart', onClick: function () { handleAction(pod.name, 'restart', { timeout: 10 }); } });
+    } else {
+      items.push({ label: 'Start', onClick: function () { handleAction(pod.name, 'start'); } });
+    }
+    items.push('separator');
+    items.push({
+      label: 'Remove',
+      danger: true,
+      onClick: function () {
+        if (!confirm('Remove pod "' + pod.name + '" and all its member containers?')) return;
+        handleAction(pod.name, 'remove', { force: true });
+      },
+    });
+    P.openContextMenu(btn, items);
+  }
+
   P.registerPanel('pods', { init: load, refresh: load });
 })();

webui/plugins/podman/javascript/settings.js

@@ -17,11 +17,11 @@
         return '<tr data-index="' + i + '">' +
           '<td class="tnum">' + (i + 1) + '</td>' +
           '<td>' + P.escapeHtml(name) + '</td>' +
-          '<td class="podman-actions">' +
+          '<td class="podman-actions"><div class="podman-actions-row">' +
           '<button class="podman-btn podman-btn-icon" data-action="up"' + (i === 0 ? ' disabled' : '') + ' title="Move up">&#8593;</button>' +
           '<button class="podman-btn podman-btn-icon" data-action="down"' + (i === autostartNames.length - 1 ? ' disabled' : '') + ' title="Move down">&#8595;</button>' +
           '<button class="podman-btn podman-btn-icon" data-action="remove" title="Remove from autostart">&#128465;</button>' +
-          '</td></tr>';
+          '</div></td></tr>';
       }).join('')
       : '<tr><td colspan="3" class="podman-empty-note">No containers in the autostart chain.</td></tr>';
   }

webui/plugins/podman/javascript/volumes.js

@@ -24,8 +24,8 @@
       '<td><span class="podman-chip podman-chip-neutral">' + P.escapeHtml(v.driver) + '</span></td>' +
       '<td class="mono podman-row-sub">' + pathCell + '</td>' +
       '<td class="tnum">' + v.usedBy + '</td>' +
-      '<td class="podman-actions"><button class="podman-btn podman-btn-icon" data-action="remove"' +
-      (v.usedBy > 0 ? ' disabled title="In use by a container"' : ' title="Remove"') + '>&#128465;</button></td>' +
+      '<td class="podman-actions"><div class="podman-actions-row"><button class="podman-btn podman-btn-icon" data-action="remove"' +
+      (v.usedBy > 0 ? ' disabled title="In use by a container"' : ' title="Remove"') + '>&#128465;</button></div></td>' +
       '</tr>';
   }