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/ToggleItemButton.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState } from 'react'
+import { toggleItem } from '@/lib/actions'
+import { CheckCircle2, Circle } from 'lucide-react'
+
+interface ToggleItemButtonProps {
+  itemId: string
+  completed: boolean
+}
+
+export default function ToggleItemButton({ itemId, completed }: ToggleItemButtonProps) {
+  const [isToggling, setIsToggling] = useState(false)
+
+  const handleToggle = async () => {
+    setIsToggling(true)
+    try {
+      await toggleItem(itemId)
+    } catch (error) {
+      console.error('Error toggling item:', error)
+    } finally {
+      setIsToggling(false)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleToggle}
+      disabled={isToggling}
+      className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 text-gray-700 rounded-lg transition-colors"
+    >
+      {completed ? (
+        <>
+          <CheckCircle2 size={18} className="text-green-500" />
+          <span>Mark Incomplete</span>
+        </>
+      ) : (
+        <>
+          <Circle size={18} />
+          <span>Mark Complete</span>
+        </>
+      )}
+    </button>
+  )
+}