add user page

src/app/space/components/blocks/profile.tsx

@@ -1,107 +0,0 @@
-import { ArrowLeftIcon } from "@shared/icons";
-import { Image } from "@shared/image";
-import { useActiveAccount } from "@stores/accounts";
-import { DEFAULT_AVATAR } from "@stores/constants";
-import { useProfile } from "@utils/hooks/useProfile";
-import { compactNumber } from "@utils/number";
-import { shortenKey } from "@utils/shortenKey";
-import useSWR from "swr";
-
-const fetcher = (url: string) => fetch(url).then((r) => r.json());
-
-export function ProfileBlock({ params }: { params: any }) {
-	const removeBlock = useActiveAccount((state: any) => state.removeBlock);
-
-	const close = () => {
-		removeBlock(params.id, true);
-	};
-
-	const { user } = useProfile(params.pubkey);
-	const { data: userStats } = useSWR(
-		user ? `https://api.nostr.band/v0/stats/profile/${params.pubkey}` : null,
-		fetcher,
-	);
-
-	return (
-		<div className="shrink-0 w-[360px] flex-col flex border-r border-zinc-900">
-			<div
-				data-tauri-drag-region
-				className="h-11 w-full flex items-center justify-center px-3"
-			>
-				<button
-					type="button"
-					onClick={() => close()}
-					className="inline-flex h-7 w-7 shrink items-center justify-center rounded bg-zinc-900 hover:bg-zinc-800"
-				>
-					<ArrowLeftIcon width={14} height={14} className="text-zinc-500" />
-				</button>
-				<h3 className="font-semibold text-zinc-100">{params.title}</h3>
-				<div className="w-9 h-6" />
-			</div>
-			<div className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto">
-				<div className="px-3">
-					<div className="w-full h-max rounded-lg bg-zinc-900">
-						<div className="bg-zinc-800 w-full h-44 rounded-t-lg" />
-						<div className="-mt-7 px-5">
-							<Image
-								src={user?.image || DEFAULT_AVATAR}
-								alt={params.pubkey}
-								className="w-14 h-14 ring-1 ring-black rounded-md"
-							/>
-							<div className="mt-4">
-								<div className="flex flex-col gap-1">
-									<h3 className="leading-none font-semibold text-zinc-100">
-										{user?.display_name || user?.name || "Anon"}
-									</h3>
-									<h5 className="leading-none text-zinc-500">
-										{user?.nip05 || shortenKey(params.pubkey)}
-									</h5>
-									<p className="mt-1 select-text break-words text-base text-zinc-100">
-										{user?.bio || user.about}
-									</p>
-								</div>
-								{!userStats ? (
-									<p>Loading...</p>
-								) : (
-									<div className="mt-8 pb-5 w-full flex items-center gap-8">
-										<div className="inline-flex flex-col gap-1">
-											<span className="leading-none font-semibold text-zinc-100">
-												{userStats.stats[params.pubkey]
-													.followers_pubkey_count ?? 0}
-											</span>
-											<span className="leading-none text-sm text-zinc-400">
-												Followers
-											</span>
-										</div>
-										<div className="inline-flex flex-col gap-1">
-											<span className="leading-none font-semibold text-zinc-100">
-												{userStats.stats[params.pubkey]
-													.pub_following_pubkey_count ?? 0}
-											</span>
-											<span className="leading-none text-sm text-zinc-400">
-												Following
-											</span>
-										</div>
-										<div className="inline-flex flex-col gap-1">
-											<span className="leading-none font-semibold text-zinc-100">
-												{userStats.stats[params.pubkey].zaps_received
-													? compactNumber.format(
-															userStats.stats[params.pubkey].zaps_received
-																.msats / 1000,
-													  )
-													: 0}
-											</span>
-											<span className="leading-none text-sm text-zinc-400">
-												Zaps received
-											</span>
-										</div>
-									</div>
-								)}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}

src/app/trending/components/profile.tsx

@@ -46,7 +46,7 @@ export function Profile({ data }: { data: any }) {
 				</p>
 			</div>
 			<div className="mt-8">
-				{error && <p>Failed to fetch</p>}
+				{error && <p>Failed to fetch user stats</p>}
 				{!userStats ? (
 					<p>Loading...</p>
 				) : (

src/app/user/_default.page.tsx

@@ -0,0 +1 @@
+export { LayoutUser as Layout } from "./layout";

src/app/user/layout.tsx

@@ -0,0 +1,14 @@
+import { MultiAccounts } from "@shared/multiAccounts";
+import { Navigation } from "@shared/navigation";
+
+export function LayoutUser({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="flex w-screen h-screen">
+			<div className="relative flex flex-row shrink-0">
+				<MultiAccounts />
+				<Navigation />
+			</div>
+			<div className="w-full h-full">{children}</div>
+		</div>
+	);
+}

src/app/user/pages/index.page.tsx

@@ -0,0 +1,192 @@
+import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { Image } from "@shared/image";
+import { RelayContext } from "@shared/relayProvider";
+import { useActiveAccount } from "@stores/accounts";
+import { DEFAULT_AVATAR } from "@stores/constants";
+import { dateToUnix } from "@utils/date";
+import { usePageContext } from "@utils/hooks/usePageContext";
+import { useProfile } from "@utils/hooks/useProfile";
+import { compactNumber } from "@utils/number";
+import { shortenKey } from "@utils/shortenKey";
+import { useContext } from "react";
+import useSWR from "swr";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+export function Page() {
+	const ndk = useContext(RelayContext);
+	const pageContext = usePageContext();
+	const searchParams: any = pageContext.urlParsed.search;
+	const pubkey = searchParams.pubkey;
+
+	const { user } = useProfile(pubkey);
+	const { data: userStats, error } = useSWR(
+		`https://api.nostr.band/v0/stats/profile/${pubkey}`,
+		fetcher,
+	);
+
+	const account = useActiveAccount((state: any) => state.account);
+	const follows = account ? JSON.parse(account.follows) : [];
+
+	const follow = (pubkey: string) => {
+		try {
+			const followsAsSet = new Set(follows);
+			followsAsSet.add(pubkey);
+
+			const signer = new NDKPrivateKeySigner(account.privkey);
+			ndk.signer = signer;
+
+			const tags = [];
+			followsAsSet.forEach((item) => {
+				tags.push(["p", item]);
+			});
+
+			const event = new NDKEvent(ndk);
+			event.content = "";
+			event.created_at = dateToUnix();
+			event.pubkey = pubkey;
+			event.kind = 3;
+			event.tags = tags;
+			// publish event
+			event.publish();
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
+	const unfollow = (pubkey: string) => {
+		try {
+			const followsAsSet = new Set(follows);
+			followsAsSet.delete(pubkey);
+
+			const signer = new NDKPrivateKeySigner(account.privkey);
+			ndk.signer = signer;
+
+			const tags = [];
+			followsAsSet.forEach((item) => {
+				tags.push(["p", item]);
+			});
+
+			const event = new NDKEvent(ndk);
+			event.content = "";
+			event.created_at = dateToUnix();
+			event.pubkey = pubkey;
+			event.kind = 3;
+			event.tags = tags;
+			// publish event
+			event.publish();
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
+	return (
+		<div className="h-full w-full">
+			<div
+				data-tauri-drag-region
+				className="h-11 w-full flex items-center px-3 border-b border-zinc-900"
+			/>
+			<div className="w-full h-56 bg-zinc-100">
+				<Image
+					src={user?.banner || "https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"}
+					alt={"banner"}
+					className="w-full h-full object-cover"
+				/>
+			</div>
+			<div className="w-full px-5 -mt-7">
+				<div>
+					<Image
+						src={user?.image || DEFAULT_AVATAR}
+						alt={pubkey}
+						className="w-14 h-14 rounded-md ring-2 ring-black"
+					/>
+					<div className="flex-1 flex flex-col gap-2 mt-4">
+						<h5 className="font-semibold leading-none">
+							{user?.displayName || user?.name || "No name"}
+						</h5>
+						<span className="max-w-[15rem] text-sm truncate leading-none text-zinc-500">
+							{user?.nip05 || shortenKey(pubkey)}
+						</span>
+						<p className="mt-1 line-clamp-3 break-words leading-tight text-zinc-100">
+							{user?.about}
+						</p>
+					</div>
+				</div>
+				<div className="mt-8">
+					{error && <p>Failed to fetch user stats</p>}
+					{!userStats ? (
+						<p>Loading...</p>
+					) : (
+						<div className="w-full flex items-center gap-10">
+							<div className="inline-flex flex-col gap-1">
+								<span className="leading-none font-semibold text-zinc-100">
+									{userStats.stats[pubkey].followers_pubkey_count ?? 0}
+								</span>
+								<span className="leading-none text-sm text-zinc-400">
+									Followers
+								</span>
+							</div>
+							<div className="inline-flex flex-col gap-1">
+								<span className="leading-none font-semibold text-zinc-100">
+									{userStats.stats[pubkey].pub_following_pubkey_count ?? 0}
+								</span>
+								<span className="leading-none text-sm text-zinc-400">
+									Following
+								</span>
+							</div>
+							<div className="inline-flex flex-col gap-1">
+								<span className="leading-none font-semibold text-zinc-100">
+									{userStats.stats[pubkey].zaps_received
+										? compactNumber.format(
+												userStats.stats[pubkey].zaps_received.msats / 1000,
+										  )
+										: 0}
+								</span>
+								<span className="leading-none text-sm text-zinc-400">
+									Zaps received
+								</span>
+							</div>
+							<div className="inline-flex flex-col gap-1">
+								<span className="leading-none font-semibold text-zinc-100">
+									{userStats.stats[pubkey].zaps_sent
+										? compactNumber.format(
+												userStats.stats[pubkey].zaps_sent.msats / 1000,
+										  )
+										: 0}
+								</span>
+								<span className="leading-none text-sm text-zinc-400">
+									Zaps sent
+								</span>
+							</div>
+						</div>
+					)}
+					<div className="mt-6 flex items-center gap-2">
+						{follows.includes(pubkey) ? (
+							<button
+								type="button"
+								onClick={() => unfollow(pubkey)}
+								className="inline-flex w-44 h-10 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500 text-sm font-medium"
+							>
+								Unfollow
+							</button>
+						) : (
+							<button
+								type="button"
+								onClick={() => follow(pubkey)}
+								className="inline-flex w-44 h-10 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500 text-sm font-medium"
+							>
+								Follow
+							</button>
+						)}
+						<a
+							href={`/app/chat?pubkey=${pubkey}`}
+							className="inline-flex w-44 h-10 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500 text-sm font-medium"
+						>
+							Message
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/shared/accounts/active.tsx

@@ -24,7 +24,7 @@ export function ActiveAccount({ data }: { data: any }) {
 		// subscribe to channel
 		const sub = ndk.subscribe(
 			{
-				kinds: [4, 42],
+				kinds: [1, 4, 42],
 				"#p": [data.pubkey],
 				since: since,
 			},
@@ -35,6 +35,10 @@ export function ActiveAccount({ data }: { data: any }) {
 
 		sub.addListener("event", (event) => {
 			switch (event.kind) {
+				case 1:
+					// send native notifiation
+					sendNativeNotification("Someone mention you");
+					break;
 				case 4:
 					// save
 					saveChat(data.pubkey, event);

src/shared/user.tsx

@@ -66,7 +66,7 @@ export function User({
 				leaveTo="opacity-0 translate-y-1"
 			>
 				<Popover.Panel className="absolute left-0 top-10 z-50 mt-3">
-					<div className="w-full max-w-xs overflow-hidden rounded-md border border-zinc-800/50 bg-zinc-900/80 backdrop-blur-md">
+					<div className="w-full max-w-xs overflow-hidden rounded-md border border-zinc-800/50 bg-zinc-900/90 backdrop-blur-lg">
 						<div className="flex gap-2.5 border-b border-zinc-800 px-3 py-3">
 							<Image
 								src={user?.image || DEFAULT_AVATAR}
@@ -94,13 +94,13 @@ export function User({
 						<div className="flex items-center gap-2 px-3 py-3">
 							<a
 								href={`/app/user?pubkey=${pubkey}`}
-								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 hover:bg-fuchsia-500 text-sm font-medium"
+								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-700 hover:bg-fuchsia-500 text-sm font-medium"
 							>
 								View profile
 							</a>
 							<a
 								href={`/app/chat?pubkey=${pubkey}`}
-								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 hover:bg-fuchsia-500 text-sm font-medium"
+								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-700 hover:bg-fuchsia-500 text-sm font-medium"
 							>
 								Message
 							</a>