Fix React hooks violation causing error on mobile-to-desktop viewport switch

[Copilot]

Problem

Viewport transitions at the 768px breakpoint trigger React error: Rendered fewer hooks than expected. The ContentView component places a useEffect hook inside a conditional if (isMobile) block, violating Rules of Hooks.

Changes

Replace global functions with Redux state management

• Removed global window functions (switchToDetailsTab, switchToTopicsTab, etc.)
• Added mobileTab field to Global Redux state to track active tab (0=topics, 1=details, 2=publish, 3=charts)
• Created setMobileTab action creator for centralized tab switching
• Updated ContentView to read mobileTab from Redux state via mapStateToProps
• Updated TreeNode to dispatch setMobileTab(1) when selecting topics on mobile
• Updated SearchBar to dispatch setMobileTab(0) when search is focused on mobile

Before:

if (isMobile) {
  React.useEffect(() => {
    // Setup global tab switching functions
    (window as any).switchToDetailsTab = () => setMobileTab(1)
    // ...
  }, [])
  // Render mobile UI
}

After:

// Redux action
export const setMobileTab = (tabIndex: number) => ({
  mobileTab: tabIndex,
  type: ActionTypes.setMobileTab,
})

// Component dispatches action
actions.setMobileTab(1)

Added comprehensive viewport switching tests

• Mobile ↔ Desktop transitions at 768px breakpoint
• Rapid viewport changes to catch timing-related issues
• Playwright-based browser tests in src/spec/viewport-switching.spec.ts

This solution follows proper React/Redux patterns with centralized state management instead of relying on global window functions, eliminating the React hooks violation and maintaining clean architecture.

Original prompt

When rotating the phone and the UI switches from mobile to desktop a react error appears, debug this by changing the viewport width (breakpoint should be around 768px) use playwright to debug

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[thomasnordquist]

@copilot remove global functions like switchToDetailsTab. Try to solve this another way

[github-actions]

✅ Mobile Demo Video Generated Successfully

Full Mobile Video (Pixel 6 - 412x914)

📥 Download Mobile Video (MP4) | GIF

---

📑 Mobile Video Segments

Click to expand mobile segments

1. MQTT Explorer on Mobile (5.1s)

2. Connect to MQTT Broker (8.0s)

3. Browse Topic Tree (9.0s)

4. View Message Details (6.8s)

5. Search Topics (9.3s)

6. JSON Message Formatting (9.6s)

7. Settings with Disconnect/Logout (2.6s)

8. Mobile-Friendly MQTT Explorer (4.5s)

Mobile videos recorded at 412x914 (Pixel 6 viewport). Videos will expire in 90 days.

[Copilot]

@copilot remove global functions like switchToDetailsTab. Try to solve this another way

Replaced global functions with Redux state management in commit 9670d35. Changes:

• Added mobileTab to Global Redux state (0=topics, 1=details, 2=publish, 3=charts)
• Created setMobileTab action for dispatching tab changes
• Updated ContentView to use Redux state via mapStateToProps
• Updated TreeNode to dispatch setMobileTab(1) when selecting topics on mobile
• Updated SearchBar to dispatch setMobileTab(0) when search is focused on mobile
• Removed all global window functions (switchToDetailsTab, switchToTopicsTab, switchToPublishTab, switchToChartsTab)

All tests passing: viewport switching (3/3), UI tests (8/8), app unit tests (67/67).

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• esm.ubuntu.com
  • Triggering command: /usr/lib/apt/methods/https /usr/lib/apt/methods/https (dns block)
• https://storage.googleapis.com/chrome-for-testing-public/143.0.7499.4/linux64/chrome-headless-shell-linux64.zip
  • Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node /opt/hostedtoolcache/node/24.13.0/x64/bin/node /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/node_modules/playwright-core/lib/server/registry/oopDownloadBrowserMain.js (http block)
• https://storage.googleapis.com/chrome-for-testing-public/143.0.7499.4/linux64/chrome-linux64.zip
  • Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node /opt/hostedtoolcache/node/24.13.0/x64/bin/node /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/node_modules/playwright-core/lib/server/registry/oopDownloadBrowserMain.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)