Bump version to 0.1.6.19

.gitignore

@@ -54,3 +54,4 @@ next-env.d.ts
 docker-compose.yml
 scripts/scrape-bahn-expert-statements.js
 docs/bahn-expert-statements.txt
+/public/logos.zip

app/[locale]/admin/page.tsx

@@ -115,6 +115,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
     const [newSpecialSubtitle, setNewSpecialSubtitle] = useState({ de: '', en: '' });
     const [newSpecialMaxAttempts, setNewSpecialMaxAttempts] = useState(7);
     const [newSpecialUnlockSteps, setNewSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
+    const [newSpecialUnlockStepsError, setNewSpecialUnlockStepsError] = useState<string | null>(null);
     const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
     const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
     const [newSpecialCurator, setNewSpecialCurator] = useState('');
@@ -124,6 +125,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
     const [editSpecialSubtitle, setEditSpecialSubtitle] = useState({ de: '', en: '' });
     const [editSpecialMaxAttempts, setEditSpecialMaxAttempts] = useState(7);
     const [editSpecialUnlockSteps, setEditSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
+    const [editSpecialUnlockStepsError, setEditSpecialUnlockStepsError] = useState<string | null>(null);
     const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
     const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
     const [editSpecialCurator, setEditSpecialCurator] = useState('');
@@ -239,6 +241,25 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
         }
     };
 
