elpatron/hoerdle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Album-Cover-Anzeige in Titelliste mit Tooltip hinzugefügt

Browse Source 
- 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
This commit is contained in:
Hördle Bot
2025-12-06 14:24:00 +01:00
parent 71b8e98f23
commit 6741eeb7fa
3 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/curator/CuratorPageClient.tsx
View File

@@ -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' }}>

1
messages/de.json
View File

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

1
messages/en.json
View File

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