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

lib/actions.ts

@@ -38,12 +38,35 @@ export async function getListWithItems(listId: string) {
   })
 }
 
-export async function createItem(listId: string, title: string, description?: string) {
+export async function getItem(itemId: string) {
+  return await prisma.item.findUnique({
+    where: { id: itemId },
+    include: {
+      list: true,
+    },
+  })
+}
+
+export async function createItem(
+  listId: string,
+  title: string,
+  description?: string,
+  metadata?: {
+    priority?: 'low' | 'medium' | 'high'
+    dueDate?: Date | null
+    tags?: string[]
+    notes?: string | null
+  }
+) {
   const item = await prisma.item.create({
     data: {
       title,
       description,
       listId,
+      ...(metadata?.priority && { priority: metadata.priority }),
+      ...(metadata?.dueDate !== undefined && { dueDate: metadata.dueDate }),
+      ...(metadata?.tags && { tags: metadata.tags }),
+      ...(metadata?.notes !== undefined && { notes: metadata.notes }),
     },
   })
   revalidatePath(`/list/${listId}`)