Replace native selects with NovaSelect

resources/js/components/Studio/BulkCategoryModal.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import NovaSelect from '../ui/NovaSelect'
 
 /**
  * Modal for choosing a category in bulk.
@@ -49,25 +50,17 @@ export default function BulkCategoryModal({ open, categories = [], onClose, onCo
         {/* Category select */}
         <div>
           <label className="text-xs font-medium text-slate-400 mb-1.5 block">Category</label>
-          <select
+          <NovaSelect
             value={selectedId}
-            onChange={(e) => setSelectedId(e.target.value)}
-            className="w-full px-3 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50"
-          >
-            <option value="" className="bg-nova-900">Select a category…</option>
-            {categories.map((ct) => (
-              <optgroup key={ct.id} label={ct.name}>
-                {ct.categories?.map((cat) => (
-                  <React.Fragment key={cat.id}>
-                    <option value={cat.id} className="bg-nova-900">{cat.name}</option>
-                    {cat.children?.map((ch) => (
-                      <option key={ch.id} value={ch.id} className="bg-nova-900">&nbsp;&nbsp;{ch.name}</option>
-                    ))}
-                  </React.Fragment>
-                ))}
-              </optgroup>
+            onChange={(value) => setSelectedId(value)}
+            placeholder="Select a category…"
+            options={categories.flatMap((ct) => (
+              (ct.categories || []).flatMap((cat) => ([
+                { value: String(cat.id), label: cat.name, group: ct.name },
+                ...((cat.children || []).map((child) => ({ value: String(child.id), label: child.name, group: ct.name }))),
+              ]))
             ))}
-          </select>
+          />
         </div>
 
         {/* Actions */}