Add client-side wrapper for ListDetailView to fix hydration

app/list/[id]/page.tsx

@@ -6,7 +6,7 @@ import { notFound } from 'next/navigation'
 import Link from 'next/link'
 import { ArrowLeft } from 'lucide-react'
 import InlineItemCreate from '@/components/InlineItemCreate'
-import ListDetailView from '@/components/ListDetailView'
+import ListDetailView from '@/components/ClientListDetailView'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0

components/ClientListDetailView.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const ListDetailView = dynamic(() => import('./ListDetailView'), {
+  ssr: false,
+  loading: () => <div className="animate-pulse space-y-4">
+    <div className="h-8 bg-gray-200 rounded w-1/4"></div>
+    <div className="h-10 bg-gray-200 rounded"></div>
+    <div className="space-y-2">
+      <div className="h-16 bg-gray-200 rounded"></div>
+      <div className="h-16 bg-gray-200 rounded"></div>
+      <div className="h-16 bg-gray-200 rounded"></div>
+    </div>
+  </div>
+})
+
+export default ListDetailView