refactor: remove turborepo

src/components/user/about.tsx

@@ -0,0 +1,12 @@
+import { cn } from "@/commons";
+import { useUserContext } from "./provider";
+
+export function UserAbout({ className }: { className?: string }) {
+	const user = useUserContext();
+
+	return (
+		<div className={cn("content-break select-text", className)}>
+			{user.profile?.about?.trim() || "No bio"}
+		</div>
+	);
+}

src/components/user/avatar.tsx

@@ -0,0 +1,76 @@
+import { cn } from "@/commons";
+import * as Avatar from "@radix-ui/react-avatar";
+import { useRouteContext } from "@tanstack/react-router";
+import { minidenticon } from "minidenticons";
+import { useMemo } from "react";
+import { useUserContext } from "./provider";
+
+export function UserAvatar({ className }: { className?: string }) {
+	const user = useUserContext();
+	const { settings } = useRouteContext({ strict: false });
+
+	const picture = useMemo(() => {
+		if (
+			settings?.image_resize_service?.length &&
+			user.profile?.picture?.length
+		) {
+			const url = `${settings.image_resize_service}?url=${user.profile?.picture}&w=100&h=100&default=1&n=-1`;
+			return url;
+		} else {
+			return user.profile?.picture;
+		}
+	}, [user.profile?.picture]);
+
+	const fallback = useMemo(
+		() =>
+			`data:image/svg+xml;utf8,${encodeURIComponent(
+				minidenticon(user.pubkey, 60, 50),
+			)}`,
+		[user.pubkey],
+	);
+
+	if (settings && !settings.display_avatar) {
+		return (
+			<Avatar.Root
+				className={cn(
+					"shrink-0 block overflow-hidden bg-neutral-200 dark:bg-neutral-800",
+					className,
+				)}
+			>
+				<Avatar.Fallback delayMs={120}>
+					<img
+						src={fallback}
+						alt={user.pubkey}
+						loading="lazy"
+						decoding="async"
+						className="size-full bg-black dark:bg-white outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
+					/>
+				</Avatar.Fallback>
+			</Avatar.Root>
+		);
+	}
+
+	return (
+		<Avatar.Root
+			className={cn(
+				"shrink-0 block overflow-hidden bg-neutral-200 dark:bg-neutral-800",
+				className,
+			)}
+		>
+			<Avatar.Image
+				src={picture}
+				alt={user.pubkey}
+				loading="lazy"
+				decoding="async"
+				className="w-full aspect-square object-cover outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
+			/>
+			<Avatar.Fallback>
+				<img
+					src={fallback}
+					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>
+		</Avatar.Root>
+	);
+}

src/components/user/cover.tsx

@@ -0,0 +1,36 @@
+import { cn } from "@/commons";
+import { useUserContext } from "./provider";
+
+export function UserCover({ className }: { className?: string }) {
+	const user = useUserContext();
+
+	if (!user) {
+		return (
+			<div
+				className={cn(
+					"animate-pulse bg-neutral-300 dark:bg-neutral-700",
+					className,
+				)}
+			/>
+		);
+	}
+
+	if (user && !user.profile?.banner) {
+		return (
+			<div
+				className={cn("bg-gradient-to-b from-blue-400 to-teal-200", className)}
+			/>
+		);
+	}
+
+	return (
+		<img
+			src={user?.profile?.banner}
+			alt="banner"
+			loading="lazy"
+			decoding="async"
+			style={{ contentVisibility: "auto" }}
+			className={cn("object-cover", className)}
+		/>
+	);
+}

src/components/user/followButton.tsx

@@ -0,0 +1,60 @@
+import { cn } from "@/commons";
+import { Spinner } from "@/components";
+import { NostrAccount } from "@/system";
+import { useEffect, useState } from "react";
+import { useUserContext } from "./provider";
+
+export function UserFollowButton({
+	simple = false,
+	className,
+}: {
+	simple?: boolean;
+	className?: string;
+}) {
+	const user = useUserContext();
+
+	const [loading, setLoading] = useState(false);
+	const [followed, setFollowed] = useState(false);
+
+	const toggleFollow = async () => {
+		setLoading(true);
+
+		const toggle = await NostrAccount.toggleContact(user.pubkey);
+
+		if (toggle) {
+			setFollowed((prev) => !prev);
+			setLoading(false);
+		}
+	};
+
+	useEffect(() => {
+		let mounted = true;
+
+		NostrAccount.checkContact(user.pubkey).then((status) => {
+			if (mounted) setFollowed(status);
+		});
+
+		return () => {
+			mounted = false;
+		};
+	}, []);
+
+	return (
+		<button
+			type="button"
+			disabled={loading}
+			onClick={() => toggleFollow()}
+			className={cn("w-max", className)}
+		>
+			{loading ? (
+				<Spinner className="size-4" />
+			) : followed ? (
+				!simple ? (
+					"Unfollow"
+				) : null
+			) : (
+				"Follow"
+			)}
+		</button>
+	);
+}

