feat: move nwc to settings

packages/ark/src/components/user/about.tsx

@@ -0,0 +1,37 @@
+import { cn } from "@lume/utils";
+import { useUserContext } from "./provider";
+
+export function UserAbout({ className }: { className?: string }) {
+	const user = useUserContext();
+
+	if (!user) {
+		return (
+			<>
+				<div
+					className={cn(
+						"h-4 w-20 bg-black/20 dark:bg-white/20 rounded animate-pulse",
+						className,
+					)}
+				/>
+				<div
+					className={cn(
+						"h-4 w-full bg-black/20 dark:bg-white/20 rounded animate-pulse",
+						className,
+					)}
+				/>
+				<div
+					className={cn(
+						"h-4 w-24 bg-black/20 dark:bg-white/20 rounded animate-pulse",
+						className,
+					)}
+				/>
+			</>
+		);
+	}
+
+	return (
+		<div className={cn("select-text break-p", className)}>
+			{user.about || user.bio}
+		</div>
+	);
+}

packages/ark/src/components/user/followButton.tsx

@@ -1,3 +1,4 @@
+import { LoaderIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import { useEffect, useState } from "react";
 import { useArk } from "../../hooks/useArk";
@@ -7,6 +8,8 @@ export function UserFollowButton({
 	className,
 }: { target: string; className?: string }) {
 	const ark = useArk();
+
+	const [loading, setLoading] = useState(false);
 	const [followed, setFollowed] = useState(false);
 
 	const toggleFollow = async () => {
@@ -21,15 +24,27 @@ export function UserFollowButton({
 
 	useEffect(() => {
 		async function status() {
+			setLoading(true);
+
 			const contacts = await ark.getUserContacts();
-			if (contacts?.includes(target)) setFollowed(true);
+			if (contacts?.includes(target)) {
+				setFollowed(true);
+			}
+
+			setLoading(false);
 		}
 		status();
 	}, []);
 
 	return (
 		<button type="button" onClick={toggleFollow} className={cn("", className)}>
-			{followed ? "Unfollow" : "Follow"}
+			{loading ? (
+				<LoaderIcon className="size-4 animate-spin" />
+			) : followed ? (
+				"Unfollow"
+			) : (
+				"Follow"
+			)}
 		</button>
 	);
 }

packages/ark/src/components/user/index.ts

@@ -1,3 +1,4 @@
+import { UserAbout } from "./about";
 import { UserAvatar } from "./avatar";
 import { UserFollowButton } from "./followButton";
 import { UserName } from "./name";
@@ -13,5 +14,6 @@ export const User = {
 	Name: UserName,
 	NIP05: UserNip05,
 	Time: UserTime,
+	About: UserAbout,
 	Button: UserFollowButton,
 };