Add client-only wrapper to eliminate hydration errors

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/ClientOnlyListDetailView'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0

components/ClientOnlyListDetailView.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import ListDetailView from './ListDetailView'
+
+interface ClientOnlyListDetailViewProps {
+  listId: string
+  initialItems: any[]
+  permission?: 'owner' | 'editor' | 'viewer'
+  canShare?: boolean
+  listTitle?: string
+  ownerId?: string
+  ownerName?: string | null
+  ownerEmail?: string
+  collaborators?: any[]
+}
+
+export default function ClientOnlyListDetailView(props: ClientOnlyListDetailViewProps) {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <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>
+    )
+  }
+
+  return <ListDetailView {...props} />
+}

components/ListDetailView.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useCallback, useMemo, useEffect } from 'react'
+import dynamic from 'next/dynamic'
 import { Share2 } from 'lucide-react'
 import ItemCard from './ItemCard'
 import SearchBar from './SearchBar'