Add Song of the Day filter and badges to Admin Song Library

This commit is contained in:
Hördle Bot
2025-11-22 16:38:15 +01:00
parent 903d626699
commit ae9e4c504e
2 changed files with 48 additions and 2 deletions

View File

@@ -21,6 +21,14 @@ interface Genre {
};
}
interface DailyPuzzle {
id: number;
date: string;
songId: number;
genreId: number | null;
specialId: number | null;
}
interface Song {
id: number;
title: string;
@@ -28,6 +36,7 @@ interface Song {
filename: string;
createdAt: string;
activations: number;
puzzles: DailyPuzzle[];
genres: Genre[];
specials: Special[];
}
@@ -535,6 +544,9 @@ export default function AdminPage() {
} else if (selectedGenreFilter.startsWith('special:')) {
const specialId = Number(selectedGenreFilter.split(':')[1]);
matchesFilter = song.specials?.some(s => s.id === specialId) || false;
} else if (selectedGenreFilter === 'daily') {
const today = new Date().toISOString().split('T')[0];
matchesFilter = song.puzzles?.some(p => p.date === today) || false;
}
}
@@ -863,6 +875,7 @@ export default function AdminPage() {
style={{ minWidth: '150px' }}
>
<option value="">All Content</option>
<option value="daily">📅 Song of the Day</option>
<optgroup label="Genres">
<option value="genre:-1">No Genre</option>
{genres.map(genre => (
@@ -1020,8 +1033,40 @@ export default function AdminPage() {
</>
) : (
<>
<td style={{ padding: '0.75rem', fontWeight: 'bold' }}>{song.title}</td>
<td style={{ padding: '0.75rem' }}>{song.artist}</td>
<td style={{ padding: '0.75rem' }}>
<div style={{ fontWeight: 'bold', color: '#111827' }}>{song.title}</div>
<div style={{ fontSize: '0.875rem', color: '#6b7280' }}>{song.artist}</div>
{/* Daily Puzzle Badges */}
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem', marginTop: '0.25rem' }}>
{song.puzzles?.filter(p => p.date === new Date().toISOString().split('T')[0]).map(p => {
if (!p.genreId && !p.specialId) {
return (
<span key={p.id} style={{ background: '#dbeafe', color: '#1e40af', padding: '0.1rem 0.4rem', borderRadius: '0.25rem', fontSize: '0.7rem', border: '1px solid #93c5fd' }}>
🌍 Global Daily
</span>
);
}
if (p.genreId) {
const genreName = genres.find(g => g.id === p.genreId)?.name;
return (
<span key={p.id} style={{ background: '#f3f4f6', color: '#374151', padding: '0.1rem 0.4rem', borderRadius: '0.25rem', fontSize: '0.7rem', border: '1px solid #d1d5db' }}>
🏷 {genreName} Daily
</span>
);
}
if (p.specialId) {
const specialName = specials.find(s => s.id === p.specialId)?.name;
return (
<span key={p.id} style={{ background: '#fce7f3', color: '#be185d', padding: '0.1rem 0.4rem', borderRadius: '0.25rem', fontSize: '0.7rem', border: '1px solid #fbcfe8' }}>
{specialName} Daily
</span>
);
}
return null;
})}
</div>
</td>
<td style={{ padding: '0.75rem' }}>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
{song.genres?.map(g => (

View File

@@ -25,6 +25,7 @@ export async function GET() {
createdAt: song.createdAt,
coverImage: song.coverImage,
activations: song.puzzles.length,
puzzles: song.puzzles,
genres: song.genres,
specials: song.specials,
}));