fixxxxxxxx

components/site/HomeUserHeader.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import LazyLoadedImage from "../util/LazyLoadedImage";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import { OctagonXIcon } from "lucide-react";
@@ -15,6 +15,7 @@ import { useAccountSettings } from "@/hooks/roblox/useAccountSettings";
 import { loadThumbnails } from "@/lib/thumbnailLoader";
 import { toast } from "sonner";
 import Link from "next/link";
+import { Button } from "../ui/button";
 
 // chatgpt + human
 function randomGreeting(name: string): string {
@@ -27,6 +28,15 @@ function randomGreeting(name: string): string {
 export function HomeLoggedInHeader() {
 	const profile = useCurrentAccount();
 	const accountSettings = useAccountSettings();
+	const [preferredName, setPreferredName] = useState<string | null>(null);
+	const profileId = profile ? profile.id : undefined;
+	const presence = useFriendsPresence(profileId ? [profileId] : []);
+
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const storedName = window.localStorage.getItem("UserPreferredName");
+		if (storedName) setPreferredName(storedName);
+	}, []);
 
 	if (profile === false) {
 		return (
@@ -43,8 +53,6 @@ export function HomeLoggedInHeader() {
 		);
 	}
 
-	const presence = useFriendsPresence(profile ? [profile.id] : []);
-
 	const userActivity = presence.find((b) => b.userId === profile?.id);
 	const userPresence = userActivity?.userPresenceType;
 	const borderColor =
@@ -94,7 +102,7 @@ export function HomeLoggedInHeader() {
 						{isLoaded ? (
 							<Link href={`/users/${profile.id}`}>
 								{randomGreeting(
-									window.localStorage.UserPreferredName ||
+									preferredName ||
 										profile.displayName ||
 										"Robloxian!"
 								)}