...

- Neue Spalte 'Cover' in der Curator-Titelliste zeigt an, ob ein Album-Cover vorhanden ist
- Tooltip zeigt das Cover-Bild beim Hovern über die Cover-Spalte
- Übersetzungen für DE und EN hinzugefügt

app/[locale]/admin/page.tsx

@@ -15,6 +15,7 @@ interface Special {
     launchDate?: string;
     endDate?: string;
     curator?: string;
+    hidden?: boolean;
     _count?: {
         songs: number;
     };
@@ -119,6 +120,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
     const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
     const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
     const [newSpecialCurator, setNewSpecialCurator] = useState('');
+    const [newSpecialHidden, setNewSpecialHidden] = useState(false);
 
     const [editingSpecialId, setEditingSpecialId] = useState<number | null>(null);
     const [editSpecialName, setEditSpecialName] = useState({ de: '', en: '' });
@@ -129,6 +131,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
     const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
     const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
     const [editSpecialCurator, setEditSpecialCurator] = useState('');
+    const [editSpecialHidden, setEditSpecialHidden] = useState(false);
 
     // News state
     const [news, setNews] = useState<News[]>([]);
@@ -393,6 +396,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                 launchDate: newSpecialLaunchDate || null,
                 endDate: newSpecialEndDate || null,
                 curator: newSpecialCurator || null,
+                hidden: newSpecialHidden,
             }),
         });
         if (res.ok) {
@@ -404,6 +408,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
             setNewSpecialLaunchDate('');
             setNewSpecialEndDate('');
             setNewSpecialCurator('');
+            setNewSpecialHidden(false);
             fetchSpecials();
         } else {
             const errorData = await res.json().catch(() => ({}));
@@ -491,6 +496,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
         setEditSpecialLaunchDate(special.launchDate ? new Date(special.launchDate).toISOString().split('T')[0] : '');
         setEditSpecialEndDate(special.endDate ? new Date(special.endDate).toISOString().split('T')[0] : '');
         setEditSpecialCurator(special.curator || '');
+        setEditSpecialHidden(special.hidden || false);
     };
 
     const saveEditedSpecial = async () => {
@@ -516,6 +522,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                 launchDate: editSpecialLaunchDate || null,
                 endDate: editSpecialEndDate || null,
                 curator: editSpecialCurator || null,
+                hidden: editSpecialHidden,
             }),
         });
         if (res.ok) {
@@ -1389,6 +1396,18 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                             <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
                             <input type="text" placeholder={t('curator')} value={newSpecialCurator} onChange={e => setNewSpecialCurator(e.target.value)} className="form-input" />
                         </div>
+                        <div style={{ display: 'flex', flexDirection: 'column' }}>
+                             <label style={{ fontSize: '0.75rem', color: '#666', visibility: 'hidden' }}>Hidden</label>
+                             <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', height: '38px', cursor: 'pointer' }}>
+                                <input
+                                    type="checkbox"
+                                    checked={newSpecialHidden}
+                                    onChange={e => setNewSpecialHidden(e.target.checked)}
+                                    style={{ width: '1rem', height: '1rem' }}
+                                />
+                                Hidden
+                            </label>
+                        </div>
                         <button 
                             type="submit" 
                             className="btn-primary" 
@@ -1418,7 +1437,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                             }}
                         >
                             <span>
