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,18 +68,20 @@ export default function ListHeader({
             <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate">{listTitle}</h1>
           </div>
           
-          <div className="flex items-center gap-2 flex-shrink-0">
-            <PermissionBadge permission={permission} />
-            {canShare && (
-              <button
-                onClick={() => setIsShareModalOpen(true)}
-                className="flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors text-sm font-medium"
-              >
-                <Share2 size={16} />
-                <span className="hidden sm:inline">Share</span>
-              </button>
-            )}
-          </div>
+          {mounted && (
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <PermissionBadge permission={permission} />
+              {canShare && (
+                <button
+                  onClick={() => setIsShareModalOpen(true)}
+                  className="flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors text-sm font-medium"
+                >
+                  <Share2 size={16} />
+                  <span className="hidden sm:inline">Share</span>
+                </button>
+              )}
+            </div>
+          )}
         </div>
         
         <p className="text-gray-600 text-sm sm:text-base">
@@ -82,17 +89,19 @@ export default function ListHeader({
         </p>
       </div>
 
-      <ShareListModal
-        isOpen={isShareModalOpen}
-        onClose={() => setIsShareModalOpen(false)}
-        listId={listId}
-        listTitle={listTitle}
-        isOwner={permission === 'owner'}
-        ownerId={ownerId}
-        ownerName={ownerName}
-        ownerEmail={ownerEmail}
-        initialCollaborators={collaborators}
-      />
+      {mounted && (
+        <ShareListModal
+          isOpen={isShareModalOpen}
+          onClose={() => setIsShareModalOpen(false)}
+          listId={listId}
+          listTitle={listTitle}
+          isOwner={permission === 'owner'}
+          ownerId={ownerId}
+          ownerName={ownerName}
+          ownerEmail={ownerEmail}
+          initialCollaborators={collaborators}
+        />
+      )}
     </>
   )
 }