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

app/list/[id]/item/[itemId]/edit/page.tsx

@@ -0,0 +1,41 @@
+import { notFound } from 'next/navigation'
+import { getItem } from '@/lib/actions'
+import ItemForm from '@/components/ItemForm'
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+
+interface PageProps {
+  params: {
+    id: string
+    itemId: string
+  }
+}
+
+export default async function EditItemPage({ params }: PageProps) {
+  const item = await getItem(params.itemId)
+
+  if (!item || item.listId !== params.id) {
+    notFound()
+  }
+
+  return (
+    <main className="container mx-auto px-4 py-8 max-w-2xl">
+      {/* Header */}
+      <div className="flex items-center gap-4 mb-6">
+        <Link
+          href={`/list/${params.id}/item/${params.itemId}`}
+          className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          <ArrowLeft size={20} />
+          <span>Back</span>
+        </Link>
+        <h1 className="text-2xl font-bold text-gray-900">Edit Task</h1>
+      </div>
+
+      {/* Form */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+        <ItemForm listId={params.id} item={item} mode="edit" />
+      </div>
+    </main>
+  )
+}

app/list/[id]/item/[itemId]/page.tsx

@@ -0,0 +1,54 @@
+import { notFound } from 'next/navigation'
+import { getItem } from '@/lib/actions'
+import ItemDetail from '@/components/ItemDetail'
+import Link from 'next/link'
+import { ArrowLeft, Edit, Trash2 } from 'lucide-react'
+import DeleteItemButton from '@/components/DeleteItemButton'
+import ToggleItemButton from '@/components/ToggleItemButton'
+
+interface PageProps {
+  params: {
+    id: string
+    itemId: string
+  }
+}
+
+export default async function ItemDetailPage({ params }: PageProps) {
+  const item = await getItem(params.itemId)
+
+  if (!item || item.listId !== params.id) {
+    notFound()
+  }
+
+  return (
+    <main className="container mx-auto px-4 py-8 max-w-3xl">
+      {/* Header Actions */}
+      <div className="flex items-center justify-between mb-6">
+        <Link
+          href={`/list/${params.id}`}
+          className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
+        >
+          <ArrowLeft size={20} />
+          <span>Back to List</span>
+        </Link>
+
+        <div className="flex items-center gap-2">
+          <ToggleItemButton itemId={item.id} completed={item.completed} />
+          <Link
+            href={`/list/${params.id}/item/${params.itemId}/edit`}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
+          >
+            <Edit size={18} />
+            <span>Edit</span>
+          </Link>
+          <DeleteItemButton itemId={item.id} listId={params.id} />
+        </div>
+      </div>
+
+      {/* Item Detail */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+        <ItemDetail item={item} listTitle={item.list.title} />
+      </div>
+    </main>
+  )
+}