Fix hydration error in PermissionBadge component

components/PermissionBadge.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Shield, Eye, Edit3 } from 'lucide-react'
+import { useEffect, useState } from 'react'
 
 type Permission = 'owner' | 'editor' | 'viewer'
 
@@ -10,6 +11,12 @@ interface PermissionBadgeProps {
 }
 
 export default function PermissionBadge({ permission, size = 'md' }: PermissionBadgeProps) {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   const config = {
     owner: {
       icon: Shield,
@@ -28,6 +35,14 @@ export default function PermissionBadge({ permission, size = 'md' }: PermissionB
     },
   }
 
+  if (!mounted) {
+    return (
+      <span className={`inline-flex items-center gap-1.5 rounded-full border font-medium bg-gray-100 text-gray-700 border-gray-200 ${size === 'sm' ? 'text-xs px-2 py-1' : 'text-sm px-3 py-1.5'}`}>
+        Loading...
+      </span>
+    )
+  }
+
   const { icon: Icon, label, className } = config[permission]
   const sizeClasses = size === 'sm' ? 'text-xs px-2 py-1' : 'text-sm px-3 py-1.5'
   const iconSize = size === 'sm' ? 12 : 14