From afe6e12afc51b7d337a97a7f1fc15b3081927e4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=B6rdle=20Bot?= <bot@hoerdle.local>
Date: Thu, 4 Dec 2025 00:14:27 +0100
Subject: [PATCH] Implement special selection feature in CuratorPageClient

- Added a new section for curators to select specials associated with their account.
- Introduced checkboxes for editing special selections, allowing for dynamic updates.
- Updated the display logic for specials to differentiate between selected and unselected items.
---
 app/curator/CuratorPageClient.tsx | 70 ++++++++++++++++++++++++-------
 1 file changed, 55 insertions(+), 15 deletions(-)

diff --git a/app/curator/CuratorPageClient.tsx b/app/curator/CuratorPageClient.tsx
index 5bb3477..7817c2d 100644
--- a/app/curator/CuratorPageClient.tsx
+++ b/app/curator/CuratorPageClient.tsx
@@ -1316,6 +1316,41 @@ export default function CuratorPageClient() {
                                                                                 : genre.name?.de ?? genre.name?.en}
                                                                         </label>
                                                                     ))}
+                                                                {specials
+                                                                    .filter(s => curatorInfo?.specialIds?.includes(s.id))
+                                                                    .map(special => (
+                                                                        <label
+                                                                            key={special.id}
+                                                                            style={{
+                                                                                display: 'flex',
+                                                                                alignItems: 'center',
+                                                                                gap: '0.25rem',
+                                                                                padding: '0.15rem 0.4rem',
+                                                                                borderRadius: '999px',
+                                                                                background: editSpecialIds.includes(special.id)
+                                                                                    ? '#fee2e2'
+                                                                                    : '#f3f4f6',
+                                                                                fontSize: '0.8rem',
+                                                                                cursor: 'pointer',
+                                                                            }}
+                                                                        >
+                                                                            <input
+                                                                                type="checkbox"
+                                                                                checked={editSpecialIds.includes(special.id)}
+                                                                                onChange={() =>
+                                                                                    setEditSpecialIds(prev =>
+                                                                                        prev.includes(special.id)
+                                                                                            ? prev.filter(id => id !== special.id)
+                                                                                            : [...prev, special.id]
+                                                                                    )
+                                                                                }
+                                                                            />
+                                                                            ★{' '}
+                                                                            {typeof special.name === 'string'
+                                                                                ? special.name
+                                                                                : special.name?.de ?? special.name?.en}
+                                                                        </label>
+                                                                    ))}
                                                             </div>
                                                             <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
                                                                 {song.genres
@@ -1337,21 +1372,26 @@ export default function CuratorPageClient() {
                                                                                 : g.name?.de ?? g.name?.en}
                                                                         </span>
                                                                     ))}
-                                                                {song.specials.map(s => (
-                                                                    <span
-                                                                        key={`s-${s.id}`}
-                                                                        style={{
-                                                                            padding: '0.1rem 0.4rem',
-                                                                            borderRadius: '999px',
-                                                                            background: '#fee2e2',
-                                                                            fontSize: '0.8rem',
-                                                                        }}
-                                                                    >
-                                                                        {typeof s.name === 'string'
-                                                                            ? s.name
-                                                                            : s.name?.de ?? s.name?.en}
-                                                                    </span>
-                                                                ))}
+                                                                {song.specials
+                                                                    .filter(
+                                                                        s => !curatorInfo?.specialIds?.includes(s.id)
+                                                                    )
+                                                                    .map(s => (
+                                                                        <span
+                                                                            key={`fixed-s-${s.id}`}
+                                                                            style={{
+                                                                                padding: '0.1rem 0.4rem',
+                                                                                borderRadius: '999px',
+                                                                                background: '#fee2e2',
+                                                                                fontSize: '0.8rem',
+                                                                            }}
+                                                                        >
+                                                                            ★{' '}
+                                                                            {typeof s.name === 'string'
+                                                                                ? s.name
+                                                                                : s.name?.de ?? s.name?.en}
+                                                                        </span>
+                                                                    ))}
                                                             </div>
                                                         </div>
                                                     ) : (