hello new update

components/RobloxIcons.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const PremiumIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 16 16"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path">
+        <path
+          d="M14,14V2H2V16a2,2,0,0,1-2-2V2A2,2,0,0,1,2,0H14a2,2,0,0,1,2,2V14a2,2,0,0,1-2,2H8V14ZM12,6v6H8V10h2V6H6V16H4V4h8Z"
+        />
+      </clipPath>
+    </defs>
+    <title>premium_small</title>
+    <g id="premium">
+      <g clipPath="url(#clip-path)">
+        <rect x="-5" y="-5" width="26" height="26" fill="currentColor" />
+      </g>
+    </g>
+  </svg>
+);
+
+export default PremiumIcon;

components/gameCard.tsx

@@ -1,14 +1,16 @@
-import { useThumbnailLazyLoad } from "@/hooks/use-lazy-load";
+"use client";
+
 import { ContentMetadata } from "@/lib/omniRecommendation";
 import LazyLoadedImage from "./lazyLoadedImage";
 import { ContextMenu, ContextMenuContent, ContextMenuSeparator, ContextMenuTrigger } from "./ui/context-menu";
 import { ContextMenuItem } from "@radix-ui/react-context-menu";
+import React from "react";
 
 interface GameCardProps {
 	game: ContentMetadata;
 }
 
-export function GameCard({ game }: GameCardProps) {
+export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
 	return (
 		<ContextMenu>
 			<ContextMenuTrigger>
@@ -22,43 +24,37 @@ export function GameCard({ game }: GameCardProps) {
 							/>
 						) : (
 							<div className="w-full h-full flex items-center justify-center bg-muted">
-								<span className="text-muted-foreground">No image</span>
+								<span className="text-muted-foreground">{":("}</span>
 							</div>
 						)}
 					</div>
-					<div className="bg-muted-foreground flex right-2 bottom-2 absolute rounded-lg p-1 py-0">
+					<div className="bg-base flex right-2 bottom-2 absolute rounded-lg p-1 py-0">
 						{game.playerCount.toLocaleString()}
 					</div>
 				</div>
 			</ContextMenuTrigger>
-			<ContextMenuContent className="w-64">
+			<ContextMenuContent className="w-64 p-2 space-y-1">
 				<ContextMenuItem disabled className="text-xs text-muted-foreground">
 					{game.name}
 				</ContextMenuItem>
 				<ContextMenuItem disabled className="text-xs text-muted-foreground">
-					{Math.round((game.totalUpVotes/(game.totalUpVotes+game.totalDownVotes))*100)}% rating - {game.playerCount} players
+					{Math.round((game.totalUpVotes/(game.totalUpVotes+game.totalDownVotes))*100)}% rating - {game.playerCount.toLocaleString()} playing
 				</ContextMenuItem>
 				<ContextMenuSeparator/>
-				<ContextMenuItem onClick={()=>{window.location.href = (`https://roblox.com/games/${game.rootPlaceId}`)}}>
-					Open
+				<ContextMenuItem>
+					<a href={`https://roblox.com/games/${game.rootPlaceId}`}>Open URL</a>
 				</ContextMenuItem>
 				<ContextMenuItem onClick={()=>{window.location.href = (`roblox://placeId=${game.rootPlaceId}`)}}>
 					Play
 				</ContextMenuItem>
 				<ContextMenuSeparator/>
-				<ContextMenuItem onClick={()=>{navigator.clipboard.writeText(`https://roblox.com/games/${game.rootPlaceId}`)}}>
-					copy game url
-				</ContextMenuItem>
 				<ContextMenuItem onClick={()=>{navigator.clipboard.writeText(`${game.rootPlaceId}`)}}>
-					copy game id
+					Copy rootPlaceId
 				</ContextMenuItem>
 				<ContextMenuItem onClick={()=>{navigator.clipboard.writeText(`${game.universeId}`)}}>
-					copy universe id
-				</ContextMenuItem>
-				<ContextMenuItem onClick={()=>{navigator.clipboard.writeText(`roblox://placeId=${game.rootPlaceId}`)}}>
-					copy roblox:// uri
+					Copy universeId
 				</ContextMenuItem>
 			</ContextMenuContent>
 		</ContextMenu>
 	);
-}
+});

components/lazyLoadedImage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { useThumbnailLazyLoad } from '@/hooks/use-lazy-load';
+import { useThumbnailURL } from '@/hooks/use-lazy-load';
+import { Skeleton } from './ui/skeleton';
 
 interface LazyLoadedImageProps {
 	imgId: string;
@@ -7,15 +8,19 @@ interface LazyLoadedImageProps {
 	[prop: string]: string
 }
 
-const LazyLoadedImage: React.FC<LazyLoadedImageProps> = ({ imgId, alt, ...props }: LazyLoadedImageProps) => {
-	const imgUrl = useThumbnailLazyLoad(imgId);
+const LazyLoadedImage: React.FC<React.ImgHTMLAttributes<HTMLImageElement> & LazyLoadedImageProps> = ({
+	imgId,
+	alt,
+	...props
+}) => {
+	const imgUrl = useThumbnailURL(imgId);
 
 	return (
 		<div>
 			{imgUrl ? (
 				<img src={imgUrl} alt={alt} {...props} />
 			) : (
-				<p>Loading...</p>
+				<Skeleton {...props} />
 			)}
 		</div>
 	);

components/loggedInHeader.tsx

@@ -1,11 +1,16 @@
+"use client";
+
 import {
 	getLoggedInUser,
 	getUserByUserId,
 	UserProfileDetails,
 } from "@/lib/profile";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import LazyLoadedImage from "./lazyLoadedImage";
+import { loadThumbnails } from "@/lib/thumbnailLoader";
+import PremiumIcon from "./RobloxIcons";
 
-export function HomeLoggedInHeader() {
+export const HomeLoggedInHeader = React.memo(function HomeLoggedInHeader() {
 	const [profileDetails, setProfileDetails] =
 		useState<UserProfileDetails | null>(null);
 
@@ -17,15 +22,34 @@ export function HomeLoggedInHeader() {
 	}, []);
 
 	if (!profileDetails) {
-		return (<></>)
+		return <></>;
 	}
 
+	loadThumbnails([
+		{
+			type: "AvatarHeadShot",
+			targetId: profileDetails.id,
+			format: "webp",
+			size: "720x720",
+		},
+	]).catch(a => {});
+
 	return (
-		<div>
-			<span className="text-xl">Hello, {profileDetails.displayName}</span>
-			<span className="text-muted-foreground text-sm text-blue">{"@"}{profileDetails.name}</span>
-			<br/>
-			{profileDetails.id}
+		<div className="flex items-center gap-6 bg-base rounded-xl px-8 py-6 w-fit mt-8 ml-0">
+			<LazyLoadedImage
+				imgId={`AvatarHeadShot_${profileDetails.id}`}
+				alt=""
+				className="w-28 h-28 rounded-full border-4 border-base bg-base shadow-lg"
+			/>
+			<div className="flex flex-col justify-center">
+				<span className="text-3xl font-bold text-text flex items-center gap-2">
+					Hello, {profileDetails.displayName}
+					<PremiumIcon className="w-6 h-6 fill-transparent"/>
+				</span>
+				<span className="text-base text-subtext0 mt-1">
+					@{profileDetails.name}
+				</span>
+			</div>
 		</div>
 	);
-}
+});