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

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}