feat: implement song rating system with admin view and user persistence

app/actions.ts

@@ -30,3 +30,44 @@ export async function sendGotifyNotification(attempts: number, status: 'won' | '
         console.error('Error sending Gotify notification:', error);
     }
 }
+
+import { PrismaClient } from '@prisma/client';
+const prisma = new PrismaClient();
+
+export async function submitRating(songId: number, rating: number, genre?: string | null) {
+    try {
+        const song = await prisma.song.findUnique({ where: { id: songId } });
+        if (!song) throw new Error('Song not found');
+
+        const newRatingCount = song.ratingCount + 1;
+        const newAverageRating = ((song.averageRating * song.ratingCount) + rating) / newRatingCount;
+
+        await prisma.song.update({
+            where: { id: songId },
+            data: {
+                averageRating: newAverageRating,
+                ratingCount: newRatingCount,
+            },
+        });
+
+        // Send Gotify notification for the rating
+        const genreText = genre ? `[${genre}] ` : '';
+        const title = `Hördle Rating: ${rating} Stars`;
+        const message = `Song "${song.title}" by ${song.artist} ${genreText}received a ${rating}-star rating. (Avg: ${newAverageRating.toFixed(2)}, Count: ${newRatingCount})`;
+
+        await fetch(`${GOTIFY_URL}/message?token=${GOTIFY_APP_TOKEN}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                title: title,
+                message: message,
+                priority: 5,
+            }),
+        });
+
+        return { success: true, averageRating: newAverageRating };
+    } catch (error) {
+        console.error('Error submitting rating:', error);
+        return { success: false, error: 'Failed to submit rating' };
+    }
+}

app/admin/page.tsx

@@ -42,6 +42,8 @@ interface Song {
     puzzles: DailyPuzzle[];
     genres: Genre[];
     specials: Special[];
+    averageRating: number;
+    ratingCount: number;
 }
 
 type SortField = 'id' | 'title' | 'artist' | 'createdAt';
@@ -1141,6 +1143,7 @@ export default function AdminPage() {
                                     Added {sortField === 'createdAt' && (sortDirection === 'asc' ? '↑' : '↓')}
                                 </th>
                                 <th style={{ padding: '0.75rem' }}>Activations</th>
+                                <th style={{ padding: '0.75rem' }}>Rating</th>
                                 <th style={{ padding: '0.75rem' }}>Actions</th>
                             </tr>
                         </thead>
@@ -1211,6 +1214,15 @@ export default function AdminPage() {
                                                 {new Date(song.createdAt).toLocaleDateString('de-DE')}
                                             </td>
                                             <td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
+                                            <td style={{ padding: '0.75rem', color: '#666' }}>
+                                                {song.averageRating > 0 ? (
+                                                    <span title={`${song.ratingCount} ratings`}>
+                                                        {song.averageRating.toFixed(1)} ★ <span style={{ color: '#999', fontSize: '0.8rem' }}>({song.ratingCount})</span>
+                                                    </span>
+                                                ) : (
+                                                    <span style={{ color: '#ccc' }}>-</span>
+                                                )}
+                                            </td>
                                             <td style={{ padding: '0.75rem' }}>
                                                 <div style={{ display: 'flex', gap: '0.5rem' }}>
                                                     <button
@@ -1297,6 +1309,15 @@ export default function AdminPage() {
                                                 {new Date(song.createdAt).toLocaleDateString('de-DE')}
                                             </td>
                                             <td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
+                                            <td style={{ padding: '0.75rem', color: '#666' }}>
+                                                {song.averageRating > 0 ? (
+                                                    <span title={`${song.ratingCount} ratings`}>
+                                                        {song.averageRating.toFixed(1)} ★ <span style={{ color: '#999', fontSize: '0.8rem' }}>({song.ratingCount})</span>
+                                                    </span>
+                                                ) : (
+                                                    <span style={{ color: '#ccc' }}>-</span>
+                                                )}
+                                            </td>
                                             <td style={{ padding: '0.75rem' }}>
                                                 <div style={{ display: 'flex', gap: '0.5rem' }}>
                                                     <button

app/api/songs/route.ts

@@ -32,6 +32,8 @@ export async function GET() {
         puzzles: song.puzzles,
         genres: song.genres,
         specials: song.specials.map(ss => ss.special),
+        averageRating: song.averageRating,
+        ratingCount: song.ratingCount,
     }));
 
     return NextResponse.json(songsWithActivations);

components/Game.tsx

@@ -5,7 +5,7 @@ import AudioPlayer from './AudioPlayer';
 import GuessInput from './GuessInput';
 import Statistics from './Statistics';
 import { useGameState } from '../lib/gameState';
-import { sendGotifyNotification } from '../app/actions';
+import { sendGotifyNotification, submitRating } from '../app/actions';
 
 interface GameProps {
     dailyPuzzle: {
@@ -34,6 +34,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
     const [lastAction, setLastAction] = useState<'GUESS' | 'SKIP' | null>(null);
     const [isProcessingGuess, setIsProcessingGuess] = useState(false);
     const [timeUntilNext, setTimeUntilNext] = useState('');
+    const [hasRated, setHasRated] = useState(false);
 
     useEffect(() => {
         const updateCountdown = () => {
@@ -180,6 +181,35 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         }
     };
 
+    useEffect(() => {
+        if (dailyPuzzle) {
+            const ratedPuzzles = JSON.parse(localStorage.getItem('hoerdle_rated_puzzles') || '[]');
+            if (ratedPuzzles.includes(dailyPuzzle.id)) {
+                setHasRated(true);
+            } else {
+                setHasRated(false);
+            }
+        }
+    }, [dailyPuzzle]);
+
+    const handleRatingSubmit = async (rating: number) => {
+        if (!dailyPuzzle) return;
+
+        try {
+            await submitRating(dailyPuzzle.songId, rating, genre);
+            setHasRated(true);
+
+            // Persist to localStorage
+            const ratedPuzzles = JSON.parse(localStorage.getItem('hoerdle_rated_puzzles') || '[]');
+            if (!ratedPuzzles.includes(dailyPuzzle.id)) {
+                ratedPuzzles.push(dailyPuzzle.id);
+                localStorage.setItem('hoerdle_rated_puzzles', JSON.stringify(ratedPuzzles));
+            }
+        } catch (error) {
+            console.error('Failed to submit rating', error);
+        }
+    };
+
     return (
         <div className="container">
             <header className="header">
@@ -265,6 +295,11 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                             </audio>
                         </div>
 
+                        {/* Rating Component */}
+                        <div style={{ marginBottom: '1rem' }}>
+                            <StarRating onRate={handleRatingSubmit} hasRated={hasRated} />
+                        </div>
+
                         {statistics && <Statistics statistics={statistics} />}
                         <button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
                             {shareText}
@@ -294,6 +329,11 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                             </audio>
                         </div>
 
+                        {/* Rating Component */}
+                        <div style={{ marginBottom: '1rem' }}>
+                            <StarRating onRate={handleRatingSubmit} hasRated={hasRated} />
+                        </div>
+
                         {statistics && <Statistics statistics={statistics} />}
                         <button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
                             {shareText}
@@ -305,3 +345,46 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         </div>
     );
 }
+
+function StarRating({ onRate, hasRated }: { onRate: (rating: number) => void, hasRated: boolean }) {
+    const [hover, setHover] = useState(0);
+    const [rating, setRating] = useState(0);
+
+    if (hasRated) {
+        return <div style={{ color: '#666', fontStyle: 'italic' }}>Thanks for rating!</div>;
+    }
+
+    return (
+        <div className="star-rating" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
+            <span style={{ fontSize: '0.875rem', color: '#666', fontWeight: '500' }}>Rate this song:</span>
+            <div style={{ display: 'flex', gap: '0.25rem', justifyContent: 'center' }}>
+                {[...Array(5)].map((_, index) => {
+                    const ratingValue = index + 1;
+                    return (
+                        <button
+                            key={index}
+                            type="button"
+                            style={{
+                                background: 'none',
+                                border: 'none',
+                                cursor: 'pointer',
+                                fontSize: '2rem',
+                                color: ratingValue <= (hover || rating) ? '#ffc107' : '#9ca3af',
+                                transition: 'color 0.2s',
+                                padding: '0 0.25rem'
+                            }}
+                            onClick={() => {
+                                setRating(ratingValue);
+                                onRate(ratingValue);
+                            }}
+                            onMouseEnter={() => setHover(ratingValue)}
+                            onMouseLeave={() => setHover(0)}
+                        >
+                            ★
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

prisma/migrations/20251123083856_add_rating_system/migration.sql

@@ -0,0 +1,21 @@
+-- AlterTable
+ALTER TABLE "Special" ADD COLUMN "curator" TEXT;
+
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Song" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "title" TEXT NOT NULL,
+    "artist" TEXT NOT NULL,
+    "filename" TEXT NOT NULL,
+    "coverImage" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "averageRating" REAL NOT NULL DEFAULT 0,
+    "ratingCount" INTEGER NOT NULL DEFAULT 0
+);
+INSERT INTO "new_Song" ("artist", "coverImage", "createdAt", "filename", "id", "title") SELECT "artist", "coverImage", "createdAt", "filename", "id", "title" FROM "Song";
+DROP TABLE "Song";
+ALTER TABLE "new_Song" RENAME TO "Song";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

prisma/schema.prisma

@@ -20,6 +20,8 @@ model Song {
   puzzles   DailyPuzzle[]
   genres    Genre[]
   specials  SpecialSong[]
+  averageRating Float    @default(0)
+  ratingCount   Int      @default(0)
 }
 
 model Genre {

scripts/restore_songs.ts

@@ -33,23 +33,33 @@ async function restoreSongs() {
 
                 const title = metadata.common.title || 'Unknown Title';
                 const artist = metadata.common.artist || 'Unknown Artist';
+                const genres = metadata.common.genre || [];
 
-                // Try to find matching cover
+                // Create or find genres
-                // This is a best-effort guess based on timestamp or just null if we can't link it easily
+                const genreConnect = [];
-                // Since we don't store the link between file and cover in filename, we might lose cover association
+                for (const genreName of genres) {
-                // unless we re-extract it. But we already have cover files.
+                    if (!genreName) continue;
-                // For now, let's just restore the song entry. Re-extracting cover would duplicate files.
+
-                // If the user wants covers back perfectly, we might need to re-parse or just leave null.
+                    // Simple normalization
-                // Let's leave null for now to avoid clutter, or maybe try to find a cover with similar timestamp if possible?
+                    const normalizedGenre = genreName.trim();
-                // Actually, the cover filename is not easily deducible from song filename.
+
-                // Let's just restore the song data.
+                    // Upsert genre (we can't use upsert easily with connect, so find or create first)
+                    let genre = await prisma.genre.findUnique({ where: { name: normalizedGenre } });
+                    if (!genre) {
+                        genre = await prisma.genre.create({ data: { name: normalizedGenre } });
+                        console.log(`Created genre: ${normalizedGenre}`);
+                    }
+                    genreConnect.push({ id: genre.id });
+                }
 
                 await prisma.song.create({
                     data: {
                         title,
                         artist,
                         filename,
-                        // coverImage: null // We lose the cover link unfortunately, unless we re-extract
+                        genres: {
+                            connect: genreConnect
+                        }
                     }
                 });