From 08fedf98818c87e58bce406c1f210ca7543d1cf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=B6rdle=20Bot?= <bot@hoerdle.local>
Date: Wed, 3 Dec 2025 22:47:40 +0100
Subject: [PATCH] Verschiebe Kommentare-Sektion ganz nach oben in
 Kuratoren-Seite

---
 app/curator/CuratorPageClient.tsx | 206 +++++++++++++++---------------
 1 file changed, 103 insertions(+), 103 deletions(-)

diff --git a/app/curator/CuratorPageClient.tsx b/app/curator/CuratorPageClient.tsx
index 216f66f..0a8c490 100644
--- a/app/curator/CuratorPageClient.tsx
+++ b/app/curator/CuratorPageClient.tsx
@@ -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>
     );
 }