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/api/getActive/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server';
 import fs from 'fs';
 import path from 'path';
-// import config from '../../../config';
+import { createSuccessResponse, createErrorResponse, withErrorHandling } from '../../../lib/apiHelpers';
 
 const FILE_DIRECTORY = path.resolve(process.env.FILE_DIRECTORY || './files')
 // Ensure directory exists
@@ -10,7 +10,7 @@ if (!fs.existsSync(FILE_DIRECTORY)) {
 }
 console.log('using',  FILE_DIRECTORY)
 
-export async function GET() {
+async function getActiveHandler() {
     try {
         const largePath = path.join(FILE_DIRECTORY, 'large.txt');
         const leftPath = path.join(FILE_DIRECTORY, 'left.txt');
@@ -20,38 +20,27 @@ export async function GET() {
         const bottomLeftPath = path.join(FILE_DIRECTORY, 'bottomLeft.txt');
         const bottomRightPath = path.join(FILE_DIRECTORY, 'bottomRight.txt');
 
-        const tankPath = path.join(FILE_DIRECTORY, 'tank.txt');
-        const treePath = path.join(FILE_DIRECTORY, 'tree.txt');
-        const kittyPath = path.join(FILE_DIRECTORY, 'kitty.txt');
-        const chickenPath = path.join(FILE_DIRECTORY, 'chicken.txt');
+        const large = fs.existsSync(largePath) ? fs.readFileSync(largePath, 'utf-8').trim() : null;
+        const left = fs.existsSync(leftPath) ? fs.readFileSync(leftPath, 'utf-8').trim() : null;
+        const right = fs.existsSync(rightPath) ? fs.readFileSync(rightPath, 'utf-8').trim() : null;
+        const topLeft = fs.existsSync(topLeftPath) ? fs.readFileSync(topLeftPath, 'utf-8').trim() : null;
+        const topRight = fs.existsSync(topRightPath) ? fs.readFileSync(topRightPath, 'utf-8').trim() : null;
+        const bottomLeft = fs.existsSync(bottomLeftPath) ? fs.readFileSync(bottomLeftPath, 'utf-8').trim() : null;
+        const bottomRight = fs.existsSync(bottomRightPath) ? fs.readFileSync(bottomRightPath, 'utf-8').trim() : null;
 
-    
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const large = fs.existsSync(largePath) ? fs.readFileSync(largePath, 'utf-8') : null;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const left = fs.existsSync(leftPath) ? fs.readFileSync(leftPath, 'utf-8') : null;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const right = fs.existsSync(rightPath) ? fs.readFileSync(rightPath, 'utf-8') : null;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const topLeft = fs.existsSync(topLeftPath) ? fs.readFileSync(topLeftPath, 'utf-8') : null;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const topRight = fs.existsSync(topRightPath) ? fs.readFileSync(topRightPath, 'utf-8') : null;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const bottomLeft = fs.existsSync(bottomLeftPath) ? fs.readFileSync(bottomLeftPath, 'utf-8') : null;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const bottomRight = fs.existsSync(bottomRightPath) ? fs.readFileSync(bottomRightPath, 'utf-8') : null;
-
-        const tank = fs.existsSync(tankPath) ? fs.readFileSync(tankPath, 'utf-8') : null;
-        const tree = fs.existsSync(treePath) ?  fs.readFileSync(treePath, 'utf-8') : null;
-        const kitty = fs.existsSync(kittyPath) ? fs.readFileSync(kittyPath, 'utf-8') : null;
-        const chicken = fs.existsSync(chickenPath) ? fs.readFileSync(chickenPath, 'utf-8') : null;
-
-        // For SaT
-        return NextResponse.json({ large, left, right, topLeft, topRight, bottomLeft, bottomRight }, {status: 201})
-        // return NextResponse.json({ tank, tree, kitty, chicken }, {status: 201})
-      } catch (error) {
+        return createSuccessResponse({
+            large,
+            left,
+            right,
+            topLeft,
+            topRight,
+            bottomLeft,
+            bottomRight
+        });
+    } catch (error) {
         console.error('Error reading active sources:', error);
-        return NextResponse.json({ error: 'Failed to read active sources' }, {status: 500});
-      }
+        return createErrorResponse('Failed to read active sources', 500, 'Could not read source files', error);
+    }
+}
 
-}
+export const GET = withErrorHandling(getActiveHandler);

app/api/streams/route.ts

@@ -1,13 +1,20 @@
 import { NextResponse } from 'next/server';
 import { getDatabase } from '../../../lib/database';
-import { Stream } from '@/types';
+import { StreamWithTeam } from '@/types';
 import { TABLE_NAMES } from '../../../lib/constants';
 import { createSuccessResponse, createDatabaseError, withErrorHandling } from '../../../lib/apiHelpers';
 
 async function getStreamsHandler() {
   try {
     const db = await getDatabase();
-    const streams: Stream[] = await db.all(`SELECT * FROM ${TABLE_NAMES.STREAMS}`);
+    const streams: StreamWithTeam[] = await db.all(`
+      SELECT 
+        s.*, 
+        t.team_name, 
+        t.group_name
+      FROM ${TABLE_NAMES.STREAMS} s
+      LEFT JOIN ${TABLE_NAMES.TEAMS} t ON s.team_id = t.team_id
+    `);
     return createSuccessResponse(streams);
   } catch (error) {
     return createDatabaseError('fetch streams', error);

app/api/verifyGroups/route.ts

@@ -12,7 +12,8 @@ const SYSTEM_SCENES: string[] = [
   'Starting',
   'Ending',
   'Audio',
-  'Movies'
+  'Movies',
+  'Resources'
 ];
 
 interface OBSScene {

app/edit/[id]/page.tsx

@@ -65,8 +65,7 @@ export default function EditStream() {
           team_id: streamData.team_id,
         });
         
-        // Handle both old and new API response formats
-        const teams = teamsData.success ? teamsData.data : teamsData;
+        const teams = teamsData.data;
         
         // Map teams for dropdown
         setTeams(

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

app/streams/page.tsx

@@ -40,9 +40,8 @@ export default function AddStream() {
       const teamsData = await teamsResponse.json();
       const streamsData = await streamsResponse.json();
 
-      // Handle both old and new API response formats
-      const teams = teamsData.success ? teamsData.data : teamsData;
-      const streams = streamsData.success ? streamsData.data : streamsData;
+      const teams = teamsData.data;
+      const streams = streamsData.data;
 
       // Map the API data to the format required by the Dropdown
       setTeams(

app/teams/page.tsx

@@ -41,9 +41,7 @@ export default function Teams() {
     try {
       const res = await fetch('/api/teams');
       const data = await res.json();
-      // Handle both old and new API response formats
-      const teams = data.success ? data.data : data;
-      setTeams(teams);
+      setTeams(data.data);
     } catch (error) {
       console.error('Error fetching teams:', error);
     } finally {