chore: bump version to 0.1.6.27

.gitignore

@@ -55,8 +55,3 @@ docker-compose.yml
 scripts/scrape-bahn-expert-statements.js
 docs/bahn-expert-statements.txt
 /public/logos.zip
-
-# Playwright
-/test-results/
-/playwright-report/
-/blob-report/

app/[locale]/admin/page.tsx

@@ -1238,7 +1238,6 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
         return (
             <div className="container" style={{ justifyContent: 'center' }}>
                 <h1 className="title" style={{ marginBottom: '1rem', fontSize: '1.5rem' }}>{t('login')}</h1>
-                <form onSubmit={(e) => { e.preventDefault(); handleLogin(); }} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
                 <input
                     type="password"
                     value={password}
@@ -1247,8 +1246,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                     style={{ marginBottom: '1rem', maxWidth: '300px' }}
                     placeholder={t('password')}
                 />
-                    <button type="submit" className="btn-primary">{t('loginButton')}</button>
-                </form>
+                <button onClick={handleLogin} className="btn-primary">{t('loginButton')}</button>
             </div>
         );
     }

app/[locale]/curator/page.tsx

@@ -1,68 +1,11 @@
 'use client';
 
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-
-import { useRouter } from 'next/navigation';
+import CuratorPageInner from '../../curator/page';
 
 export default function CuratorPage() {
-    const t = useTranslations('Curator');
-    const router = useRouter();
-    const [username, setUsername] = useState('');
-    const [password, setPassword] = useState('');
-    const [error, setError] = useState('');
-
-    const handleLogin = (e: React.FormEvent) => {
-        e.preventDefault();
-        // Mock validation matching provided credentials for testing
-        if (username === 'elpatron' && password === 'surf&4033') {
-            router.push('/en/curator/specials');
-        } else {
-            setError('Login failed');
-        }
-    };
-
-    return (
-        <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}>
-            <h1 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>{t('loginTitle')}</h1>
-            {error && <div style={{ color: 'red', marginBottom: '1rem' }}>{error}</div>}
-            <form onSubmit={handleLogin}>
-                <div style={{ marginBottom: '1rem' }}>
-                    <label style={{ display: 'block', marginBottom: '0.5rem' }}>{t('loginUsername')}</label>
-                    <input
-                        type="text"
-                        value={username}
-                        onChange={(e) => setUsername(e.target.value)}
-                        placeholder={t('loginUsername')}
-                        style={{ width: '100%', padding: '0.5rem', border: '1px solid #ccc', borderRadius: '4px' }}
-                    />
-                </div>
-                <div style={{ marginBottom: '1rem' }}>
-                    <label style={{ display: 'block', marginBottom: '0.5rem' }}>{t('loginPassword')}</label>
-                    <input
-                        type="password"
-                        value={password}
-                        onChange={(e) => setPassword(e.target.value)}
-                        placeholder={t('loginPassword')}
-                        style={{ width: '100%', padding: '0.5rem', border: '1px solid #ccc', borderRadius: '4px' }}
-                    />
-                </div>
-                <button
-                    type="submit"
-                    style={{
-                        background: 'var(--primary, #0070f3)',
-                        color: 'white',
-                        padding: '0.5rem 1rem',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: 'pointer'
-                    }}
-                >
-                    {t('loginButton')}
-                </button>
-            </form>
-        </div>
-    );
+    // Wrapper für die lokalisierte Route /[locale]/curator
+    // Hinweis: Pfad '../../curator/page' zeigt von 'app/[locale]/curator' korrekt auf 'app/curator/page'.
+    return <CuratorPageInner />;
 }
 
 

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

@@ -1,10 +1,9 @@
+'use client';
+
+import CuratorSpecialsClient from '@/app/curator/specials/CuratorSpecialsClient';
+
 export default function CuratorSpecialsPage() {
-    return (
-        <div style={{ padding: '2rem' }}>
-            <h1>Curator Specials</h1>
-            <p>Component implementation missing</p>
-        </div>
-    );
+    return <CuratorSpecialsClient />;
 }
 
 

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

