add block feature

src/app/channel/components/createModal.tsx

@@ -126,7 +126,7 @@ export default function ChannelCreateModal() {
 										<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-xl font-semibold leading-none text-transparent"
+												className="text-xl font-semibold leading-none text-white"
 											>
 												Create channel
 											</Dialog.Title>
@@ -142,7 +142,7 @@ export default function ChannelCreateModal() {
 												/>
 											</button>
 										</div>
-										<Dialog.Description className="leading-tight text-zinc-400">
+										<Dialog.Description className="leading-tight text-zinc-300">
 											Channels are freedom square, everyone can speech freely,
 											no one can stop you or deceive what to speech
 										</Dialog.Description>

src/app/note/components/mentions/note.tsx

@@ -53,7 +53,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
 			{data ? (
 				<>
 					<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
-					<div className="mt-1 pl-[46px]">
+					<div className="-mt-5 pl-[49px]">
 						{kind1 && <Kind1 content={kind1} />}
 						{kind1063 && <Kind1063 metadata={kind1063} />}
 					</div>

src/app/note/components/metadata.tsx

@@ -1,12 +1,8 @@
 import NoteReply from "@app/note/components/metadata/reply";
 import NoteRepost from "@app/note/components/metadata/repost";
-
-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 { RelayContext } from "@shared/relayProvider";
 import { READONLY_RELAYS } from "@stores/constants";
 import { decode } from "light-bolt11-decoder";
 import { useContext, useState } from "react";
@@ -67,18 +63,11 @@ export default function NoteMetadata({
 	});
 
 	return (
-		<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} />
-				<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 className="inline-flex items-center gap-2 w-full h-14 mt-5 border-t border-zinc-800">
+			<NoteReply id={id} replies={replies} />
+			<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
+			<div className="ml-auto">
+				<NoteZap zaps={zaps} />
 			</div>
 		</div>
 	);

src/app/space/components/create.tsx

@@ -0,0 +1,93 @@
+import { Dialog, Transition } from "@headlessui/react";
+import CancelIcon from "@icons/cancel";
+import PlusIcon from "@icons/plus";
+import { Fragment, useState } from "react";
+
+export function CreateBlockModal() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [loading, setLoading] = useState(false);
+
+	const closeModal = () => {
+		setIsOpen(false);
+	};
+
+	const openModal = () => {
+		setIsOpen(true);
+	};
+
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => openModal()}
+				className="group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900"
+			>
+				<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
+					<PlusIcon width={12} height={12} className="text-zinc-500" />
+				</div>
+				<div>
+					<h5 className="font-semibold text-zinc-400 group-hover:text-zinc-200">
+						Create a new block
+					</h5>
+				</div>
+			</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-2">
+										<div className="flex items-center justify-between">
+											<Dialog.Title
+												as="h3"
+												className="text-xl font-semibold leading-none text-white"
+											>
+												Create block
+											</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={20}
+													height={20}
+													className="text-zinc-300"
+												/>
+											</button>
+										</div>
+										<Dialog.Description className="leading-tight text-zinc-300">
+											Channels are freedom square, everyone can speech freely,
+											no one can stop you or deceive what to speech
+										</Dialog.Description>
+									</div>
+								</div>
+								<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3" />
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</Dialog>
+			</Transition>
+		</>
+	);
+}

src/app/space/components/feed.tsx

@@ -0,0 +1,137 @@
+import { NoteBase } from "@app/note/components/base";
+import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
+import { NoteSkeleton } from "@app/note/components/skeleton";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { getNotesByAuthor } from "@utils/storage";
+import { useEffect, useRef } from "react";
+
+const ITEM_PER_PAGE = 10;
+const TIME = Math.floor(Date.now() / 1000);
+
+export function FeedBlock({ params }: { params: any }) {
+	const {
+		status,
+		data,
+		fetchNextPage,
+		hasNextPage,
+		isFetching,
+		isFetchingNextPage,
+	}: any = useInfiniteQuery({
+		queryKey: [params.title],
+		queryFn: async ({ pageParam = 0 }) => {
+			return await getNotesByAuthor(
+				params.content,
+				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">{params.title}</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/image.tsx

@@ -0,0 +1,21 @@
+import { Image } from "@shared/image";
+
+export function ImageBlock({ params }: { params: any }) {
+	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 inline-flex items-center justify-center border-b border-zinc-900"
+			>
+				<h3 className="font-semibold text-zinc-100">{params.title}</h3>
+			</div>
+			<div className="w-full flex-1 p-3">
+				<Image
+					src={params.content}
+					alt={params.title}
+					className="w-full h-full object-cover rounded-md"
+				/>
+			</div>
+		</div>
+	);
+}

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

@@ -1,19 +1,30 @@
+import { FeedBlock } from "../components/feed";
+import { CreateBlockModal } from "@app/space/components/create";
 import { FollowingBlock } from "@app/space/components/following";
-import PlusIcon from "@shared/icons/plus";
+import { ImageBlock } from "@app/space/components/image";
+import { getBlocks } from "@utils/storage";
+import useSWR from "swr";
+
+const fetcher = ([, id]) => getBlocks(1);
 
 export function Page() {
+	const { data }: any = useSWR("blocks", fetcher);
+
 	return (
 		<div className="h-full w-full flex flex-nowrap overflow-x-auto overflow-y-hidden">
 			<FollowingBlock />
+			{data
+				? data.map((block: any) =>
+						block.kind === 0 ? (
+							<ImageBlock key={block.id} params={block} />
+						) : (
+							<FeedBlock key={block.id} params={block} />
+						),
+				  )
+				: null}
 			<div className="shrink-0 w-[360px] border-r border-zinc-900">
 				<div className="w-full h-full inline-flex items-center justify-center">
-					<button
-						type="button"
-						className="inline-flex flex-col items-center justify-center gap-1 text-zinc-500 text-lg font-semibold"
-					>
-						<PlusIcon className="w-5 h-5 text-zinc-300" />
-						Add block
-					</button>
+					<CreateBlockModal />
 				</div>
 			</div>
 			<div className="shrink-0 w-[360px]" />