refactor: app settings

src/components/user/avatar.tsx

@@ -1,38 +1,36 @@
-import { appSettings, cn } from "@/commons";
+import { cn } from "@/commons";
+import { settingsQueryOptions } from "@/routes/__root";
 import * as Avatar from "@radix-ui/react-avatar";
-import { useStore } from "@tanstack/react-store";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { minidenticon } from "minidenticons";
 import { useMemo } from "react";
 import { useUserContext } from "./provider";
 
 export function UserAvatar({ className }: { className?: string }) {
-	const [service, visible] = useStore(appSettings, (state) => [
-		state.image_resize_service,
-		state.display_avatar,
-	]);
+	const settings = useSuspenseQuery(settingsQueryOptions);
 
 	const user = useUserContext();
 
 	const picture = useMemo(() => {
-		if (service?.length && user.profile?.picture?.length) {
+		if (settings.data.resize_service && user?.profile?.picture?.length) {
 			if (user.profile?.picture.includes("_next/")) {
 				return user.profile?.picture;
 			}
 			if (user.profile?.picture.includes("bsky.network")) {
 				return user.profile?.picture;
 			}
-			return `${service}?url=${user.profile?.picture}&w=100&h=100&n=-1&default=${user.profile?.picture}`;
+			return `https://wsrv.nl?url=${user.profile?.picture}&w=100&h=100&n=-1&default=${user.profile?.picture}`;
 		} else {
-			return user.profile?.picture;
+			return user?.profile?.picture;
 		}
-	}, [user.profile?.picture]);
+	}, [user]);
 
 	const fallback = useMemo(
 		() =>
 			`data:image/svg+xml;utf8,${encodeURIComponent(
-				minidenticon(user.pubkey, 60, 50),
+				minidenticon(user ? user.pubkey : "lume", 60, 50),
 			)}`,
-		[user.pubkey],
+		[user],
 	);
 
 	return (
@@ -42,18 +40,19 @@ export function UserAvatar({ className }: { className?: string }) {
 				className,
 			)}
 		>
-			{visible ? (
+			{settings.data.display_avatar ? (
 				<Avatar.Image
 					src={picture}
-					alt={user.pubkey}
+					alt={user?.pubkey}
 					decoding="async"
+					onContextMenu={(e) => e.preventDefault()}
 					className="w-full aspect-square object-cover outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
 				/>
 			) : null}
 			<Avatar.Fallback>
 				<img
 					src={fallback}
-					alt={user.pubkey}
+					alt={user?.pubkey}
 					className="size-full bg-black dark:bg-white outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
 				/>
 			</Avatar.Fallback>