@@ -0,0 +1,89 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter, usePathname } from 'next/navigation';
+import CurateSpecialEditor, { CurateSpecial } from '@/components/CurateSpecialEditor';
+
+export default function SpecialEditorPage() {
+    const params = useParams();
+    const router = useRouter();
+    const pathname = usePathname();
+    const specialId = params.id as string;
+
+    // Locale aus dem Pfad ableiten (/en/..., /de/...)
+    const localeFromPath = pathname?.split('/')[1] as 'de' | 'en' | undefined;
+    const locale: 'de' | 'en' = localeFromPath === 'de' || localeFromPath === 'en' ? localeFromPath : 'en';
+
+    const [special, setSpecial] = useState<CurateSpecial | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    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);
+            }
+        }
+    };
+
+    useEffect(() => {
+        fetchSpecial(true);
+    }, [specialId]);
+
+    const handleSaveStartTime = async (songId: number, startTime: number) => {
+        const res = await fetch(`/api/specials/${specialId}/songs`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ songId, startTime }),
+        });
+
+        if (!res.ok) {
+            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);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div style={{ padding: '2rem', textAlign: 'center' }}>
+                <p>Loading...</p>
+            </div>
+        );
+    }
+
+    if (!special) {
+        return (
+            <div style={{ padding: '2rem', textAlign: 'center' }}>
+                <p>Special not found</p>
+                <button onClick={() => router.push('/admin')}>Back to Admin</button>
+            </div>
+        );
+    }
+
+    return (
+        <CurateSpecialEditor
+            special={special}
+            locale={locale}
+            onBack={() => router.push('/admin')}
+            onSaveStartTime={handleSaveStartTime}
+            backLabel="← Back to Admin"
+            headerPrefix="Edit Special:"
+            noSongsSubHint="Go back to the admin dashboard to add songs to this special."
+        />
+    );
+}
+

app/api/admin/login/route.ts

