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

Verschiebe Kommentare-Sektion ganz nach oben in Kuratoren-Seite

Browse Source
This commit is contained in:
Hördle Bot
2025-12-03 22:47:40 +01:00
parent cd564b5d8c
commit 08fedf9881
1 changed files with 103 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
app/curator/CuratorPageClient.tsx
View File

@@ -699,6 +699,109 @@ export default function CuratorPageClient() {
<p style={{ marginBottom: '1rem', color: '#b91c1c', whiteSpace: 'pre-line' }}>{message}</p>
)}
{/* Comments Section */}
<section style={{ marginBottom: '2rem' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
<h2 style={{ fontSize: '1.25rem', marginBottom: 0 }}>
{t('commentsTitle')} ({comments.length})
</h2>
<button
onClick={() => {
setShowComments(!showComments);
if (!showComments && comments.length === 0) {
fetchComments();
}
}}
style={{
padding: '0.4rem 0.8rem',
borderRadius: '0.25rem',
border: '1px solid #d1d5db',
background: showComments ? '#3b82f6' : '#fff',
color: showComments ? '#fff' : '#000',
cursor: 'pointer',
fontSize: '0.9rem',
}}
>
{showComments ? t('hideComments') : t('showComments')}
</button>
</div>
{showComments && (
<>
{loadingComments ? (
<p>{t('loadingComments')}</p>
) : comments.length === 0 ? (
<p>{t('noComments')}</p>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{comments.map(comment => {
const genreName = comment.puzzle.genre
? typeof comment.puzzle.genre.name === 'string'
? comment.puzzle.genre.name
: comment.puzzle.genre.name?.de ?? comment.puzzle.genre.name?.en
: null;
const isRead = comment.readAt !== null;
return (
<div
key={comment.id}
style={{
padding: '1rem',
borderRadius: '0.5rem',
border: `1px solid ${isRead ? '#d1d5db' : '#3b82f6'}`,
background: isRead ? '#f9fafb' : '#eff6ff',
position: 'relative',
}}
onClick={() => {
if (!isRead) {
markCommentAsRead(comment.id);
}
}}
>
{!isRead && (
<div
style={{
position: 'absolute',
top: '0.5rem',
right: '0.5rem',
width: '12px',
height: '12px',
borderRadius: '50%',
background: '#3b82f6',
}}
title={t('unreadComment')}
/>
)}
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem', alignItems: 'center' }}>
<div>
<strong style={{ fontSize: '0.9rem' }}>
{t('commentFromPuzzle')} #{comment.puzzle.id}
</strong>
{genreName && (
<span style={{ marginLeft: '0.5rem', fontSize: '0.85rem', color: '#6b7280' }}>
({t('commentGenre')}: {genreName})
</span>
)}
</div>
<span style={{ fontSize: '0.8rem', color: '#6b7280' }}>
{new Date(comment.createdAt).toLocaleDateString()} {new Date(comment.createdAt).toLocaleTimeString()}
</span>
</div>
<div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', color: '#6b7280' }}>
{comment.puzzle.song.title} - {comment.puzzle.song.artist}
</div>
<div style={{ fontSize: '0.9rem', whiteSpace: 'pre-wrap' }}>
{comment.message}
</div>
</div>
);
})}
</div>
)}
</>
)}
</section>
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.25rem', marginBottom: '0.75rem' }}>{t('uploadSectionTitle')}</h2>
<p style={{ marginBottom: '0.75rem', color: '#4b5563', fontSize: '0.9rem' }}>
@@ -1391,109 +1494,6 @@ export default function CuratorPageClient() {
</>
)}
</section>
{/* Comments Section */}
<section style={{ marginBottom: '2rem' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
<h2 style={{ fontSize: '1.25rem', marginBottom: 0 }}>
{t('commentsTitle')} ({comments.length})
</h2>
<button
onClick={() => {
setShowComments(!showComments);
if (!showComments && comments.length === 0) {
fetchComments();
}
}}
style={{
padding: '0.4rem 0.8rem',
borderRadius: '0.25rem',
border: '1px solid #d1d5db',
background: showComments ? '#3b82f6' : '#fff',
color: showComments ? '#fff' : '#000',
cursor: 'pointer',
fontSize: '0.9rem',
}}
>
{showComments ? t('hideComments') : t('showComments')}
</button>
</div>
{showComments && (
<>
{loadingComments ? (
<p>{t('loadingComments')}</p>
) : comments.length === 0 ? (
<p>{t('noComments')}</p>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{comments.map(comment => {
const genreName = comment.puzzle.genre
? typeof comment.puzzle.genre.name === 'string'
? comment.puzzle.genre.name
: comment.puzzle.genre.name?.de ?? comment.puzzle.genre.name?.en
: null;
const isRead = comment.readAt !== null;
return (
<div
key={comment.id}
style={{
padding: '1rem',
borderRadius: '0.5rem',
border: `1px solid ${isRead ? '#d1d5db' : '#3b82f6'}`,
background: isRead ? '#f9fafb' : '#eff6ff',
position: 'relative',
}}
onClick={() => {
if (!isRead) {
markCommentAsRead(comment.id);
}
}}
>
{!isRead && (
<div
style={{
position: 'absolute',
top: '0.5rem',
right: '0.5rem',
width: '12px',
height: '12px',
borderRadius: '50%',
background: '#3b82f6',
}}
title={t('unreadComment')}
/>
)}
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem', alignItems: 'center' }}>
<div>
<strong style={{ fontSize: '0.9rem' }}>
{t('commentFromPuzzle')} #{comment.puzzle.id}
</strong>
{genreName && (
<span style={{ marginLeft: '0.5rem', fontSize: '0.85rem', color: '#6b7280' }}>
({t('commentGenre')}: {genreName})
</span>
)}
</div>
<span style={{ fontSize: '0.8rem', color: '#6b7280' }}>
{new Date(comment.createdAt).toLocaleDateString()} {new Date(comment.createdAt).toLocaleTimeString()}
</span>
</div>
<div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', color: '#6b7280' }}>
{comment.puzzle.song.title} - {comment.puzzle.song.artist}
</div>
<div style={{ fontSize: '0.9rem', whiteSpace: 'pre-wrap' }}>
{comment.message}
</div>
</div>
);
})}
</div>
)}
</>
)}
</section>
</main>
);
}