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/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} />