add profile block to space

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

@@ -0,0 +1,107 @@
+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/user/_default.page.tsx

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

src/app/user/layout.tsx

@@ -1,14 +0,0 @@
-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

@@ -1,13 +0,0 @@
-import { usePageContext } from "@utils/hooks/usePageContext";
-
-export function Page() {
-	const pageContext = usePageContext();
-	const searchParams: any = pageContext.urlParsed.search;
-	const pubkey = searchParams.pubkey;
-
-	return (
-		<div className="h-full w-full flex flex-nowrap overflow-x-auto overflow-y-hidden scrollbar-hide">
-			<p>{pubkey}</p>
-		</div>
-	);
-}

src/shared/user.tsx

@@ -65,27 +65,27 @@ export function User({
 				leaveFrom="opacity-100 translate-y-0"
 				leaveTo="opacity-0 translate-y-1"
 			>
-				<Popover.Panel className="absolute left-0 top-8 z-10 mt-3 w-screen max-w-sm px-4 sm:px-0 lg:max-w-3xl">
+				<Popover.Panel className="absolute left-0 top-10 z-50 mt-3">
-					<div className="w-full max-w-xs overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-input ring-1 ring-black ring-opacity-5">
+					<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="flex items-start gap-2.5 border-b border-zinc-800 px-3 py-3">
+						<div className="flex gap-2.5 border-b border-zinc-800 px-3 py-3">
 							<Image
 								src={user?.image || DEFAULT_AVATAR}
 								alt={pubkey}
-								className="h-14 w-14 shrink-0 rounded-lg object-cover"
+								className="h-11 w-11 shrink-0 rounded-lg object-cover"
 							/>
-							<div className="flex w-full flex-1 flex-col gap-2">
+							<div className="flex-1 flex flex-col gap-2">
-								<div className="inline-flex w-2/3 flex-col gap-0.5">
+								<div className="inline-flex flex-col gap-1">
-									<h5 className="text-base font-semibold leading-none">
+									<h5 className="font-semibold leading-none">
 										{user?.displayName || user?.name || (
 											<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
 										)}
 									</h5>
-									<span className="truncate text-base leading-none text-zinc-500">
+									<span className="max-w-[15rem] text-sm truncate leading-none text-zinc-500">
 										{user?.nip05 || shortenKey(pubkey)}
 									</span>
 								</div>
 								<div>
-									<p className="line-clamp-3 text-base leading-tight text-zinc-100">
+									<p className="line-clamp-3 break-words text-sm leading-tight text-zinc-100">
 										{user?.about}
 									</p>
 								</div>
@@ -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 text-base font-medium"
+								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 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 text-base font-medium"
+								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 hover:bg-fuchsia-500 text-sm font-medium"
 							>
 								Message
 							</a>