+    // Validate JSON for unlock steps
+    const validateUnlockSteps = (value: string): string | null => {
+        if (!value.trim()) {
+            return t('unlockStepsRequired');
+        }
+        try {
+            const parsed = JSON.parse(value);
+            if (!Array.isArray(parsed)) {
+                return t('unlockStepsMustBeArray');
+            }
+            if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
+                return t('unlockStepsMustBePositiveNumbers');
+            }
+            return null;
+        } catch (e) {
+            return t('unlockStepsInvalidJson');
+        }
+    };
+
     const handleLogout = () => {
         localStorage.removeItem('hoerdle_admin_auth');
         setIsAuthenticated(false);
@@ -352,6 +373,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
     const handleCreateSpecial = async (e: React.FormEvent) => {
         e.preventDefault();
         if (!newSpecialName.de.trim() && !newSpecialName.en.trim()) return;
+        
+        // Validate unlock steps
+        const unlockStepsError = validateUnlockSteps(newSpecialUnlockSteps);
+        if (unlockStepsError) {
+            setNewSpecialUnlockStepsError(unlockStepsError);
+            return;
+        }
+        setNewSpecialUnlockStepsError(null);
+        
         const res = await fetch('/api/specials', {
             method: 'POST',
             headers: getAuthHeaders(),
@@ -370,12 +400,14 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
             setNewSpecialSubtitle({ de: '', en: '' });
             setNewSpecialMaxAttempts(7);
             setNewSpecialUnlockSteps('[2,4,7,11,16,30,60]');
+            setNewSpecialUnlockStepsError(null);
             setNewSpecialLaunchDate('');
             setNewSpecialEndDate('');
             setNewSpecialCurator('');
             fetchSpecials();
         } else {
-            alert('Failed to create special');
+            const errorData = await res.json().catch(() => ({}));
+            alert(errorData.error || 'Failed to create special');
         }
     };
 
@@ -455,6 +487,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
         setEditSpecialSubtitle(special.subtitle ? (typeof special.subtitle === 'string' ? { de: special.subtitle, en: special.subtitle } : special.subtitle) : { de: '', en: '' });
         setEditSpecialMaxAttempts(special.maxAttempts);
         setEditSpecialUnlockSteps(special.unlockSteps);
+        setEditSpecialUnlockStepsError(null);
         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 || '');
@@ -462,6 +495,15 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
 
     const saveEditedSpecial = async () => {
         if (editingSpecialId === null) return;
+        
+        // Validate unlock steps
+        const unlockStepsError = validateUnlockSteps(editSpecialUnlockSteps);
+        if (unlockStepsError) {
+            setEditSpecialUnlockStepsError(unlockStepsError);
+            return;
+        }
+        setEditSpecialUnlockStepsError(null);
+        
         const res = await fetch('/api/specials', {
             method: 'PUT',
             headers: getAuthHeaders(),
@@ -478,9 +520,11 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
         });
         if (res.ok) {
             setEditingSpecialId(null);
+            setEditSpecialUnlockStepsError(null);
             fetchSpecials();
         } else {
-            alert('Failed to update special');
+            const errorData = await res.json().catch(() => ({}));
+            alert(errorData.error || 'Failed to update special');
         }
     };
 
@@ -1300,8 +1344,38 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                             <input type="number" placeholder={t('maxAttempts')} value={newSpecialMaxAttempts} onChange={e => setNewSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
                         </div>
                         <div style={{ display: 'flex', flexDirection: 'column' }}>
-                            <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('unlockSteps')}</label>
-                            <input type="text" placeholder={t('unlockSteps')} value={newSpecialUnlockSteps} onChange={e => setNewSpecialUnlockSteps(e.target.value)} className="form-input" style={{ width: '200px' }} />
+                            <label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                                {t('unlockSteps')}
+                                {newSpecialUnlockStepsError && (
+                                    <span 
+                                        title={newSpecialUnlockStepsError}
+                                        style={{ 
+                                            color: '#ef4444', 
+                                            cursor: 'help',
+                                            fontSize: '0.875rem'
+                                        }}
+                                    >
+                                        ⚠️
+                                    </span>
+                                )}
+                            </label>
+                            <input 
+                                type="text" 
+                                placeholder={t('unlockSteps')} 
+                                value={newSpecialUnlockSteps} 
+                                onChange={e => {
+                                    const value = e.target.value;
+                                    setNewSpecialUnlockSteps(value);
+                                    const error = validateUnlockSteps(value);
+                                    setNewSpecialUnlockStepsError(error);
+                                }} 
+                                className="form-input" 
+                                title={newSpecialUnlockStepsError || undefined}
+                                style={{ 
+                                    width: '200px',
+                                    borderColor: newSpecialUnlockStepsError ? '#ef4444' : undefined
+                                }} 
+                            />
                         </div>
                         <div style={{ display: 'flex', flexDirection: 'column' }}>
                             <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
@@ -1315,7 +1389,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>
-                        <button type="submit" className="btn-primary" style={{ height: '38px' }}>{t('addSpecial')}</button>
+                        <button 
+                            type="submit" 
+                            className="btn-primary" 
+                            style={{ 
+                                height: '38px',
+                                opacity: newSpecialUnlockStepsError ? 0.5 : 1,
+                                cursor: newSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
+                            }}
+                            disabled={!!newSpecialUnlockStepsError}
+                        >
+                            {t('addSpecial')}
+                        </button>
                     </div>
                 </form>
                 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
@@ -1379,8 +1464,37 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                                 <input type="number" value={editSpecialMaxAttempts} onChange={e => setEditSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
                             </div>
                             <div style={{ display: 'flex', flexDirection: 'column' }}>
-                                <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('unlockSteps')}</label>
-                                <input type="text" value={editSpecialUnlockSteps} onChange={e => setEditSpecialUnlockSteps(e.target.value)} className="form-input" style={{ width: '200px' }} />
+                                <label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                                    {t('unlockSteps')}
+                                    {editSpecialUnlockStepsError && (
+                                        <span 
+                                            title={editSpecialUnlockStepsError}
+                                            style={{ 
+                                                color: '#ef4444', 
+                                                cursor: 'help',
+                                                fontSize: '0.875rem'
+                                            }}
+                                        >
+                                            ⚠️
+                                        </span>
+                                    )}
+                                </label>
+                                <input 
+                                    type="text" 
+                                    value={editSpecialUnlockSteps} 
+                                    onChange={e => {
+                                        const value = e.target.value;
+                                        setEditSpecialUnlockSteps(value);
+                                        const error = validateUnlockSteps(value);
+                                        setEditSpecialUnlockStepsError(error);
+                                    }} 
+                                    className="form-input" 
+                                    title={editSpecialUnlockStepsError || undefined}
+                                    style={{ 
+                                        width: '200px',
+                                        borderColor: editSpecialUnlockStepsError ? '#ef4444' : undefined
+                                    }} 
+                                />
                             </div>
                             <div style={{ display: 'flex', flexDirection: 'column' }}>
                                 <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
@@ -1394,7 +1508,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>
-                            <button onClick={saveEditedSpecial} className="btn-primary" style={{ height: '38px' }}>{t('save')}</button>
+                            <button 
+                                onClick={saveEditedSpecial} 
+                                className="btn-primary" 
+                                style={{ 
+                                    height: '38px',
+                                    opacity: editSpecialUnlockStepsError ? 0.5 : 1,
+                                    cursor: editSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
+                                }}
+                                disabled={!!editSpecialUnlockStepsError}
+                            >
+                                {t('save')}
+                            </button>
                             <button onClick={() => setEditingSpecialId(null)} className="btn-secondary" style={{ height: '38px' }}>{t('cancel')}</button>
                         </div>
                     </div>

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

@@ -1,7 +1,9 @@
 'use client';
 
-import CuratorSpecialsPage from '@/app/curator/specials/page';
+import CuratorSpecialsClient from '@/app/curator/specials/CuratorSpecialsClient';
 
-export default CuratorSpecialsPage;
+export default function CuratorSpecialsPage() {
+    return <CuratorSpecialsClient />;
+}
 
 

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

@@ -17,22 +17,27 @@ export default function SpecialEditorPage() {
     const [special, setSpecial] = useState<CurateSpecial | null>(null);
     const [loading, setLoading] = useState(true);
 
-    useEffect(() => {
-        const fetchSpecial = async () => {
-            try {
-                const res = await fetch(`/api/specials/${specialId}`);
-                if (res.ok) {
-                    const data = await res.json();
-                    setSpecial(data);
-                }
-            } catch (error) {
-                console.error('Error fetching special:', error);
-            } finally {
+    const fetchSpecial = async (showLoading = true) => {
+        try {
+            if (showLoading) {
+                setLoading(true);
+            }
+            const res = await fetch(`/api/specials/${specialId}`);
+            if (res.ok) {
+                const data = await res.json();
+                setSpecial(data);
+            }
+        } catch (error) {
+            console.error('Error fetching special:', error);
+        } finally {
+            if (showLoading) {
                 setLoading(false);
             }
-        };
+        }
+    };
 
-        fetchSpecial();
+    useEffect(() => {
+        fetchSpecial(true);
     }, [specialId]);
 
     const handleSaveStartTime = async (songId: number, startTime: number) => {
@@ -46,6 +51,9 @@ export default function SpecialEditorPage() {
             const errorText = await res.text().catch(() => res.statusText || 'Unknown error');
             console.error('Error updating special song (admin):', res.status, errorText);
             throw new Error(`Failed to save start time: ${errorText}`);
+        } else {
+            // Reload special data to update the start time in the song list
+            await fetchSpecial(false);
         }
     };
 

app/api/rewrite-message/route.ts

@@ -65,18 +65,33 @@ Message: "${message}"`;
         // e.g., "(This message is a friendly, positive comment expressing appreciation. No rewriting is necessary.)"
         rewrittenMessage = rewrittenMessage.replace(/\s*\([^)]*\)\s*/g, '').trim();
 
-        // Compare with original message (case-insensitive and ignoring extra whitespace)
+        // Remove surrounding quotes if present (AI sometimes adds quotes)
+        // Handle both single and double quotes, and multiple layers of quotes
+        rewrittenMessage = rewrittenMessage.replace(/^["']+|["']+$/g, '').trim();
+
+        // Normalize both messages for comparison (remove extra whitespace, normalize quotes, case-insensitive)
+        const normalizeForComparison = (text: string): string => {
+            return text
+                .trim()
+                .replace(/["']/g, '') // Remove all quotes for comparison
+                .replace(/\s+/g, ' ') // Normalize whitespace
+                .toLowerCase()
+                .replace(/[.,!?;:]\s*$/, ''); // Remove trailing punctuation for comparison
+        };
+
         const originalTrimmed = message.trim();
         const rewrittenTrimmed = rewrittenMessage.trim();
+        const originalNormalized = normalizeForComparison(originalTrimmed);
+        const rewrittenNormalized = normalizeForComparison(rewrittenTrimmed);
         
-        // Check if message was actually changed (normalize for comparison)
-        const wasChanged = rewrittenTrimmed.toLowerCase() !== originalTrimmed.toLowerCase() && 
-                          rewrittenTrimmed !== originalTrimmed;
+        // Check if message was actually changed (content-wise, not just formatting)
+        // Only consider it changed if the normalized content is different
+        const wasChanged = originalNormalized !== rewrittenNormalized;
 
         if (wasChanged) {
             rewrittenMessage = rewrittenTrimmed + " (autocorrected by Polite-Bot)";
         } else {
-            // Return original message if not changed
+            // Return original message if not changed (without suffix)
             rewrittenMessage = originalTrimmed;
         }
 

app/api/specials/route.ts

@@ -40,6 +40,21 @@ export async function POST(request: Request) {
         return NextResponse.json({ error: 'Name is required' }, { status: 400 });
     }
 
+    // Validate unlockSteps JSON
+    if (unlockSteps) {
+        try {
+            const parsed = JSON.parse(unlockSteps);
+            if (!Array.isArray(parsed)) {
+                return NextResponse.json({ error: 'Unlock steps must be a JSON array' }, { status: 400 });
+            }
+            if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
+                return NextResponse.json({ error: 'All unlock step values must be positive numbers' }, { status: 400 });
+            }
+        } catch (e) {
+            return NextResponse.json({ error: 'Invalid JSON format for unlock steps. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]' }, { status: 400 });
+        }
+    }
+
     // Ensure name is stored as JSON
     const nameData = typeof name === 'string' ? { de: name, en: name } : name;
     const subtitleData = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;
@@ -81,6 +96,21 @@ export async function PUT(request: Request) {
         return NextResponse.json({ error: 'ID required' }, { status: 400 });
     }
 
+    // Validate unlockSteps JSON if provided
+    if (unlockSteps !== undefined) {
+        try {
+            const parsed = JSON.parse(unlockSteps);
+            if (!Array.isArray(parsed)) {
+                return NextResponse.json({ error: 'Unlock steps must be a JSON array' }, { status: 400 });
+            }
+            if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
+                return NextResponse.json({ error: 'All unlock step values must be positive numbers' }, { status: 400 });
+            }
+        } catch (e) {
+            return NextResponse.json({ error: 'Invalid JSON format for unlock steps. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]' }, { status: 400 });
+        }
+    }
+
     const updateData: any = {};
     if (name) updateData.name = typeof name === 'string' ? { de: name, en: name } : name;
     if (subtitle !== undefined) updateData.subtitle = subtitle ? (typeof subtitle === 'string' ? { de: subtitle, en: subtitle } : subtitle) : null;

app/curator/specials/CuratorSpecialsClient.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { useLocale, useTranslations } from 'next-intl';
+import { Link } from '@/lib/navigation';
+import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
+import { getLocalizedValue } from '@/lib/i18n';
+
+interface CuratorSpecial {
+    id: number;
+    name: string | { de?: string; en?: string };
+    songCount: number;
+}
+
+export default function CuratorSpecialsClient() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const urlLocale = pathname?.split('/')[1] as 'de' | 'en' | undefined;
+    const intlLocale = useLocale() as 'de' | 'en';
+    const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
+    const t = useTranslations('Curator');
+
+    const [specials, setSpecials] = useState<CuratorSpecial[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchSpecials = async () => {
+            try {
+                setLoading(true);
+                const res = await fetch('/api/curator/specials', {
+                    headers: getCuratorAuthHeaders(),
+                });
+                if (!res.ok) {
+                    if (res.status === 403) {
+                        setError(t('specialForbidden'));
+                    } else {
+                        setError('Failed to load specials');
+                    }
+                    return;
+                }
+                const data = await res.json();
+                setSpecials(data);
+            } catch (e) {
+                setError('Failed to load specials');
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchSpecials();
+    }, [t]);
+
+    if (loading) {
+        return (
+            <div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
+                <p>{t('loading')}</p>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
+                <p style={{ color: 'red' }}>{error}</p>
+                <Link
+                    href="/curator"
+                    style={{
+                        display: 'inline-block',
+                        marginTop: '1rem',
+                        padding: '0.5rem 1rem',
+                        background: '#6b7280',
+                        color: 'white',
+                        textDecoration: 'none',
+                        borderRadius: '0.375rem',
+                        fontSize: '0.9rem',
+                    }}
+                >
+                    {t('backToDashboard') || 'Back to Dashboard'}
+                </Link>
+            </div>
+        );
+    }
+
+    return (
+        <div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
+            <header style={{ marginBottom: '2rem' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>
+                        {t('curateSpecialsTitle') || 'Curate Specials'}
+                    </h1>
+                    <Link
+                        href="/curator"
+                        style={{
+                            padding: '0.5rem 1rem',
+                            background: '#6b7280',
+                            color: 'white',
+                            textDecoration: 'none',
+                            borderRadius: '0.375rem',
+                            fontSize: '0.9rem',
+                        }}
+                    >
+                        {t('backToDashboard') || 'Back to Dashboard'}
+                    </Link>
+                </div>
+            </header>
+
+            {specials.length === 0 ? (
+                <div style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
+                    <p>{t('noSpecialsAssigned') || 'No specials assigned to you.'}</p>
+                </div>
+            ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                    {specials.map((special) => (
+                        <Link
+                            key={special.id}
+                            href={`/curator/specials/${special.id}`}
+                            style={{
+                                display: 'block',
+                                padding: '1.5rem',
+                                background: '#f9fafb',
+                                border: '1px solid #e5e7eb',
+                                borderRadius: '0.5rem',
+                                textDecoration: 'none',
+                                color: 'inherit',
+                                transition: 'all 0.2s',
+                            }}
+                            onMouseEnter={(e) => {
+                                e.currentTarget.style.background = '#f3f4f6';
+                                e.currentTarget.style.borderColor = '#d1d5db';
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.background = '#f9fafb';
+                                e.currentTarget.style.borderColor = '#e5e7eb';
+                            }}
+                        >
+                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                <div>
+                                    <h2 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#111827' }}>
+                                        {getLocalizedValue(special.name, locale)}
+                                    </h2>
+                                    <p style={{ fontSize: '0.875rem', color: '#6b7280' }}>
+                                        {special.songCount} {special.songCount === 1 ? 'song' : 'songs'}
+                                    </p>
+                                </div>
+                                <div style={{ fontSize: '1.5rem', color: '#10b981' }}>→</div>
+                            </div>
+                        </Link>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+

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

@@ -25,32 +25,36 @@ export default function CuratorSpecialEditorPage() {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    useEffect(() => {
-        const fetchSpecial = async () => {
-            try {
+    const fetchSpecial = async (showLoading = true) => {
+        try {
+            if (showLoading) {
                 setLoading(true);
-                const res = await fetch(`/api/curator/specials/${specialId}`, {
-                    headers: getCuratorAuthHeaders(),
-                });
-                if (res.status === 403) {
-                    setError(t('specialForbidden'));
-                    return;
-                }
-                if (!res.ok) {
-                    setError('Failed to load special');
-                    return;
-                }
-                const data = await res.json();
-                setSpecial(data);
-            } catch (e) {
+            }
+            const res = await fetch(`/api/curator/specials/${specialId}`, {
+                headers: getCuratorAuthHeaders(),
+            });
+            if (res.status === 403) {
+                setError(t('specialForbidden'));
+                return;
+            }
+            if (!res.ok) {
                 setError('Failed to load special');
-            } finally {
+                return;
+            }
+            const data = await res.json();
+            setSpecial(data);
+        } catch (e) {
+            setError('Failed to load special');
+        } finally {
+            if (showLoading) {
                 setLoading(false);
             }
-        };
+        }
+    };
 
+    useEffect(() => {
         if (specialId) {
-            fetchSpecial();
+            fetchSpecial(true);
         }
     }, [specialId, t]);
 
@@ -67,6 +71,9 @@ export default function CuratorSpecialEditorPage() {
             setError(t('specialForbidden'));
         } else if (!res.ok) {
             setError('Failed to save changes');
+        } else {
+            // Reload special data to update the start time in the song list
+            await fetchSpecial(false);
         }
     };
 

components/Game.tsx

@@ -348,7 +348,12 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                     // The API adds "(autocorrected by Polite-Bot)" suffix only if message was changed
                     const wasChanged = finalMessage.includes('(autocorrected by Polite-Bot)');
                     if (wasChanged) {
-                        setRewrittenMessage(finalMessage);
+                        // Remove the suffix for display
+                        const displayMessage = finalMessage.replace(/\s*\(autocorrected by Polite-Bot\)\s*/g, '').trim();
+                        setRewrittenMessage(displayMessage);
+                    } else {
+                        // Ensure rewrittenMessage is not set if message wasn't changed
+                        setRewrittenMessage(null);
                     }
                 }
             }
@@ -676,7 +681,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                                                 fontFamily: 'inherit',
                                                 resize: 'vertical',
                                                 marginBottom: '0.5rem',
-                                                display: 'block' // Ensure block display for proper alignment
+                                                display: 'block',
+                                                boxSizing: 'border-box' // Ensure padding and border are included in width
                                             }}
                                             disabled={commentSending}
                                         />

components/WaveformEditor.tsx

@@ -133,6 +133,24 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
 
             cumulativeTime = step;
         });
+        
+        // Draw end marker for the last segment (at startTime + duration)
+        const endTime = startTime + duration;
+        const endPx = ((endTime - visibleStart) / visibleDuration) * width;
+        if (endPx >= 0 && endPx <= width) {
+            ctx.beginPath();
+            ctx.moveTo(endPx, 0);
+            ctx.lineTo(endPx, height);
+            ctx.stroke();
+            
+            // Draw "End" label
+            ctx.setLineDash([]);
+            ctx.fillStyle = '#ef4444';
+            ctx.font = 'bold 12px sans-serif';
+            ctx.fillText('End', endPx + 3, 15);
+            ctx.setLineDash([5, 5]);
+        }
+        
         ctx.setLineDash([]);
 
         // Draw hover preview (semi-transparent)
@@ -287,30 +305,38 @@ export default function WaveformEditor({ audioUrl, startTime, duration, unlockSt
     const handlePlayFull = () => {
         if (!audioBuffer || !audioContextRef.current) return;
 
-        if (isPlaying) {
+        // If full playback is already playing, stop it
+        if (isPlaying && playingSegment === null) {
             stopPlayback();
-        } else {
-            const source = audioContextRef.current.createBufferSource();
-            source.buffer = audioBuffer;
-            source.connect(audioContextRef.current.destination);
-
-            playbackStartTimeRef.current = audioContextRef.current.currentTime;
-            playbackOffsetRef.current = startTime;
-
-            source.start(0, startTime, duration);
-            sourceRef.current = source;
-            setIsPlaying(true);
-            setPlaybackPosition(startTime);
-
-            source.onended = () => {
-                setIsPlaying(false);
-                setPlaybackPosition(null);
-                if (animationFrameRef.current) {
-                    cancelAnimationFrame(animationFrameRef.current);
-                    animationFrameRef.current = null;
-                }
-            };
+            return;
         }
+
+        // Stop any current playback (segment or full)
+        stopPlayback();
+
+        // Start full playback
+        const source = audioContextRef.current.createBufferSource();
+        source.buffer = audioBuffer;
+        source.connect(audioContextRef.current.destination);
+
+        playbackStartTimeRef.current = audioContextRef.current.currentTime;
+        playbackOffsetRef.current = startTime;
+
+        source.start(0, startTime, duration);
+        sourceRef.current = source;
+        setIsPlaying(true);
+        setPlayingSegment(null); // Ensure playingSegment is null for full playback
+        setPlaybackPosition(startTime);
+
+        source.onended = () => {
+            setIsPlaying(false);
+            setPlayingSegment(null);
+            setPlaybackPosition(null);
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+        };
     };
 
     const handleZoomIn = () => setZoom(prev => Math.min(prev * 1.5, 10));

lib/dailyPuzzle.ts

@@ -29,9 +29,7 @@ export async function getOrCreateDailyPuzzle(genre: Genre | null = null) {
             const allSongs = await prisma.song.findMany({
                 where: whereClause,
                 include: {
-                    puzzles: {
-                        where: { genreId: genreId }
-                    },
+                    puzzles: true, // Load ALL puzzles, not just for this genre (to use total activations)
                 },
             });
 
@@ -40,28 +38,24 @@ export async function getOrCreateDailyPuzzle(genre: Genre | null = null) {
                 return null;
             }
 
-            // Calculate weights
-            const weightedSongs = allSongs.map(song => ({
+            // Find songs with the minimum number of activations (all puzzles, not just for this genre)
+            // Only select from songs with the fewest activations to ensure fair distribution
+            const songsWithActivations = allSongs.map(song => ({
                 song,
-                weight: 1.0 / (song.puzzles.length + 1),
+                activations: song.puzzles.length,
             }));
 
-            // Calculate total weight
-            const totalWeight = weightedSongs.reduce((sum, item) => sum + item.weight, 0);
+            // Find minimum activations
+            const minActivations = Math.min(...songsWithActivations.map(item => item.activations));
 
-            // Pick a random song based on weights using cumulative weights
-            // This ensures proper distribution and handles edge cases
-            let random = Math.random() * totalWeight;
-            let selectedSong = weightedSongs[weightedSongs.length - 1].song; // Fallback to last song
+            // Filter to only songs with minimum activations
+            const songsWithMinActivations = songsWithActivations
+                .filter(item => item.activations === minActivations)
+                .map(item => item.song);
 
-            let cumulativeWeight = 0;
-            for (const item of weightedSongs) {
-                cumulativeWeight += item.weight;
-                if (random <= cumulativeWeight) {
-                    selectedSong = item.song;
-                    break;
-                }
-            }
+            // Randomly select from songs with minimum activations
+            const randomIndex = Math.floor(Math.random() * songsWithMinActivations.length);
+            const selectedSong = songsWithMinActivations[randomIndex];
 
             // Create the daily puzzle
             try {
@@ -141,7 +135,7 @@ export async function getOrCreateSpecialPuzzle(special: Special) {
                     song: {
                         include: {
                             puzzles: {
-                                where: { specialId: special.id }
+                                where: { specialId: special.id } // For specials, only count puzzles within this special
                             }
                         }
                     }
@@ -150,25 +144,25 @@ export async function getOrCreateSpecialPuzzle(special: Special) {
 
             if (specialSongs.length === 0) return null;
 
-            // Calculate weights
-            const weightedSongs = specialSongs.map(specialSong => ({
+            // Find songs with the minimum number of activations within this special
+            // Note: For specials, we only count puzzles within the special (not all puzzles),
+            // since specials are curated, separate lists
+            const songsWithActivations = specialSongs.map(specialSong => ({
                 specialSong,
-                weight: 1.0 / (specialSong.song.puzzles.length + 1),
+                activations: specialSong.song.puzzles.length,
             }));
 
-            const totalWeight = weightedSongs.reduce((sum, item) => sum + item.weight, 0);
-            let random = Math.random() * totalWeight;
-            let selectedSpecialSong = weightedSongs[weightedSongs.length - 1].specialSong; // Fallback to last song
+            // Find minimum activations
+            const minActivations = Math.min(...songsWithActivations.map(item => item.activations));
 
-            // Pick a random song based on weights using cumulative weights
-            let cumulativeWeight = 0;
-            for (const item of weightedSongs) {
-                cumulativeWeight += item.weight;
-                if (random <= cumulativeWeight) {
-                    selectedSpecialSong = item.specialSong;
-                    break;
-                }
-            }
+            // Filter to only songs with minimum activations
+            const songsWithMinActivations = songsWithActivations
+                .filter(item => item.activations === minActivations)
+                .map(item => item.specialSong);
+
+            // Randomly select from songs with minimum activations
+            const randomIndex = Math.floor(Math.random() * songsWithMinActivations.length);
+            const selectedSpecialSong = songsWithMinActivations[randomIndex];
 
             try {
                 dailyPuzzle = await prisma.dailyPuzzle.create({

messages/de.json

@@ -149,6 +149,10 @@
     "subtitle": "Untertitel",
     "maxAttempts": "Max. Versuche",
     "unlockSteps": "Freischalt-Schritte",
+    "unlockStepsRequired": "Freischalt-Schritte sind erforderlich",
+    "unlockStepsInvalidJson": "Ungültiges JSON-Format. Bitte verwende ein Array von Zahlen, z.B. [2,4,7,11,16,30,60]",
+    "unlockStepsMustBeArray": "Freischalt-Schritte müssen ein Array sein",
+    "unlockStepsMustBePositiveNumbers": "Alle Werte müssen positive Zahlen sein",
     "launchDate": "Startdatum",
     "endDate": "Enddatum",
     "curator": "Kurator",
@@ -279,11 +283,13 @@
     "batchUpdateError": "Fehler: {error}",
     "batchUpdateNetworkError": "Netzwerkfehler bei der Batch-Aktualisierung",
     "backToDashboard": "Zurück zum Dashboard",
+    "loading": "Laden...",
     "curateSpecialsButton": "Specials kuratieren",
     "curateSpecialsTitle": "Deine Specials kuratieren",
     "curateSpecialsDescription": "Hier kannst du die Startzeiten der Songs in deinen zugewiesenen Specials für das Rätsel feinjustieren.",
     "noSpecialPermissions": "Dir sind keine Specials zugeordnet.",
     "noSpecialsInScope": "Keine Specials zum Kuratieren vorhanden.",
+    "noSpecialsAssigned": "Dir sind keine Specials zugeordnet.",
     "curateSpecialSongCount": "{count, plural, one {# Song} other {# Songs}} in diesem Special",
     "curateSpecialOpen": "Öffnen",
     "specialForbidden": "Du darfst dieses Special nicht bearbeiten.",

messages/en.json

@@ -149,6 +149,10 @@
     "subtitle": "Subtitle",
     "maxAttempts": "Max Attempts",
     "unlockSteps": "Unlock Steps",
+    "unlockStepsRequired": "Unlock steps are required",
+    "unlockStepsInvalidJson": "Invalid JSON format. Please use an array of numbers, e.g. [2,4,7,11,16,30,60]",
+    "unlockStepsMustBeArray": "Unlock steps must be an array",
+    "unlockStepsMustBePositiveNumbers": "All values must be positive numbers",
     "launchDate": "Launch Date",
     "endDate": "End Date",
     "curator": "Curator",
@@ -279,11 +283,13 @@
     "batchUpdateError": "Error: {error}",
     "batchUpdateNetworkError": "Network error during batch update",
     "backToDashboard": "Back to dashboard",
+    "loading": "Loading...",
     "curateSpecialsButton": "Curate Specials",
     "curateSpecialsTitle": "Curate your Specials",
     "curateSpecialsDescription": "Here you can fine-tune the start times of the songs in your assigned specials for the puzzle.",
     "noSpecialPermissions": "You do not have any specials assigned to you.",
     "noSpecialsInScope": "No specials available for you to curate.",
+    "noSpecialsAssigned": "No specials assigned to you.",
     "curateSpecialSongCount": "{count, plural, one {# song} other {# songs}} in this special",
     "curateSpecialOpen": "Open",
     "specialForbidden": "You are not allowed to edit this special.",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoerdle",
-  "version": "0.1.6.12",
+  "version": "0.1.6.19",
   "private": true,
   "scripts": {
     "dev": "next dev",

scripts/convert-logos-to-png.js

@@ -0,0 +1,47 @@
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+
+async function convertSvgToPng(svgPath, pngPath, size) {
+    try {
+        const svgBuffer = fs.readFileSync(svgPath);
+        
+        await sharp(svgBuffer, {
+            density: 300 // High DPI for better quality
+        })
+        .resize(size, size, {
+            fit: 'contain',
+            background: { r: 255, g: 255, b: 255, alpha: 0 } // Transparent background
+        })
+        .png()
+        .toFile(pngPath);
+        
+        console.log(`✅ Created ${pngPath} (${size}x${size})`);
+    } catch (error) {
+        console.error(`❌ Error converting ${svgPath}:`, error.message);
+    }
+}
+
+async function main() {
+    const publicDir = path.join(__dirname, '..', 'public');
+    
+    // Convert logo.svg to various PNG sizes
+    const logoPath = path.join(publicDir, 'logo.svg');
+    if (fs.existsSync(logoPath)) {
+        await convertSvgToPng(logoPath, path.join(publicDir, 'logo-512.png'), 512);
+        await convertSvgToPng(logoPath, path.join(publicDir, 'logo-256.png'), 256);
+        await convertSvgToPng(logoPath, path.join(publicDir, 'logo-128.png'), 128);
+    }
+    
+    // Convert logo-large.svg to larger PNG sizes
+    const logoLargePath = path.join(publicDir, 'logo-large.svg');
+    if (fs.existsSync(logoLargePath)) {
+        await convertSvgToPng(logoLargePath, path.join(publicDir, 'logo-1024.png'), 1024);
+        await convertSvgToPng(logoLargePath, path.join(publicDir, 'logo-512.png'), 512);
+    }
+    
+    console.log('\n✨ Logo conversion complete!');
+}
+
+main();
+

scripts/create-logo-from-favicon-v2.js

@@ -0,0 +1,138 @@
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+
+async function createLogoWithText(faviconPath, outputPath, size) {
+    try {
+        // Load and resize favicon - smaller to leave room for text
+        const faviconSize = Math.floor(size * 0.65);
+        const faviconBuffer = await sharp(faviconPath)
+            .resize(faviconSize, faviconSize, {
+                fit: 'contain',
+                background: { r: 255, g: 255, b: 255, alpha: 0 }
+            })
+            .toBuffer();
+        
+        // Create SVG with favicon and text
+        const textSize = Math.floor(size * 0.12);
+        const iconY = Math.floor(size * 0.10); // Logo higher up
+        const textY = Math.floor(size * 0.92); // Text further down
+        const iconX = Math.floor((size - faviconSize) / 2);
+        
+        const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- White background -->
+  <rect width="${size}" height="${size}" fill="#ffffff"/>
+  <image href="data:image/png;base64,${faviconBuffer.toString('base64')}" 
+         x="${iconX}" 
+         y="${iconY}" 
+         width="${faviconSize}" 
+         height="${faviconSize}"/>
+  <text x="${size / 2}" y="${textY}" 
+        font-family="system-ui, -apple-system, sans-serif" 
+        font-size="${textSize}" 
+        font-weight="bold" 
+        fill="#000000" 
+        text-anchor="middle" 
+        letter-spacing="-0.5">
+    hördle.de
+  </text>
+</svg>`;
+        
+        // Convert SVG to PNG with white background
+        await sharp(Buffer.from(svg))
+            .resize(size, size)
+            .png()
+            .toFile(outputPath);
+        
+        console.log(`✅ Created ${path.basename(outputPath)} (${size}x${size})`);
+    } catch (error) {
+        console.error(`❌ Error creating ${outputPath}:`, error.message);
+    }
+}
+
+async function createSVGLogo(faviconPath, outputPath, size) {
+    try {
+        // Load and resize favicon - smaller to leave room for text
+        const faviconSize = Math.floor(size * 0.65);
+        const faviconBuffer = await sharp(faviconPath)
+            .resize(faviconSize, faviconSize, {
+                fit: 'contain',
+                background: { r: 255, g: 255, b: 255, alpha: 0 }
+            })
+            .toBuffer();
+        
+        // Create SVG with favicon and text
+        const textSize = Math.floor(size * 0.12);
+        const iconY = Math.floor(size * 0.10); // Logo higher up
+        const textY = Math.floor(size * 0.92); // Text further down
+        const iconX = Math.floor((size - faviconSize) / 2);
+        
+        const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- White background covering entire image -->
+  <rect width="${size}" height="${size}" fill="#ffffff"/>
+  <image href="data:image/png;base64,${faviconBuffer.toString('base64')}" 
+         x="${iconX}" 
+         y="${iconY}" 
+         width="${faviconSize}" 
+         height="${faviconSize}"/>
+  <text x="${size / 2}" y="${textY}" 
+        font-family="system-ui, -apple-system, sans-serif" 
+        font-size="${textSize}" 
+        font-weight="bold" 
+        fill="#000000" 
+        text-anchor="middle" 
+        letter-spacing="-0.5">
+    hördle.de
+  </text>
+</svg>`;
+        
+        fs.writeFileSync(outputPath, svg);
+        console.log(`✅ Created ${path.basename(outputPath)} (${size}x${size} SVG)`);
+    } catch (error) {
+        console.error(`❌ Error creating ${outputPath}:`, error.message);
+    }
+}
+
+async function main() {
+    const faviconPath = path.join(__dirname, '..', 'app', 'favicon.ico');
+    const publicDir = path.join(__dirname, '..', 'public');
+    
+    if (!fs.existsSync(faviconPath)) {
+        console.error('❌ Favicon not found at', faviconPath);
+        return;
+    }
+    
+    // Extract favicon to PNG first for processing
+    const tempFavicon = path.join(publicDir, 'favicon-temp.png');
+    const faviconBuffer = fs.readFileSync(faviconPath);
+    
+    // Convert ICO to PNG
+    await sharp(faviconBuffer)
+        .resize(1024, 1024, { fit: 'contain' })
+        .png()
+        .toFile(tempFavicon);
+    
+    console.log('✅ Extracted favicon to PNG\n');
+    
+    // Create SVG logo
+    await createSVGLogo(tempFavicon, path.join(publicDir, 'logo.svg'), 512);
+    await createSVGLogo(tempFavicon, path.join(publicDir, 'logo-large.svg'), 1024);
+    
+    // Create PNG logos with text in various sizes
+    await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-128.png'), 128);
+    await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-256.png'), 256);
+    await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-512.png'), 512);
+    await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-1024.png'), 1024);
+    
+    // Clean up temp file
+    if (fs.existsSync(tempFavicon)) {
+        fs.unlinkSync(tempFavicon);
+    }
+    
+    console.log('\n✨ Logo creation complete!');
+}
+
+main();
+

scripts/create-logo-from-favicon.js

@@ -0,0 +1,120 @@
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+
+async function createLogoWithText(faviconPath, outputPath, size, includeText = true) {
+    try {
+        const favicon = await sharp(faviconPath)
+            .resize(size * 0.7, size * 0.7, {
+                fit: 'contain',
+                background: { r: 255, g: 255, b: 255, alpha: 0 }
+            })
+            .toBuffer();
+        
+        // Create SVG with favicon and text
+        const textSize = Math.floor(size * 0.15);
+        const spacing = Math.floor(size * 0.05);
+        const iconSize = Math.floor(size * 0.7);
+        const iconY = Math.floor(includeText ? size * 0.25 : size * 0.5);
+        const textY = Math.floor(size * 0.85);
+        
+        // For now, we'll create a composite image
+        // First, create the favicon part
+        const svg = includeText ? `
+<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="faviconPattern" x="0" y="0" width="1" height="1">
+      <image href="data:image/png;base64,${favicon.toString('base64')}" 
+             x="${(size - iconSize) / 2}" 
+             y="${iconY - iconSize / 2}" 
+             width="${iconSize}" 
+             height="${iconSize}"/>
+    </pattern>
+  </defs>
+  <rect width="${size}" height="${size}" fill="url(#faviconPattern)"/>
+  <text x="${size / 2}" y="${textY}" 
+        font-family="system-ui, -apple-system, sans-serif" 
+        font-size="${textSize}" 
+        font-weight="bold" 
+        fill="#000000" 
+        text-anchor="middle" 
+        letter-spacing="-0.5">
+    Hördle
+  </text>
+</svg>
+        ` : `
+<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
+  <image href="data:image/png;base64,${favicon.toString('base64')}" 
+         x="${(size - iconSize) / 2}" 
+         y="${(size - iconSize) / 2}" 
+         width="${iconSize}" 
+         height="${iconSize}"/>
+</svg>
+        `;
+        
+        // Convert SVG to PNG
+        await sharp(Buffer.from(svg))
+            .png()
+            .toFile(outputPath);
+        
+        console.log(`✅ Created ${outputPath} (${size}x${size})`);
+    } catch (error) {
+        console.error(`❌ Error creating ${outputPath}:`, error.message);
+    }
+}
+
+async function main() {
+    const faviconPath = path.join(__dirname, '..', 'app', 'favicon.ico');
+    const publicDir = path.join(__dirname, '..', 'public');
+    
+    if (!fs.existsSync(faviconPath)) {
+        console.error('❌ Favicon not found at', faviconPath);
+        return;
+    }
+    
+    // Extract favicon to PNG first
+    const tempFavicon = path.join(publicDir, 'favicon-temp.png');
+    const faviconBuffer = fs.readFileSync(faviconPath);
+    
+    // Convert ICO to PNG
+    await sharp(faviconBuffer)
+        .resize(1024, 1024, { fit: 'contain' })
+        .png()
+        .toFile(tempFavicon);
+    
+    console.log('✅ Extracted favicon to PNG');
+    
+    // Create logos with text in various sizes
+    await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-128.png'), 128);
+    await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-256.png'), 256);
+    await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-512.png'), 512);
+    await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-1024.png'), 1024);
+    
+    // Create SVG version
+    const faviconPng = await sharp(faviconBuffer)
+        .resize(512, 512, { fit: 'contain' })
+        .png()
+        .toBuffer();
+    
+    const svgContent = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <image id="faviconImg" href="data:image/png;base64,${faviconPng.toString('base64')}" width="358" height="358" x="77" y="77"/>
+  </defs>
+  <use href="#faviconImg"/>
+  <text x="256" y="430" font-family="system-ui, -apple-system, sans-serif" font-size="48" font-weight="bold" fill="#000000" text-anchor="middle" letter-spacing="-0.5">
+    Hördle
+  </text>
+</svg>`;
+    
+    fs.writeFileSync(path.join(publicDir, 'logo.svg'), svgContent);
+    console.log('✅ Created logo.svg');
+    
+    // Clean up temp file
+    fs.unlinkSync(tempFavicon);
+    
+    console.log('\n✨ Logo creation complete!');
+}
+
+main();
+