From ea8e770c578a202f5ed4db148d5d1a01a803fe29 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 01:15:04 +0000
Subject: [PATCH] Remove mounted state check to fix hydration error

---
 components/ListDetailView.tsx  |  2 +-
 components/PermissionBadge.tsx | 15 ---------------
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/components/ListDetailView.tsx b/components/ListDetailView.tsx
index f9ed84f..090d25d 100644
--- a/components/ListDetailView.tsx
+++ b/components/ListDetailView.tsx
@@ -162,7 +162,7 @@ export default function ListDetailView({
   return (
     <div className="space-y-6">
       {/* Permission Badge and Share Button */}
-      {mounted && (permission || canShare) && (
+      {(permission || canShare) && (
         <div className="flex items-center gap-2">
           {permission && <PermissionBadge permission={permission} />}
           {canShare && (
diff --git a/components/PermissionBadge.tsx b/components/PermissionBadge.tsx
index 6c76b7d..b0043d4 100644
--- a/components/PermissionBadge.tsx
+++ b/components/PermissionBadge.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { Shield, Eye, Edit3 } from 'lucide-react'
-import { useEffect, useState } from 'react'
 
 type Permission = 'owner' | 'editor' | 'viewer'
 
@@ -11,12 +10,6 @@ interface PermissionBadgeProps {
 }
 
 export default function PermissionBadge({ permission, size = 'md' }: PermissionBadgeProps) {
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
   const config = {
     owner: {
       icon: Shield,
@@ -35,14 +28,6 @@ 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