From 270a2bd4d0c7b2329155b57d4e6f1e43649457c6 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 30 Sep 2025 10:11:44 +0200
Subject: [PATCH] feat: enhance QuickAddTask component with new UI elements -
 Replaced input fields with `FormField`, `PrioritySelector`, and
 `DateTimeInput` for improved user experience and consistency. - Integrated
 `LoadingSpinner` to indicate submission state, enhancing feedback during task
 creation. - Streamlined state management for form fields, ensuring better
 data handling.

---
 src/components/kanban/QuickAddTask.tsx | 57 +++++++++-------------
 src/components/ui/DateTimeInput.tsx    | 38 +++++++++++++++
 src/components/ui/FormField.tsx        | 67 ++++++++++++++++++++++++++
 src/components/ui/LoadingSpinner.tsx   | 32 ++++++++++++
 src/components/ui/PrioritySelector.tsx | 42 ++++++++++++++++
 5 files changed, 202 insertions(+), 34 deletions(-)
 create mode 100644 src/components/ui/DateTimeInput.tsx
 create mode 100644 src/components/ui/FormField.tsx
 create mode 100644 src/components/ui/LoadingSpinner.tsx
 create mode 100644 src/components/ui/PrioritySelector.tsx

diff --git a/src/components/kanban/QuickAddTask.tsx b/src/components/kanban/QuickAddTask.tsx
index 0bb65e6..2561a64 100644
--- a/src/components/kanban/QuickAddTask.tsx
+++ b/src/components/kanban/QuickAddTask.tsx
@@ -3,10 +3,12 @@
 import { useState, useRef, useEffect } from 'react';
 import { Card } from '@/components/ui/Card';
 import { TagInput } from '@/components/ui/TagInput';
+import { FormField } from '@/components/ui/FormField';
+import { PrioritySelector } from '@/components/ui/PrioritySelector';
+import { DateTimeInput } from '@/components/ui/DateTimeInput';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { TaskStatus, TaskPriority } from '@/lib/types';
 import { CreateTaskData } from '@/clients/tasks-client';