src/components/user/index.ts

@@ -0,0 +1,21 @@
+import { UserAbout } from "./about";
+import { UserAvatar } from "./avatar";
+import { UserCover } from "./cover";
+import { UserFollowButton } from "./followButton";
+import { UserName } from "./name";
+import { UserNip05 } from "./nip05";
+import { UserProvider } from "./provider";
+import { UserRoot } from "./root";
+import { UserTime } from "./time";
+
+export const User = {
+	Provider: UserProvider,
+	Root: UserRoot,
+	Avatar: UserAvatar,
+	Cover: UserCover,
+	Name: UserName,
+	NIP05: UserNip05,
+	Time: UserTime,
+	About: UserAbout,
+	Button: UserFollowButton,
+};

src/components/user/name.tsx

@@ -0,0 +1,21 @@
+import { cn, displayNpub } from "@/commons";
+import { useUserContext } from "./provider";
+
+export function UserName({
+	className,
+	prefix,
+}: {
+	className?: string;
+	prefix?: string;
+}) {
+	const user = useUserContext();
+
+	return (
+		<div className={cn("max-w-[12rem] truncate", className)}>
+			{prefix}
+			{user.profile?.display_name ||
+				user.profile?.name ||
+				displayNpub(user.pubkey, 16)}
+		</div>
+	);
+}

src/components/user/nip05.tsx

@@ -0,0 +1,58 @@
+import { displayLongHandle, displayNpub } from "@/commons";
+import { VerifiedIcon } from "@/components";
+import { NostrQuery } from "@/system";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { experimental_createPersister } from "@tanstack/query-persist-client-core";
+import { useQuery } from "@tanstack/react-query";
+import { useUserContext } from "./provider";
+
+export function UserNip05() {
+	const user = useUserContext();
+	const { isLoading, data: verified } = useQuery({
+		queryKey: ["nip05", user?.pubkey],
+		queryFn: async () => {
+			if (!user.profile?.nip05?.length) return false;
+
+			const verify = await NostrQuery.verifyNip05(
+				user.pubkey,
+				user.profile?.nip05,
+			);
+
+			return verify;
+		},
+		enabled: !!user.profile?.nip05,
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+		refetchOnReconnect: false,
+		staleTime: Number.POSITIVE_INFINITY,
+		retry: false,
+		persister: experimental_createPersister({
+			storage: localStorage,
+			maxAge: 1000 * 60 * 60 * 72, // 72 hours
+		}),
+	});
+
+	if (!user.profile?.nip05?.length) return;
+
+	return (
+		<Tooltip.Provider>
+			<Tooltip.Root delayDuration={150}>
+				<Tooltip.Trigger>
+					{!isLoading && verified ? (
+						<VerifiedIcon className="text-teal-500 size-4" />
+					) : null}
+				</Tooltip.Trigger>
+				<Tooltip.Portal>
+					<Tooltip.Content className="inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm font-medium text-neutral-50 will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-50 dark:text-neutral-950">
+						{!user.profile?.nip05
+							? displayNpub(user.pubkey, 16)
+							: user.profile?.nip05.length > 50
+								? displayLongHandle(user.profile?.nip05)
+								: user.profile.nip05?.replace("_@", "")}
+						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	);
+}

src/components/user/provider.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "@/types";
+import { useProfile } from "@/system";
+import { type ReactNode, createContext, useContext } from "react";
+
+const UserContext = createContext<{
+	pubkey: string;
+	profile: Metadata;
+	isError: boolean;
+	isLoading: boolean;
+}>(null);
+
+export function UserProvider({
+	pubkey,
+	children,
+	embedProfile,
+}: {
+	pubkey: string;
+	children: ReactNode;
+	embedProfile?: string;
+}) {
+	const { isLoading, isError, profile } = useProfile(pubkey, embedProfile);
+
+	return (
+		<UserContext.Provider value={{ pubkey, profile, isError, isLoading }}>
+			{children}
+		</UserContext.Provider>
+	);
+}
+
+export function useUserContext() {
+	const context = useContext(UserContext);
+	return context;
+}

src/components/user/root.tsx

@@ -0,0 +1,12 @@
+import { cn } from "@/commons";
+import type { ReactNode } from "react";
+
+export function UserRoot({
+	children,
+	className,
+}: {
+	children: ReactNode;
+	className?: string;
+}) {
+	return <div className={cn(className)}>{children}</div>;
+}

src/components/user/time.tsx

@@ -0,0 +1,18 @@
+import { cn, formatCreatedAt } from "@/commons";
+import { useMemo } from "react";
+
+export function UserTime({
+	time,
+	className,
+}: {
+	time: number;
+	className?: string;
+}) {
+	const createdAt = useMemo(() => formatCreatedAt(time), [time]);
+
+	return (
+		<div className={cn("text-neutral-600 dark:text-neutral-400", className)}>
+			{createdAt}
+		</div>
+	);
+}