Add optimistic updates for immediate UI feedback

- ToggleItemButton now uses useOptimistic for instant toggle feedback
- InlineItemCreate clears form immediately before server action
- Both components call router.refresh() after mutations
- UI updates appear instantly, no waiting for server response

components/InlineItemCreate.tsx

@@ -37,16 +37,24 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
     setError('')
 
     try {
-      await createItem(listId, sanitizeString(title))
-      showToast('Task added successfully', 'success')
+      // Clear form immediately for better UX
+      const itemTitle = sanitizeString(title)
       setTitle('')
       setIsCreating(false)
+      
+      // Create item and refresh
+      await createItem(listId, itemTitle)
+      showToast('Task added successfully', 'success')
+      
+      // Force immediate refresh
       router.refresh()
     } catch (error) {
       console.error('Error creating item:', error)
       const errorMessage = error instanceof Error ? error.message : 'Failed to add task'
       setError(errorMessage)
       showToast(errorMessage, 'error')
+      // Restore form on error
+      setIsCreating(true)
     } finally {
       setIsSubmitting(false)
     }

components/ToggleItemButton.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useOptimistic } from 'react'
+import { useRouter } from 'next/navigation'
 import { toggleItem } from '@/lib/actions'
 import { CheckCircle2, Circle } from 'lucide-react'
 import { useToast } from './ToastContainer'
@@ -12,19 +13,31 @@ interface ToggleItemButtonProps {
 }
 
 export default function ToggleItemButton({ itemId, completed, variant = 'full' }: ToggleItemButtonProps) {
+  const router = useRouter()
   const { showToast } = useToast()
   const [isToggling, setIsToggling] = useState(false)
+  const [optimisticCompleted, setOptimisticCompleted] = useOptimistic(completed)
 
   const handleToggle = async (e: React.MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
+    
+    if (isToggling) return
+    
     setIsToggling(true)
+    
+    // Optimistically update UI
+    setOptimisticCompleted(!completed)
+    
     try {
       await toggleItem(itemId)
       showToast(completed ? 'Task marked incomplete' : 'Task completed', 'success')
+      router.refresh()
     } catch (error) {
       console.error('Error toggling item:', error)
       showToast('Failed to update task', 'error')
+      // Revert optimistic update on error
+      setOptimisticCompleted(completed)
     } finally {
       setIsToggling(false)
     }
@@ -36,9 +49,9 @@ export default function ToggleItemButton({ itemId, completed, variant = 'full' }
         onClick={handleToggle}
         disabled={isToggling}
         className="hover:scale-110 active:scale-95 transition-transform disabled:opacity-50 tap-target-sm"
-        aria-label={completed ? 'Mark incomplete' : 'Mark complete'}
+        aria-label={optimisticCompleted ? 'Mark incomplete' : 'Mark complete'}
       >
-        {completed ? (
+        {optimisticCompleted ? (
           <CheckCircle2 size={22} className="text-green-500" />
         ) : (
           <Circle size={22} className="text-gray-400 hover:text-gray-600 active:text-gray-700" />
@@ -53,7 +66,7 @@ export default function ToggleItemButton({ itemId, completed, variant = 'full' }
       disabled={isToggling}
       className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 disabled:bg-gray-50 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
     >
-      {completed ? (
+      {optimisticCompleted ? (
         <>
           <CheckCircle2 size={18} className="text-green-500 flex-shrink-0" />
           <span>Mark Incomplete</span>