update space page

src/app/note/components/base.tsx

@@ -20,7 +20,7 @@ export function NoteBase({ event }: { event: any }) {
 
 	return (
 		<NoteWrapper href={href} className="h-min w-full px-3 py-1.5">
-			<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 pt-3 shadow-input shadow-black/20">
+			<div className="rounded-md bg-zinc-900 px-5 pt-5">
 				{event.parent_id &&
 				(event.parent_id !== event.event_id || checkParentID) ? (
 					<NoteParent id={event.parent_id} />

src/app/note/components/metadata.tsx

@@ -5,6 +5,7 @@ import { RelayContext } from "@shared/relayProvider";
 
 import NoteZap from "@app/note/components/metadata/zap";
 import PlusIcon from "@shared/icons/plus";
+import ZapIcon from "@shared/icons/zap";
 import { Tooltip } from "@shared/tooltip";
 import { READONLY_RELAYS } from "@stores/constants";
 import { decode } from "light-bolt11-decoder";
@@ -66,10 +67,19 @@ export default function NoteMetadata({
 	});
 
 	return (
-		<div className="mt-4 flex h-12 items-center gap-4 border-t border-zinc-800/50">
+		<div className="flex flex-col gap-2 mt-5">
+			<NoteZap zaps={zaps} />
+			<div className="inline-flex items-center gap-2 w-full h-10 border-t border-zinc-800">
 				<NoteReply id={id} replies={replies} />
 				<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
-			<NoteZap zaps={zaps} />
+				<button
+					type="button"
+					className="ml-auto inline-flex items-center gap-1 text-sm px-2 py-1 rounded bg-zinc-800 text-zinc-300 hover:text-orange-500 hover:bg-orange-100"
+				>
+					<ZapIcon className="w-4 h-4" />
+					Zap
+				</button>
+			</div>
 		</div>
 	);
 }

src/app/note/components/metadata/zap.tsx

@@ -11,13 +11,8 @@ export default function NoteZap({ zaps }: { zaps: number }) {
 
 	return (
 		<button type="button" className="group inline-flex items-center gap-1.5">
-			<ZapIcon
-				width={16}
-				height={16}
-				className="text-zinc-400 group-hover:text-orange-400"
-			/>
 			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
-				{compactNumber.format(count)} sats
+				{compactNumber.format(count)} sats zapped
 			</span>
 		</button>
 	);

src/app/note/components/quoteRepost.tsx

@@ -12,9 +12,9 @@ export function NoteQuoteRepost({ event }: { event: any }) {
 			href={`/app/note?id=${rootID}`}
 			className="h-min w-full px-3 py-1.5"
 		>
-			<div className="rounded-md border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
+			<div className="rounded-md bg-zinc-900">
-				<div className="relative px-3 pb-5 pt-3">
+				<div className="relative px-5 pb-5 pt-5">
-					<div className="absolute left-[28px] top-[20px] h-[70px] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
+					<div className="absolute left-[35px] top-[20px] h-[70px] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
 					<NoteRepostUser pubkey={event.pubkey} time={event.created_at} />
 				</div>
 				<RootNote id={rootID} fallback={event.content} />

src/app/note/components/rootNote.tsx

@@ -75,7 +75,7 @@ export const RootNote = memo(function RootNote({
 			<div
 				onClick={(e) => openNote(e)}
 				onKeyDown={(e) => openNote(e)}
-				className="flex flex-col px-3"
+				className="flex flex-col px-5"
 			>
 				<NoteDefaultUser
 					pubkey={parseFallback.pubkey}
@@ -96,7 +96,7 @@ export const RootNote = memo(function RootNote({
 		<div
 			onClick={(e) => openNote(e)}
 			onKeyDown={(e) => openNote(e)}
-			className="flex flex-col px-3"
+			className="flex flex-col px-5"
 		>
 			{data ? (
 				<>

src/app/note/components/skeleton.tsx

@@ -1,14 +1,14 @@
 export function NoteSkeleton() {
 	return (
 		<div className="flex h-min flex-col pb-3">
-			<div className="flex items-center gap-2.5">
+			<div className="flex items-center gap-3">
-				<div className="relative h-9 w-9 shrink overflow-hidden rounded-md bg-zinc-700" />
+				<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
 				<div className="flex flex-col gap-0.5">
 					<div className="h-3 w-20 rounded-sm bg-zinc-700" />
 					<div className="h-2 w-12 rounded-sm bg-zinc-700" />
 				</div>
 			</div>
-			<div className="mt-3 animate-pulse pl-[46px]">
+			<div className="mt-3 animate-pulse pl-[49px]">
 				<div className="flex flex-col gap-1">
 					<div className="h-4 w-full rounded-sm bg-zinc-700" />
 					<div className="h-4 w-2/3 rounded-sm bg-zinc-700" />

src/app/note/components/user/default.tsx

@@ -30,7 +30,7 @@ export function NoteDefaultUser({
 				/>
 			</Popover.Button>
 			<div className="flex flex-wrap items-baseline gap-1">
-				<h5 className="text-base font-semibold leading-none">
+				<h5 className="max-w-[15rem] text-base font-semibold leading-none truncate">
 					{user?.nip05 || user?.name || shortenKey(pubkey)}
 				</h5>
 				<span className="leading-none text-zinc-500">·</span>

src/app/note/components/user/repost.tsx

@@ -30,13 +30,13 @@ export function NoteRepostUser({
 				/>
 			</Popover.Button>
 			<div className="flex flex-wrap items-baseline gap-1">
-				<h5 className="text-base font-semibold leading-none">
+				<h5 className="max-w-[10rem] text-base font-semibold leading-none truncate">
 					{user?.nip05 || user?.name || shortenKey(pubkey)}
-					<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
+				</h5>
+				<span className="font-semibold leading-none text-fuchsia-500">
 					{" "}
 					reposted
 				</span>
-				</h5>
 				<span className="leading-none text-zinc-500">·</span>
 				<span className="leading-none text-zinc-500">
 					{dayjs().to(dayjs.unix(time), true)}

src/app/space/components/following.tsx

@@ -0,0 +1,134 @@
+import { NoteBase } from "@app/note/components/base";
+import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
+import { NoteSkeleton } from "@app/note/components/skeleton";
+
+import { getNotes } from "@utils/storage";
+
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useEffect, useRef } from "react";
+
+const ITEM_PER_PAGE = 10;
+const TIME = Math.floor(Date.now() / 1000);
+
+export function FollowingBlock() {
+	const {
+		status,
+		data,
+		fetchNextPage,
+		hasNextPage,
+		isFetching,
+		isFetchingNextPage,
+	}: any = useInfiniteQuery({
+		queryKey: ["following"],
+		queryFn: async ({ pageParam = 0 }) => {
+			return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
+		},
+		getNextPageParam: (lastPage) => lastPage.nextCursor,
+	});
+
+	const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
+	const parentRef = useRef();
+
+	const rowVirtualizer = useVirtualizer({
+		count: hasNextPage ? allRows.length + 1 : allRows.length,
+		getScrollElement: () => parentRef.current,
+		estimateSize: () => 400,
+		overscan: 2,
+	});
+
+	const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+
+	useEffect(() => {
+		const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
+
+		if (!lastItem) {
+			return;
+		}
+
+		if (
+			lastItem.index >= allRows.length - 1 &&
+			hasNextPage &&
+			!isFetchingNextPage
+		) {
+			fetchNextPage();
+		}
+	}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
+
+	return (
+		<div className="shrink-0 w-[420px] border-r border-zinc-900">
+			<div
+				data-tauri-drag-region
+				className="h-11 w-full inline-flex items-center justify-center border-b border-zinc-900"
+			>
+				<h3 className="font-semibold text-zinc-100">Following</h3>
+			</div>
+			<div
+				ref={parentRef}
+				className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 overflow-y-auto"
+				style={{ contain: "strict" }}
+			>
+				{status === "loading" ? (
+					<div className="px-3 py-1.5">
+						<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
+							<NoteSkeleton />
+						</div>
+					</div>
+				) : (
+					<div
+						className="relative w-full"
+						style={{
+							height: `${rowVirtualizer.getTotalSize()}px`,
+						}}
+					>
+						<div
+							className="absolute left-0 top-0 w-full"
+							style={{
+								transform: `translateY(${
+									itemsVirtualizer[0].start -
+									rowVirtualizer.options.scrollMargin
+								}px)`,
+							}}
+						>
+							{rowVirtualizer.getVirtualItems().map((virtualRow) => {
+								const note = allRows[virtualRow.index];
+								if (note) {
+									if (note.kind === 1) {
+										return (
+											<div
+												key={virtualRow.index}
+												data-index={virtualRow.index}
+												ref={rowVirtualizer.measureElement}
+											>
+												<NoteBase key={note.event_id} event={note} />
+											</div>
+										);
+									} else {
+										return (
+											<div
+												key={virtualRow.index}
+												data-index={virtualRow.index}
+												ref={rowVirtualizer.measureElement}
+											>
+												<NoteQuoteRepost key={note.event_id} event={note} />
+											</div>
+										);
+									}
+								}
+							})}
+						</div>
+					</div>
+				)}
+				<div>
+					{isFetching && !isFetchingNextPage && (
+						<div className="px-3 py-1.5">
+							<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
+								<NoteSkeleton />
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

src/app/space/components/header.tsx

@@ -1,58 +0,0 @@
-import { CreateViewModal } from "@app/space/components/views/createModal";
-
-export function Header() {
-	return (
-		<div className="flex w-full gap-4">
-			<button
-				type="button"
-				className="from-zinc-90 inline-flex h-11 items-center overflow-hidden border-b border-fuchsia-500 hover:bg-zinc-900"
-			>
-				<span className="px-2 text-base font-semibold text-zinc-300">
-					Following
-				</span>
-			</button>
-			<div className="flex h-11 items-center -space-x-1 overflow-hidden">
-				<img
-					className="inline-block h-6 w-6 rounded ring-2 ring-zinc-950"
-					src="https://133332.xyz/p.jpg"
-					alt=""
-				/>
-				<img
-					className="inline-block h-6 w-6 rounded ring-2 ring-zinc-950"
-					src="https://void.cat/d/3Bp6jSHURFNQ9u3pK8nwtq.webp"
-					alt=""
-				/>
-				<img
-					className="inline-block h-6 w-6 rounded ring-2 ring-zinc-950"
-					src="https://void.cat/d/8zE9T8a39YfUVjrLM4xcpE.webp"
-					alt=""
-				/>
-				<img
-					className="ring-zinc-95 ring-20 inline-block h-6 w-6 rounded"
-					src="https://nostr.build/i/p/nostr.build_0e412058980ed2ac4adf3de639304c9e970e2745ba9ca19c75f984f4f6da4971.jpeg"
-					alt=""
-				/>
-				<img
-					className="ring-zinc-95 ring-20 inline-block h-6 w-6 rounded"
-					src="https://davidcoen.it/wp-content/uploads/2020/11/7004972-taglio.jpg"
-					alt=""
-				/>
-			</div>
-			<div className="flex h-11 items-center overflow-hidden">
-				<img
-					className="ring-zinc-95 ring-20 inline-block h-6 w-6 rounded"
-					src="https://void.cat/d/KvAEMvYNmy1rfCH6a7HZzh.webp"
-					alt=""
-				/>
-			</div>
-			<div className="flex h-11 items-center overflow-hidden">
-				<img
-					className="ring-zinc-95 ring-20 inline-block h-6 w-6 rounded"
-					src="http://nostr.build/i/6369.jpg"
-					alt=""
-				/>
-			</div>
-			<CreateViewModal />
-		</div>
-	);
-}

src/app/space/components/views/createModal.tsx

@@ -1,89 +0,0 @@
-import CancelIcon from "@icons/cancel";
-import PlusIcon from "@icons/plus";
-
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
-
-export function CreateViewModal() {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const closeModal = () => {
-		setIsOpen(false);
-	};
-
-	const openModal = () => {
-		setIsOpen(true);
-	};
-
-	return (
-		<>
-			<button
-				type="button"
-				onClick={openModal}
-				className="inline-flex h-11 items-center overflow-hidden border-b border-transparent hover:bg-zinc-900"
-			>
-				<span className="inline-flex items-center gap-1 px-2 text-base font-medium text-zinc-500">
-					<PlusIcon width={14} height={14} />
-					View
-				</span>
-			</button>
-			<Transition appear show={isOpen} as={Fragment}>
-				<Dialog as="div" className="relative z-10" onClose={closeModal}>
-					<Transition.Child
-						as={Fragment}
-						enter="ease-out duration-300"
-						enterFrom="opacity-0"
-						enterTo="opacity-100"
-						leave="ease-in duration-200"
-						leaveFrom="opacity-100"
-						leaveTo="opacity-0"
-					>
-						<div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
-					</Transition.Child>
-					<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 scale-95"
-							enterTo="opacity-100 scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 scale-100"
-							leaveTo="opacity-0 scale-95"
-						>
-							<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900">
-								<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-6">
-									<div className="flex flex-col gap-1">
-										<div className="flex items-center justify-between">
-											<Dialog.Title
-												as="h3"
-												className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-lg font-semibold leading-none text-transparent"
-											>
-												Create a view
-											</Dialog.Title>
-											<button
-												type="button"
-												onClick={closeModal}
-												className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
-											>
-												<CancelIcon
-													width={16}
-													height={16}
-													className="text-zinc-400"
-												/>
-											</button>
-										</div>
-										<Dialog.Description className="text-base leading-tight text-zinc-400">
-											View is specific feature help you pin who you want to see
-											in your feed. You can add maximum 5 people in a view.
-										</Dialog.Description>
-									</div>
-								</div>
-								<div className="flex h-full w-full flex-col overflow-y-auto pb-5 pt-3" />
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</Dialog>
-			</Transition>
-		</>
-	);
-}

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

@@ -1,135 +1,22 @@
-import { NoteBase } from "@app/note/components/base";
+import { FollowingBlock } from "@app/space/components/following";
-import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
+import PlusIcon from "@shared/icons/plus";
-import { NoteSkeleton } from "@app/note/components/skeleton";
-import { Header } from "@app/space/components/header";
-
-import { getNotes } from "@utils/storage";
-
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { useEffect, useRef } from "react";
-
-const ITEM_PER_PAGE = 10;
-const TIME = Math.floor(Date.now() / 1000);
 
 export function Page() {
-	const {
-		status,
-		error,
-		data,
-		fetchNextPage,
-		hasNextPage,
-		isFetching,
-		isFetchingNextPage,
-	}: any = useInfiniteQuery({
-		queryKey: ["following"],
-		queryFn: async ({ pageParam = 0 }) => {
-			return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
-		},
-		getNextPageParam: (lastPage) => lastPage.nextCursor,
-	});
-
-	const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
-	const parentRef = useRef();
-
-	const rowVirtualizer = useVirtualizer({
-		count: hasNextPage ? allRows.length + 1 : allRows.length,
-		getScrollElement: () => parentRef.current,
-		estimateSize: () => 400,
-		overscan: 2,
-	});
-
-	const itemsVirtualizer = rowVirtualizer.getVirtualItems();
-
-	useEffect(() => {
-		const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
-
-		if (!lastItem) {
-			return;
-		}
-
-		if (
-			lastItem.index >= allRows.length - 1 &&
-			hasNextPage &&
-			!isFetchingNextPage
-		) {
-			fetchNextPage();
-		}
-	}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
-
 	return (
-		<div className="h-full w-full flex flex-nowrap overflow-x-auto">
+		<div className="h-full w-full flex flex-nowrap overflow-x-auto overflow-y-hidden">
-			<div className="shrink-0 w-[420px] border-r border-zinc-900">
+			<FollowingBlock />
-				<div className="h-11 w-full inline-flex items-center justify-center border-b border-zinc-900">
+			<div className="shrink-0 w-[360px] border-r border-zinc-900">
-					<h3 className="font-semibold text-zinc-100">Following</h3>
+				<div className="w-full h-full inline-flex items-center justify-center">
-				</div>
+					<button
-				<div
+						type="button"
-					ref={parentRef}
+						className="inline-flex flex-col items-center justify-center gap-1 text-zinc-500 text-lg font-semibold"
-					className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 overflow-y-auto"
-					style={{ contain: "strict" }}
 					>
-					{status === "loading" ? (
+						<PlusIcon className="w-5 h-5 text-zinc-300" />
-						<div className="px-3 py-1.5">
+						Add block
-							<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
+					</button>
-								<NoteSkeleton />
-							</div>
-						</div>
-					) : (
-						<div
-							className="relative w-full"
-							style={{
-								height: `${rowVirtualizer.getTotalSize()}px`,
-							}}
-						>
-							<div
-								className="absolute left-0 top-0 w-full"
-								style={{
-									transform: `translateY(${
-										itemsVirtualizer[0].start -
-										rowVirtualizer.options.scrollMargin
-									}px)`,
-								}}
-							>
-								{rowVirtualizer.getVirtualItems().map((virtualRow) => {
-									const note = allRows[virtualRow.index];
-									if (note) {
-										if (note.kind === 1) {
-											return (
-												<div
-													key={virtualRow.index}
-													data-index={virtualRow.index}
-													ref={rowVirtualizer.measureElement}
-												>
-													<NoteBase key={note.event_id} event={note} />
-												</div>
-											);
-										} else {
-											return (
-												<div
-													key={virtualRow.index}
-													data-index={virtualRow.index}
-													ref={rowVirtualizer.measureElement}
-												>
-													<NoteQuoteRepost key={note.event_id} event={note} />
-												</div>
-											);
-										}
-									}
-								})}
-							</div>
-						</div>
-					)}
-					<div>
-						{isFetching && !isFetchingNextPage && (
-							<div className="px-3 py-1.5">
-								<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
-									<NoteSkeleton />
-								</div>
-							</div>
-						)}
-					</div>
 				</div>
 			</div>
+			<div className="shrink-0 w-[360px]" />
 		</div>
 	);
 }