@@ -12,13 +12,7 @@ export async function POST(request: NextRequest) {
         // Default is hash for 'admin123'
         const adminPasswordHash = process.env.ADMIN_PASSWORD || '$2b$10$SHOt9G1qUNIvHoWre7499.eEtp5PtOII0daOQGNV.dhDEuPmOUdsq';
 
-        let isValid = false;
-        if (!adminPasswordHash.startsWith('$2b$')) {
-            // If the env var is not a bcrypt hash (e.g. plain text "admin123"), compare directly
-            isValid = password === adminPasswordHash;
-        } else {
-            isValid = await bcrypt.compare(password, adminPasswordHash);
-        }
+        const isValid = await bcrypt.compare(password, adminPasswordHash);
 
         if (isValid) {
             return NextResponse.json({ success: true });

app/curator/help/CuratorHelpClient.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { useTranslations, useLocale } from 'next-intl';
+import { Link } from '@/lib/navigation';
+
+export default function CuratorHelpClient() {
+    const t = useTranslations('CuratorHelp');
+    const locale = useLocale();
+
+    return (
+        <main 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('title')}</h1>
+                    <Link
+                        href="/curator"
+                        style={{
+                            padding: '0.5rem 1rem',
+                            background: '#6b7280',
+                            color: 'white',
+                            textDecoration: 'none',
+                            borderRadius: '0.375rem',
+                            fontSize: '0.9rem',
+                        }}
+                    >
+                        {t('backToDashboard')}
+                    </Link>
+                </div>
+            </header>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+                {/* Einführung */}
+                <section>
+                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
+                        {t('introductionTitle')}
+                    </h2>
+                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
+                        <p style={{ marginBottom: '1rem' }}>{t('introductionText')}</p>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('permissionsTitle')}</h3>
+                        <ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('permission1')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('permission2')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('permission3')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('permission4')}</li>
+                        </ul>
+                        <p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
+                            <strong>{t('note')}:</strong> {t('permissionNote')}
+                        </p>
+                    </div>
+                </section>
+
+                {/* Song-Upload */}
+                <section>
+                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
+                        {t('uploadTitle')}
+                    </h2>
+                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('uploadStepsTitle')}</h3>
+                        <ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadStep1')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadStep2')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadStep3')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadStep4')}</li>
+                        </ol>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('uploadBestPracticesTitle')}</h3>
+                        <ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice1')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice2')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('uploadBestPractice3')}</li>
+                        </ul>
+                        <p style={{ marginTop: '1rem', padding: '0.75rem', background: '#dbeafe', borderRadius: '0.375rem', border: '1px solid #3b82f6' }}>
+                            <strong>{t('tip')}:</strong> {t('uploadTip')}
+                        </p>
+                    </div>
+                </section>
+
+                {/* Song-Bearbeitung */}
+                <section>
+                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
+                        {t('editingTitle')}
+                    </h2>
+                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('singleEditTitle')}</h3>
+                        <p style={{ marginBottom: '1rem' }}>{t('singleEditText')}</p>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('batchEditTitle')}</h3>
+                        <p style={{ marginBottom: '1rem' }}>{t('batchEditText')}</p>
+                        <ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature1')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature2')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature3')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('batchEditFeature4')}</li>
+                        </ul>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1.5rem', marginBottom: '0.75rem' }}>{t('genreSpecialAssignmentTitle')}</h3>
+                        <p style={{ marginBottom: '1rem' }}>{t('genreSpecialAssignmentText')}</p>
+                    </div>
+                </section>
+
+                {/* Specials kuratieren */}
+                <section>
+                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
+                        {t('curateSpecialsHelpTitle')}
+                    </h2>
+                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
+                        <p style={{ marginBottom: '1rem' }}>{t('curateSpecialsHelpIntro')}</p>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>
+                            {t('curateSpecialsHelpStepsTitle')}
+                        </h3>
+                        <ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep1')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep2')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep3')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep4')}</li>
+                        </ol>
+                        <p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
+                            <strong>{t('note')}:</strong> {t('curateSpecialsPermissionsNote')}
+                        </p>
+                    </div>
+                </section>
+
+                {/* Kommentar-Verwaltung */}
+                <section>
+                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
+                        {t('commentsTitle')}
+                    </h2>
+                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
+                        <p style={{ marginBottom: '1rem' }}>{t('commentsText')}</p>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('commentsActionsTitle')}</h3>
+                        <ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
+                            <li style={{ marginBottom: '0.5rem' }}><strong>{t('markAsRead')}:</strong> {t('markAsReadText')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}><strong>{t('archive')}:</strong> {t('archiveText')}</li>
+                        </ul>
+                    </div>
+                </section>
+
+                {/* Best Practices */}
+                <section>
+                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
+                        {t('bestPracticesTitle')}
+                    </h2>
+                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
+                        <ul style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
+                            <li style={{ marginBottom: '0.75rem' }}>{t('bestPractice1')}</li>
+                            <li style={{ marginBottom: '0.75rem' }}>{t('bestPractice2')}</li>
+                            <li style={{ marginBottom: '0.75rem' }}>{t('bestPractice3')}</li>
+                            <li style={{ marginBottom: '0.75rem' }}>{t('bestPractice4')}</li>
+                            <li style={{ marginBottom: '0.75rem' }}>{t('bestPractice5')}</li>
+                        </ul>
+                    </div>
+                </section>
+
+                {/* Troubleshooting */}
+                <section>
+                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
+                        {t('troubleshootingTitle')}
+                    </h2>
+                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ1')}</h3>
+                        <p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA1')}</p>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ2')}</h3>
+                        <p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA2')}</p>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ3')}</h3>
+                        <p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA3')}</p>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>{t('troubleshootingQ4')}</h3>
+                        <p style={{ marginBottom: '1rem', marginLeft: '1rem' }}>{t('troubleshootingA4')}</p>
+                    </div>
+                </section>
+            </div>
+        </main>
+    );
+}
+

app/curator/help/page.tsx

@@ -0,0 +1,8 @@
+export const dynamic = 'force-dynamic';
+
+import CuratorHelpClient from './CuratorHelpClient';
+
+export default function CuratorHelpPage() {
+    return <CuratorHelpClient />;
+}
+

app/curator/page.tsx

@@ -0,0 +1,11 @@
+// Server-Wrapper für die Kuratoren-Seite.
+// Markiert die Route als dynamisch und rendert die eigentliche Client-Komponente.
+export const dynamic = 'force-dynamic';
+
+import CuratorPageClient from './CuratorPageClient';
+
+export default function CuratorPage() {
+    return <CuratorPageClient />;
+}
+
+

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

@@ -0,0 +1,177 @@
+'use client';
+
+export const dynamic = 'force-dynamic';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter, usePathname } from 'next/navigation';
+import { useLocale, useTranslations } from 'next-intl';
+import CurateSpecialEditor, { CurateSpecial } from '@/components/CurateSpecialEditor';
+import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
+import HelpTooltip from '@/components/HelpTooltip';
+
+export default function CuratorSpecialEditorPage() {
+    const params = useParams();
+    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 tHelp = useTranslations('CuratorHelp');
+
+    const specialId = params?.id as string;
+
+    const [special, setSpecial] = useState<CurateSpecial | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    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) {
+            setError('Failed to load special');
+        } finally {
+            if (showLoading) {
+                setLoading(false);
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (specialId) {
+            fetchSpecial(true);
+        }
+    }, [specialId, t]);
+
+    const handleSaveStartTime = async (songId: number, startTime: number) => {
+        const res = await fetch(`/api/curator/specials/${specialId}/songs`, {
+            method: 'PUT',
+            headers: {
+                ...getCuratorAuthHeaders(),
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ songId, startTime }),
+        });
+        if (res.status === 403) {
+            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);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div style={{ padding: '2rem', textAlign: 'center' }}>
+                <p>{t('loadingData')}</p>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div style={{ padding: '2rem', textAlign: 'center' }}>
+                <p>{error}</p>
+                <button
+                    onClick={() => router.push(`/${locale}/curator`)}
+                    style={{
+                        marginTop: '1rem',
+                        padding: '0.5rem 1rem',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        background: '#e5e7eb',
+                        cursor: 'pointer',
+                    }}
+                >
+                    {t('backToDashboard')}
+                </button>
+            </div>
+        );
+    }
+
+    if (!special) {
+        return (
+            <div style={{ padding: '2rem', textAlign: 'center' }}>
+                <p>{t('specialNotFound')}</p>
+                <button
+                    onClick={() => router.push(`/${locale}/curator`)}
+                    style={{
+                        marginTop: '1rem',
+                        padding: '0.5rem 1rem',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        background: '#e5e7eb',
+                        cursor: 'pointer',
+                    }}
+                >
+                    {t('backToDashboard')}
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <h1 style={{ fontSize: '1.75rem', fontWeight: 'bold' }}>
+                        {t('curateSpecialHeaderPrefix')}
+                    </h1>
+                    <HelpTooltip
+                        shortText={tHelp('tooltipCurateSpecialEditorShort')}
+                        longText={tHelp('tooltipCurateSpecialEditorLong')}
+                        position="bottom"
+                    />
+                </div>
+                <button
+                    type="button"
+                    onClick={() => router.push(`/${locale}/curator/specials`)}
+                    style={{
+                        padding: '0.5rem 1rem',
+                        background: '#e5e7eb',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        cursor: 'pointer',
+                        fontSize: '0.9rem',
+                    }}
+                >
+                    {t('backToCuratorSpecials')}
+                </button>
+            </div>
+
+            <CurateSpecialEditor
+                special={special}
+                locale={locale}
+                onBack={() => router.push(`/${locale}/curator/specials`)}
+                onSaveStartTime={handleSaveStartTime}
+                backLabel={t('backToCuratorSpecials')}
+                headerPrefix={t('curateSpecialHeaderPrefix')}
+                noSongsHint={t('curateSpecialNoSongs')}
+                noSongsSubHint={t('curateSpecialNoSongsSub')}
+                instructionsText={t('curateSpecialInstructions')}
+                savingLabel={t('saving')}
+                saveChangesLabel={t('saveChanges')}
+                savedLabel={t('saved')}
+            />
+        </div>
+    );
+}
+
+

app/curator/specials/page.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+// Root /curator/specials route without locale:
+// redirect users to the default English locale version.
+
+import { redirect } from 'next/navigation';
+
+export default function CuratorSpecialsPage() {
+    redirect('/en/curator/specials');
+}
+
+
+

docs/TESTING.md

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hoerdle",
-  "version": "0.1.6.26",
+  "version": "0.1.6.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hoerdle",
-      "version": "0.1.6.26",
+      "version": "0.1.6.11",
       "dependencies": {
         "@prisma/client": "^6.19.0",
         "bcryptjs": "^3.0.3",
@@ -21,7 +21,6 @@
         "unist-util-visit-parents": "^6.0.2"
       },
       "devDependencies": {
-        "@playwright/test": "^1.57.0",
         "@types/bcryptjs": "^2.4.6",
         "@types/node": "^20",
         "@types/react": "^19",
@@ -1293,22 +1292,6 @@
         "node": ">=12.4.0"
       }
     },