-import { getAllPriorities } from '@/lib/status-config';
-import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils';
 
 interface QuickAddTaskProps {
   status: TaskStatus;
@@ -133,44 +135,38 @@ export function QuickAddTask({ status, onSubmit, onCancel, swimlaneContext }: Qu
       <Card className="p-3 border-dashed border-[var(--primary)]/30 bg-[var(--card)]/50 hover:border-[var(--primary)]/50 transition-all duration-300">
       {/* Header avec titre et priorité */}
       <div className="flex items-start gap-2 mb-2 min-w-0">
-        <input
+        <FormField
           ref={titleRef}
           type="text"
           value={formData.title}
-          onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+          onChange={(value) => setFormData(prev => ({ ...prev, title: value }))}
           onKeyDown={(e) => handleKeyDown(e, 'title')}
           onFocus={() => setActiveField('title')}
           placeholder="Titre de la tâche..."
           disabled={isSubmitting}
-          className="flex-1 min-w-0 bg-transparent border-none outline-none text-[var(--foreground)] font-mono text-sm font-medium placeholder-[var(--muted-foreground)] leading-tight"
+          className="flex-1 min-w-0"
+          autoFocus
         />
         
-        {/* Indicateur de priorité */}
-        <select
-          value={formData.priority}
-          onChange={(e) => setFormData(prev => ({ ...prev, priority: e.target.value as TaskPriority }))}
+        <PrioritySelector
+          value={formData.priority || 'medium'}
+          onChange={(priority) => setFormData(prev => ({ ...prev, priority }))}
           disabled={isSubmitting}
-          className="flex-shrink-0 w-10 bg-transparent border-none outline-none text-lg text-[var(--muted-foreground)] cursor-pointer text-center"
-          title={getAllPriorities().find(p => p.key === formData.priority)?.label}
-        >
-          {getAllPriorities().map(priorityConfig => (
-            <option key={priorityConfig.key} value={priorityConfig.key}>
-              {priorityConfig.icon}
-            </option>
-          ))}
-        </select>
+          className="flex-shrink-0 w-10"
+        />
       </div>
 
       {/* Description */}
-      <textarea
-        value={formData.description}
-        onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+      <FormField
+        type="textarea"
+        value={formData.description || ''}
+        onChange={(value) => setFormData(prev => ({ ...prev, description: value }))}
         onKeyDown={(e) => handleKeyDown(e, 'description')}
         onFocus={() => setActiveField('description')}
         placeholder="Description..."
         rows={2}
         disabled={isSubmitting}
-        className="w-full bg-transparent border-none outline-none text-xs text-[var(--muted-foreground)] font-mono placeholder-[var(--muted-foreground)] resize-none mb-2"
+        className="mb-2"
       />
 
       {/* Tags */}
@@ -188,23 +184,16 @@ export function QuickAddTask({ status, onSubmit, onCancel, swimlaneContext }: Qu
       {/* Footer avec date et actions */}
       <div className="pt-2 border-t border-[var(--border)]/50">
         <div className="flex items-center justify-between text-xs min-w-0">
-          <input
-            type="datetime-local"
-            value={formData.dueDate ? formatDateForDateTimeInput(formData.dueDate) : ''}
-            onChange={(e) => setFormData(prev => ({ 
-              ...prev, 
-              dueDate: e.target.value ? parseDateTimeInput(e.target.value) : undefined 
-            }))}
+          <DateTimeInput
+            value={formData.dueDate}
+            onChange={(date) => setFormData(prev => ({ ...prev, dueDate: date }))}
             onFocus={() => setActiveField('date')}
             disabled={isSubmitting}
-            className="bg-transparent border-none outline-none text-[var(--muted-foreground)] font-mono text-xs flex-shrink min-w-0"
+            className="flex-shrink min-w-0"
           />
           
           {isSubmitting && (
-            <div className="flex items-center gap-1 text-[var(--primary)] font-mono text-xs flex-shrink-0">
-              <div className="w-3 h-3 border border-[var(--primary)] border-t-transparent rounded-full animate-spin"></div>
-              <span>...</span>
-            </div>
+            <LoadingSpinner size="sm" text="..." className="flex-shrink-0" />
           )}
         </div>
       </div>
diff --git a/src/components/ui/DateTimeInput.tsx b/src/components/ui/DateTimeInput.tsx
new file mode 100644
index 0000000..057964a
--- /dev/null
+++ b/src/components/ui/DateTimeInput.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils';
+
+interface DateTimeInputProps {
+  value?: Date;
+  onChange: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  onFocus?: () => void;
+}
+
+export function DateTimeInput({ 
+  value, 
+  onChange, 
+  placeholder,
+  disabled = false, 
+  className = '',
+  onFocus
+}: DateTimeInputProps) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value ? parseDateTimeInput(e.target.value) : undefined;
+    onChange(newValue);
+  };
+
+  return (
+    <input
+      type="datetime-local"
+      value={value ? formatDateForDateTimeInput(value) : ''}
+      onChange={handleChange}
+      onFocus={onFocus}
+      disabled={disabled}
+      placeholder={placeholder}
+      className={`bg-transparent border-none outline-none text-[var(--muted-foreground)] font-mono text-xs flex-shrink min-w-0 ${className}`}
+    />
+  );
+}
diff --git a/src/components/ui/FormField.tsx b/src/components/ui/FormField.tsx
new file mode 100644
index 0000000..b603749
--- /dev/null
+++ b/src/components/ui/FormField.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { forwardRef } from 'react';
+
+interface FormFieldProps {
+  type?: 'text' | 'textarea';
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  onFocus?: () => void;
+  rows?: number;
+  autoFocus?: boolean;
+}
+
+export const FormField = forwardRef<HTMLInputElement | HTMLTextAreaElement, FormFieldProps>(
+  ({ 
+    type = 'text', 
+    value, 
+    onChange, 
+    placeholder,
+    disabled = false, 
+    className = '',
+    onKeyDown,
+    onFocus,
+    rows = 2,
+    autoFocus = false
+  }, ref) => {
+    const baseClasses = "bg-transparent border-none outline-none font-mono placeholder-[var(--muted-foreground)]";
+    
+    if (type === 'textarea') {
+      return (
+        <textarea
+          ref={ref as React.Ref<HTMLTextAreaElement>}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          onFocus={onFocus}
+          placeholder={placeholder}
+          rows={rows}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          className={`${baseClasses} text-xs text-[var(--muted-foreground)] resize-none ${className}`}
+        />
+      );
+    }
+
+    return (
+      <input
+        ref={ref as React.Ref<HTMLInputElement>}
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={onKeyDown}
+        onFocus={onFocus}
+        placeholder={placeholder}
+        disabled={disabled}
+        autoFocus={autoFocus}
+        className={`${baseClasses} text-[var(--foreground)] text-sm font-medium leading-tight ${className}`}
+      />
+    );
+  }
+);
+
+FormField.displayName = 'FormField';
diff --git a/src/components/ui/LoadingSpinner.tsx b/src/components/ui/LoadingSpinner.tsx
new file mode 100644
index 0000000..0dbfdc7
--- /dev/null
+++ b/src/components/ui/LoadingSpinner.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  text?: string;
+}
+
+const sizeClasses = {
+  sm: 'w-3 h-3',
+  md: 'w-4 h-4',
+  lg: 'w-6 h-6'
+};
+
+const textSizeClasses = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base'
+};
+
+export function LoadingSpinner({ 
+  size = 'sm', 
+  className = '',
+  text
+}: LoadingSpinnerProps) {
+  return (
+    <div className={`flex items-center gap-1 text-[var(--primary)] font-mono ${textSizeClasses[size]} ${className}`}>
+      <div className={`${sizeClasses[size]} border border-[var(--primary)] border-t-transparent rounded-full animate-spin`}></div>
+      {text && <span>{text}</span>}
+    </div>
+  );
+}
diff --git a/src/components/ui/PrioritySelector.tsx b/src/components/ui/PrioritySelector.tsx
new file mode 100644
index 0000000..c06576d
--- /dev/null
+++ b/src/components/ui/PrioritySelector.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { TaskPriority } from '@/lib/types';
+import { getAllPriorities } from '@/lib/status-config';
+
+interface PrioritySelectorProps {
+  value: TaskPriority;
+  onChange: (priority: TaskPriority) => void;
+  disabled?: boolean;
+  className?: string;
+  title?: string;
+}
+
+export function PrioritySelector({ 
+  value, 
+  onChange, 
+  disabled = false, 
+  className = '',
+  title
+}: PrioritySelectorProps) {
+  const priorities = getAllPriorities();
+  const currentPriority = priorities.find(p => p.key === value);
+
+  return (
+    <select
+      value={value}
+      onChange={(e) => {
+        const selectedValue = e.target.value as TaskPriority;
+        if (selectedValue) onChange(selectedValue);
+      }}
+      disabled={disabled}
+      className={`bg-transparent border-none outline-none text-lg text-[var(--muted-foreground)] cursor-pointer text-center ${className}`}
+      title={title || currentPriority?.label}
+    >
+      {priorities.map(priorityConfig => (
+        <option key={priorityConfig.key} value={priorityConfig.key}>
+          {priorityConfig.icon}
+        </option>
+      ))}
+    </select>
+  );
+}