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

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