Resolve merge conflicts in page.tsx and Footer.tsx

- Unified API response format handling to support both old and new formats
- Maintained enhanced UI layout from HEAD branch
- Preserved performance optimizations and smart polling features
- Ensured consistent error handling across components

app/page.tsx

@@ -7,17 +7,12 @@ import { useToast } from '@/lib/useToast';
 import { ToastContainer } from '@/components/Toast';
 import { useActiveSourceLookup, useDebounce, PerformanceMonitor } from '@/lib/performance';
 
-type Stream = {
-  id: number;
-  name: string;
-  obs_source_name: string;
-  url: string;
-};
+import { StreamWithTeam } from '@/types';
 
 type ScreenType = 'large' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 
 export default function Home() {
-  const [streams, setStreams] = useState<Stream[]>([]);
+  const [streams, setStreams] = useState<StreamWithTeam[]>([]);
   const [activeSources, setActiveSources] = useState<Record<ScreenType, string | null>>({
     large: null,
     left: null,
@@ -82,8 +77,9 @@ export default function Home() {
       
       // Handle both old and new API response formats
       const streams = streamsData.success ? streamsData.data : streamsData;
+      const activeSources = activeData.success ? activeData.data : activeData;
       setStreams(streams);
-      setActiveSources(activeData);
+      setActiveSources(activeSources);
     } catch (error) {
       console.error('Error fetching data:', error);
       showError('Failed to Load Data', 'Could not fetch streams. Please refresh the page.');
@@ -100,9 +96,9 @@ export default function Home() {
   const handleSetActive = useCallback(async (screen: ScreenType, id: number | null) => {
     const selectedStream = streams.find((stream) => stream.id === id);
 
-    // Generate stream group name for optimistic updates
+    // Generate stream group name for optimistic updates - must match obsClient.js format
     const streamGroupName = selectedStream 
-      ? `${selectedStream.name.toLowerCase().replace(/\s+/g, '_')}_stream`
+      ? `${selectedStream.team_name?.toLowerCase().replace(/\s+/g, '_') || 'unknown'}_${selectedStream.name.toLowerCase().replace(/\s+/g, '_')}_stream`
       : null;
 
     // Update local state immediately for optimistic updates