Fix hydration error in ListHeader

- Add mounted state to prevent SSR/client mismatch
- Permission badge and share button only render after mount
- Modal only renders on client side

components/ListHeader.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { ArrowLeft, Share2 } from 'lucide-react'
 import PermissionBadge from './PermissionBadge'
@@ -41,8 +41,13 @@ export default function ListHeader({
   ownerEmail,
   collaborators
 }: ListHeaderProps) {
+  const [mounted, setMounted] = useState(false)
   const [isShareModalOpen, setIsShareModalOpen] = useState(false)
 
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   return (
     <>
       <div className="mb-6 sm:mb-8">
@@ -63,6 +68,7 @@ export default function ListHeader({
             <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate">{listTitle}</h1>
           </div>
           
+          {mounted && (
             <div className="flex items-center gap-2 flex-shrink-0">
               <PermissionBadge permission={permission} />
               {canShare && (
@@ -75,6 +81,7 @@ export default function ListHeader({
                 </button>
               )}
             </div>
+          )}
         </div>
         
         <p className="text-gray-600 text-sm sm:text-base">
@@ -82,6 +89,7 @@ export default function ListHeader({
         </p>
       </div>
 
+      {mounted && (
         <ShareListModal
           isOpen={isShareModalOpen}
           onClose={() => setIsShareModalOpen(false)}
@@ -93,6 +101,7 @@ export default function ListHeader({
           ownerEmail={ownerEmail}
           initialCollaborators={collaborators}
         />
+      )}
     </>
   )
 }