Add team and stream counts to footer with improved layout

- Added team and stream counts displayed when OBS disconnected
- Added counts display alongside live status when OBS connected
- Moved OFFLINE/IDLE status indicators to left column for better balance
- Fixed green dot positioning to be properly next to "Connected" text
- Added custom CSS for status dots since Tailwind classes weren't applying
- Enhanced footer layout with better visual hierarchy

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Decobus 2025-07-22 14:42:18 -04:00
parent 7f475680ae
commit ec6ff1b570
3 changed files with 127 additions and 26 deletions

25
app/api/counts/route.ts Normal file
View file

@ -0,0 +1,25 @@
import { NextResponse } from 'next/server';
import { getDatabase } from '../../../lib/database';
import { TABLE_NAMES } from '../../../lib/constants';
import { createSuccessResponse, createDatabaseError, withErrorHandling } from '../../../lib/apiHelpers';
async function getCountsHandler() {
try {
const db = await getDatabase();
// Get counts in parallel
const [streamsResult, teamsResult] = await Promise.all([
db.get(`SELECT COUNT(*) as count FROM ${TABLE_NAMES.STREAMS}`),
db.get(`SELECT COUNT(*) as count FROM ${TABLE_NAMES.TEAMS}`)
]);
return createSuccessResponse({
streams: streamsResult.count,
teams: teamsResult.count
});
} catch (error) {
return createDatabaseError('fetch counts', error);
}
}
export const GET = withErrorHandling(getCountsHandler);

View file

@ -40,6 +40,30 @@ body {
line-height: 1.6;
}
/* Status Indicator Dots */
.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.status-dot.connected {
background-color: #859900; /* Solarized green */
}
.status-dot.disconnected {
background-color: #dc322f; /* Solarized red */
}
.status-dot.streaming {
background-color: #dc322f; /* Solarized red */
}
.status-dot.idle {
background-color: #586e75; /* Solarized base01 */
}
/* Glass Card Component */
.glass {
background: rgba(7, 54, 66, 0.4);