Add team and stream counts to footer

- Created /api/counts endpoint for database statistics
- Updated footer to display team and stream counts
- Shows counts when OBS is connected (alongside OBS stats)
- Shows database stats when OBS is disconnected (fallback display)
- Polls counts every 60 seconds (less frequent than OBS status)
- Maintains backward compatibility with API response formats

Footer now shows:
- Teams: X
- Streams: Y

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

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

components/Footer.tsx

@@ -19,8 +19,14 @@ type OBSStatus = {
   error?: string;
 };
 
+type Counts = {
+  streams: number;
+  teams: number;
+};
+
 export default function Footer() {
   const [obsStatus, setObsStatus] = useState<OBSStatus | null>(null);
+  const [counts, setCounts] = useState<Counts | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
   // Smart polling with performance monitoring and visibility detection
@@ -40,9 +46,24 @@ export default function Footer() {
     }
   };
 
+  const fetchCounts = async () => {
+    try {
+      const response = await fetch('/api/counts');
+      const data = await response.json();
+      // Handle both old and new API response formats
+      const countsData = data.success ? data.data : data;
+      setCounts(countsData);
+    } catch (error) {
+      console.error('Failed to fetch counts:', error);
+    }
+  };
+
   // Use smart polling that respects page visibility and adapts interval based on connection status
   const pollingInterval = obsStatus?.connected ? 15000 : 30000; // Poll faster when connected
   useSmartPolling(fetchOBSStatus, pollingInterval, [obsStatus?.connected]);
+  
+  // Poll counts less frequently (every 60 seconds) since they don't change as often
+  useSmartPolling(fetchCounts, 60000, []);
 
   if (isLoading) {
     return (
@@ -78,11 +99,27 @@ export default function Footer() {
             )}
           </div>
 
-          {/* Live Status */}
-          {obsStatus?.connected && (
-            <div>
-              <h3 className="font-semibold mb-4">Live Status</h3>
-              
+          {/* Live Status or Database Stats */}
+          <div>
+            <h3 className="font-semibold mb-4">
+              {obsStatus?.connected ? 'Live Status' : 'Database Stats'}
+            </h3>
+            
+            {/* Show counts when OBS is disconnected */}
+            {!obsStatus?.connected && counts && (
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span>Teams:</span>
+                  <span className="font-medium">{counts.teams}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Streams:</span>
+                  <span className="font-medium">{counts.streams}</span>
+                </div>
+              </div>
+            )}
+            
+            {obsStatus?.connected && (
               <div className="space-y-2 text-sm">
                 {obsStatus.currentScene && (
                   <div className="flex justify-between">
@@ -98,6 +135,20 @@ export default function Footer() {
                   </div>
                 )}
 
+                {/* Database counts */}
+                {counts && (
+                  <>
+                    <div className="flex justify-between">
+                      <span>Teams:</span>
+                      <span className="font-medium">{counts.teams}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Streams:</span>
+                      <span className="font-medium">{counts.streams}</span>
+                    </div>
+                  </>
+                )}
+
                 <div className="flex gap-4 mt-4">
                   <div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
                     <div className={`w-2 h-2 rounded-full ${obsStatus.streaming ? 'bg-red-500' : 'bg-gray-500'}`}></div>
@@ -110,8 +161,8 @@ export default function Footer() {
                   </div>
                 </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
 
         {/* Error Message */}