feat: implement item detail page and form components

- Created ItemForm component with fields for all metadata (priority, due date, tags, notes)
- Created ItemDetail component to display all item information
- Built /list/[id]/item/[itemId] page for viewing full item details
- Built /list/[id]/item/[itemId]/edit page for editing items
- Added form validation for item inputs (title required, length limits)
- Created DeleteItemButton and ToggleItemButton helper components
- Enhanced createItem action to support full metadata on creation
- Added getItem action to fetch individual items with list data

Requirements: 1.1, 1.2, 5.1, 5.2, 5.3, 5.4

components/DeleteItemButton.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { deleteItem } from '@/lib/actions'
+import { Trash2 } from 'lucide-react'
+
+interface DeleteItemButtonProps {
+  itemId: string
+  listId: string
+}
+
+export default function DeleteItemButton({ itemId, listId }: DeleteItemButtonProps) {
+  const router = useRouter()
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+
+  const handleDelete = async () => {
+    setIsDeleting(true)
+    try {
+      await deleteItem(itemId)
+      router.push(`/list/${listId}`)
+    } catch (error) {
+      console.error('Error deleting item:', error)
+      setIsDeleting(false)
+      setShowConfirm(false)
+    }
+  }
+
+  if (showConfirm) {
+    return (
+      <div className="flex items-center gap-2">
+        <button
+          onClick={handleDelete}
+          disabled={isDeleting}
+          className="px-3 py-2 bg-red-500 hover:bg-red-600 disabled:bg-red-300 text-white rounded-lg text-sm transition-colors"
+        >
+          {isDeleting ? 'Deleting...' : 'Confirm'}
+        </button>
+        <button
+          onClick={() => setShowConfirm(false)}
+          disabled={isDeleting}
+          className="px-3 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-sm transition-colors"
+        >
+          Cancel
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <button
+      onClick={() => setShowConfirm(true)}
+      className="flex items-center gap-2 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors"
+    >
+      <Trash2 size={18} />
+      <span>Delete</span>
+    </button>
+  )
+}