-                                {getLocalizedValue(special.name, activeTab)} ({special._count?.songs || 0})
+                                {special.hidden && <span title="Hidden from navigation">👁️‍🗨️</span>} {getLocalizedValue(special.name, activeTab)} ({special._count?.songs || 0})
                             </span>
                             {special.subtitle && (
                                 <span
@@ -1508,6 +1527,18 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                                 <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
                                 <input type="text" value={editSpecialCurator} onChange={e => setEditSpecialCurator(e.target.value)} className="form-input" />
                             </div>
+                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                <label style={{ fontSize: '0.75rem', color: '#666', visibility: 'hidden' }}>Hidden</label>
+                                <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', height: '38px', cursor: 'pointer' }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={editSpecialHidden}
+                                        onChange={e => setEditSpecialHidden(e.target.checked)}
+                                        style={{ width: '1rem', height: '1rem' }}
+                                    />
+                                    Hidden
+                                </label>
+                            </div>
                             <button 
                                 onClick={saveEditedSpecial} 
                                 className="btn-primary" 

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/page.tsx

@@ -12,6 +12,7 @@ interface Special {
     launchDate?: string;
     endDate?: string;
     curator?: string;
+    hidden?: boolean;
     _count?: {
         songs: number;
     };
@@ -88,6 +89,7 @@ export default function AdminPage() {
     const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
     const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
     const [newSpecialCurator, setNewSpecialCurator] = useState('');
+    const [newSpecialHidden, setNewSpecialHidden] = useState(false);
 
     const [editingSpecialId, setEditingSpecialId] = useState<number | null>(null);
     const [editSpecialName, setEditSpecialName] = useState('');
@@ -97,6 +99,7 @@ export default function AdminPage() {
     const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
     const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
     const [editSpecialCurator, setEditSpecialCurator] = useState('');
+    const [editSpecialHidden, setEditSpecialHidden] = useState(false);
 
     // News state
     const [news, setNews] = useState<News[]>([]);
@@ -268,6 +271,7 @@ export default function AdminPage() {
                 launchDate: newSpecialLaunchDate || null,
                 endDate: newSpecialEndDate || null,
                 curator: newSpecialCurator || null,
+                hidden: newSpecialHidden,
             }),
         });
         if (res.ok) {
@@ -278,6 +282,7 @@ export default function AdminPage() {
             setNewSpecialLaunchDate('');
             setNewSpecialEndDate('');
             setNewSpecialCurator('');
+            setNewSpecialHidden(false);
             fetchSpecials();
         } else {
             alert('Failed to create special');
@@ -363,6 +368,7 @@ export default function AdminPage() {
         setEditSpecialLaunchDate(special.launchDate ? new Date(special.launchDate).toISOString().split('T')[0] : '');
         setEditSpecialEndDate(special.endDate ? new Date(special.endDate).toISOString().split('T')[0] : '');
         setEditSpecialCurator(special.curator || '');
+        setEditSpecialHidden(special.hidden || false);
     };
 
     const saveEditedSpecial = async () => {
@@ -379,6 +385,7 @@ export default function AdminPage() {
                 launchDate: editSpecialLaunchDate || null,
                 endDate: editSpecialEndDate || null,
                 curator: editSpecialCurator || null,
+                hidden: editSpecialHidden,
             }),
         });
         if (res.ok) {
@@ -632,6 +639,15 @@ export default function AdminPage() {
                         <div style={{ display: 'flex', flexDirection: 'column' }}>
                             <label style={{ fontSize: '0.75rem', color: '#666' }}>Curator</label>
                             <input type="text" placeholder="Curator name" value={newSpecialCurator} onChange={e => setNewSpecialCurator(e.target.value)} className="form-input" />
+                            <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer', marginTop: '0.5rem' }}>
+                                <input
+                                    type="checkbox"
+                                    checked={newSpecialHidden}
+                                    onChange={e => setNewSpecialHidden(e.target.checked)}
+                                    style={{ width: '1rem', height: '1rem' }}
+                                />
+                                Hidden Special (not in navigation)
+                            </label>
                         </div>
                         <button type="submit" className="btn-primary" style={{ height: '38px' }}>Add Special</button>
                     </div>
@@ -651,7 +667,7 @@ export default function AdminPage() {
                             }}
                         >
                             <span>
-                                {special.name} ({special._count?.songs || 0})
+                                {special.hidden && <span title="Hidden from navigation">👁️‍🗨️</span>} {special.name} ({special._count?.songs || 0})
                             </span>
                             {special.subtitle && (
                                 <span
@@ -711,6 +727,15 @@ export default function AdminPage() {
                             <div style={{ display: 'flex', flexDirection: 'column' }}>
                                 <label style={{ fontSize: '0.75rem', color: '#666' }}>Curator</label>
                                 <input type="text" value={editSpecialCurator} onChange={e => setEditSpecialCurator(e.target.value)} className="form-input" />
+                                <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer', marginTop: '0.5rem' }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={editSpecialHidden}
+                                        onChange={e => setEditSpecialHidden(e.target.checked)}
+                                        style={{ width: '1rem', height: '1rem' }}
+                                    />
+                                    Hidden Special
+                                </label>
                             </div>
                             <button onClick={saveEditedSpecial} className="btn-primary" style={{ height: '38px' }}>Save</button>
                             <button onClick={() => setEditingSpecialId(null)} className="btn-secondary" style={{ height: '38px' }}>Cancel</button>

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[]>([]);
@@ -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' }}
@@ -1778,6 +1781,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={`/uploads/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' }}>

components/CurateSpecialEditor.tsx

@@ -98,19 +98,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>

components/WaveformEditor.tsx

@@ -12,10 +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
@@ -55,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;
 
@@ -233,11 +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);
-        setPlaybackPosition(null);
+        setIsPlayingFullTitle(false);
         if (animationFrameRef.current) {
             cancelAnimationFrame(animationFrameRef.current);
             animationFrameRef.current = null;
@@ -305,33 +393,114 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
     const handlePlayFull = () => {
         if (!audioBuffer || !audioContextRef.current) return;
 
-        // If full playback is already playing, stop it
-        if (isPlaying && playingSegment === null) {
-            stopPlayback();
+        // If full selection playback is already playing, pause it
+        if (isPlaying && playingSegment === null && !isPlayingFullTitle) {
+            stopPlayback(true); // Save position
+            setPausedType('selection');
             return;
         }
 
-        // Stop any current playback (segment or full)
+        // Stop any current playback (segment, full selection, or full title)
         stopPlayback();
 
-        // Start full playback
+        // 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); // Ensure playingSegment is null for full playback
-        setPlaybackPosition(startTime);
+        setPlayingSegment(null);
+        setIsPlayingFullTitle(false);
+        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;
+            }
+        };
+    };
+
+    const handlePlayFullTitle = () => {
+        if (!audioBuffer || !audioContextRef.current) return;
+
+        // If full title playback is already playing, pause it
+        if (isPlaying && isPlayingFullTitle) {
+            stopPlayback(true); // Save position
+            setPausedType('title');
+            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 === '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 = resumePosition;
+
+        source.start(0, resumePosition, remainingDuration);
+        sourceRef.current = source;
+        setIsPlaying(true);
+        setPlayingSegment(null);
+        setIsPlayingFullTitle(true);
+        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;
@@ -397,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' }}>
@@ -427,7 +613,29 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
                         fontWeight: 'bold'
                     }}
                 >
-                    {isPlaying && playingSegment === null ? '⏸ Pause' : '▶ Play Full Selection'}
+                    {isPlaying && playingSegment === null && !isPlayingFullTitle 
+                        ? '⏸ Pause' 
+                        : (pausedType === 'selection' && pausedPosition !== null 
+                            ? '▶ Resume' 
+                            : '▶ Play Full Selection')}
+                </button>
+                <button
+                    onClick={handlePlayFullTitle}
+                    style={{
+                        padding: '0.5rem 1rem',
+                        background: '#10b981',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '0.5rem',
+                        cursor: 'pointer',
+                        fontWeight: 'bold'
+                    }}
+                >
+                    {isPlaying && isPlayingFullTitle 
+                        ? '⏸ Pause' 
+                        : (pausedType === 'title' && pausedPosition !== null 
+                            ? '▶ Resume' 
+                            : '▶ Play Full Title')}
                 </button>
 
                 <div style={{ fontSize: '0.875rem', color: '#666' }}>

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.19",
+  "version": "0.1.6.25",
   "private": true,
   "scripts": {
     "dev": "next dev",

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[]