Fix edit mode toggle

app/dashboard/sites/[siteId]/SitePage.tsx

@@ -61,7 +61,7 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
                       </button>
                     </>
                   )}
-                  <EditModeToggle onToggle={setIsEditMode} />
+                  <EditModeToggle toggle={setIsEditMode} isActive={isEditMode} />
                 </div>
               </div>
               

components/EditModeToggle.tsx

@@ -1,26 +1,30 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
-import { Pencil, Eye } from "lucide-react"
 
 interface EditModeToggleProps {
   className?: string
-  onToggle?: (isEditMode: boolean) => void
+  toggle?: (isEditMode: boolean) => void
+  isActive?: boolean
 }
 
-export function EditModeToggle({ className, onToggle }: EditModeToggleProps) {
+export function EditModeToggle({ className, toggle, isActive }: EditModeToggleProps) {
-  const [isEditMode, setIsEditMode] = useState(false)
+  const [isEditMode, setIsEditMode] = useState(isActive ?? false);
+  
+  useEffect(() => {
+    setIsEditMode(isActive ?? false);
+  }, [isActive]);
 
   const handleToggle = () => {
-    const newMode = !isEditMode
+    const newMode = !isEditMode;
-    setIsEditMode(newMode)
+    setIsEditMode(newMode);
-    onToggle?.(newMode)
+    toggle?.(newMode);
-  }
+  };
 
   return (
     <div className={`flex items-center gap-2 ${className}`}>
       <input type="checkbox" onChange={handleToggle} checked={isEditMode} className="toggle toggle-xs" />
       <label htmlFor="toggle" className="label-text">Edit Mode</label>
     </div>
-  )
+  );
 }