Replace native selects with NovaSelect

resources/js/Pages/Collection/SavedCollections.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { usePage } from '@inertiajs/react'
 import CollectionCard from '../../components/profile/collections/CollectionCard'
 import SeoHead from '../../components/seo/SeoHead'
+import NovaSelect from '../../components/ui/NovaSelect'
 
 function getCsrfToken() {
   if (typeof document === 'undefined') return ''
@@ -475,9 +476,7 @@ export default function SavedCollections() {
                         </div>
                         {savedLists.length ? (
                           <div className="flex flex-wrap items-center gap-3 rounded-[24px] border border-white/10 bg-white/[0.04] px-4 py-3">
-                            <select value={selectedLists[collection.id] || savedLists[0]?.id || ''} onChange={(event) => setSelectedLists((current) => ({ ...current, [collection.id]: event.target.value }))} className="min-w-[180px] rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-2.5 text-sm text-white outline-none">
-                              {savedLists.map((list) => <option key={list.id} value={list.id}>{list.title}</option>)}
-                            </select>
+                            <NovaSelect value={String(selectedLists[collection.id] || savedLists[0]?.id || '')} onChange={(val) => setSelectedLists((current) => ({ ...current, [collection.id]: val }))} options={savedLists.map((l) => ({ value: String(l.id), label: l.title }))} />
                             <button type="button" onClick={() => handleAddToList(collection.id)} disabled={busy === `list-${collection.id}`} className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-white/[0.07] disabled:opacity-60"><i className={`fa-solid ${busy === `list-${collection.id}` ? 'fa-circle-notch fa-spin' : 'fa-folder-plus'} fa-fw`} />Add to list</button>
                           </div>
                         ) : null}