From c48c5b8861acc8796903c4e6827710d7521af638 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 12 Dec 2025 23:43:13 +0000
Subject: [PATCH] fix(hosts): Merge filter sections into single row

---
 .../src/components/Hosts/HostsFilter.tsx      |  2 --
 frontend-modern/src/stores/websocket.ts       | 33 ++++++++++---------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/frontend-modern/src/components/Hosts/HostsFilter.tsx b/frontend-modern/src/components/Hosts/HostsFilter.tsx
index 26444cf..1e38608 100644
--- a/frontend-modern/src/components/Hosts/HostsFilter.tsx
+++ b/frontend-modern/src/components/Hosts/HostsFilter.tsx
@@ -359,9 +359,7 @@ export const HostsFilter: Component<HostsFilterProps> = (props) => {
               Offline
             </button>
           </div>
-        </div>
 
-        <div class="flex flex-wrap items-center gap-2">
           <Show when={props.activeHostName}>
             <div class="flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
               <span>Host: {props.activeHostName}</span>
diff --git a/frontend-modern/src/stores/websocket.ts b/frontend-modern/src/stores/websocket.ts
index f32d54b..5bbd9b0 100644
--- a/frontend-modern/src/stores/websocket.ts
+++ b/frontend-modern/src/stores/websocket.ts
@@ -334,16 +334,18 @@ export function createWebSocketStore(url: string) {
       try {
         const message: WSMessage = data;
 
-        if (
-          message.type === WEBSOCKET.MESSAGE_TYPES.INITIAL_STATE ||
-          message.type === WEBSOCKET.MESSAGE_TYPES.RAW_DATA
-        ) {
-          // Update state properties individually to ensure reactivity
-          if (message.data) {
-            // Mark that we've received usable data (initial payload or raw update)
-            if (!initialDataReceived()) {
-              setInitialDataReceived(true);
-            }
+	        if (
+	          message.type === WEBSOCKET.MESSAGE_TYPES.INITIAL_STATE ||
+	          message.type === WEBSOCKET.MESSAGE_TYPES.RAW_DATA
+	        ) {
+	          // Update state properties individually, but batch the whole payload to
+	          // reduce reactive recomputations and UI thrash on large updates.
+	          if (message.data) {
+	            batch(() => {
+	            // Mark that we've received usable data (initial payload or raw update)
+	            if (!initialDataReceived()) {
+	              setInitialDataReceived(true);
+	            }
 
             // Only update if we have actual data, don't overwrite with empty arrays
             if (message.data.nodes !== undefined) {
@@ -645,11 +647,12 @@ export function createWebSocketStore(url: string) {
 
               // Updated recentlyResolved
             }
-            setState('lastUpdate', message.data.lastUpdate || new Date().toISOString());
-          }
-          logger.debug('message', {
-            type: message.type,
-            hasData: !!message.data,
+	            setState('lastUpdate', message.data.lastUpdate || new Date().toISOString());
+	            });
+	          }
+	          logger.debug('message', {
+	            type: message.type,
+	            hasData: !!message.data,
             nodeCount: message.data?.nodes?.length || 0,
             vmCount: message.data?.vms?.length || 0,
             containerCount: message.data?.containers?.length || 0,