feat: implement list detail page with item management

- Created /list/[id] page showing all items in a list
- Added ItemCard component with completion toggle, priority badge, and due date display
- Implemented InlineItemCreate component for quick task creation
- Enhanced ToggleItemButton with icon variant for compact display
- Enhanced DeleteItemButton with icon variant and improved event handling
- Added overdue indicators for past due dates
- Organized items into 'To Do' and 'Completed' sections
- Implemented empty state for lists with no tasks

Requirements: 1.3, 1.5, 2.3, 5.5

components/InlineItemCreate.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { createItem } from '@/lib/actions'
+import { Plus } from 'lucide-react'
+
+interface InlineItemCreateProps {
+  listId: string
+}
+
+export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
+  const router = useRouter()
+  const [isCreating, setIsCreating] = useState(false)
+  const [title, setTitle] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!title.trim() || isSubmitting) {
+      return
+    }
+
+    setIsSubmitting(true)
+
+    try {
+      await createItem(listId, title.trim())
+      setTitle('')
+      setIsCreating(false)
+      router.refresh()
+    } catch (error) {
+      console.error('Error creating item:', error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleCancel = () => {
+    setTitle('')
+    setIsCreating(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      handleCancel()
+    }
+  }
+
+  if (!isCreating) {
+    return (
+      <button
+        onClick={() => setIsCreating(true)}
+        className="w-full flex items-center gap-2 px-4 py-3 bg-white border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-blue-400 hover:text-blue-600 transition-colors"
+      >
+        <Plus size={20} />
+        <span>Add a task</span>
+      </button>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4">
+      <input
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Enter task title..."
+        autoFocus
+        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3"
+      />
+      <div className="flex gap-2">
+        <button
+          type="submit"
+          disabled={!title.trim() || isSubmitting}
+          className="px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white rounded-lg transition-colors text-sm"
+        >
+          {isSubmitting ? 'Adding...' : 'Add Task'}
+        </button>
+        <button
+          type="button"
+          onClick={handleCancel}
+          className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition-colors text-sm"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}