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:
parent
7f475680ae
commit
ec6ff1b570
3 changed files with 127 additions and 26 deletions
25
app/api/counts/route.ts
Normal file
25
app/api/counts/route.ts
Normal 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);
|
|
@ -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);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue