...

feat: Album-Cover-Anzeige in Titelliste mit Tooltip hinzugefügt
- Neue Spalte 'Cover' in der Curator-Titelliste zeigt an, ob ein Album-Cover vorhanden ist - Tooltip zeigt das Cover-Bild beim Hovern über die Cover-Spalte - Übersetzungen für DE und EN hinzugefügt
2025-12-06 14:26:52 +01:00 · 2025-12-06 14:24:00 +01:00 · 2025-12-06 01:35:01 +01:00
12 changed files with 146 additions and 15 deletions
--- a/app/[locale]/admin/page.tsx
+++ b/app/[locale]/admin/page.tsx
@@ -15,6 +15,7 @@ interface Special {
    launchDate?: string;
    endDate?: string;
    curator?: string;
+    hidden?: boolean;
    _count?: {
        songs: number;
    };
@@ -119,6 +120,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
    const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
    const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
    const [newSpecialCurator, setNewSpecialCurator] = useState('');
+    const [newSpecialHidden, setNewSpecialHidden] = useState(false);

    const [editingSpecialId, setEditingSpecialId] = useState<number | null>(null);
    const [editSpecialName, setEditSpecialName] = useState({ de: '', en: '' });
@@ -129,6 +131,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
    const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
    const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
    const [editSpecialCurator, setEditSpecialCurator] = useState('');
+    const [editSpecialHidden, setEditSpecialHidden] = useState(false);

    // News state
    const [news, setNews] = useState<News[]>([]);
@@ -393,6 +396,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                launchDate: newSpecialLaunchDate || null,
                endDate: newSpecialEndDate || null,
                curator: newSpecialCurator || null,
+                hidden: newSpecialHidden,
            }),
        });
        if (res.ok) {
@@ -404,6 +408,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
            setNewSpecialLaunchDate('');
            setNewSpecialEndDate('');
            setNewSpecialCurator('');
+            setNewSpecialHidden(false);
            fetchSpecials();
        } else {
            const errorData = await res.json().catch(() => ({}));
@@ -491,6 +496,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
        setEditSpecialLaunchDate(special.launchDate ? new Date(special.launchDate).toISOString().split('T')[0] : '');
        setEditSpecialEndDate(special.endDate ? new Date(special.endDate).toISOString().split('T')[0] : '');
        setEditSpecialCurator(special.curator || '');
+        setEditSpecialHidden(special.hidden || false);
    };

    const saveEditedSpecial = async () => {
@@ -516,6 +522,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                launchDate: editSpecialLaunchDate || null,
                endDate: editSpecialEndDate || null,
                curator: editSpecialCurator || null,
+                hidden: editSpecialHidden,
            }),
        });
        if (res.ok) {
@@ -1389,6 +1396,18 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                            <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
                            <input type="text" placeholder={t('curator')} value={newSpecialCurator} onChange={e => setNewSpecialCurator(e.target.value)} className="form-input" />
                        </div>
+                        <div style={{ display: 'flex', flexDirection: 'column' }}>
+                             <label style={{ fontSize: '0.75rem', color: '#666', visibility: 'hidden' }}>Hidden</label>
+                             <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', height: '38px', cursor: 'pointer' }}>
+                                <input
+                                    type="checkbox"
+                                    checked={newSpecialHidden}
+                                    onChange={e => setNewSpecialHidden(e.target.checked)}
+                                    style={{ width: '1rem', height: '1rem' }}
+                                />
+                                Hidden
+                            </label>
+                        </div>
                        <button 
                            type="submit" 
                            className="btn-primary" 
@@ -1418,7 +1437,7 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                            }}
                        >
                            <span>
