From 4402b3ce2eb33ee978a1fca250c6f27451d2d68c Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Mon, 12 Jan 2026 19:08:13 +0000
Subject: [PATCH] fix(docker): connect Grouped/List toggle to table view state

The Grouped/List toggle buttons in DockerFilter were updating the
external groupingMode state, but DockerUnifiedTable had its own
internal sortKey state for determining whether to show grouped vs
flat view. These two states were completely disconnected.

Added groupingMode prop to DockerUnifiedTable and a createEffect to
sync the external state with the internal sort state.

Fixes #1100
---
 .../src/components/Docker/DockerHosts.tsx            |  1 +
 .../src/components/Docker/DockerUnifiedTable.tsx     | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/frontend-modern/src/components/Docker/DockerHosts.tsx b/frontend-modern/src/components/Docker/DockerHosts.tsx
index 6890eede5..2fbf8e0ef 100644
--- a/frontend-modern/src/components/Docker/DockerHosts.tsx
+++ b/frontend-modern/src/components/Docker/DockerHosts.tsx
@@ -623,6 +623,7 @@ export const DockerHosts: Component<DockerHostsProps> = (props) => {
                 dockerHostMetadata={dockerHostMetadata()}
                 onCustomUrlUpdate={handleCustomUrlUpdate}
                 batchUpdateState={batchUpdateState}
+                groupingMode={groupingMode() === 'flat' ? 'flat' : 'grouped'}
               />
             }
           >
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index ca46b0d1f..0dbfcfad6 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -76,6 +76,7 @@ interface DockerUnifiedTableProps {
   dockerHostMetadata?: Record<string, DockerHostMetadata>;
   onCustomUrlUpdate?: (resourceId: string, url: string) => void;
   batchUpdateState?: Record<string, 'updating' | 'queued' | 'error'>;
+  groupingMode?: 'grouped' | 'flat';
 }
 
 type SortKey =
@@ -2481,6 +2482,17 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
 
   const isGroupedView = createMemo(() => sortKey() === 'host');
 
+  // Sync external groupingMode prop with internal sort state
+  createEffect(() => {
+    const mode = props.groupingMode;
+    if (mode === 'grouped' && sortKey() !== 'host') {
+      setSortKey('host');
+    } else if (mode === 'flat' && sortKey() === 'host') {
+      // Switch to resource sort for flat view
+      setSortKey('resource');
+    }
+  });
+
   const handleSort = (key: SortKey) => {
     if (sortKey() === key) {
       setSortDirection(sortDirection() === 'asc' ? 'desc' : 'asc');