WIP: Améliorations UX et corrections de bugs avant création des épiques

keep-notes/components/settings/SettingSelect.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useState } from 'react'
+import { Label } from '@/components/ui/label'
+import { Loader2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+
+interface SelectOption {
+  value: string
+  label: string
+  description?: string
+}
+
+interface SettingSelectProps {
+  label: string
+  description?: string
+  value: string
+  options: SelectOption[]
+  onChange: (value: string) => Promise<void>
+  disabled?: boolean
+}
+
+export function SettingSelect({
+  label,
+  description,
+  value,
+  options,
+  onChange,
+  disabled
+}: SettingSelectProps) {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleChange = async (newValue: string) => {
+    setIsLoading(true)
+
+    try {
+      await onChange(newValue)
+      toast.success('Setting saved', {
+        description: `${label} has been updated`
+      })
+    } catch (err) {
+      console.error('Error updating setting:', err)
+      toast.error('Failed to save setting', {
+        description: 'Please try again'
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className={cn('py-4', 'border-b last:border-0 dark:border-gray-800')}>
+      <Label className="font-medium text-gray-900 dark:text-gray-100 block mb-1">
+        {label}
+      </Label>
+      {description && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+          {description}
+        </p>
+      )}
+      <div className="relative">
+        <select
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          disabled={disabled || isLoading}
+          className={cn(
+            'w-full px-3 py-2 border rounded-lg',
+            'focus:ring-2 focus:ring-primary-500 focus:border-transparent',
+            'disabled:opacity-50 disabled:cursor-not-allowed',
+            'appearance-none bg-white dark:bg-gray-900',
+            'border-gray-300 dark:border-gray-700',
+            'text-gray-900 dark:text-gray-100'
+          )}
+        >
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {isLoading && (
+          <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-500" />
+        )}
+      </div>
+    </div>
+  )
+}