Update UI to match consistent layout patterns between pages

- Refactor Add Stream page to match Teams page layout with glass panels
- Rename "Add Stream" to "Streams" in navigation and page title
- Add existing streams display with loading states and empty state
- Implement unified design system with modern glass morphism styling
- Add Header and Footer components with OBS status monitoring
- Update global CSS with comprehensive component styling
- Consolidate client components into main page files
- Add real-time OBS connection status with 30-second polling

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

lib/obsClient.js

@@ -1,18 +1,59 @@
-// const config = require('../config');
 const { OBSWebSocket } = require('obs-websocket-js');
 
 let obs = null;
+let isConnecting = false;
+let connectionPromise = null;
+
+async function ensureConnected() {
+  // If already connected, return the existing client
+  if (obs && obs.identified) {
+    return obs;
+  }
+
+  // If already in the process of connecting, wait for it
+  if (isConnecting && connectionPromise) {
+    return connectionPromise;
+  }
+
+  // Start new connection
+  isConnecting = true;
+  connectionPromise = connectToOBS();
+  
+  try {
+    await connectionPromise;
+    return obs;
+  } finally {
+    isConnecting = false;
+    connectionPromise = null;
+  }
+}
 
 async function connectToOBS() {
+  const OBS_HOST = process.env.OBS_WEBSOCKET_HOST || '127.0.0.1';
+  const OBS_PORT = process.env.OBS_WEBSOCKET_PORT || '4455';
+  const OBS_PASSWORD = process.env.OBS_WEBSOCKET_PASSWORD || '';
+
+  // Create new client if needed
   if (!obs) {
     obs = new OBSWebSocket();
+    
+    // Set up event handlers for connection management
+    obs.on('ConnectionClosed', () => {
+      console.log('OBS WebSocket connection closed');
+      obs = null;
+    });
+
+    obs.on('ConnectionError', (err) => {
+      console.error('OBS WebSocket connection error:', err);
+      obs = null;
+    });
+
+    obs.on('Identified', () => {
+      console.log('OBS WebSocket successfully identified');
+    });
   }
 
   try {
-    const OBS_HOST = process.env.OBS_WEBSOCKET_HOST || '127.0.0.1';
-    const OBS_PORT = process.env.OBS_WEBSOCKET_PORT || '4455';
-    const OBS_PASSWORD = process.env.OBS_WEBSOCKET_PASSWORD || '';
-
     console.log('Connecting to OBS WebSocket...');
     console.log('Host:', OBS_HOST);
     console.log('Port:', OBS_PORT);
@@ -20,49 +61,51 @@ async function connectToOBS() {
 
     await obs.connect(`ws://${OBS_HOST}:${OBS_PORT}`, OBS_PASSWORD);
     console.log('Connected to OBS WebSocket.');
+    return obs;
   } catch (err) {
     console.error('Failed to connect to OBS WebSocket:', err.message);
+    obs = null;
     throw err;
   }
 }
 
-function getOBSClient() {
-  if (!obs) {
-    throw new Error('OBS WebSocket client is not initialized. Call connectToOBS() first.');
-  }
-  // console.log('client', obs)
-  return obs;
+async function getOBSClient() {
+  return await ensureConnected();
+}
+
+function getConnectionStatus() {
+  return {
+    connected: obs && obs.identified,
+    client: obs
+  };
 }
 
 async function disconnectFromOBS() {
   if (obs) {
-    await obs.disconnect();
-    console.log('Disconnected from OBS WebSocket.');
-    obs = null;
+    try {
+      await obs.disconnect();
+      console.log('Disconnected from OBS WebSocket.');
+    } catch (err) {
+      console.error('Error disconnecting from OBS:', err.message);
+    } finally {
+      obs = null;
+    }
   }
 }
 
 async function addSourceToSwitcher(inputName, newSources) {
-  if (!obs) {
-    obs = new OBSWebSocket();
-  }
-
   try {
-    const OBS_HOST = process.env.OBS_WEBSOCKET_HOST || '127.0.0.1';
-    const OBS_PORT = process.env.OBS_WEBSOCKET_PORT || '4455';
-    const OBS_PASSWORD = process.env.OBS_WEBSOCKET_PASSWORD || '';
-
-    await obs.connect(`ws://${OBS_HOST}:${OBS_PORT}`, OBS_PASSWORD);
+    const obsClient = await getOBSClient();
 
     // Step 1: Get current input settings
-    const { inputSettings } = await obs.call('GetInputSettings', { inputName });
+    const { inputSettings } = await obsClient.call('GetInputSettings', { inputName });
     // console.log('Current Settings:', inputSettings);
 
     // Step 2: Add new sources to the sources array
     const updatedSources = [...inputSettings.sources, ...newSources];
 
     // Step 3: Update the settings with the new sources array
-    await obs.call('SetInputSettings', {
+    await obsClient.call('SetInputSettings', {
       inputName,
       inputSettings: {
         ...inputSettings,
@@ -71,9 +114,9 @@ async function addSourceToSwitcher(inputName, newSources) {
     });
 
     console.log('Updated settings successfully for', inputName);
-    obs.disconnect();
   } catch (error) {
     console.error('Error updating settings:', error.message);
+    throw error;
   }
 }
 
@@ -122,4 +165,11 @@ async function addSourceToSwitcher(inputName, newSources) {
 
 
 // Export all functions
-module.exports = { connectToOBS, getOBSClient, disconnectFromOBS, addSourceToSwitcher};
+module.exports = { 
+  connectToOBS, 
+  getOBSClient, 
+  disconnectFromOBS, 
+  addSourceToSwitcher, 
+  ensureConnected,
+  getConnectionStatus
+};