Add container create page from the containers list with always-pull.

Adds a dedicated blank create form (name, image, always pull, ports,
auto-remove, advanced settings) separate from template Deploy, reuses
deployContainer with pull-if-missing and publish-all-ports support.

app.js

@@ -18,6 +18,7 @@ import {
   initTemplateDeployer,
   filterTemplatesByQuery,
 } from './libs/templateDeploy.js';
+import { initAddContainerPage } from './libs/addContainer.js';
 import { showContainerSkeleton, createProgressBar, updateProgressBar, removeProgressBar } from './libs/loadingStates.js';
 import { closeAllModals, showStatusIndicator, hideStatusIndicator, updateStatusIndicator, showAlert } from './libs/uiUtils.js';
 import notificationManager from './libs/notifications.js';
@@ -964,10 +965,15 @@ function navigateToView(viewName, opts = {}) {
   // Dashboard KPI status filters only apply while browsing containers.
   // Leaving containers (or details) for any other view clears them so the
   // next visit to Containers is unfiltered unless a KPI is clicked again.
+  // Add-container is a sub-flow of the containers area.
   const inContainerArea =
-    currentView === 'containers' || currentView === 'container-details';
+    currentView === 'containers' ||
+    currentView === 'container-details' ||
+    currentView === 'add-container';
   const stayingInContainerArea =
-    viewName === 'containers' || viewName === 'container-details';
+    viewName === 'containers' ||
+    viewName === 'container-details' ||
+    viewName === 'add-container';
   if (inContainerArea && !stayingInContainerArea) {
     resetContainerStatusFilter();
   }
@@ -987,9 +993,13 @@ function navigateToView(viewName, opts = {}) {
   // Scope to sidebar view links only. Using `.nav-link` globally strips `active`
   // from Bootstrap tabs (container details, swarm, settings), leaving orphaned
   // `.tab-pane.show.active` panes that stack when reopening details.
+  // Highlight Containers while on add-container (create is a sub-flow).
   if (viewName !== 'container-details') {
     document.querySelectorAll('#sidebar .nav-link[data-view]').forEach((link) => {
-      link.classList.toggle('active', link.dataset.view === viewName);
+      const isActive =
+        link.dataset.view === viewName ||
+        (viewName === 'add-container' && link.dataset.view === 'containers');
+      link.classList.toggle('active', isActive);
     });
   }
 
@@ -1025,6 +1035,9 @@ function navigateToView(viewName, opts = {}) {
     window.peardockOps?.loadSwarmView?.();
   } else if (viewName === 'deploy') {
     loadDeployView();
+  } else if (viewName === 'add-container') {
+    initAddContainerPage();
+    if (typeof applyRoleUI === 'function') applyRoleUI();
   } else if (viewName === 'fleet') {
     loadFleetView();
   } else if (viewName === 'peers') {
@@ -8470,6 +8483,9 @@ document.addEventListener('DOMContentLoaded', () => {
     sendCommand,
   });
 
+  // Add container page (blank create form)
+  initAddContainerPage();
+
   // Prefer smart network modal for create buttons
   document.querySelectorAll('[data-bs-target="#createNetworkModal"]').forEach((btn) => {
     btn.setAttribute('data-bs-target', '#createNetworkSmartModal');