From 3fce6707b0837574eaaa02019a2020c07e548c06 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Wed, 19 Nov 2025 19:37:51 -0500
Subject: [PATCH] feat: re-add compact mode

---
 .../Docker/DockerContainerManagement.vue      | 58 +++++++++++++++----
 .../composables/useDockerEditNavigation.ts    | 41 +++++++++----
 2 files changed, 79 insertions(+), 20 deletions(-)

diff --git a/web/src/components/Docker/DockerContainerManagement.vue b/web/src/components/Docker/DockerContainerManagement.vue
index 78519f997..7fb61cf16 100644
--- a/web/src/components/Docker/DockerContainerManagement.vue
+++ b/web/src/components/Docker/DockerContainerManagement.vue
@@ -207,7 +207,7 @@ const hasPortConflicts = computed(
   () => lanPortConflicts.value.length + containerPortConflicts.value.length > 0
 );
 
-const { navigateToEditPage } = useDockerEditNavigation();
+const { getLegacyEditUrl, shouldUseLegacyEditPage } = useDockerEditNavigation();
 
 function getOrganizerEntryIdByContainerId(containerId: string): string | null {
   const entry = flatEntries.value.find(
@@ -225,10 +225,6 @@ function focusContainerFromConflict(containerId: string) {
 }
 
 function handleConflictContainerAction(conflictContainer: PortConflictContainer) {
-  const targetContainer = containers.value.find((container) => container.id === conflictContainer.id);
-  if (targetContainer && navigateToEditPage(targetContainer, conflictContainer.name)) {
-    return;
-  }
   focusContainerFromConflict(conflictContainer.id);
 }
 
@@ -275,10 +271,6 @@ function handleTableRowClick(payload: {
   const entry = flatEntries.value.find((e) => e.id === payload.id && e.type === 'container');
   const container = entry?.meta as DockerContainer | undefined;
 
-  if (navigateToEditPage(container)) {
-    return;
-  }
-
   setActiveContainer(payload.id);
 }
 
@@ -307,6 +299,8 @@ const activeContainer = computed<DockerContainer | undefined>(() => {
   return entry?.meta as DockerContainer | undefined;
 });
 
+const legacyEditUrl = computed(() => getLegacyEditUrl(activeContainer.value));
+
 // Details data (mix of real and placeholder until specific queries exist)
 const detailsItem = computed(() => {
   const name = (activeContainer.value?.names?.[0] || '').replace(/^\//, '') || 'Unknown';
@@ -439,7 +433,51 @@ const isDetailsDisabled = computed(() => props.disabled || isSwitching.value);
         />
       </UCard>
 
-      <div>
+      <div v-if="shouldUseLegacyEditPage">
+        <UCard class="flex min-h-[60vh] flex-col">
+          <template #header>
+            <div class="flex items-center justify-between gap-2">
+              <div class="flex items-center gap-2">
+                <UButton
+                  size="xs"
+                  variant="ghost"
+                  icon="i-lucide-arrow-left"
+                  @click="goBackToOverview"
+                />
+                <div class="font-medium">Legacy Container Management</div>
+              </div>
+              <UBadge
+                v-if="activeContainer?.state"
+                :label="activeContainer.state"
+                color="primary"
+                variant="subtle"
+              />
+            </div>
+          </template>
+          <div
+            :class="['relative min-h-[60vh]', { 'pointer-events-none opacity-50': isDetailsDisabled }]"
+          >
+            <iframe
+              v-if="legacyEditUrl"
+              :key="legacyEditUrl"
+              :src="legacyEditUrl"
+              class="h-[70vh] w-full border-0"
+              loading="lazy"
+            />
+            <div v-else class="flex h-[70vh] items-center justify-center text-sm text-neutral-500">
+              Unable to load legacy container management for this entry.
+            </div>
+            <div
+              v-if="isDetailsLoading"
+              class="absolute inset-0 grid place-items-center bg-white/60 dark:bg-gray-900/60"
+            >
+              <USkeleton class="h-6 w-6" />
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <div v-else>
         <UCard class="mb-4">
           <template #header>
             <div class="flex items-center justify-between gap-2">
diff --git a/web/src/composables/useDockerEditNavigation.ts b/web/src/composables/useDockerEditNavigation.ts
index 1c835408a..db3307ef2 100644
--- a/web/src/composables/useDockerEditNavigation.ts
+++ b/web/src/composables/useDockerEditNavigation.ts
@@ -2,29 +2,50 @@ import { featureFlags } from '@/helpers/env';
 
 import type { DockerContainer } from '@/composables/gql/graphql';
 
+function buildLegacyEditUrl(templatePath: string) {
+  if (typeof window === 'undefined') return null;
+  const currentPath = window.location.pathname;
+  const basePath = currentPath.substring(
+    0,
+    currentPath.indexOf('?') === -1 ? currentPath.length : currentPath.indexOf('?')
+  );
+  const searchParams = new URLSearchParams({
+    xmlTemplate: `edit:${templatePath}`,
+    iframe: 'true',
+  });
+  return `${basePath}/UpdateContainer?${searchParams.toString()}`;
+}
+
 export function useDockerEditNavigation() {
-  function navigateToEditPage(container: DockerContainer | undefined, containerName?: string) {
-    if (!featureFlags.DOCKER_EDIT_PAGE_NAVIGATION) {
-      return false;
+  const shouldUseLegacyEditPage = featureFlags.DOCKER_EDIT_PAGE_NAVIGATION;
+
+  function getLegacyEditUrl(container: DockerContainer | undefined, containerName?: string) {
+    if (!shouldUseLegacyEditPage) {
+      return null;
     }
 
     const name = containerName || (container?.names?.[0] || '').replace(/^\//, '');
     const templatePath = container?.templatePath;
 
     if (!name || !templatePath) {
-      return false;
+      return null;
     }
 
-    const currentPath = window.location.pathname;
-    const basePath = currentPath.substring(
-      0,
-      currentPath.indexOf('?') === -1 ? currentPath.length : currentPath.indexOf('?')
-    );
-    window.location.href = `${basePath}/UpdateContainer?xmlTemplate=edit:${encodeURIComponent(templatePath)}`;
+    return buildLegacyEditUrl(templatePath);
+  }
+
+  function navigateToEditPage(container: DockerContainer | undefined, containerName?: string) {
+    const url = getLegacyEditUrl(container, containerName);
+    if (!url) {
+      return false;
+    }
+    window.location.href = url;
     return true;
   }
 
   return {
+    getLegacyEditUrl,
     navigateToEditPage,
+    shouldUseLegacyEditPage,
   };
 }