-    "node_modules/@playwright/test": {
-      "version": "1.57.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
-      "integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
-      "devOptional": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright": "1.57.0"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@prisma/client": {
       "version": "6.19.0",
       "resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.19.0.tgz",
@@ -4057,21 +4040,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -6449,38 +6417,6 @@
         "pathe": "^2.0.3"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.57.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
-      "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
-      "devOptional": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright-core": "1.57.0"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.57.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
-      "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
-      "devOptional": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/po-parser": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/po-parser/-/po-parser-1.0.2.tgz",

package.json

@@ -1,14 +1,12 @@
 {
   "name": "hoerdle",
-  "version": "0.1.6.26",
+  "version": "0.1.6.27",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "prisma migrate deploy && next start",
-    "lint": "eslint",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui"
+    "lint": "eslint"
   },
   "dependencies": {
     "@prisma/client": "^6.19.0",
@@ -24,7 +22,6 @@
     "unist-util-visit-parents": "^6.0.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
     "@types/bcryptjs": "^2.4.6",
     "@types/node": "^20",
     "@types/react": "^19",

playwright.config.ts

@@ -1,42 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-import path from 'path';
-
-const PORT = 3000;
-const baseURL = `http://localhost:${PORT}`;
-
-export default defineConfig({
-    testDir: './tests',
-    fullyParallel: true,
-    forbidOnly: !!process.env.CI,
-    /* Maximum time one test can run for. */
-    timeout: 60 * 1000,
-    expect: {
-        timeout: 20000
-    },
-    retries: process.env.CI ? 2 : 0,
-    workers: process.env.CI ? 1 : undefined,
-    reporter: 'html',
-    use: {
-        baseURL,
-        trace: 'on-first-retry',
-    },
-    projects: [
-        {
-            name: 'chromium',
-            use: { ...devices['Desktop Chrome'] },
-        },
-        {
-            name: 'firefox',
-            use: { ...devices['Desktop Firefox'] },
-        },
-        {
-            name: 'webkit',
-            use: { ...devices['Desktop Safari'] },
-        },
-    ],
-    webServer: {
-        command: 'npm run dev',
-        url: baseURL,
-        reuseExistingServer: !process.env.CI,
-    },
-});

tests/admin.spec.ts

@@ -1,29 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Admin Dashboard', () => {
-    // Use a beforeEach hook to log in before each test
-    test.beforeEach(async ({ page }) => {
-        await page.goto('/en/admin');
-        await page.addStyleTag({ content: 'nextjs-portal, #nextjs-dev-overlay, [data-nextjs-dev-overlay] { display: none !important; }' });
-
-        // Check if login is needed
-        const passwordInput = page.getByPlaceholder('Password');
-        if (await passwordInput.isVisible()) {
-            await passwordInput.fill('admin123'); // Default dev password
-            await page.getByRole('button', { name: 'Login' }).dispatchEvent('click');
-            await page.waitForTimeout(500); // Wait for transition
-            await expect(page).toHaveURL(/\/(admin|en\/admin)/);
-        }
-    });
-
-    test('Can access Admin Dashboard', async ({ page }) => {
-        // Song Library was moved, check for Dashboard title and other sections
-        await expect(page.getByRole('heading', { name: 'Hördle Admin Dashboard' })).toBeVisible();
-        await expect(page.getByText('Manage Specials')).toBeVisible();
-    });
-
-    test('Shows Daily Puzzles section', async ({ page }) => {
-        // "Today's Daily Puzzles" is the text in en.json
-        await expect(page.getByText("Today's Daily Puzzles")).toBeVisible();
-    });
-});

tests/auth.spec.ts

@@ -1,38 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Authentication', () => {
-    test('Public pages should be accessible without login', async ({ page }) => {
-        await page.goto('/');
-        await expect(page).toHaveTitle(/Hördle/);
-        await expect(page.getByRole('button', { name: 'Start' })).toBeVisible();
-    });
-
-    test('Admin page should be protected', async ({ page }) => {
-        await page.goto('/en/admin');
-        // We expect to see the Login form, NOT the dashboard content
-        await expect(page.getByPlaceholder('Password')).toBeVisible();
-        await expect(page.getByText('Manage Specials')).not.toBeVisible();
-    });
-
-    test('Admin login flow', async ({ page }) => {
-        // Navigate to admin login
-        await page.goto('/en/admin');
-        await page.addStyleTag({ content: 'nextjs-portal, #nextjs-dev-overlay, [data-nextjs-dev-overlay] { display: none !important; }' });
-
-        const passwordInput = page.getByPlaceholder('Password');
-        const usernameInput = page.getByPlaceholder('Username');
-
-        // Admin page should have password input (and maybe username if curator logic is shared, but usually just password)
-        // Adjust based on actual UI. admin/page.tsx has only password.
-
-        page.on('dialog', dialog => console.log(`Dialog message: ${dialog.message()}`));
-
-        await expect(passwordInput).toBeVisible();
-        await passwordInput.fill('admin123');
-        await page.getByRole('button', { name: 'Login' }).dispatchEvent('click');
-        await expect(page).toHaveURL(/\/(admin|en\/admin)/);
-
-        // Should now be on admin page
-        await expect(page.getByRole('heading', { name: 'Hördle Admin Dashboard' })).toBeVisible();
-    });
-});

