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

.kiro/specs/ultimate-lists-app/tasks.md

@@ -100,7 +100,7 @@
   - **Property 7: List retrieval completeness**
   - **Validates: Requirements 2.2**
 
-- [ ] 7. Build list detail page with item management
+- [x] 7. Build list detail page with item management
   - Create /list/[id] page showing all items in a list
   - Add ItemCard component with completion toggle, priority badge, and due date display
   - Implement inline item creation

app/list/[id]/page.tsx

@@ -0,0 +1,88 @@
+import { getListWithItems } from '@/lib/actions'
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { ArrowLeft, Plus } from 'lucide-react'
+import ItemCard from '@/components/ItemCard'
+import InlineItemCreate from '@/components/InlineItemCreate'
+
+export default async function ListDetailPage({ params }: { params: { id: string } }) {
+  const list = await getListWithItems(params.id)
+
+  if (!list) {
+    notFound()
+  }
+
+  const completedItems = list.items.filter(item => item.completed)
+  const incompleteItems = list.items.filter(item => !item.completed)
+
+  return (
+    <main className="container mx-auto px-4 py-8 max-w-4xl">
+      {/* Header */}
+      <div className="mb-8">
+        <Link 
+          href="/" 
+          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition-colors"
+        >
+          <ArrowLeft size={20} />
+          <span>Back to Lists</span>
+        </Link>
+        
+        <div className="flex items-center gap-3 mb-2">
+          <div 
+            className="w-6 h-6 rounded-full flex-shrink-0" 
+            style={{ backgroundColor: list.color }}
+          />
+          <h1 className="text-3xl font-bold text-gray-900">{list.title}</h1>
+        </div>
+        
+        <p className="text-gray-600">
+          {completedItems.length} of {list.items.length} tasks completed
+        </p>
+      </div>
+
+      {/* Inline Item Creation */}
+      <div className="mb-6">
+        <InlineItemCreate listId={list.id} />
+      </div>
+
+      {/* Items List */}
+      <div className="space-y-6">
+        {/* Incomplete Items */}
+        {incompleteItems.length > 0 && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 mb-3">
+              To Do ({incompleteItems.length})
+            </h2>
+            <div className="space-y-2">
+              {incompleteItems.map((item) => (
+                <ItemCard key={item.id} item={item} listId={list.id} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Completed Items */}
+        {completedItems.length > 0 && (
+          <div>
+            <h2 className="text-lg font-semibold text-gray-500 mb-3">
+              Completed ({completedItems.length})
+            </h2>
+            <div className="space-y-2">
+              {completedItems.map((item) => (
+                <ItemCard key={item.id} item={item} listId={list.id} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {list.items.length === 0 && (
+          <div className="text-center py-12 bg-gray-50 rounded-lg">
+            <p className="text-gray-500 text-lg mb-2">No tasks yet</p>
+            <p className="text-gray-400">Add your first task to get started</p>
+          </div>
+        )}
+      </div>
+    </main>
+  )
+}

components/DeleteItemButton.tsx

@@ -7,19 +7,26 @@ import { Trash2 } from 'lucide-react'
 
 interface DeleteItemButtonProps {
   itemId: string
-  listId: string
+  listId?: string
+  variant?: 'full' | 'icon'
 }
 
-export default function DeleteItemButton({ itemId, listId }: DeleteItemButtonProps) {
+export default function DeleteItemButton({ itemId, listId, variant = 'full' }: DeleteItemButtonProps) {
   const router = useRouter()
   const [isDeleting, setIsDeleting] = useState(false)
   const [showConfirm, setShowConfirm] = useState(false)
 
-  const handleDelete = async () => {
+  const handleDelete = async (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
     setIsDeleting(true)
     try {
       await deleteItem(itemId)
-      router.push(`/list/${listId}`)
+      if (listId) {
+        router.push(`/list/${listId}`)
+      } else {
+        router.refresh()
+      }
     } catch (error) {
       console.error('Error deleting item:', error)
       setIsDeleting(false)
@@ -27,6 +34,18 @@ export default function DeleteItemButton({ itemId, listId }: DeleteItemButtonPro
     }
   }
 
+  const handleShowConfirm = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setShowConfirm(true)
+  }
+
+  const handleCancel = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setShowConfirm(false)
+  }
+
   if (showConfirm) {
     return (
       <div className="flex items-center gap-2">
@@ -38,7 +57,7 @@ export default function DeleteItemButton({ itemId, listId }: DeleteItemButtonPro
           {isDeleting ? 'Deleting...' : 'Confirm'}
         </button>
         <button
-          onClick={() => setShowConfirm(false)}
+          onClick={handleCancel}
           disabled={isDeleting}
           className="px-3 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-sm transition-colors"
         >
@@ -48,9 +67,21 @@ export default function DeleteItemButton({ itemId, listId }: DeleteItemButtonPro
     )
   }
 
+  if (variant === 'icon') {
+    return (
+      <button
+        onClick={handleShowConfirm}
+        className="text-gray-400 hover:text-red-600 transition-colors p-2 hover:bg-red-50 rounded-lg"
+        aria-label="Delete item"
+      >
+        <Trash2 size={18} />
+      </button>
+    )
+  }
+
   return (
     <button
-      onClick={() => setShowConfirm(true)}
+      onClick={handleShowConfirm}
       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} />

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>
+  )
+}

components/ItemCard.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { Calendar, Tag, AlertCircle, Trash2 } from 'lucide-react'
+import ToggleItemButton from './ToggleItemButton'
+import DeleteItemButton from './DeleteItemButton'
+
+interface ItemCardProps {
+  item: {
+    id: string
+    title: string
+    description: string | null
+    completed: boolean
+    priority: string
+    dueDate: Date | null
+    tags: any
+    notes: string | null
+  }
+  listId: string
+}
+
+export default function ItemCard({ item, listId }: ItemCardProps) {
+  const tags = Array.isArray(item.tags) ? item.tags : []
+  const isOverdue = item.dueDate && new Date(item.dueDate) < new Date() && !item.completed
+
+  const priorityColors = {
+    low: 'bg-green-100 text-green-700 border-green-200',
+    medium: 'bg-yellow-100 text-yellow-700 border-yellow-200',
+    high: 'bg-red-100 text-red-700 border-red-200',
+  }
+
+  const priorityColor = priorityColors[item.priority as keyof typeof priorityColors] || priorityColors.medium
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow group">
+      <div className="flex items-start gap-3">
+        {/* Completion Toggle */}
+        <div className="pt-1">
+          <ToggleItemButton itemId={item.id} completed={item.completed} variant="icon" />
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <Link href={`/list/${listId}/item/${item.id}`} className="block">
+            <h3 className={`font-medium mb-1 ${
+              item.completed ? 'text-gray-500 line-through' : 'text-gray-900'
+            }`}>
+              {item.title}
+            </h3>
+            
+            {item.description && (
+              <p className={`text-sm mb-2 line-clamp-2 ${
+                item.completed ? 'text-gray-400' : 'text-gray-600'
+              }`}>
+                {item.description}
+              </p>
+            )}
+
+            {/* Metadata */}
+            <div className="flex flex-wrap items-center gap-2 mt-2">
+              {/* Priority Badge */}
+              <span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium border ${priorityColor}`}>
+                <AlertCircle size={12} />
+                {item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}
+              </span>
+
+              {/* Due Date */}
+              {item.dueDate && (
+                <span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs ${
+                  isOverdue 
+                    ? 'bg-red-100 text-red-700 border border-red-200 font-semibold' 
+                    : 'bg-gray-100 text-gray-700'
+                }`}>
+                  <Calendar size={12} />
+                  {new Date(item.dueDate).toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                  })}
+                  {isOverdue && ' (Overdue)'}
+                </span>
+              )}
+
+              {/* Tags */}
+              {tags.length > 0 && (
+                <div className="inline-flex items-center gap-1">
+                  <Tag size={12} className="text-gray-400" />
+                  <span className="text-xs text-gray-600">
+                    {tags.slice(0, 2).join(', ')}
+                    {tags.length > 2 && ` +${tags.length - 2}`}
+                  </span>
+                </div>
+              )}
+            </div>
+          </Link>
+        </div>
+
+        {/* Delete Button */}
+        <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+          <DeleteItemButton itemId={item.id} variant="icon" />
+        </div>
+      </div>
+    </div>
+  )
+}

components/ToggleItemButton.tsx

@@ -7,12 +7,15 @@ import { CheckCircle2, Circle } from 'lucide-react'
 interface ToggleItemButtonProps {
   itemId: string
   completed: boolean
+  variant?: 'full' | 'icon'
 }
 
-export default function ToggleItemButton({ itemId, completed }: ToggleItemButtonProps) {
+export default function ToggleItemButton({ itemId, completed, variant = 'full' }: ToggleItemButtonProps) {
   const [isToggling, setIsToggling] = useState(false)
 
-  const handleToggle = async () => {
+  const handleToggle = async (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
     setIsToggling(true)
     try {
       await toggleItem(itemId)
@@ -23,6 +26,23 @@ export default function ToggleItemButton({ itemId, completed }: ToggleItemButton
     }
   }
 
+  if (variant === 'icon') {
+    return (
+      <button
+        onClick={handleToggle}
+        disabled={isToggling}
+        className="hover:scale-110 transition-transform disabled:opacity-50"
+        aria-label={completed ? 'Mark incomplete' : 'Mark complete'}
+      >
+        {completed ? (
+          <CheckCircle2 size={20} className="text-green-500" />
+        ) : (
+          <Circle size={20} className="text-gray-400 hover:text-gray-600" />
+        )}
+      </button>
+    )
+  }
+
   return (
     <button
       onClick={handleToggle}