feat: Improve admin dashboard and add weighted song selection

- Replace filename column with activation count
- Add pagination (10 items per page) and search functionality
- Add delete functionality (removes DB entry and file)
- Remove manual title/artist input (auto-extract from ID3 tags)
- Replace text buttons with emoji icons (Edit, Delete, Save, Cancel)
- Implement weighted random selection for daily puzzles
- Add custom favicon
- Fix docker-compose.yml configuration

app/admin/page.tsx

@@ -8,6 +8,7 @@ interface Song {
     artist: string;
     filename: string;
     createdAt: string;
+    activations: number;
 }
 
 type SortField = 'title' | 'artist';
@@ -17,8 +18,6 @@ export default function AdminPage() {
     const [password, setPassword] = useState('');
     const [isAuthenticated, setIsAuthenticated] = useState(false);
     const [file, setFile] = useState<File | null>(null);
-    const [title, setTitle] = useState('');
-    const [artist, setArtist] = useState('');
     const [message, setMessage] = useState('');
     const [songs, setSongs] = useState<Song[]>([]);
 
@@ -31,6 +30,11 @@ export default function AdminPage() {
     const [sortField, setSortField] = useState<SortField>('artist');
     const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
 
+    // Search and pagination state
+    const [searchQuery, setSearchQuery] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 10;
+
     const handleLogin = async () => {
         const res = await fetch('/api/admin/login', {
             method: 'POST',
@@ -58,8 +62,6 @@ export default function AdminPage() {
 
         const formData = new FormData();
         formData.append('file', file);
-        if (title) formData.append('title', title);
-        if (artist) formData.append('artist', artist);
 
         setMessage('Uploading...');
         const res = await fetch('/api/songs', {
@@ -69,8 +71,6 @@ export default function AdminPage() {
 
         if (res.ok) {
             setMessage('Song uploaded successfully!');
-            setTitle('');
-            setArtist('');
             setFile(null);
             fetchSongs();
         } else {
@@ -105,6 +105,24 @@ export default function AdminPage() {
         }
     };
 
+    const handleDelete = async (id: number, title: string) => {
+        if (!confirm(`Are you sure you want to delete "${title}"? This will also delete the file.`)) {
+            return;
+        }
+
+        const res = await fetch('/api/songs', {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id }),
+        });
+
+        if (res.ok) {
+            fetchSongs();
+        } else {
+            alert('Failed to delete song');
+        }
+    };
+
     const handleSort = (field: SortField) => {
         if (sortField === field) {
             setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
@@ -114,7 +132,13 @@ export default function AdminPage() {
         }
     };
 
-    const sortedSongs = [...songs].sort((a, b) => {
+    // Filter and sort songs
+    const filteredSongs = songs.filter(song =>
+        song.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        song.artist.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    const sortedSongs = [...filteredSongs].sort((a, b) => {
         const valA = a[sortField].toLowerCase();
         const valB = b[sortField].toLowerCase();
 
@@ -123,6 +147,16 @@ export default function AdminPage() {
         return 0;
     });
 
+    // Pagination
+    const totalPages = Math.ceil(sortedSongs.length / itemsPerPage);
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const paginatedSongs = sortedSongs.slice(startIndex, startIndex + itemsPerPage);
+
+    // Reset to page 1 when search changes
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [searchQuery]);
+
     if (!isAuthenticated) {
         return (
             <div className="container" style={{ justifyContent: 'center' }}>
@@ -148,7 +182,7 @@ export default function AdminPage() {
                 <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Upload New Song</h2>
                 <form onSubmit={handleUpload}>
                     <div className="form-group">
-                        <label className="form-label">MP3 File (Required)</label>
+                        <label className="form-label">MP3 File (Title and Artist will be extracted from ID3 tags)</label>
                         <input
                             type="file"
                             accept="audio/mpeg"
@@ -157,24 +191,6 @@ export default function AdminPage() {
                             required
                         />
                     </div>
-                    <div className="form-group">
-                        <label className="form-label">Title (Optional - extracted from file if empty)</label>
-                        <input
-                            type="text"
-                            value={title}
-                            onChange={e => setTitle(e.target.value)}
-                            className="form-input"
-                        />
-                    </div>
-                    <div className="form-group">
-                        <label className="form-label">Artist (Optional - extracted from file if empty)</label>
-                        <input
-                            type="text"
-                            value={artist}
-                            onChange={e => setArtist(e.target.value)}
-                            className="form-input"
-                        />
-                    </div>
                     <button type="submit" className="btn-primary">
                         Upload Song
                     </button>
@@ -184,6 +200,18 @@ export default function AdminPage() {
 
             <div className="admin-card">
                 <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Song Library</h2>
+
+                {/* Search */}
+                <div style={{ marginBottom: '1rem' }}>
+                    <input
+                        type="text"
+                        placeholder="Search by title or artist..."
+                        value={searchQuery}
+                        onChange={e => setSearchQuery(e.target.value)}
+                        className="form-input"
+                    />
+                </div>
+
                 <div style={{ overflowX: 'auto' }}>
                     <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
                         <thead>
@@ -201,12 +229,12 @@ export default function AdminPage() {
                                 >
                                     Artist {sortField === 'artist' && (sortDirection === 'asc' ? '↑' : '↓')}
                                 </th>
-                                <th style={{ padding: '0.75rem' }}>Filename</th>
+                                <th style={{ padding: '0.75rem' }}>Activations</th>
                                 <th style={{ padding: '0.75rem' }}>Actions</th>
                             </tr>
                         </thead>
                         <tbody>
-                            {sortedSongs.map(song => (
+                            {paginatedSongs.map(song => (
                                 <tr key={song.id} style={{ borderBottom: '1px solid #e5e7eb' }}>
                                     <td style={{ padding: '0.75rem' }}>{song.id}</td>
 
@@ -230,20 +258,22 @@ export default function AdminPage() {
                                                     style={{ padding: '0.25rem' }}
                                                 />
                                             </td>
-                                            <td style={{ padding: '0.75rem', color: '#666' }}>{song.filename}</td>
+                                            <td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
                                             <td style={{ padding: '0.75rem' }}>
                                                 <div style={{ display: 'flex', gap: '0.5rem' }}>
                                                     <button
                                                         onClick={() => saveEditing(song.id)}
-                                                        style={{ color: 'green', cursor: 'pointer', border: 'none', background: 'none', fontWeight: 'bold' }}
+                                                        style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
+                                                        title="Save"
                                                     >
-                                                        Save
+                                                        ✅
                                                     </button>
                                                     <button
                                                         onClick={cancelEditing}
-                                                        style={{ color: 'red', cursor: 'pointer', border: 'none', background: 'none' }}
+                                                        style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
+                                                        title="Cancel"
                                                     >
-                                                        Cancel
+                                                        ❌
                                                     </button>
                                                 </div>
                                             </td>
@@ -252,29 +282,74 @@ 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', color: '#666' }}>{song.filename}</td>
+                                            <td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
                                             <td style={{ padding: '0.75rem' }}>
-                                                <button
+                                                <div style={{ display: 'flex', gap: '0.5rem' }}>
-                                                    onClick={() => startEditing(song)}
+                                                    <button
-                                                    style={{ color: 'blue', cursor: 'pointer', border: 'none', background: 'none', textDecoration: 'underline' }}
+                                                        onClick={() => startEditing(song)}
-                                                >
+                                                        style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
-                                                    Edit
+                                                        title="Edit"
-                                                </button>
+                                                    >
+                                                        ✏️
+                                                    </button>
+                                                    <button
+                                                        onClick={() => handleDelete(song.id, song.title)}
+                                                        style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
+                                                        title="Delete"
+                                                    >
+                                                        🗑️
+                                                    </button>
+                                                </div>
                                             </td>
                                         </>
                                     )}
                                 </tr>
                             ))}
-                            {songs.length === 0 && (
+                            {paginatedSongs.length === 0 && (
                                 <tr>
                                     <td colSpan={5} style={{ padding: '1rem', textAlign: 'center', color: '#666' }}>
-                                        No songs uploaded yet.
+                                        {searchQuery ? 'No songs found matching your search.' : 'No songs uploaded yet.'}
                                     </td>
                                 </tr>
                             )}
                         </tbody>
                     </table>
                 </div>
+
+                {/* Pagination */}
+                {totalPages > 1 && (
+                    <div style={{ marginTop: '1rem', display: 'flex', justifyContent: 'center', gap: '0.5rem', alignItems: 'center' }}>
+                        <button
+                            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                            disabled={currentPage === 1}
+                            style={{
+                                padding: '0.5rem 1rem',
+                                border: '1px solid #d1d5db',
+                                background: currentPage === 1 ? '#f3f4f6' : '#fff',
+                                cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                                borderRadius: '0.25rem'
+                            }}
+                        >
+                            Previous
+                        </button>
+                        <span style={{ color: '#666' }}>
+                            Page {currentPage} of {totalPages}
+                        </span>
+                        <button
+                            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                            disabled={currentPage === totalPages}
+                            style={{
+                                padding: '0.5rem 1rem',
+                                border: '1px solid #d1d5db',
+                                background: currentPage === totalPages ? '#f3f4f6' : '#fff',
+                                cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+                                borderRadius: '0.25rem'
+                            }}
+                        >
+                            Next
+                        </button>
+                    </div>
+                )}
             </div>
         </div>
     );

app/api/daily/route.ts

@@ -13,55 +13,56 @@ export async function GET() {
         });
 
         if (!dailyPuzzle) {
-            // Find a random song to set as today's puzzle
+            // Get all songs with their usage count
-            const songsCount = await prisma.song.count();
+            const allSongs = await prisma.song.findMany({
-            if (songsCount === 0) {
+                include: {
+                    puzzles: true,
+                },
+            });
+
+            if (allSongs.length === 0) {
                 return NextResponse.json({ error: 'No songs available' }, { status: 404 });
             }
 
-            const skip = Math.floor(Math.random() * songsCount);
+            // Calculate weights: songs never used get weight 1.0, 
-            const randomSong = await prisma.song.findFirst({
+            // songs used once get 0.5, twice 0.33, etc.
-                skip: skip,
+            const weightedSongs = allSongs.map(song => ({
-            });
+                song,
+                weight: 1.0 / (song.puzzles.length + 1),
+            }));
 
-            if (randomSong) {
+            // Calculate total weight
-                dailyPuzzle = await prisma.dailyPuzzle.create({
+            const totalWeight = weightedSongs.reduce((sum, item) => sum + item.weight, 0);
-                    data: {
+
-                        date: today,
+            // Pick a random song based on weights
-                        songId: randomSong.id,
+            let random = Math.random() * totalWeight;
-                    },
+            let selectedSong = weightedSongs[0].song;
-                    include: { song: true },
+
-                });
+            for (const item of weightedSongs) {
+                random -= item.weight;
+                if (random <= 0) {
+                    selectedSong = item.song;
+                    break;
+                }
             }
+
+            // Create the daily puzzle
+            dailyPuzzle = await prisma.dailyPuzzle.create({
+                data: {
+                    date: today,
+                    songId: selectedSong.id,
+                },
+                include: { song: true },
+            });
         }
 
         if (!dailyPuzzle) {
             return NextResponse.json({ error: 'Failed to create puzzle' }, { status: 500 });
         }
 
-        // Return only necessary info to client (hide title/artist initially if we want strict security, 
-        // but for this app we might need it for validation or just return the audio URL and ID)
-        // Actually, we should probably NOT return the title/artist here if we want to prevent cheating via network tab,
-        // but the requirement says "guess the title", so we need to validate on server or client.
-        // For simplicity in this prototype, we'll return the ID and audio URL.
-        // Validation can happen in a separate "guess" endpoint or client-side if we trust the user not to inspect too much.
-        // Let's return the audio URL. The client will request the full song info ONLY when they give up or guess correctly?
-        // Or we can just return the ID and have a separate "check" endpoint.
-        // For now, let's return the ID and the filename (public URL).
-
         return NextResponse.json({
             id: dailyPuzzle.id,
             audioUrl: `/uploads/${dailyPuzzle.song.filename}`,
-            // We might need a hash or something to validate guesses without revealing the answer,
-            // but for now let's keep it simple. The client needs to know if the guess is correct.
-            // We can send the answer hash? Or just handle checking on the client for now (easiest but insecure).
-            // Let's send the answer for now, assuming this is a fun app not a competitive e-sport.
-            // Wait, if I send the answer, it's too easy to cheat.
-            // Better: The client sends a guess, the server validates.
-            // But the requirements didn't specify a complex backend validation.
-            // Let's stick to: Client gets audio. Client has a list of all songs (for autocomplete).
-            // Client checks if selected song ID matches the daily puzzle song ID.
-            // So we need to return the song ID.
             songId: dailyPuzzle.songId
         });
 

app/api/songs/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from 'next/server';
 import { PrismaClient } from '@prisma/client';
-import { writeFile } from 'fs/promises';
+import { writeFile, unlink } from 'fs/promises';
 import path from 'path';
 import { parseBuffer } from 'music-metadata';
 
@@ -9,23 +9,30 @@ const prisma = new PrismaClient();
 export async function GET() {
     const songs = await prisma.song.findMany({
         orderBy: { createdAt: 'desc' },
-        select: {
+        include: {
-            id: true,
+            puzzles: true,
-            title: true,
+        },
-            artist: true,
-            filename: true,
-            createdAt: true,
-        }
     });
-    return NextResponse.json(songs);
+
+    // Map to include activation count
+    const songsWithActivations = songs.map(song => ({
+        id: song.id,
+        title: song.title,
+        artist: song.artist,
+        filename: song.filename,
+        createdAt: song.createdAt,
+        activations: song.puzzles.length,
+    }));
+
+    return NextResponse.json(songsWithActivations);
 }
 
 export async function POST(request: Request) {
     try {
         const formData = await request.formData();
         const file = formData.get('file') as File;
-        let title = formData.get('title') as string;
+        let title = '';
-        let artist = formData.get('artist') as string;
+        let artist = '';
 
         if (!file) {
             return NextResponse.json({ error: 'No file provided' }, { status: 400 });
@@ -33,19 +40,17 @@ export async function POST(request: Request) {
 
         const buffer = Buffer.from(await file.arrayBuffer());
 
-        // Try to extract metadata if title or artist are missing
+        // Extract metadata from file
-        if (!title || !artist) {
+        try {
-            try {
+            const metadata = await parseBuffer(buffer, file.type);
-                const metadata = await parseBuffer(buffer, file.type);
+            if (metadata.common.title) {
-                if (!title && metadata.common.title) {
+                title = metadata.common.title;
-                    title = metadata.common.title;
-                }
-                if (!artist && metadata.common.artist) {
-                    artist = metadata.common.artist;
-                }
-            } catch (e) {
-                console.error('Failed to parse metadata:', e);
             }
+            if (metadata.common.artist) {
+                artist = metadata.common.artist;
+            }
+        } catch (e) {
+            console.error('Failed to parse metadata:', e);
         }
 
         // Fallback if still missing
@@ -91,3 +96,41 @@ export async function PUT(request: Request) {
         return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
     }
 }
+
+export async function DELETE(request: Request) {
+    try {
+        const { id } = await request.json();
+
+        if (!id) {
+            return NextResponse.json({ error: 'Missing id' }, { status: 400 });
+        }
+
+        // Get song to find filename
+        const song = await prisma.song.findUnique({
+            where: { id: Number(id) },
+        });
+
+        if (!song) {
+            return NextResponse.json({ error: 'Song not found' }, { status: 404 });
+        }
+
+        // Delete file
+        const filePath = path.join(process.cwd(), 'public/uploads', song.filename);
+        try {
+            await unlink(filePath);
+        } catch (e) {
+            console.error('Failed to delete file:', e);
+            // Continue with DB deletion even if file deletion fails
+        }
+
+        // Delete from database (will cascade delete related puzzles)
+        await prisma.song.delete({
+            where: { id: Number(id) },
+        });
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error('Error deleting song:', error);
+        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+    }
+}