From 89e3ac22fbd57ee411dada253559221d5485c450 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 01:13:01 +0000
Subject: [PATCH] Fix hydration error in PermissionBadge component

---
 components/PermissionBadge.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/components/PermissionBadge.tsx b/components/PermissionBadge.tsx
index b0043d4..6c76b7d 100644
--- a/components/PermissionBadge.tsx
+++ b/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