feat: Add comprehensive input validation

- Created lib/validation.ts with validation utilities for all form inputs
- Added validation for list titles, item titles, colors, dates, tags, descriptions, and notes
- Implemented inline validation with real-time error feedback in ListForm
- Enhanced ItemForm with comprehensive validation for all fields
- Updated InlineItemCreate with validation
- Added input sanitization to prevent XSS attacks
- Updated server actions to use validation utilities
- Added maxLength attributes to prevent excessive input
- Improved accessibility with aria-invalid and aria-describedby attributes
- Added visual feedback for validation errors with red borders
- Validates Requirements 1.1 and 2.1

components/InlineItemCreate.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
 import { createItem } from '@/lib/actions'
 import { Plus } from 'lucide-react'
 import { useToast } from './ToastContainer'
+import { validateItemTitle, sanitizeString } from '@/lib/validation'
 
 interface InlineItemCreateProps {
   listId: string
@@ -16,25 +17,36 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
   const [isCreating, setIsCreating] = useState(false)
   const [title, setTitle] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState('')
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     
-    if (!title.trim() || isSubmitting) {
+    // Validate title
+    const validationResult = validateItemTitle(title)
+    if (!validationResult.isValid) {
+      setError(validationResult.error || 'Invalid title')
+      return
+    }
+
+    if (isSubmitting) {
       return
     }
 
     setIsSubmitting(true)
+    setError('')
 
     try {
-      await createItem(listId, title.trim())
+      await createItem(listId, sanitizeString(title))
       showToast('Task added successfully', 'success')
       setTitle('')
       setIsCreating(false)
       router.refresh()
     } catch (error) {
       console.error('Error creating item:', error)
-      showToast('Failed to add task', 'error')
+      const errorMessage = error instanceof Error ? error.message : 'Failed to add task'
+      setError(errorMessage)
+      showToast(errorMessage, 'error')
     } finally {
       setIsSubmitting(false)
     }
@@ -65,15 +77,30 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
 
   return (
     <form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4 sm:p-5 shadow-sm">
-      <input
-        type="text"
-        value={title}
-        onChange={(e) => setTitle(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="Enter task title..."
-        autoFocus
-        className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3 sm:mb-4 text-sm sm:text-base"
-      />
+      <div className="mb-3 sm:mb-4">
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => {
+            setTitle(e.target.value)
+            setError('')
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder="Enter task title..."
+          autoFocus
+          maxLength={200}
+          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
+            error ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'
+          }`}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={error ? 'inline-title-error' : undefined}
+        />
+        {error && (
+          <p id="inline-title-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
+            {error}
+          </p>
+        )}
+      </div>
       <div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3">
         <button
           type="button"