feat: Implement genre activation/deactivation with UI controls and main page filtering.

app/admin/page.tsx

@@ -21,6 +21,7 @@ interface Genre {
     id: number;
     name: string;
     subtitle?: string;
+    active: boolean;
     _count?: {
         songs: number;
     };
@@ -66,9 +67,11 @@ export default function AdminPage() {
     const [genres, setGenres] = useState<Genre[]>([]);
     const [newGenreName, setNewGenreName] = useState('');
     const [newGenreSubtitle, setNewGenreSubtitle] = useState('');
+    const [newGenreActive, setNewGenreActive] = useState(true);
     const [editingGenreId, setEditingGenreId] = useState<number | null>(null);
     const [editGenreName, setEditGenreName] = useState('');
     const [editGenreSubtitle, setEditGenreSubtitle] = useState('');
+    const [editGenreActive, setEditGenreActive] = useState(true);
 
     // Specials state
     const [specials, setSpecials] = useState<Special[]>([]);
@@ -200,11 +203,16 @@ export default function AdminPage() {
         const res = await fetch('/api/genres', {
             method: 'POST',
             headers: getAuthHeaders(),
-            body: JSON.stringify({ name: newGenreName, subtitle: newGenreSubtitle }),
+            body: JSON.stringify({
+                name: newGenreName,
+                subtitle: newGenreSubtitle,
+                active: newGenreActive
+            }),
         });
         if (res.ok) {
             setNewGenreName('');
             setNewGenreSubtitle('');
+            setNewGenreActive(true);
             fetchGenres();
         } else {
             alert('Failed to create genre');
@@ -215,6 +223,7 @@ export default function AdminPage() {
         setEditingGenreId(genre.id);
         setEditGenreName(genre.name);
         setEditGenreSubtitle(genre.subtitle || '');
+        setEditGenreActive(genre.active !== undefined ? genre.active : true);
     };
 
     const saveEditedGenre = async () => {
@@ -225,7 +234,8 @@ export default function AdminPage() {
             body: JSON.stringify({
                 id: editingGenreId,
                 name: editGenreName,
-                subtitle: editGenreSubtitle
+                subtitle: editGenreSubtitle,
+                active: editGenreActive
             }),
         });
         if (res.ok) {
@@ -978,7 +988,7 @@ export default function AdminPage() {
             {/* Genre Management */}
             <div className="admin-card" style={{ marginBottom: '2rem' }}>
                 <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Manage Genres</h2>
-                <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+                <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem', alignItems: 'center' }}>
                     <input
                         type="text"
                         value={newGenreName}
@@ -995,12 +1005,21 @@ export default function AdminPage() {
                         className="form-input"
                         style={{ maxWidth: '300px' }}
                     />
+                    <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer' }}>
+                        <input
+                            type="checkbox"
+                            checked={newGenreActive}
+                            onChange={e => setNewGenreActive(e.target.checked)}
+                        />
+                        Active
+                    </label>
                     <button onClick={createGenre} className="btn-primary">Add Genre</button>
                 </div>
                 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
                     {genres.map(genre => (
                         <div key={genre.id} style={{
-                            background: '#f3f4f6',
+                            background: genre.active ? '#f3f4f6' : '#fee2e2',
+                            opacity: genre.active ? 1 : 0.8,
                             padding: '0.25rem 0.75rem',
                             borderRadius: '999px',
                             display: 'flex',
@@ -1027,6 +1046,16 @@ export default function AdminPage() {
                                 <label style={{ fontSize: '0.75rem', color: '#666' }}>Subtitle</label>
                                 <input type="text" value={editGenreSubtitle} onChange={e => setEditGenreSubtitle(e.target.value)} className="form-input" style={{ width: '300px' }} />
                             </div>
+                            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: '0.5rem' }}>
+                                <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer' }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={editGenreActive}
+                                        onChange={e => setEditGenreActive(e.target.checked)}
+                                    />
+                                    Active
+                                </label>
+                            </div>
                             <button onClick={saveEditedGenre} className="btn-primary">Save</button>
                             <button onClick={() => setEditingGenreId(null)} className="btn-secondary">Cancel</button>
                         </div>