Implement mobile-first navigation with tabs, server-side auto-connect, improve mobile UX (#1008)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>

app/src/autoConnectHandler.ts

@@ -0,0 +1,48 @@
+// Auto-connect handler for browser mode
+// This file is loaded early in the app initialization to handle server-initiated auto-connect
+
+import { store } from './store'
+import * as q from '../../backend/src/Model'
+import { TopicViewModel } from './model/TopicViewModel'
+import { showTree } from './actions/Tree'
+import { connecting, connected } from './actions/Connection'
+import { makeConnectionStateEvent, rendererEvents } from './eventBus'
+import { DataSourceState } from '../../backend/src/DataSource'
+
+// Listen for auto-connect-initiated event from server
+if (typeof window !== 'undefined') {
+  window.addEventListener('mqtt-auto-connect-initiated', ((event: CustomEvent) => {
+    const { connectionId } = event.detail
+    console.log('Auto-connect initiated from server, connectionId:', connectionId)
+    
+    // Dispatch connecting action
+    store.dispatch(connecting(connectionId) as any)
+    console.log('Dispatched connecting action')
+    
+    // Subscribe to connection state events
+    const stateEvent = makeConnectionStateEvent(connectionId)
+    console.log('Subscribing to connection state event:', stateEvent)
+    
+    rendererEvents.subscribe(stateEvent, (dataSourceState: DataSourceState) => {
+      console.log('Auto-connect state update:', JSON.stringify(dataSourceState, null, 2))
+      
+      if (dataSourceState.connected) {
+        console.log('Auto-connect: connection established!')
+        const state = store.getState()
+        const didReconnect = Boolean(state.connection.tree)
+        if (!didReconnect) {
+          // Create tree and update with connection
+          console.log('Creating tree for connection:', connectionId)
+          const tree = new q.Tree<TopicViewModel>()
+          tree.updateWithConnection(rendererEvents, connectionId)
+          store.dispatch(showTree(tree) as any)
+          store.dispatch(connected(tree, 'auto-connect') as any)
+          console.log('Auto-connect successful, tree created and dispatched')
+        }
+      } else if (dataSourceState.error) {
+        console.error('Auto-connect error:', dataSourceState.error)
+      }
+    })
+    console.log('Auto-connect handler setup complete')
+  }) as EventListener)
+}