feat: add search/filter to cluster node dropdown and connections page

[alexey-temnikov]

Summary

Adds search/filter capability to the header node-switcher dropdown and the Connections page to support large clusters (e.g., 300+ nodes) where scrolling through a flat list is impractical.

Changes

1. Header node-switcher dropdown (app-header.tsx)

Problem: The dropdown listed all cluster nodes in a flat, unsearchable list. With large clusters this was unusable.

Changes:

• Added SearchInput at the top of the dropdown with auto-focus on open
• Filter matches against primary node key and host:port only (not replicas), preventing false positives where e.g. "02" would match replica *-0001-002 and show shard 0001
• Fixed dropdown height (h-72) to prevent UI jitter as filtered results change
• Fixed dropdown width (w-80) with truncate on long hostnames
• Search state resets on dropdown close and on node navigation
• Empty state message when no nodes match the query
• Moved onClick from inner <button> to Badge so entire badge area toggles dropdown (not just the tiny chevron icon)
• Added badgeRef to outside-click handler to prevent mousedown/click event conflict that caused double-toggle
• Cleaned up connectionDetails destructure — replaced verbose as cast with simple ?? {}

2. Connections page (Connection.tsx)

Problem: No way to search/filter connections on the main screen.

Changes:

• Added SearchInput between the header and connection list
• Filters both cluster groups and standalone connections by connectionId, host, port, username, or alias
• Cluster groups that have zero matching connections are hidden entirely
• Cluster groups with partial matches show only the matching connections (instance count updates accordingly)
• Empty state message with min-h-40 when no connections match — prevents page collapse and reduces visual jitter when transitioning between results and no-results states
• Clear button restores full list
• Extracted matchesSearch as a pure function outside the component

3. Removed dead code

• Removed no-op useMemo — upstream clusterGroups/standaloneConnections are new objects every render (from .reduce()), so memoization never cached. Replaced with honest inline filtering.
• Removed unused hasClusterGroups and hasStandaloneConnections variables
• Removed unused useMemo import

4. Layout stability

• Header dropdown: Fixed h-72 on the node list prevents height changes as filter results change
• Header dropdown: Fixed w-80 width prevents horizontal jitter from varying hostname lengths
• Connections page: min-h-40 on the empty-state message prevents the page from collapsing to a single line when search yields zero results, reducing the visual shift between "all results" and "no results"

Files Changed

File	Lines	Change
apps/frontend/src/components/ui/app-header.tsx	+105 -63	Dropdown search, badge click fix, jitter fix
apps/frontend/src/components/connection/Connection.tsx	+107 -63	Connections page search

Testing

Tested against a live ElastiCache Valkey cluster (6 shards, 2 replicas per shard, 18 total nodes):

Header dropdown search:

• ✅ Dropdown opens on badge text click (not just icon)
• ✅ Search auto-focuses on open
• ✅ "02" filters to only shard 0002 (not all shards with replica -002)
• ✅ "0003" filters to only shard 0003
• ✅ "06" filters to only shard 0006
• ✅ "zzzzz" shows "No nodes match" empty state
• ✅ Clear button restores all nodes
• ✅ Clicking filtered node navigates to correct dashboard
• ✅ Search resets when dropdown closes
• ✅ No UI jitter when typing progressively ("0", "00", "000", "0004")
• ✅ Dropdown height verified stable at 347px via DOM inspection
• ✅ Toggle open/close works cleanly (no double-trigger)

Connections page search:

• ✅ Search input visible between header and connection list
• ✅ "0003" filters cluster to show only 1 matching instance
• ✅ "zzz" shows "No connections match" empty state with min-height
• ✅ Clear button restores all 6 connections
• ✅ Cluster group instance count updates with filter
• ✅ "000" → "0000" transition: search input position stable (verified via getBoundingClientRect), content reflow is expected filter behavior
• ✅ Empty state min-h-40 prevents page collapse on zero results

General:

• ✅ No console errors on any interaction
• ✅ Clean build with no TypeScript errors
• ✅ Cluster Topology page search (pre-existing) unaffected