tests/curator.spec.ts

@@ -1,36 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Curator Dashboard', () => {
-    test('Curator login form should be displayed', async ({ page }) => {
-        await page.goto('/en/curator');
-        // Check for login form elements
-        await expect(page.getByPlaceholder('Username')).toBeVisible();
-        await expect(page.getByPlaceholder('Password')).toBeVisible();
-        await expect(page.getByRole('button', { name: 'Log in' })).toBeVisible();
-    });
-
-    test('Curator login attempt (valid credentials)', async ({ page }) => {
-        await page.goto('/en/curator');
-
-        await page.getByPlaceholder('Username').fill('elpatron');
-        await page.getByPlaceholder('Password').fill('surf&4033');
-        await page.getByRole('button', { name: 'Log in' }).click();
-
-        // Should redirect to specials dashboard
-        await expect(page).toHaveURL(/\/curator\/specials/);
-        await expect(page.getByText('Curator Specials')).toBeVisible();
-    });
-
-    // Valid login cannot be tested without seed data in this environment
-    test('Curator login attempt (invalid credentials)', async ({ page }) => {
-        await page.goto('/en/curator');
-        await page.addStyleTag({ content: 'nextjs-portal { display: none !important; }' });
-
-        await page.getByPlaceholder('Username').fill('invalid_user');
-        await page.getByPlaceholder('Password').fill('invalid_pass');
-        await page.getByRole('button', { name: 'Log in' }).click();
-
-        // Should show error message
-        await expect(page.getByText('Login failed')).toBeVisible();
-    });
-});

tests/gameplay.spec.ts

@@ -1,59 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Gameplay', () => {
-    test.beforeEach(async ({ page }) => {
-        // Capture console logs
-        page.on('console', msg => console.log(`BROWSER LOG: ${msg.text()}`));
-
-        await page.goto('/');
-        await page.addStyleTag({ content: 'nextjs-portal, #nextjs-dev-overlay, [data-nextjs-dev-overlay] { display: none !important; }' });
-    });
-
-    test('Game loads correctly', async ({ page }) => {
-        await expect(page.locator('h1')).toBeVisible(); // Logo or main header
-        await expect(page.getByRole('button', { name: 'Start' })).toBeVisible();
-    });
-
-    test('Can play audio', async ({ page }) => {
-        const startButton = page.getByRole('button', { name: 'Start' });
-        await startButton.click({ force: true });
-
-        // In CI/Headless, audio might not play, so button might not change to "Skip".
-        // We check that the button is still there and interactive, or changed.
-        await expect(page.getByRole('button', { name: /Start|Skip/ })).toBeVisible();
-    });
-
-    test('Can submit a guess', async ({ page }) => {
-        // Mock the songs API to ensure we have data to search for
-        await page.route('/api/public-songs', async route => {
-            await route.fulfill({
-                status: 200,
-                contentType: 'application/json',
-                body: JSON.stringify([
-                    { id: 1, title: 'Test Song', artist: 'Test Artist' },
-                    { id: 2, title: 'Another Song', artist: 'Another Artist' }
-                ])
-            });
-        });
-
-        // Reload page to pick up the mocked route if necessary, 
-        // but easier to reload or just navigate again.
-        await page.reload();
-
-        const input = page.getByPlaceholder(/search/i);
-        await expect(input).toBeVisible();
-
-        await input.fill('Test Song');
-
-        // Wait for suggestions to appear
-        const suggestion = page.getByText('Test Artist');
-        // Click suggestion. Use dispatchEvent to bypass potential overlays/interception.
-        await page.locator('li.suggestion-item').first().dispatchEvent('click');
-
-        // Logic in GuessInput: handleSelect -> onGuess -> setQuery('').
-        // or matches the selection if we were just selecting. 
-        // Logic in GuessInput: handleSelect -> onGuess -> setQuery('').
-        // So checking for empty value is correct.
-        await expect(input).toHaveValue('');
-    });
-});