Add real-time updates and fix delete button state

- Simplified useRealtimeSync to use router.refresh() polling
- Created RealtimeUpdater component for easy integration
- Added real-time updates to home page (3s polling)
- Fixed DeleteItemButton to properly reset state on error
- Updates now refresh every 3 seconds and on window focus
- Changes from other users/browsers will appear quickly

components/DeleteItemButton.tsx

@@ -25,6 +25,7 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D
     try {
       await deleteItem(itemId)
       showToast('Task deleted successfully', 'success')
+      setShowConfirm(false)
       if (listId) {
         router.push(`/list/${listId}`)
       } else {
@@ -33,6 +34,7 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D
     } catch (error) {
       console.error('Error deleting item:', error)
       showToast('Failed to delete task', 'error')
+    } finally {
       setIsDeleting(false)
       setShowConfirm(false)
     }

components/RealtimeUpdater.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { useRealtimeSync } from '@/hooks/useRealtimeSync'
+
+interface RealtimeUpdaterProps {
+  listId?: string
+  pollInterval?: number
+}
+
+/**
+ * Component that enables real-time updates for a page
+ * Just include this component and it will poll for updates
+ */
+export default function RealtimeUpdater({ listId, pollInterval = 3000 }: RealtimeUpdaterProps) {
+  useRealtimeSync({
+    listId,
+    enabled: true,
+    pollInterval,
+  })
+
+  return null
+}