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

app/admin/page.tsx

@@ -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' }}>
-                                            <td style={{ padding: '0.75rem' }}>{song.artist}</td>
+                                                <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 => (

app/api/songs/route.ts

@@ -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,
     }));