smart smart method by google gemini

components/FriendsOnlineSection.tsx

@@ -3,6 +3,8 @@ import { useFriendsHome } from "@/hooks/roblox/useFriendsHome";
 import LazyLoadedImage from "./lazyLoadedImage";
 import React from "react";
 import { VerifiedIcon } from "./RobloxIcons";
+import { useFriendsPresence } from "@/hooks/roblox/usePresence";
+import { StupidHoverThing } from "./MiscStuff";
 
 export function FriendsHomeSect(
 	props: React.DetailedHTMLProps<
@@ -12,6 +14,9 @@ export function FriendsHomeSect(
 ) {
 	const friends = useFriendsHome();
 	const acct = useCurrentAccount();
+	const presence = useFriendsPresence(
+		(!!friends ? friends : []).map((f) => f.id)
+	);
 
 	if (!friends) {
 		return <></>;
@@ -19,35 +24,93 @@ export function FriendsHomeSect(
 
 	return (
 		<div {...props}>
+			{/* <button onClick={()=>console.log(acct,presence,friends)}>debug</button> */}
 			<h1 className="text-2xl pb-2 pl-4">Friends</h1>
-			<div className="bg-base p-4 rounded-xl flex flex-col gap-2 px-4">
+			<div className="bg-base p-4 rounded-xl flex flex-col gap-2 px-4 no-scrollbar">
 				<div
-					className="flex items-center gap-4 overflow-x-auto pb-2 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
+					className="flex items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar pb-2 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
 					style={{
 						scrollSnapType: "x mandatory",
-						WebkitOverflowScrolling: "touch"
+						WebkitOverflowScrolling: "touch",
+						scrollbarWidth: "none"
 					}}
 				>
 					<div className="w-8" />
-					{friends.map((a) => (
-						<div
-							key={a.id}
-							className="flex flex-col items-center min-w-[6.5rem]"
-							// style={{ scrollSnapAlign: "start" }}
-						>
-							<LazyLoadedImage
-								imgId={`AvatarHeadShot_${a.id}`}
-								alt={a.name}
-								className="w-24 h-24 rounded-full border-2 border-surface2 object-cover shadow"
-							/>
-							<span className="truncate text-xs text-text mt-1 text-center flex items-center justify-center gap-1">
-								{a.displayName || a.name}
-								{a.hasVerifiedBadge ? null : (
-									<VerifiedIcon className="text-base fill-blue w-3 h-3" />
-								)}
-							</span>
-						</div>
-					))}
+					{friends.map((a) => {
+						const userStatus = presence.find(
+							(b) => b.userId === a.id
+						);
+						const userPresence = userStatus?.userPresenceType || 0;
+						const borderColor =
+							userPresence === 1
+								? "border-blue bg-blue/50"
+								: userPresence === 2
+								? "border-green bg-green/50"
+								: userPresence === 3
+								? "border-yellow bg-yellow/50"
+								: userPresence === 0
+								? "border-surface2 bg-surface2/50"
+								: "border-red bg-red/50";
+						const textColor =
+							userPresence === 1
+								? "text-blue"
+								: userPresence === 2
+								? "text-green"
+								: userPresence === 3
+								? "text-yellow"
+								: userPresence === 0
+								? "text-surface2"
+								: "text-red";
+						const fillColor =
+							userPresence === 1
+								? "fill-blue"
+								: userPresence === 2
+								? "fill-green"
+								: userPresence === 3
+								? "fill-yellow"
+								: userPresence === 0
+								? "fill-surface2"
+								: "fill-red";
+
+						return (
+							<div
+								key={a.id}
+								className="flex flex-col min-w-[6.5rem]"
+							>
+								<LazyLoadedImage
+									imgId={`AvatarHeadShot_${a.id}`}
+									alt={a.name}
+									className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
+								/>
+								<span
+									className={`text-xs ${textColor} mt-1 text-center flex items-center justify-center gap-1 max-w-[6.5rem] overflow-hidden line-clamp-2`}
+								>
+									<StupidHoverThing
+										text={
+											<span className="space-x-1 flex items-center">
+												<p>{a.displayName || a.name}</p>
+												{!a.hasVerifiedBadge ? (
+													<VerifiedIcon
+														useDefault
+														className={`w-4 h-4 shrink-0`}
+													/>
+												) : null}
+											</span>
+										}
+									>
+										<span className="line-clamp-1 overflow-hidden text-ellipsis">
+											{a.displayName || a.name}
+										</span>
+									</StupidHoverThing>
+									{!a.hasVerifiedBadge ? (
+										<VerifiedIcon
+											className={`text-base ${fillColor} w-3 h-3 shrink-0`}
+										/>
+									) : null}
+								</span>
+							</div>
+						);
+					})}
 					<div className="w-8" />
 				</div>
 			</div>