Replace native selects with NovaSelect

resources/js/Layouts/SettingsLayout.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Link, usePage } from '@inertiajs/react'
+import NovaSelect from '../components/ui/NovaSelect'
 
 const navItems = [
   { label: 'Profile',       href: '/dashboard/profile',   icon: 'fa-solid fa-user' },
@@ -110,20 +111,16 @@ export default function SettingsLayout({ children, title, sections = null, activ
       <div className="lg:hidden px-4 py-3 border-b border-white/10 bg-nova-900/80 backdrop-blur-xl sticky top-16 z-30">
         {hasSectionMode ? (
           <div className="flex items-center gap-2">
-            <label className="block flex-1">
+            <div className="block flex-1">
               <span className="sr-only">Settings section</span>
-              <select
-                className="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-white focus:outline-none focus:ring-2 focus:ring-accent/50 appearance-none"
+              <NovaSelect
+                className="w-full"
                 value={activeSection || ''}
-                onChange={(e) => onSectionChange(e.target.value)}
-              >
-                {sections.map((section) => (
-                  <option key={section.key} value={section.key} className="bg-nova-900 text-white">
-                    {section.label}{dirtyMap[section.key] ? ' •' : ''}
-                  </option>
-                ))}
-              </select>
-            </label>
+                onChange={(value) => onSectionChange(value)}
+                options={sections.map((section) => ({ value: section.key, label: `${section.label}${dirtyMap[section.key] ? ' •' : ''}` }))}
+                searchable={false}
+              />
+            </div>
             {dirtyMap[activeSection] ? (
               <span className="inline-flex items-center rounded-full bg-amber-400/15 px-2 py-1 text-[10px] font-semibold text-amber-300 border border-amber-400/20">
                 Unsaved