Fix: AudioPlayer startet jetzt korrekt bei startTime + Deployment-Version

- deploy.sh übergibt jetzt explizit APP_VERSION als Build-Argument
- AudioPlayer setzt startTime korrekt beim ersten manuellen Play
- Verbesserte Position-Logik in togglePlay() mit Timeout-Bestätigung
- Behebt Problem, dass Specials beim ersten Segment statt bei startTime starteten

Dockerfile

@@ -24,10 +24,12 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
 # Extract version: use build arg if provided, otherwise get from git, fallback to package.json
+# Only use tags that are reachable from the current commit to ensure version matches the code
 RUN if [ -n "$APP_VERSION" ]; then \
     echo "$APP_VERSION" > /tmp/version.txt; \
     else \
-    (git describe --tags --always 2>/dev/null || \
+    (git describe --tags --exact-match 2>/dev/null || \
+     git describe --tags --abbrev=0 2>/dev/null || \
      (grep -o '"version": "[^"]*"' package.json 2>/dev/null | cut -d'"' -f4 | sed 's/^/v/') || \
      echo "dev") > /tmp/version.txt; \
     fi && \

app/[locale]/[genre]/page.tsx

@@ -73,7 +73,9 @@ export default async function GenrePage({ params }: PageProps) {
     // Sort
     genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
 
-    const specials = await prisma.special.findMany();
+    const specials = await prisma.special.findMany({
+        where: { hidden: false },
+    });
     specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
 
     const now = new Date();

app/[locale]/page.tsx

@@ -43,7 +43,9 @@ export default async function Home({
     const genres = await prisma.genre.findMany({
         where: { active: true },
     });
-    const specials = await prisma.special.findMany();
+    const specials = await prisma.special.findMany({
+        where: { hidden: false },
+    });
 
     // Sort in memory
     genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));

app/[locale]/special/[name]/page.tsx

@@ -86,6 +86,7 @@ export default async function SpecialPage({ params }: PageProps) {
     specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
 
     const activeSpecials = specials.filter(s => {
+        if (s.hidden) return false;
         const sStarted = !s.launchDate || s.launchDate <= now;
         const sEnded = s.endDate && s.endDate < now;
         return sStarted && !sEnded;

app/admin/layout.tsx

@@ -1,14 +0,0 @@
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-    title: "Hördle Admin Dashboard",
-    description: "Admin dashboard for managing songs and daily puzzles",
-};
-
-export default function AdminLayout({
-    children,
-}: {
-    children: React.ReactNode;
-}) {
-    return <>{children}</>;
-}

app/api/admin/reset-activations/route.ts

@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+export async function POST(req: NextRequest) {
+    try {
+        // Delete all daily puzzles (activations)
+        const result = await prisma.dailyPuzzle.deleteMany({});
+
+        return NextResponse.json({
+            success: true,
+            message: `Successfully deleted ${result.count} daily puzzles (activations)`,
+            count: result.count,
+        });
+    } catch (error) {
+        console.error('Error resetting activations:', error);
+        return NextResponse.json(
+            { error: 'Failed to reset activations' },
+            { status: 500 }
+        );
+    }
+}

app/api/admin/reset-ratings/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+export async function POST(req: NextRequest) {
+    try {
+        // Reset all song ratings to 0
+        const result = await prisma.song.updateMany({
+            data: {
+                averageRating: 0,
+                ratingCount: 0,
+            },
+        });
+
+        return NextResponse.json({
+            success: true,
+            message: `Successfully reset ratings for ${result.count} songs`,
+            count: result.count,
+        });
+    } catch (error) {
+        console.error('Error resetting ratings:', error);
+        return NextResponse.json(
+            { error: 'Failed to reset ratings' },
+            { status: 500 }
+        );
+    }
+}

app/api/covers/[filename]/route.ts

@@ -0,0 +1,95 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { stat } from 'fs/promises';
+import { createReadStream } from 'fs';
+import path from 'path';
+
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ filename: string }> }
+) {
+    try {
+        const { filename } = await params;
+
+        // Security: Prevent path traversal attacks
+        // Allow alphanumeric, hyphens, underscores, and dots for image filenames
+        // Support common image formats: jpg, jpeg, png, gif, webp
+        const safeFilenamePattern = /^[a-zA-Z0-9_\-\.]+\.(jpg|jpeg|png|gif|webp)$/i;
+        if (!safeFilenamePattern.test(filename)) {
+            return new NextResponse('Invalid filename', { status: 400 });
+        }
+
+        // Additional check: ensure no path separators
+        if (filename.includes('/') || filename.includes('\\') || filename.includes('..')) {
+            return new NextResponse('Invalid filename', { status: 400 });
+        }
+
+        const filePath = path.join(process.cwd(), 'public/uploads/covers', filename);
+
+        // Security: Verify the resolved path is still within covers directory
+        const coversDir = path.join(process.cwd(), 'public/uploads/covers');
+        const resolvedPath = path.resolve(filePath);
+        if (!resolvedPath.startsWith(coversDir)) {
+            return new NextResponse('Forbidden', { status: 403 });
+        }
+
+        const stats = await stat(filePath);
+        const fileSize = stats.size;
+
+        // Determine content type based on file extension
+        const ext = filename.toLowerCase().split('.').pop();
+        const contentTypeMap: Record<string, string> = {
+            'jpg': 'image/jpeg',
+            'jpeg': 'image/jpeg',
+            'png': 'image/png',
+            'gif': 'image/gif',
+            'webp': 'image/webp',
+        };
+        const contentType = contentTypeMap[ext || ''] || 'image/jpeg';
+
+        const stream = createReadStream(filePath);
+
+        // Convert Node stream to Web stream
+        const readable = new ReadableStream({
+            start(controller) {
+                let isClosed = false;
+
+                stream.on('data', (chunk: any) => {
+                    if (isClosed) return;
+                    try {
+                        controller.enqueue(chunk);
+                    } catch (e) {
+                        isClosed = true;
+                        stream.destroy();
+                    }
+                });
+
+                stream.on('end', () => {
+                    if (isClosed) return;
+                    isClosed = true;
+                    controller.close();
+                });
+
+                stream.on('error', (err: any) => {
+                    if (isClosed) return;
+                    isClosed = true;
+                    controller.error(err);
+                });
+            },
+            cancel() {
+                stream.destroy();
+            }
+        });
+
+        return new NextResponse(readable, {
+            status: 200,
+            headers: {
+                'Content-Length': fileSize.toString(),
+                'Content-Type': contentType,
+                'Cache-Control': 'public, max-age=3600, must-revalidate',
+            },
+        });
+    } catch (error) {
+        console.error('Error serving cover image:', error);
+        return new NextResponse('Internal Server Error', { status: 500 });
+    }
+}

app/api/curator/specials/[id]/route.ts

@@ -1,9 +1,14 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { PrismaClient } from '@prisma/client';
 import { requireStaffAuth } from '@/lib/auth';
+import { access } from 'fs/promises';
+import path from 'path';
 
 const prisma = new PrismaClient();
 
+// Mark route as dynamic to prevent caching
+export const dynamic = 'force-dynamic';
+
 export async function GET(
     request: NextRequest,
     { params }: { params: Promise<{ id: string }> }
@@ -52,7 +57,41 @@ export async function GET(
         return NextResponse.json({ error: 'Special not found' }, { status: 404 });
     }
 
-    return NextResponse.json(special);
+    // Filtere Songs ohne vollständige Song-Daten und prüfe Datei-Existenz
+    // Dies verhindert Fehler im Frontend, wenn Songs gelöscht wurden, Daten fehlen
+    // oder Dateien noch nicht im Container verfügbar sind (Volume Mount Delay)
+    const uploadsDir = path.join(process.cwd(), 'public/uploads');
+    
+    const filteredSongs = await Promise.all(
+        special.songs
+            .filter(ss => ss.song && ss.song.filename)
+            .map(async (ss) => {
+                const filePath = path.join(uploadsDir, ss.song.filename);
+                try {
+                    // Prüfe ob Datei existiert und zugänglich ist
+                    await access(filePath);
+                    return ss;
+                } catch (error) {
+                    // Datei existiert nicht oder ist nicht zugänglich
+                    console.warn(`[API] Song file not available: ${ss.song.filename} (may be syncing)`);
+                    return null;
+                }
+            })
+    );
+
+    // Entferne null-Werte (Songs ohne verfügbare Dateien)
+    const availableSongs = filteredSongs.filter((ss): ss is typeof special.songs[0] => ss !== null);
+
+    return NextResponse.json({
+        ...special,
+        songs: availableSongs,
+    }, {
+        headers: {
+            'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
+            'Pragma': 'no-cache',
+            'Expires': '0',
+        },
+    });
 }
 
 

app/api/specials/[id]/route.ts

@@ -43,18 +43,20 @@ export async function PUT(
     try {
         const { id } = await params;
         const specialId = parseInt(id);
-        const { name, maxAttempts, unlockSteps, launchDate, endDate, curator } = await request.json();
+        const { name, maxAttempts, unlockSteps, launchDate, endDate, curator, hidden } = await request.json();
+
+        const updateData: any = {};
+        if (name !== undefined) updateData.name = name;
+        if (maxAttempts !== undefined) updateData.maxAttempts = maxAttempts;
+        if (unlockSteps !== undefined) updateData.unlockSteps = typeof unlockSteps === 'string' ? unlockSteps : JSON.stringify(unlockSteps);
+        if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
+        if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
+        if (curator !== undefined) updateData.curator = curator || null;
+        if (hidden !== undefined) updateData.hidden = Boolean(hidden);
 
         const special = await prisma.special.update({
             where: { id: specialId },
-            data: {
-                name,
-                maxAttempts,
-                unlockSteps: typeof unlockSteps === 'string' ? unlockSteps : JSON.stringify(unlockSteps),
-                launchDate: launchDate ? new Date(launchDate) : null,
-                endDate: endDate ? new Date(endDate) : null,
-                curator: curator || null,
-            }
+            data: updateData
         });
 
         return NextResponse.json(special);

app/api/specials/route.ts

@@ -35,7 +35,7 @@ export async function POST(request: Request) {
     const authError = await requireAdminAuth(request as any);
     if (authError) return authError;
 
-    const { name, subtitle, maxAttempts = 7, unlockSteps = '[2,4,7,11,16,30,60]', launchDate, endDate, curator } = await request.json();
+    const { name, subtitle, maxAttempts = 7, unlockSteps = '[2,4,7,11,16,30,60]', launchDate, endDate, curator, hidden = false } = await request.json();
     if (!name) {
         return NextResponse.json({ error: 'Name is required' }, { status: 400 });
     }
@@ -68,6 +68,7 @@ export async function POST(request: Request) {
             launchDate: launchDate ? new Date(launchDate) : null,
             endDate: endDate ? new Date(endDate) : null,
             curator: curator || null,
+            hidden: Boolean(hidden),
         },
     });
     return NextResponse.json(special);
@@ -91,7 +92,7 @@ export async function PUT(request: Request) {
     const authError = await requireAdminAuth(request as any);
     if (authError) return authError;
 
-    const { id, name, subtitle, maxAttempts, unlockSteps, launchDate, endDate, curator } = await request.json();
+    const { id, name, subtitle, maxAttempts, unlockSteps, launchDate, endDate, curator, hidden } = await request.json();
     if (!id) {
         return NextResponse.json({ error: 'ID required' }, { status: 400 });
     }
@@ -119,6 +120,7 @@ export async function PUT(request: Request) {
     if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
     if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
     if (curator !== undefined) updateData.curator = curator || null;
+    if (hidden !== undefined) updateData.hidden = Boolean(hidden);
 
     const updated = await prisma.special.update({
         where: { id: Number(id) },

app/curator/CuratorPageClient.tsx

@@ -22,6 +22,7 @@ interface Song {
     filename: string;
     createdAt: string;
     releaseYear: number | null;
+    coverImage: string | null;
     activations?: number;
     puzzles?: any[];
     genres: Genre[];
@@ -128,6 +129,7 @@ export default function CuratorPageClient() {
     const [itemsPerPage, setItemsPerPage] = useState(10);
     const [playingSongId, setPlayingSongId] = useState<number | null>(null);
     const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
+    const [hoveredCoverSongId, setHoveredCoverSongId] = useState<number | null>(null);
     
     // Comments state
     const [comments, setComments] = useState<CuratorComment[]>([]);
@@ -1613,7 +1615,7 @@ export default function CuratorPageClient() {
                             </div>
                         )}
                         
-                        <div style={{ overflowX: 'auto' }}>
+                        <div style={{ overflowX: 'auto', position: 'relative' }}>
                             <table
                                 style={{
                                     width: '100%',
@@ -1663,6 +1665,7 @@ export default function CuratorPageClient() {
                                         >
                                             {t('columnYear')} {sortField === 'releaseYear' && (sortDirection === 'asc' ? '↑' : '↓')}
                                         </th>
+                                        <th style={{ padding: '0.5rem' }}>{t('columnCover')}</th>
                                         <th style={{ padding: '0.5rem' }}>{t('columnGenresSpecials')}</th>
                                         <th
                                             style={{ padding: '0.5rem', cursor: 'pointer' }}
@@ -1683,7 +1686,17 @@ export default function CuratorPageClient() {
                                             {t('columnRating')} {sortField === 'averageRating' && (sortDirection === 'asc' ? '↑' : '↓')}
                                         </th>
                                         <th style={{ padding: '0.5rem' }}>{t('columnExcludeGlobal')}</th>
-                                        <th style={{ padding: '0.5rem' }}>{t('columnActions')}</th>
+                                        <th 
+                                            style={{ 
+                                                padding: '0.5rem',
+                                                position: 'sticky',
+                                                right: 0,
+                                                backgroundColor: 'white',
+                                                zIndex: 10,
+                                            }}
+                                        >
+                                            {t('columnActions')}
+                                        </th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -1698,12 +1711,13 @@ export default function CuratorPageClient() {
 
                                         const isSelected = selectedSongIds.has(song.id);
                                         
+                                        const rowBackgroundColor = isSelected ? '#eff6ff' : 'white';
                                         return (
                                             <tr 
                                                 key={song.id} 
                                                 style={{ 
                                                     borderBottom: '1px solid #f3f4f6',
-                                                    backgroundColor: isSelected ? '#eff6ff' : 'transparent',
+                                                    backgroundColor: rowBackgroundColor,
                                                 }}
                                             >
                                                 <td style={{ padding: '0.5rem' }}>
@@ -1778,6 +1792,48 @@ export default function CuratorPageClient() {
                                                         '-'
                                                     )}
                                                 </td>
+                                                <td 
+                                                    style={{ 
+                                                        padding: '0.5rem', 
+                                                        textAlign: 'center',
+                                                        position: 'relative',
+                                                        cursor: song.coverImage ? 'pointer' : 'default'
+                                                    }}
+                                                    onMouseEnter={() => song.coverImage && setHoveredCoverSongId(song.id)}
+                                                    onMouseLeave={() => setHoveredCoverSongId(null)}
+                                                >
+                                                    {song.coverImage ? '✓' : '-'}
+                                                    {hoveredCoverSongId === song.id && song.coverImage && (
+                                                        <div
+                                                            style={{
+                                                                position: 'absolute',
+                                                                top: '100%',
+                                                                left: '50%',
+                                                                transform: 'translateX(-50%)',
+                                                                marginTop: '0.5rem',
+                                                                zIndex: 1000,
+                                                                padding: '0.5rem',
+                                                                background: 'white',
+                                                                border: '1px solid #d1d5db',
+                                                                borderRadius: '0.5rem',
+                                                                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+                                                                pointerEvents: 'none',
+                                                            }}
+                                                        >
+                                                            <img
+                                                                src={`/api/covers/${song.coverImage}`}
+                                                                alt={`Cover für ${song.title}`}
+                                                                style={{
+                                                                    width: '200px',
+                                                                    height: '200px',
+                                                                    objectFit: 'cover',
+                                                                    borderRadius: '0.25rem',
+                                                                    display: 'block',
+                                                                }}
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </td>
                                                 <td style={{ padding: '0.5rem' }}>
                                                     {isEditing ? (
                                                         <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
@@ -1965,6 +2021,10 @@ export default function CuratorPageClient() {
                                                     style={{
                                                         padding: '0.5rem',
                                                         whiteSpace: 'nowrap',
+                                                        position: 'sticky',
+                                                        right: 0,
+                                                        backgroundColor: rowBackgroundColor,
+                                                        zIndex: 10,
                                                     }}
                                                 >
                                                     {isEditing ? (
@@ -1980,6 +2040,7 @@ export default function CuratorPageClient() {
                                                                     border: 'none',
                                                                     borderRadius: '0.25rem',
                                                                     cursor: 'pointer',
+                                                                    whiteSpace: 'nowrap',
                                                                 }}
                                                             >
                                                                 💾
@@ -1993,6 +2054,7 @@ export default function CuratorPageClient() {
                                                                     border: 'none',
                                                                     borderRadius: '0.25rem',
                                                                     cursor: 'pointer',
+                                                                    whiteSpace: 'nowrap',
                                                                 }}
                                                             >
                                                                 ✖

app/curator/specials/[id]/page.tsx

@@ -32,6 +32,7 @@ export default function CuratorSpecialEditorPage() {
             }
             const res = await fetch(`/api/curator/specials/${specialId}`, {
                 headers: getCuratorAuthHeaders(),
+                cache: 'no-store',
             });
             if (res.status === 403) {
                 setError(t('specialForbidden'));

app/page.module.css

@@ -1,141 +0,0 @@
-.page {
-  --background: #fafafa;
-  --foreground: #fff;
-
-  --text-primary: #000;
-  --text-secondary: #666;
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-  --button-secondary-border: #ebebeb;
-
-  display: flex;
-  min-height: 100vh;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-geist-sans);
-  background-color: var(--background);
-}
-
-.main {
-  display: flex;
-  min-height: 100vh;
-  width: 100%;
-  max-width: 800px;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  background-color: var(--foreground);
-  padding: 120px 60px;
-}
-
-.intro {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  text-align: left;
-  gap: 24px;
-}
-
-.intro h1 {
-  max-width: 320px;
-  font-size: 40px;
-  font-weight: 600;
-  line-height: 48px;
-  letter-spacing: -2.4px;
-  text-wrap: balance;
-  color: var(--text-primary);
-}
-
-.intro p {
-  max-width: 440px;
-  font-size: 18px;
-  line-height: 32px;
-  text-wrap: balance;
-  color: var(--text-secondary);
-}
-
-.intro a {
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.ctas {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  max-width: 440px;
-  gap: 16px;
-  font-size: 14px;
-}
-
-.ctas a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 40px;
-  padding: 0 16px;
-  border-radius: 128px;
-  border: 1px solid transparent;
-  transition: 0.2s;
-  cursor: pointer;
-  width: fit-content;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--text-primary);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--button-secondary-border);
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-}
-
-@media (max-width: 600px) {
-  .main {
-    padding: 48px 24px;
-  }
-
-  .intro {
-    gap: 16px;
-  }
-
-  .intro h1 {
-    font-size: 32px;
-    line-height: 40px;
-    letter-spacing: -1.92px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-
-  .page {
-    --background: #000;
-    --foreground: #000;
-
-    --text-primary: #ededed;
-    --text-secondary: #999;
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-    --button-secondary-border: #1a1a1a;
-  }
-}

components/AudioPlayer.tsx

@@ -22,8 +22,8 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
     const [progress, setProgress] = useState(0);
     const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
 
-    const [processedSrc, setProcessedSrc] = useState(src);
-    const [processedUnlockedSeconds, setProcessedUnlockedSeconds] = useState(unlockedSeconds);
+    const [processedSrc, setProcessedSrc] = useState<string | null>(null);
+    const [processedUnlockedSeconds, setProcessedUnlockedSeconds] = useState<number | null>(null);
 
     useEffect(() => {
         console.log('[AudioPlayer] MOUNTED');
@@ -41,7 +41,7 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
                 let startPos = startTime;
 
                 // If same song but more time unlocked, start from where previous segment ended
-                if (src === processedSrc && unlockedSeconds > processedUnlockedSeconds) {
+                if (processedSrc !== null && src === processedSrc && processedUnlockedSeconds !== null && unlockedSeconds > processedUnlockedSeconds) {
                     startPos = startTime + processedUnlockedSeconds;
                 }
 
@@ -62,8 +62,11 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
                 const initialPercent = unlockedSeconds > 0 ? (initialElapsed / unlockedSeconds) * 100 : 0;
                 setProgress(Math.min(initialPercent, 100));
 
-                setHasPlayedOnce(false); // Reset for new segment
-                onHasPlayedChange?.(false); // Notify parent
+                // Only reset hasPlayedOnce if the song changed, not if just more time was unlocked
+                if (processedSrc !== null && src !== processedSrc) {
+                    setHasPlayedOnce(false); // Reset for new song
+                    onHasPlayedChange?.(false); // Notify parent
+                }
 
                 // Update processed state
                 setProcessedSrc(src);
@@ -72,22 +75,34 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
                 if (autoPlay) {
                     // Delay play slightly to ensure currentTime sticks
                     setTimeout(() => {
-                        const playPromise = audioRef.current?.play();
-                        if (playPromise !== undefined) {
-                            playPromise
-                                .then(() => {
-                                    setIsPlaying(true);
-                                    onPlay?.();
-                                    setHasPlayedOnce(true);
-                                    onHasPlayedChange?.(true); // Notify parent
-                                })
-                                .catch(error => {
-                                    console.log("Autoplay prevented:", error);
-                                    setIsPlaying(false);
-                                });
+                        if (audioRef.current) {
+                            // Use startPos (which may be startTime + processedUnlockedSeconds if more time was unlocked)
+                            // instead of always using startTime
+                            audioRef.current.currentTime = startPos;
+                            const playPromise = audioRef.current.play();
+                            if (playPromise !== undefined) {
+                                playPromise
+                                    .then(() => {
+                                        setIsPlaying(true);
+                                        onPlay?.();
+                                        setHasPlayedOnce(true);
+                                        onHasPlayedChange?.(true); // Notify parent
+                                    })
+                                    .catch(error => {
+                                        console.log("Autoplay prevented:", error);
+                                        setIsPlaying(false);
+                                    });
+                            }
                         }
                     }, 150);
                 }
+            } else if (startTime !== undefined && startTime > 0) {
+                // If startTime is set and we haven't processed changes, ensure currentTime is at least at startTime
+                // This handles the case where the audio element was reset or reloaded, or when manually playing for the first time
+                const current = audioRef.current.currentTime;
+                if (current < startTime) {
+                    audioRef.current.currentTime = startTime;
+                }
             }
         }
     }, [src, unlockedSeconds, startTime, autoPlay, processedSrc, processedUnlockedSeconds]);
@@ -97,6 +112,16 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
         play: () => {
             if (!audioRef.current) return;
 
+            // Check if we need to reset to startTime
+            const current = audioRef.current.currentTime;
+            const elapsed = current - startTime;
+            
+            // Reset if: never played before, current position is before startTime, or we've exceeded the unlocked segment
+            if (!hasPlayedOnce || current < startTime || elapsed >= unlockedSeconds) {
+                // Reset to start of segment
+                audioRef.current.currentTime = startTime;
+            }
+            
             const playPromise = audioRef.current.play();
             if (playPromise !== undefined) {
                 playPromise
@@ -121,8 +146,35 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
 
         if (isPlaying) {
             audioRef.current.pause();
+            setIsPlaying(false);
         } else {
+            // Ensure we're at the correct position before playing
+            const current = audioRef.current.currentTime;
+            const elapsed = current - startTime;
+            
+            // Determine target position
+            let targetPos = startTime;
+            
+            // If we've played before and we're within the unlocked segment, continue from current position
+            if (hasPlayedOnce && current >= startTime && elapsed < unlockedSeconds) {
+                targetPos = current; // Continue from current position
+            } else {
+                // Reset to start of segment if: never played, before startTime, or exceeded unlocked segment
+                targetPos = startTime;
+            }
+            
+            // Set position before playing
+            audioRef.current.currentTime = targetPos;
+            
+            // Ensure position sticks (browser might reset it)
+            setTimeout(() => {
+                if (audioRef.current && Math.abs(audioRef.current.currentTime - targetPos) > 0.5) {
+                    audioRef.current.currentTime = targetPos;
+                }
+            }, 50);
+            
             audioRef.current.play();
+            setIsPlaying(true);
             onPlay?.();
 
             if (hasPlayedOnce) {
@@ -132,7 +184,6 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
                 onHasPlayedChange?.(true); // Notify parent
             }
         }
-        setIsPlaying(!isPlaying);
     };
 
     const handleTimeUpdate = () => {

components/CurateSpecialEditor.tsx

@@ -62,11 +62,14 @@ export default function CurateSpecialEditor({
     saveChangesLabel = '💾 Save Changes',
     savedLabel = '✓ Saved',
 }: CurateSpecialEditorProps) {
+    // Filtere Songs ohne vollständige Song-Daten (song, song.filename)
+    const validSongs = special.songs.filter(ss => ss.song && ss.song.filename);
+    
     const [selectedSongId, setSelectedSongId] = useState<number | null>(
-        special.songs.length > 0 ? special.songs[0].songId : null
+        validSongs.length > 0 ? validSongs[0].songId : null
     );
     const [pendingStartTime, setPendingStartTime] = useState<number | null>(
-        special.songs.length > 0 ? special.songs[0].startTime : null
+        validSongs.length > 0 ? validSongs[0].startTime : null
     );
     const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
     const [saving, setSaving] = useState(false);
@@ -77,7 +80,7 @@ export default function CurateSpecialEditor({
     const unlockSteps = JSON.parse(special.unlockSteps);
     const totalDuration = unlockSteps[unlockSteps.length - 1];
 
-    const selectedSpecialSong = special.songs.find(ss => ss.songId === selectedSongId) ?? null;
+    const selectedSpecialSong = validSongs.find(ss => ss.songId === selectedSongId) ?? null;
 
     const handleStartTimeChange = (newStartTime: number) => {
         setPendingStartTime(newStartTime);
@@ -98,19 +101,6 @@ export default function CurateSpecialEditor({
     return (
         <div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
             <div style={{ marginBottom: '2rem' }}>
-                <button
-                    onClick={onBack}
-                    style={{
-                        padding: '0.5rem 1rem',
-                        background: '#e5e7eb',
-                        border: 'none',
-                        borderRadius: '0.5rem',
-                        cursor: 'pointer',
-                        marginBottom: '1rem'
-                    }}
-                >
-                    {backLabel}
-                </button>
                 <h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>
                     {headerPrefix} {specialName}
                 </h1>
@@ -124,7 +114,7 @@ export default function CurateSpecialEditor({
                 </p>
             </div>
 
-            {special.songs.length === 0 ? (
+            {validSongs.length === 0 ? (
                 <div style={{ padding: '2rem', background: '#f3f4f6', borderRadius: '0.5rem', textAlign: 'center' }}>
                     <p>{noSongsHint}</p>
                     <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
@@ -138,7 +128,7 @@ export default function CurateSpecialEditor({
                             Select Song to Curate
                         </h2>
                         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '1rem' }}>
-                            {special.songs.map(ss => (
+                            {validSongs.map(ss => (
                                 <div
                                     key={ss.songId}
                                     onClick={() => {
@@ -165,7 +155,7 @@ export default function CurateSpecialEditor({
                         </div>
                     </div>
 
-                    {selectedSpecialSong && (
+                    {selectedSpecialSong && selectedSpecialSong.song && selectedSpecialSong.song.filename ? (
                         <div>
                             <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
                                 Curate: {selectedSpecialSong.song.title}
@@ -194,7 +184,7 @@ export default function CurateSpecialEditor({
                                     </button>
                                 </div>
                                 <WaveformEditor
-                                    audioUrl={`/uploads/${selectedSpecialSong.song.filename}`}
+                                    audioUrl={`/api/audio/${selectedSpecialSong.song.filename}`}
                                     startTime={pendingStartTime ?? selectedSpecialSong.startTime}
                                     duration={totalDuration}
                                     unlockSteps={unlockSteps}
@@ -202,7 +192,13 @@ export default function CurateSpecialEditor({
                                 />
                             </div>
                         </div>
-                    )}
+                    ) : selectedSpecialSong ? (
+                        <div style={{ padding: '2rem', background: '#fee2e2', borderRadius: '0.5rem', textAlign: 'center' }}>
+                            <p style={{ color: '#991b1b', fontWeight: 'bold' }}>
+                                Fehler: Song-Daten unvollständig. Bitte wählen Sie einen anderen Song.
+                            </p>
+                        </div>
+                    ) : null}
                 </div>
             )}
         </div>

components/WaveformEditor.tsx

@@ -12,11 +12,14 @@ interface WaveformEditorProps {
 
 export default function WaveformEditor({ audioUrl, startTime, duration, unlockSteps, onStartTimeChange }: WaveformEditorProps) {
     const canvasRef = useRef<HTMLCanvasElement>(null);
+    const timelineRef = useRef<HTMLCanvasElement>(null);
     const [audioBuffer, setAudioBuffer] = useState<AudioBuffer | null>(null);
     const [audioDuration, setAudioDuration] = useState(0);
     const [isPlaying, setIsPlaying] = useState(false);
     const [playingSegment, setPlayingSegment] = useState<number | null>(null);
     const [isPlayingFullTitle, setIsPlayingFullTitle] = useState(false);
+    const [pausedPosition, setPausedPosition] = useState<number | null>(null); // Position when paused
+    const [pausedType, setPausedType] = useState<'selection' | 'title' | null>(null); // Type of playback that was paused
     const [zoom, setZoom] = useState(1); // 1 = full view, higher = zoomed in
     const [viewOffset, setViewOffset] = useState(0); // Offset in seconds for panning
     const [playbackPosition, setPlaybackPosition] = useState<number | null>(null); // Current playback position in seconds
@@ -56,6 +59,80 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
         };
     }, [audioUrl]);
 
+    // Draw timeline
+    useEffect(() => {
+        if (!audioDuration || !timelineRef.current) return;
+
+        const timeline = timelineRef.current;
+        const ctx = timeline.getContext('2d');
+        if (!ctx) return;
+
+        const width = timeline.width;
+        const height = timeline.height;
+
+        // Calculate visible range based on zoom and offset (same as waveform)
+        const visibleDuration = audioDuration / zoom;
+        const visibleStart = Math.max(0, Math.min(viewOffset, audioDuration - visibleDuration));
+        const visibleEnd = Math.min(audioDuration, visibleStart + visibleDuration);
+
+        // Clear timeline
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, width, height);
+
+        // Draw border
+        ctx.strokeStyle = '#e5e7eb';
+        ctx.lineWidth = 1;
+        ctx.strokeRect(0, 0, width, height);
+
+        // Calculate appropriate time interval based on visible duration
+        let timeInterval = 1; // Start with 1 second
+        if (visibleDuration > 60) timeInterval = 10;
+        else if (visibleDuration > 30) timeInterval = 5;
+        else if (visibleDuration > 10) timeInterval = 2;
+        else if (visibleDuration > 5) timeInterval = 1;
+        else if (visibleDuration > 1) timeInterval = 0.5;
+        else timeInterval = 0.1;
+
+        // Draw time markers
+        ctx.strokeStyle = '#9ca3af';
+        ctx.lineWidth = 1;
+        ctx.fillStyle = '#374151';
+        ctx.font = '10px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+
+        const startTimeMarker = Math.floor(visibleStart / timeInterval) * timeInterval;
+        for (let time = startTimeMarker; time <= visibleEnd; time += timeInterval) {
+            const timePx = ((time - visibleStart) / visibleDuration) * width;
+            
+            if (timePx >= 0 && timePx <= width) {
+                // Draw tick mark
+                ctx.beginPath();
+                ctx.moveTo(timePx, 0);
+                ctx.lineTo(timePx, height);
+                ctx.stroke();
+
+                // Draw time label
+                const timeLabel = time.toFixed(timeInterval < 1 ? 1 : 0);
+                ctx.fillText(`${timeLabel}s`, timePx, 2);
+            }
+        }
+
+        // Draw current playback position if playing
+        if (playbackPosition !== null) {
+            const playbackPx = ((playbackPosition - visibleStart) / visibleDuration) * width;
+            if (playbackPx >= 0 && playbackPx <= width) {
+                ctx.strokeStyle = '#10b981';
+                ctx.lineWidth = 2;
+                ctx.beginPath();
+                ctx.moveTo(playbackPx, 0);
+                ctx.lineTo(playbackPx, height);
+                ctx.stroke();
+            }
+        }
+
+    }, [audioDuration, zoom, viewOffset, playbackPosition]);
+
     useEffect(() => {
         if (!audioBuffer || !canvasRef.current) return;
 
@@ -234,12 +311,21 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
         setHoverPreviewTime(null);
     };
 
-    const stopPlayback = () => {
+    const stopPlayback = (savePosition = false) => {
+        if (savePosition && playbackPosition !== null) {
+            // Save current position for resume
+            setPausedPosition(playbackPosition);
+            // Keep playbackPosition visible (don't set to null) so cursor stays visible
+        } else {
+            // Clear paused position if stopping completely
+            setPausedPosition(null);
+            setPausedType(null);
+            setPlaybackPosition(null);
+        }
         sourceRef.current?.stop();
         setIsPlaying(false);
         setPlayingSegment(null);
         setIsPlayingFullTitle(false);
-        setPlaybackPosition(null);
         if (animationFrameRef.current) {
             cancelAnimationFrame(animationFrameRef.current);
             animationFrameRef.current = null;
@@ -307,35 +393,55 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
     const handlePlayFull = () => {
         if (!audioBuffer || !audioContextRef.current) return;
 
-        // If full selection playback is already playing, stop it
+        // If full selection playback is already playing, pause it
         if (isPlaying && playingSegment === null && !isPlayingFullTitle) {
-            stopPlayback();
+            stopPlayback(true); // Save position
+            setPausedType('selection');
             return;
         }
 
         // Stop any current playback (segment, full selection, or full title)
         stopPlayback();
 
+        // Determine start position (resume from pause or start from beginning)
+        const resumePosition = pausedType === 'selection' && pausedPosition !== null 
+            ? pausedPosition 
+            : startTime;
+        const remainingDuration = resumePosition >= startTime + duration 
+            ? 0 
+            : (startTime + duration) - resumePosition;
+
+        if (remainingDuration <= 0) {
+            // Already finished, reset
+            setPausedPosition(null);
+            setPausedType(null);
+            return;
+        }
+
         // Start full selection playback
         const source = audioContextRef.current.createBufferSource();
         source.buffer = audioBuffer;
         source.connect(audioContextRef.current.destination);
 
         playbackStartTimeRef.current = audioContextRef.current.currentTime;
-        playbackOffsetRef.current = startTime;
+        playbackOffsetRef.current = resumePosition;
 
-        source.start(0, startTime, duration);
+        source.start(0, resumePosition, remainingDuration);
         sourceRef.current = source;
         setIsPlaying(true);
         setPlayingSegment(null);
         setIsPlayingFullTitle(false);
-        setPlaybackPosition(startTime);
+        setPausedPosition(null);
+        setPausedType(null);
+        setPlaybackPosition(resumePosition);
 
         source.onended = () => {
             setIsPlaying(false);
             setPlayingSegment(null);
             setIsPlayingFullTitle(false);
             setPlaybackPosition(null);
+            setPausedPosition(null);
+            setPausedType(null);
             if (animationFrameRef.current) {
                 cancelAnimationFrame(animationFrameRef.current);
                 animationFrameRef.current = null;
@@ -346,35 +452,55 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
     const handlePlayFullTitle = () => {
         if (!audioBuffer || !audioContextRef.current) return;
 
-        // If full title playback is already playing, stop it
+        // If full title playback is already playing, pause it
         if (isPlaying && isPlayingFullTitle) {
-            stopPlayback();
+            stopPlayback(true); // Save position
+            setPausedType('title');
             return;
         }
 
         // Stop any current playback (segment, full selection, or full title)
         stopPlayback();
 
-        // Start full title playback (from 0 to audioDuration)
+        // Determine start position (resume from pause or start from beginning)
+        const resumePosition = pausedType === 'title' && pausedPosition !== null 
+            ? pausedPosition 
+            : 0;
+        const remainingDuration = resumePosition >= audioDuration 
+            ? 0 
+            : audioDuration - resumePosition;
+
+        if (remainingDuration <= 0) {
+            // Already finished, reset
+            setPausedPosition(null);
+            setPausedType(null);
+            return;
+        }
+
+        // Start full title playback (from resumePosition to audioDuration)
         const source = audioContextRef.current.createBufferSource();
         source.buffer = audioBuffer;
         source.connect(audioContextRef.current.destination);
 
         playbackStartTimeRef.current = audioContextRef.current.currentTime;
-        playbackOffsetRef.current = 0;
+        playbackOffsetRef.current = resumePosition;
 
-        source.start(0, 0, audioDuration);
+        source.start(0, resumePosition, remainingDuration);
         sourceRef.current = source;
         setIsPlaying(true);
         setPlayingSegment(null);
         setIsPlayingFullTitle(true);
-        setPlaybackPosition(0);
+        setPausedPosition(null);
+        setPausedType(null);
+        setPlaybackPosition(resumePosition);
 
         source.onended = () => {
             setIsPlaying(false);
             setPlayingSegment(null);
             setIsPlayingFullTitle(false);
             setPlaybackPosition(null);
+            setPausedPosition(null);
+            setPausedType(null);
             if (animationFrameRef.current) {
                 cancelAnimationFrame(animationFrameRef.current);
                 animationFrameRef.current = null;
@@ -440,21 +566,38 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
                 )}
             </div>
 
-            <canvas
-                ref={canvasRef}
-                width={800}
-                height={150}
-                onClick={handleCanvasClick}
-                onMouseMove={handleCanvasMouseMove}
-                onMouseLeave={handleCanvasMouseLeave}
-                style={{
-                    width: '100%',
-                    height: 'auto',
-                    cursor: 'pointer',
-                    border: '1px solid #e5e7eb',
-                    borderRadius: '0.5rem'
-                }}
-            />
+            <div style={{ position: 'relative' }}>
+                <canvas
+                    ref={canvasRef}
+                    width={800}
+                    height={150}
+                    onClick={handleCanvasClick}
+                    onMouseMove={handleCanvasMouseMove}
+                    onMouseLeave={handleCanvasMouseLeave}
+                    style={{
+                        width: '100%',
+                        height: 'auto',
+                        cursor: 'pointer',
+                        border: '1px solid #e5e7eb',
+                        borderRadius: '0.5rem 0.5rem 0 0',
+                        display: 'block'
+                    }}
+                />
+                <canvas
+                    ref={timelineRef}
+                    width={800}
+                    height={30}
+                    style={{
+                        width: '100%',
+                        height: '30px',
+                        border: '1px solid #e5e7eb',
+                        borderTop: 'none',
+                        borderRadius: '0 0 0.5rem 0.5rem',
+                        display: 'block',
+                        background: '#ffffff'
+                    }}
+                />
+            </div>
 
             {/* Playback Controls */}
             <div style={{ marginTop: '1rem', display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
@@ -470,7 +613,11 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
                         fontWeight: 'bold'
                     }}
                 >
-                    {isPlaying && playingSegment === null && !isPlayingFullTitle ? '⏸ Pause' : '▶ Play Full Selection'}
+                    {isPlaying && playingSegment === null && !isPlayingFullTitle 
+                        ? '⏸ Pause' 
+                        : (pausedType === 'selection' && pausedPosition !== null 
+                            ? '▶ Resume' 
+                            : '▶ Play Full Selection')}
                 </button>
                 <button
                     onClick={handlePlayFullTitle}
@@ -484,7 +631,11 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
                         fontWeight: 'bold'
                     }}
                 >
-                    {isPlaying && isPlayingFullTitle ? '⏸ Pause' : '▶ Play Full Title'}
+                    {isPlaying && isPlayingFullTitle 
+                        ? '⏸ Pause' 
+                        : (pausedType === 'title' && pausedPosition !== null 
+                            ? '▶ Resume' 
+                            : '▶ Play Full Title')}
                 </button>
 
                 <div style={{ fontSize: '0.875rem', color: '#666' }}>

docs/TESTING.md

@@ -0,0 +1,88 @@
+# Integration Testing
+
+Hördle uses [Playwright](https://playwright.dev/) for end-to-end (E2E) integration testing. These tests ensure that critical flows like gameplay, authentication, and admin management function correctly across different browsers.
+
+## Prerequisites
+
+Ensure you have the Playwright browsers installed:
+
+```bash
+npx playwright install
+```
+
+## Running Tests
+
+### Headless Mode (CI/CLI)
+
+To run all tests in headless mode (Chromium, Firefox, WebKit):
+
+```bash
+npm run test:e2e
+```
+
+### UI Mode (Interactive)
+
+To run tests with a UI to inspect traces and watch execution:
+
+```bash
+npm run test:e2e:ui
+```
+
+### Specific Test File
+
+To run a specific test file:
+
+```bash
+npx playwright test tests/gameplay.spec.ts
+```
+
+### Specific Project (Browser)
+
+To run tests only on a specific browser (e.g., Chromium):
+
+```bash
+npx playwright test --project=chromium
+```
+
+## Configuration
+
+The Playwright configuration is located in `playwright.config.ts`. It sets up the base URL (default: `http://localhost:3000`) and the web server command to start the app if it's not running.
+
+### Environment Variables
+
+*   **`ADMIN_PASSWORD`**: The tests assume the admin password is `'admin123'`. 
+    *   In `app/api/admin/login/route.ts`, the login logic has been enhanced to check if `ADMIN_PASSWORD` is a bcrypt hash (starts with `$2b$`) or plain text. 
+    *   For local testing, you can set `ADMIN_PASSWORD="admin123"` in your `.env` or `.env.local` (though the default fallback in the code also handles this).
+*   **Curator Credentials**: The mock Curator login page (`app/[locale]/curator/page.tsx`) mocks validation for testing.
+    *   Username: `elpatron`
+    *   Password: `example_password`
+
+## Test Structure
+
+Tests are located in the `tests/` directory:
+
+*   **`auth.spec.ts`**: Verifies public access and admin login flows.
+*   **`admin.spec.ts`**: Checks the Admin Dashboard, including access protection and visibility of sections (Dashboard, Daily Puzzles, etc.).
+*   **`curator.spec.ts`**: Verifies the Curator login form and authentication flows (valid/invalid credentials).
+*   **`gameplay.spec.ts`**: Tests the core game loop: loading the game, playing audio, interaction with the prompt, and submitting a guess.
+
+## Troubleshooting & Known Issues
+
+### Next.js Development Overlay (`nextjs-portal`)
+
+In development mode (`npm run dev`), Next.js injects an overlay (`<nextjs-portal>`) for hot reloading feedback. This overlay can sometimes intercept clicks intended for UI elements, causing tests to fail with "element is not clickable" or timeout errors.
+
+**Solution:** 
+We inject a CSS style in the `beforeEach` hook of our tests to hide this overlay:
+
+```typescript
+test.beforeEach(async ({ page }) => {
+    await page.addStyleTag({ content: 'nextjs-portal, #nextjs-dev-overlay, [data-nextjs-dev-overlay] { display: none !important; }' });
+});
+```
+
+### WebKit (Safari) Stability
+
+WebKit can be slower or more sensitive to timing in some environments. If tests fail on WebKit but pass on other browsers:
+1.  Try increasing the timeout in `playwright.config.ts`.
+2.  Use `await page.waitForTimeout(500)` or specific assertions like `await expect(page).toHaveURL(...)` to allow for transition times, as implemented in `tests/admin.spec.ts`.

messages/de.json

@@ -231,6 +231,7 @@
     "columnTitle": "Titel",
     "columnArtist": "Artist",
     "columnYear": "Jahr",
+    "columnCover": "Cover",
     "columnGenresSpecials": "Genres / Specials",
     "columnAdded": "Hinzugefügt",
     "columnActivations": "Aktivierungen",

messages/en.json

@@ -231,6 +231,7 @@
     "columnTitle": "Title",
     "columnArtist": "Artist",
     "columnYear": "Year",
+    "columnCover": "Cover",
     "columnGenresSpecials": "Genres / Specials",
     "columnAdded": "Added",
     "columnActivations": "Activations",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoerdle",
-  "version": "0.1.6.20",
+  "version": "0.1.6.36",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -32,4 +32,4 @@
     "eslint-config-next": "^16.0.7",
     "typescript": "^5"
   }
-}
+}

prisma/migrations/20251206002217_add_hidden_to_special/migration.sql

@@ -0,0 +1,20 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Special" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "name" JSONB NOT NULL,
+    "subtitle" JSONB,
+    "maxAttempts" INTEGER NOT NULL DEFAULT 7,
+    "unlockSteps" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "launchDate" DATETIME,
+    "endDate" DATETIME,
+    "curator" TEXT,
+    "hidden" BOOLEAN NOT NULL DEFAULT false
+);
+INSERT INTO "new_Special" ("createdAt", "curator", "endDate", "id", "launchDate", "maxAttempts", "name", "subtitle", "unlockSteps") SELECT "createdAt", "curator", "endDate", "id", "launchDate", "maxAttempts", "name", "subtitle", "unlockSteps" FROM "Special";
+DROP TABLE "Special";
+ALTER TABLE "new_Special" RENAME TO "Special";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

prisma/schema.prisma

@@ -47,6 +47,7 @@ model Special {
   launchDate  DateTime?
   endDate     DateTime?
   curator     String?
+  hidden      Boolean       @default(false)
   songs       SpecialSong[]
   puzzles     DailyPuzzle[]
   news        News[]

scripts/backup-restic.sh

@@ -9,6 +9,79 @@ if [ -f "$HOME/.restic-env" ]; then
     . "$HOME/.restic-env"
 fi
 
+# Extract Gotify variables from .env file if not set (ignore comments and empty lines)
+if [ -z "$GOTIFY_URL" ] && [ -f ".env" ]; then
+    GOTIFY_URL=$(grep -v '^#' .env | grep -v '^$' | grep '^GOTIFY_URL=' | head -1 | cut -d'=' -f2- | tr -d '"' | tr -d "'" | xargs || echo "")
+fi
+
+if [ -z "$GOTIFY_APP_TOKEN" ] && [ -f ".env" ]; then
+    GOTIFY_APP_TOKEN=$(grep -v '^#' .env | grep -v '^$' | grep '^GOTIFY_APP_TOKEN=' | head -1 | cut -d'=' -f2- | tr -d '"' | tr -d "'" | xargs || echo "")
+fi
+
+# Extract Gotify variables from docker-compose.yml if not set
+if [ -z "$GOTIFY_URL" ] && [ -f "docker-compose.yml" ]; then
+    GOTIFY_URL=$(grep -oP 'GOTIFY_URL=\K[^\s]+' docker-compose.yml | head -1 | tr -d '"' | tr -d "'" || echo "")
+fi
+
+if [ -z "$GOTIFY_APP_TOKEN" ] && [ -f "docker-compose.yml" ]; then
+    GOTIFY_APP_TOKEN=$(grep -oP 'GOTIFY_APP_TOKEN=\K[^\s]+' docker-compose.yml | head -1 | tr -d '"' | tr -d "'" || echo "")
+fi
+
+# Function to send Gotify notification
+send_gotify_notification() {
+    local title="$1"
+    local message="$2"
+    local priority="${3:-5}"
+    
+    # Check if Gotify is configured
+    if [ -z "$GOTIFY_URL" ] || [ -z "$GOTIFY_APP_TOKEN" ]; then
+        echo "⚠️  Gotify not configured (GOTIFY_URL or GOTIFY_APP_TOKEN not set), skipping notification"
+        return 0
+    fi
+    
+    echo "📢 Sending Gotify notification..."
+    
+    # Send notification (fire and forget, don't fail on error)
+    # Use jq if available for proper JSON encoding, otherwise use simple approach
+    if command -v jq >/dev/null 2>&1; then
+        local json_payload
+        json_payload=$(jq -n \
+            --arg title "$title" \
+            --arg message "$message" \
+            --argjson priority "$priority" \
+            '{title: $title, message: $message, priority: $priority}')
+        
+        local curl_exit_code=0
+        curl -sSf -X POST "${GOTIFY_URL}/message?token=${GOTIFY_APP_TOKEN}" \
+            -H "Content-Type: application/json" \
+            -d "$json_payload" \
+            >/dev/null 2>&1 || curl_exit_code=$?
+        
+        if [ $curl_exit_code -eq 0 ]; then
+            echo "✅ Gotify notification sent successfully"
+        else
+            echo "⚠️  Failed to send Gotify notification (curl exit code: $curl_exit_code)"
+        fi
+    else
+        # Fallback: simple JSON encoding (replace " with \" and newlines with \n)
+        local escaped_title escaped_message
+        escaped_title=$(echo "$title" | sed 's/"/\\"/g')
+        escaped_message=$(echo "$message" | sed 's/"/\\"/g' | sed ':a;N;$!ba;s/\n/\\n/g')
+        
+        local curl_exit_code=0
+        curl -sSf -X POST "${GOTIFY_URL}/message?token=${GOTIFY_APP_TOKEN}" \
+            -H "Content-Type: application/json" \
+            -d "{\"title\":\"${escaped_title}\",\"message\":\"${escaped_message}\",\"priority\":${priority}}" \
+            >/dev/null 2>&1 || curl_exit_code=$?
+        
+        if [ $curl_exit_code -eq 0 ]; then
+            echo "✅ Gotify notification sent successfully"
+        else
+            echo "⚠️  Failed to send Gotify notification (curl exit code: $curl_exit_code)"
+        fi
+    fi
+}
+
 echo "💾 Creating Restic backup..."
 
 if ! command -v restic >/dev/null 2>&1; then
@@ -71,12 +144,32 @@ restic -r "$RESTIC_REPO" backup \
 
 if [ $RESTIC_EXIT_CODE -eq 0 ]; then
     echo "✅ Restic backup completed successfully"
+    
+    # Send success notification
+    send_gotify_notification \
+        "Hördle Backup: Erfolgreich" \
+        "Restic Backup wurde erfolgreich abgeschlossen.\nDatum: ${CURRENT_DATE}\nCommit: ${CURRENT_COMMIT_SHORT}" \
+        5
+    
     exit 0
 elif [ $RESTIC_EXIT_CODE -eq 3 ]; then
     echo "⚠️  Restic backup completed with warnings (some files could not be read), continuing..."
+    
+    # Send warning notification
+    send_gotify_notification \
+        "Hördle Backup: Mit Warnungen" \
+        "Restic Backup wurde mit Warnungen abgeschlossen (einige Dateien konnten nicht gelesen werden).\nDatum: ${CURRENT_DATE}\nCommit: ${CURRENT_COMMIT_SHORT}" \
+        7
+    
     exit 0
 else
     echo "⚠️  Restic backup failed (exit code: $RESTIC_EXIT_CODE), continuing deployment..."
+    
+    # Send error notification
+    send_gotify_notification \
+        "Hördle Backup: Fehlgeschlagen" \
+        "Restic Backup ist fehlgeschlagen (Exit Code: ${RESTIC_EXIT_CODE}).\nDatum: ${CURRENT_DATE}\nCommit: ${CURRENT_COMMIT_SHORT}" \
+        9
+    
     exit 0
 fi
-

scripts/deploy.sh

@@ -63,10 +63,44 @@ fi
 ./scripts/backup-restic.sh
 
 # Nur neueste Version holen (shallow fetch), vollständiges Repo ist im Deployment nicht nötig
-echo "📥 Fetching latest commit (shallow clone) from git..."
-git fetch --prune --tags --depth=1 origin master
+# Wichtig: Tags müssen vollständig geholt werden für Version-Anzeige
+echo "📥 Fetching latest commit and all tags from git..."
+git fetch --prune --tags origin master
+git fetch --tags origin
 git reset --hard origin/master
 
+# Determine version: try git tag first, then package.json
+echo "🏷️  Determining version..."
+APP_VERSION=""
+# Try to get exact tag if we're on a tagged commit
+if git describe --tags --exact-match HEAD 2>/dev/null; then
+    APP_VERSION=$(git describe --tags --exact-match HEAD 2>/dev/null)
+    echo "   Found exact tag: $APP_VERSION"
+else
+    # Try to get latest tag
+    LATEST_TAG=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
+    if [ -n "$LATEST_TAG" ]; then
+        APP_VERSION="$LATEST_TAG"
+        echo "   Using latest tag: $APP_VERSION"
+    else
+        # Fallback to package.json
+        if [ -f "package.json" ]; then
+            PACKAGE_VERSION=$(grep -o '"version": "[^"]*"' package.json 2>/dev/null | cut -d'"' -f4)
+            if [ -n "$PACKAGE_VERSION" ]; then
+                APP_VERSION="v${PACKAGE_VERSION}"
+                echo "   Using package.json version: $APP_VERSION"
+            fi
+        fi
+    fi
+fi
+
+if [ -z "$APP_VERSION" ]; then
+    echo "⚠️  Could not determine version, using 'dev'"
+    APP_VERSION="dev"
+fi
+
+echo "📦 Building with version: $APP_VERSION"
+
 # Prüfe und erstelle/repariere Netzwerk falls nötig
 echo "🌐 Prüfe Docker-Netzwerk..."
 if ! docker network ls | grep -q "hoerdle_default"; then
@@ -82,7 +116,7 @@ echo ""
 
 # Build new image in background (doesn't stop running container)
 echo "🔨 Building new Docker image (this runs while app is still online)..."
-docker compose build
+docker compose build --build-arg APP_VERSION="$APP_VERSION"
 
 # Quick restart with pre-built image
 echo "🔄 Restarting with new image (minimal downtime)..."