From 3a0c34e5a0648b8ce8d6caf5f7ec2c4aa496b010 Mon Sep 17 00:00:00 2001
From: Decobus <deco@deco.sh>
Date: Tue, 22 Jul 2025 14:37:48 -0400
Subject: [PATCH] Reorganize footer layout by moving streaming status to left
 side
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Moved OFFLINE/IDLE streaming status from right to left column
- Left side now shows: Connection + Host/Port + Streaming/Recording status
- Right side now shows: Scene info + Team/Stream counts (less crowded)
- Better balance of information between the two columns
- Improves readability and visual hierarchy

Footer layout now:
Left: OBS Studio (connected) + 127.0.0.1:4455 + OFFLINE/IDLE status
Right: Scene info + Teams/Streams counts

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/Footer.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index b4e585c..ce57d91 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -95,6 +95,21 @@ export default function Footer() {
               <div className="text-sm opacity-80">
                 <div>{obsStatus.host}:{obsStatus.port}</div>
                 {obsStatus.hasPassword && <div>🔒 Authenticated</div>}
+                
+                {/* Streaming/Recording Status */}
+                {obsStatus.connected && (
+                  <div className="flex gap-4 mt-4">
+                    <div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
+                      <div className={`status-dot ${obsStatus.streaming ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
+                      <span className="text-sm">{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
+                    </div>
+                    
+                    <div className={`flex items-center gap-2 ${obsStatus.recording ? 'text-red-400' : 'opacity-60'}`}>
+                      <div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
+                      <span className="text-sm">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
+                    </div>
+                  </div>
+                )}
               </div>
             )}
           </div>
@@ -149,17 +164,6 @@ export default function Footer() {
                   </>
                 )}
 
-                <div className="flex gap-4 mt-4">
-                  <div className={`flex items-center gap-2 ${obsStatus.streaming ? 'text-red-400' : 'opacity-60'}`}>
-                    <div className={`status-dot ${obsStatus.streaming ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
-                    <span className="text-sm">{obsStatus.streaming ? 'LIVE' : 'OFFLINE'}</span>
-                  </div>
-                  
-                  <div className={`flex items-center gap-2 ${obsStatus.recording ? 'text-red-400' : 'opacity-60'}`}>
-                    <div className={`status-dot ${obsStatus.recording ? 'streaming' : 'idle'}`} style={{width: '8px', height: '8px'}}></div>
-                    <span className="text-sm">{obsStatus.recording ? 'REC' : 'IDLE'}</span>
-                  </div>
-                </div>
               </div>
             )}
           </div>