-                                {getLocalizedValue(special.name, activeTab)} ({special._count?.songs || 0})
+                                {special.hidden && <span title="Hidden from navigation">👁️‍🗨️</span>} {getLocalizedValue(special.name, activeTab)} ({special._count?.songs || 0})
                            </span>
                            {special.subtitle && (
                                <span
@@ -1508,6 +1527,18 @@ export default function AdminPage({ params }: { params: { locale: string } }) {
                                <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
                                <input type="text" value={editSpecialCurator} onChange={e => setEditSpecialCurator(e.target.value)} className="form-input" />
                            </div>
+                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                <label style={{ fontSize: '0.75rem', color: '#666', visibility: 'hidden' }}>Hidden</label>
+                                <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', height: '38px', cursor: 'pointer' }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={editSpecialHidden}
+                                        onChange={e => setEditSpecialHidden(e.target.checked)}
+                                        style={{ width: '1rem', height: '1rem' }}
+                                    />
+                                    Hidden
+                                </label>
+                            </div>
                            <button 
                                onClick={saveEditedSpecial} 
                                className="btn-primary" 
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -43,7 +43,9 @@ export default async function Home({
    const genres = await prisma.genre.findMany({
        where: { active: true },
    });
-    const specials = await prisma.special.findMany();
+    const specials = await prisma.special.findMany({
+        where: { hidden: false },
+    });

    // Sort in memory
    genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));
--- a/app/[locale]/special/[name]/page.tsx
+++ b/app/[locale]/special/[name]/page.tsx
@@ -86,6 +86,7 @@ export default async function SpecialPage({ params }: PageProps) {
    specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));

    const activeSpecials = specials.filter(s => {
+        if (s.hidden) return false;
        const sStarted = !s.launchDate || s.launchDate <= now;
        const sEnded = s.endDate && s.endDate < now;
        return sStarted && !sEnded;
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -12,6 +12,7 @@ interface Special {
    launchDate?: string;
    endDate?: string;
    curator?: string;
+    hidden?: boolean;
    _count?: {
        songs: number;
    };
@@ -88,6 +89,7 @@ export default function AdminPage() {
    const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
    const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
    const [newSpecialCurator, setNewSpecialCurator] = useState('');
+    const [newSpecialHidden, setNewSpecialHidden] = useState(false);

    const [editingSpecialId, setEditingSpecialId] = useState<number | null>(null);
    const [editSpecialName, setEditSpecialName] = useState('');
@@ -97,6 +99,7 @@ export default function AdminPage() {
    const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
    const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
    const [editSpecialCurator, setEditSpecialCurator] = useState('');
+    const [editSpecialHidden, setEditSpecialHidden] = useState(false);

    // News state
    const [news, setNews] = useState<News[]>([]);
@@ -268,6 +271,7 @@ export default function AdminPage() {
                launchDate: newSpecialLaunchDate || null,
                endDate: newSpecialEndDate || null,
                curator: newSpecialCurator || null,
+                hidden: newSpecialHidden,
            }),
        });
        if (res.ok) {
@@ -278,6 +282,7 @@ export default function AdminPage() {
            setNewSpecialLaunchDate('');
            setNewSpecialEndDate('');
            setNewSpecialCurator('');
+            setNewSpecialHidden(false);
            fetchSpecials();
        } else {
            alert('Failed to create special');
@@ -363,6 +368,7 @@ export default function AdminPage() {
        setEditSpecialLaunchDate(special.launchDate ? new Date(special.launchDate).toISOString().split('T')[0] : '');
        setEditSpecialEndDate(special.endDate ? new Date(special.endDate).toISOString().split('T')[0] : '');
        setEditSpecialCurator(special.curator || '');
+        setEditSpecialHidden(special.hidden || false);
    };

    const saveEditedSpecial = async () => {
@@ -379,6 +385,7 @@ export default function AdminPage() {
                launchDate: editSpecialLaunchDate || null,
                endDate: editSpecialEndDate || null,
                curator: editSpecialCurator || null,
+                hidden: editSpecialHidden,
            }),
        });
        if (res.ok) {
@@ -632,6 +639,15 @@ export default function AdminPage() {
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            <label style={{ fontSize: '0.75rem', color: '#666' }}>Curator</label>
                            <input type="text" placeholder="Curator name" value={newSpecialCurator} onChange={e => setNewSpecialCurator(e.target.value)} className="form-input" />
+                            <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer', marginTop: '0.5rem' }}>
+                                <input
+                                    type="checkbox"
+                                    checked={newSpecialHidden}
+                                    onChange={e => setNewSpecialHidden(e.target.checked)}
+                                    style={{ width: '1rem', height: '1rem' }}
+                                />
+                                Hidden Special (not in navigation)
+                            </label>
                        </div>
                        <button type="submit" className="btn-primary" style={{ height: '38px' }}>Add Special</button>
                    </div>
@@ -651,7 +667,7 @@ export default function AdminPage() {
                            }}
                        >
                            <span>
-                                {special.name} ({special._count?.songs || 0})
+                                {special.hidden && <span title="Hidden from navigation">👁️‍🗨️</span>} {special.name} ({special._count?.songs || 0})
                            </span>
                            {special.subtitle && (
                                <span
@@ -711,6 +727,15 @@ export default function AdminPage() {
                            <div style={{ display: 'flex', flexDirection: 'column' }}>
                                <label style={{ fontSize: '0.75rem', color: '#666' }}>Curator</label>
                                <input type="text" value={editSpecialCurator} onChange={e => setEditSpecialCurator(e.target.value)} className="form-input" />
+                                <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer', marginTop: '0.5rem' }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={editSpecialHidden}
+                                        onChange={e => setEditSpecialHidden(e.target.checked)}
+                                        style={{ width: '1rem', height: '1rem' }}
+                                    />
+                                    Hidden Special
+                                </label>
                            </div>
                            <button onClick={saveEditedSpecial} className="btn-primary" style={{ height: '38px' }}>Save</button>
                            <button onClick={() => setEditingSpecialId(null)} className="btn-secondary" style={{ height: '38px' }}>Cancel</button>
--- a/app/api/specials/[id]/route.ts
+++ b/app/api/specials/[id]/route.ts
@@ -43,18 +43,20 @@ export async function PUT(
    try {
        const { id } = await params;
        const specialId = parseInt(id);
-        const { name, maxAttempts, unlockSteps, launchDate, endDate, curator } = await request.json();
+        const { name, maxAttempts, unlockSteps, launchDate, endDate, curator, hidden } = await request.json();
+
+        const updateData: any = {};
+        if (name !== undefined) updateData.name = name;
+        if (maxAttempts !== undefined) updateData.maxAttempts = maxAttempts;
+        if (unlockSteps !== undefined) updateData.unlockSteps = typeof unlockSteps === 'string' ? unlockSteps : JSON.stringify(unlockSteps);
+        if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
+        if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
+        if (curator !== undefined) updateData.curator = curator || null;
+        if (hidden !== undefined) updateData.hidden = Boolean(hidden);

        const special = await prisma.special.update({
            where: { id: specialId },
-            data: {
-                name,
-                maxAttempts,
-                unlockSteps: typeof unlockSteps === 'string' ? unlockSteps : JSON.stringify(unlockSteps),
-                launchDate: launchDate ? new Date(launchDate) : null,
-                endDate: endDate ? new Date(endDate) : null,
-                curator: curator || null,
-            }
+            data: updateData
        });

        return NextResponse.json(special);
--- a/app/api/specials/route.ts
+++ b/app/api/specials/route.ts
@@ -35,7 +35,7 @@ export async function POST(request: Request) {
    const authError = await requireAdminAuth(request as any);
    if (authError) return authError;

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

-    const { id, name, subtitle, maxAttempts, unlockSteps, launchDate, endDate, curator } = await request.json();
+    const { id, name, subtitle, maxAttempts, unlockSteps, launchDate, endDate, curator, hidden } = await request.json();
    if (!id) {
        return NextResponse.json({ error: 'ID required' }, { status: 400 });
    }
@@ -119,6 +120,7 @@ export async function PUT(request: Request) {
    if (launchDate !== undefined) updateData.launchDate = launchDate ? new Date(launchDate) : null;
    if (endDate !== undefined) updateData.endDate = endDate ? new Date(endDate) : null;
    if (curator !== undefined) updateData.curator = curator || null;
+    if (hidden !== undefined) updateData.hidden = Boolean(hidden);

    const updated = await prisma.special.update({
        where: { id: Number(id) },
--- a/app/curator/CuratorPageClient.tsx
+++ b/app/curator/CuratorPageClient.tsx
@@ -22,6 +22,7 @@ interface Song {
    filename: string;
    createdAt: string;
    releaseYear: number | null;
+    coverImage: string | null;
    activations?: number;
    puzzles?: any[];
    genres: Genre[];
@@ -128,6 +129,7 @@ export default function CuratorPageClient() {
    const [itemsPerPage, setItemsPerPage] = useState(10);
    const [playingSongId, setPlayingSongId] = useState<number | null>(null);
    const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
+    const [hoveredCoverSongId, setHoveredCoverSongId] = useState<number | null>(null);
    
    // Comments state
    const [comments, setComments] = useState<CuratorComment[]>([]);
@@ -1663,6 +1665,7 @@ export default function CuratorPageClient() {
                                        >
                                            {t('columnYear')} {sortField === 'releaseYear' && (sortDirection === 'asc' ? '↑' : '↓')}
                                        </th>
+                                        <th style={{ padding: '0.5rem' }}>{t('columnCover')}</th>
                                        <th style={{ padding: '0.5rem' }}>{t('columnGenresSpecials')}</th>
                                        <th
                                            style={{ padding: '0.5rem', cursor: 'pointer' }}
@@ -1778,6 +1781,48 @@ export default function CuratorPageClient() {
                                                        '-'
                                                    )}
                                                </td>
+                                                <td 
+                                                    style={{ 
+                                                        padding: '0.5rem', 
+                                                        textAlign: 'center',
+                                                        position: 'relative',
+                                                        cursor: song.coverImage ? 'pointer' : 'default'
+                                                    }}
+                                                    onMouseEnter={() => song.coverImage && setHoveredCoverSongId(song.id)}
+                                                    onMouseLeave={() => setHoveredCoverSongId(null)}
+                                                >
+                                                    {song.coverImage ? '✓' : '-'}
+                                                    {hoveredCoverSongId === song.id && song.coverImage && (
+                                                        <div
+                                                            style={{
+                                                                position: 'absolute',
+                                                                top: '100%',
+                                                                left: '50%',
+                                                                transform: 'translateX(-50%)',
+                                                                marginTop: '0.5rem',
+                                                                zIndex: 1000,
+                                                                padding: '0.5rem',
+                                                                background: 'white',
+                                                                border: '1px solid #d1d5db',
+                                                                borderRadius: '0.5rem',
+                                                                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+                                                                pointerEvents: 'none',
+                                                            }}
+                                                        >
+                                                            <img
+                                                                src={`/uploads/covers/${song.coverImage}`}
+                                                                alt={`Cover für ${song.title}`}
+                                                                style={{
+                                                                    width: '200px',
+                                                                    height: '200px',
+                                                                    objectFit: 'cover',
+                                                                    borderRadius: '0.25rem',
+                                                                    display: 'block',
+                                                                }}
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </td>
                                                <td style={{ padding: '0.5rem' }}>
                                                    {isEditing ? (
                                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
--- a/messages/de.json
+++ b/messages/de.json
@@ -231,6 +231,7 @@
    "columnTitle": "Titel",
    "columnArtist": "Artist",
    "columnYear": "Jahr",
+    "columnCover": "Cover",
    "columnGenresSpecials": "Genres / Specials",
    "columnAdded": "Hinzugefügt",
    "columnActivations": "Aktivierungen",
--- a/messages/en.json
+++ b/messages/en.json
@@ -231,6 +231,7 @@
    "columnTitle": "Title",
    "columnArtist": "Artist",
    "columnYear": "Year",
+    "columnCover": "Cover",
    "columnGenresSpecials": "Genres / Specials",
    "columnAdded": "Added",
    "columnActivations": "Activations",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "hoerdle",
-  "version": "0.1.6.24",
+  "version": "0.1.6.25",
  "private": true,
  "scripts": {
    "dev": "next dev",
--- a/prisma/migrations/20251206002217_add_hidden_to_special/migration.sql
+++ b/prisma/migrations/20251206002217_add_hidden_to_special/migration.sql
@@ -0,0 +1,20 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Special" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "name" JSONB NOT NULL,
+    "subtitle" JSONB,
+    "maxAttempts" INTEGER NOT NULL DEFAULT 7,
+    "unlockSteps" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "launchDate" DATETIME,
+    "endDate" DATETIME,
+    "curator" TEXT,
+    "hidden" BOOLEAN NOT NULL DEFAULT false
+);
+INSERT INTO "new_Special" ("createdAt", "curator", "endDate", "id", "launchDate", "maxAttempts", "name", "subtitle", "unlockSteps") SELECT "createdAt", "curator", "endDate", "id", "launchDate", "maxAttempts", "name", "subtitle", "unlockSteps" FROM "Special";
+DROP TABLE "Special";
+ALTER TABLE "new_Special" RENAME TO "Special";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -47,6 +47,7 @@ model Special {
  launchDate  DateTime?
  endDate     DateTime?
  curator     String?
+  hidden      Boolean       @default(false)
  songs       SpecialSong[]
  puzzles     DailyPuzzle[]
  news        News[]
Author	SHA1	Message	Date
Hördle Bot	9cef1c78d3	...	2025-12-06 14:26:52 +01:00
Hördle Bot	6741eeb7fa	feat: Album-Cover-Anzeige in Titelliste mit Tooltip hinzugefügt - Neue Spalte 'Cover' in der Curator-Titelliste zeigt an, ob ein Album-Cover vorhanden ist - Tooltip zeigt das Cover-Bild beim Hovern über die Cover-Spalte - Übersetzungen für DE und EN hinzugefügt	2025-12-06 14:24:00 +01:00
Hördle Bot	71b8e98f23	feat: add hidden flag to specials	2025-12-06 01:35:01 +01:00