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

@@ -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 => (
+                                                                {song.specials
-                                                                    <span
+                                                                    .filter(
-                                                                        key={`s-${s.id}`}
+                                                                        s => !curatorInfo?.specialIds?.includes(s.id)
-                                                                        style={{
+                                                                    )
-                                                                            padding: '0.1rem 0.4rem',
+                                                                    .map(s => (
-                                                                            borderRadius: '999px',
+                                                                        <span
-                                                                            background: '#fee2e2',
+                                                                            key={`fixed-s-${s.id}`}
-                                                                            fontSize: '0.8rem',
+                                                                            style={{
-                                                                        }}
+                                                                                padding: '0.1rem 0.4rem',
-                                                                    >
+                                                                                borderRadius: '999px',
-                                                                        {typeof s.name === 'string'
+                                                                                background: '#fee2e2',
-                                                                            ? s.name
+                                                                                fontSize: '0.8rem',
-                                                                            : s.name?.de ?? s.name?.en}
+                                                                            }}
-                                                                    </span>
+                                                                        >
-                                                                ))}
+                                                                            ★{' '}
+                                                                            {typeof s.name === 'string'
+                                                                                ? s.name
+                                                                                : s.name?.de ?? s.name?.en}
+                                                                        </span>
+                                                                    ))}
                                                             </div>
                                                         </div>
                                                     ) : (