From 0a6865431d4427257b06f1c5e151d6af712e8da7 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 16 Jun 2023 18:41:44 +0700
Subject: [PATCH] update channel

---
 src/app/channel/components/createModal.tsx   |   8 +-
 src/app/channel/components/item.tsx          |  16 +-
 src/app/channel/components/list.tsx          |   6 +-
 src/app/channel/components/messageList.tsx   |   2 +-
 src/app/channel/components/messages/item.tsx |  67 ++---
 src/app/channel/components/metadata.tsx      |   9 +-
 src/app/channel/components/updateModal.tsx   | 267 -------------------
 src/app/channel/hooks/useChannelProfile.tsx  |  54 ++--
 src/app/channel/pages/index.page.tsx         | 184 +++++++------
 src/app/chat/components/item.tsx             |  10 +-
 src/app/chat/components/list.tsx             |  12 +-
 src/app/chat/components/self.tsx             |  13 +-
 src/app/chat/pages/index.page.tsx            |   2 +-
 src/app/space/components/blocks/feed.tsx     |   2 +-
 src/app/space/components/blocks/image.tsx    |   2 +-
 src/app/user/_default.page.tsx               |   1 +
 src/app/user/layout.tsx                      |  14 +
 src/app/user/pages/index.page.tsx            |  13 +
 src/libs/storage.tsx                         |   2 +-
 src/shared/navigation.tsx                    |   8 +-
 src/shared/notes/base.tsx                    |   2 +-
 src/shared/notes/metadata/reply.tsx          |   2 +-
 src/shared/notes/metadata/repost.tsx         |   2 +-
 src/shared/notes/metadata/zap.tsx            |   2 +-
 src/shared/notes/replies/item.tsx            |   2 +-
 src/shared/user.tsx                          |   8 +-
 src/stores/channels.tsx                      |  15 +-
 src/utils/parser.tsx                         |   4 +-
 28 files changed, 240 insertions(+), 489 deletions(-)
 delete mode 100644 src/app/channel/components/updateModal.tsx
 create mode 100644 src/app/user/_default.page.tsx
 create mode 100644 src/app/user/layout.tsx
 create mode 100644 src/app/user/pages/index.page.tsx

diff --git a/src/app/channel/components/createModal.tsx b/src/app/channel/components/createModal.tsx
index 9c2226c4..832701e3 100644
--- a/src/app/channel/components/createModal.tsx
+++ b/src/app/channel/components/createModal.tsx
@@ -80,15 +80,13 @@ export function ChannelCreateModal() {
 			<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"
+				className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
 			>
-				<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
+				<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
 					<PlusIcon width={12} height={12} className="text-zinc-500" />
 				</div>
 				<div>
-					<h5 className="font-semibold text-zinc-400 group-hover:text-zinc-200">
-						Add a new channel
-					</h5>
+					<h5 className="font-medium text-zinc-400">Add a new channel</h5>
 				</div>
 			</button>
 			<Transition appear show={isOpen} as={Fragment}>
diff --git a/src/app/channel/components/item.tsx b/src/app/channel/components/item.tsx
index 053ffc81..319c395e 100644
--- a/src/app/channel/components/item.tsx
+++ b/src/app/channel/components/item.tsx
@@ -3,7 +3,7 @@ import { usePageContext } from "@utils/hooks/usePageContext";
 import { twMerge } from "tailwind-merge";
 
 export function ChannelsListItem({ data }: { data: any }) {
-	const channel: any = useChannelProfile(data.event_id, data.pubkey);
+	const channel: any = useChannelProfile(data.event_id);
 	const pageContext = usePageContext();
 
 	const searchParams: any = pageContext.urlParsed.search;
@@ -11,20 +11,16 @@ export function ChannelsListItem({ data }: { data: any }) {
 
 	return (
 		<a
-			href={`/app/channel?id=${data.event_id}&channelpub=${data.pubkey}`}
+			href={`/app/channel?id=${data.event_id}`}
 			className={twMerge(
-				"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
-				pageID === data.event_id
-					? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-					: "",
+				"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
+				pageID === data.event_id ? "bg-zinc-900 text-white" : "",
 			)}
 		>
 			<div
 				className={twMerge(
-					"inline-flex shrink-0 h-5 w-5 items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800",
-					pageID === data.event_id
-						? "dark:bg-zinc-800 group-hover:dark:bg-zinc-700"
-						: "",
+					"inline-flex shrink-0 h-5 w-5 items-center justify-center rounded bg-zinc-900",
+					pageID === data.event_id ? "bg-zinc-800" : "",
 				)}
 			>
 				<span className="text-xs text-zinc-100">#</span>
diff --git a/src/app/channel/components/list.tsx b/src/app/channel/components/list.tsx
index c97b41dc..da5dd53c 100644
--- a/src/app/channel/components/list.tsx
+++ b/src/app/channel/components/list.tsx
@@ -12,14 +12,14 @@ export function ChannelsList() {
 	}, [fetchChannels]);
 
 	return (
-		<div className="flex flex-col gap-1">
+		<div className="flex flex-col gap-0.5">
 			{!channels ? (
 				<>
-					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
+					<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
 						<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 						<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
 					</div>
-					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
+					<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
 						<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 						<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
 					</div>
diff --git a/src/app/channel/components/messageList.tsx b/src/app/channel/components/messageList.tsx
index eb76bf23..adbe1b8c 100644
--- a/src/app/channel/components/messageList.tsx
+++ b/src/app/channel/components/messageList.tsx
@@ -28,7 +28,7 @@ export function ChannelMessageList() {
 		<div className="h-full w-full">
 			<Virtuoso
 				ref={virtuosoRef}
-				data={messages}
+				data={[]}
 				itemContent={itemContent}
 				components={{
 					Header: () => (
diff --git a/src/app/channel/components/messages/item.tsx b/src/app/channel/components/messages/item.tsx
index 96bbc6a0..8dd8cd9e 100644
--- a/src/app/channel/components/messages/item.tsx
+++ b/src/app/channel/components/messages/item.tsx
@@ -2,65 +2,40 @@ import { MessageHideButton } from "@app/channel/components/messages/hideButton";
 import { MessageMuteButton } from "@app/channel/components/messages/muteButton";
 import { MessageReplyButton } from "@app/channel/components/messages/replyButton";
 import { ChannelMessageUser } from "@app/channel/components/messages/user";
-import { ChannelMessageUserMute } from "@app/channel/components/messages/userMute";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { MentionNote } from "@shared/notes/mentions/note";
 import { ImagePreview } from "@shared/notes/preview/image";
 import { VideoPreview } from "@shared/notes/preview/video";
 import { parser } from "@utils/parser";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 
-export function ChannelMessageItem({ data }: { data: any }) {
+export function ChannelMessageItem({ data }: { data: NDKEvent }) {
 	const content = useMemo(() => parser(data), [data]);
-	const [hide, setHide] = useState(data.hide);
-
-	const toggleHide = () => {
-		setHide((prev) => !prev);
-	};
-
-	if (data.mute)
-		return (
-			<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
-				<ChannelMessageUserMute pubkey={data.pubkey} />
-			</div>
-		);
 
 	return (
 		<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
 			<div className="flex flex-col">
 				<ChannelMessageUser pubkey={data.pubkey} time={data.created_at} />
 				<div className="-mt-[20px] pl-[49px]">
-					{hide ? (
-						<>
-							<p className="leading-tight italic text-zinc-400">
-								[hided message]
-							</p>
-							<button type="button" onClick={() => toggleHide()}>
-								show
-							</button>
-						</>
+					<p className="whitespace-pre-line break-words text-base leading-tight">
+						{content.parsed}
+					</p>
+					{Array.isArray(content.images) && content.images.length ? (
+						<ImagePreview urls={content.images} />
 					) : (
-						<>
-							<p className="whitespace-pre-line break-words text-base leading-tight">
-								{content.parsed}
-							</p>
-							{Array.isArray(content.images) && content.images.length ? (
-								<ImagePreview urls={content.images} />
-							) : (
-								<></>
-							)}
-							{Array.isArray(content.videos) && content.videos.length ? (
-								<VideoPreview urls={content.videos} />
-							) : (
-								<></>
-							)}
-							{Array.isArray(content.notes) && content.notes.length ? (
-								content.notes.map((note: string) => (
-									<MentionNote key={note} id={note} />
-								))
-							) : (
-								<></>
-							)}
-						</>
+						<></>
+					)}
+					{Array.isArray(content.videos) && content.videos.length ? (
+						<VideoPreview urls={content.videos} />
+					) : (
+						<></>
+					)}
+					{Array.isArray(content.notes) && content.notes.length ? (
+						content.notes.map((note: string) => (
+							<MentionNote key={note} id={note} />
+						))
+					) : (
+						<></>
 					)}
 				</div>
 			</div>
diff --git a/src/app/channel/components/metadata.tsx b/src/app/channel/components/metadata.tsx
index 65c940f6..c08837f1 100644
--- a/src/app/channel/components/metadata.tsx
+++ b/src/app/channel/components/metadata.tsx
@@ -4,11 +4,8 @@ import { Image } from "@shared/image";
 import { DEFAULT_AVATAR } from "@stores/constants";
 import { nip19 } from "nostr-tools";
 
-export function ChannelMetadata({
-	id,
-	pubkey,
-}: { id: string; pubkey: string }) {
-	const metadata = useChannelProfile(id, pubkey);
+export function ChannelMetadata({ id }: { id: string }) {
+	const metadata = useChannelProfile(id);
 	const noteID = id ? nip19.noteEncode(id) : null;
 
 	const copyNoteID = async () => {
@@ -22,7 +19,7 @@ export function ChannelMetadata({
 		<div className="flex flex-col gap-2">
 			<div className="relative shrink-0 rounded-md h-11 w-11">
 				<Image
-					src={metadata?.image || DEFAULT_AVATAR}
+					src={metadata?.picture || DEFAULT_AVATAR}
 					alt={id}
 					className="h-11 w-11 rounded-md object-contain bg-zinc-900"
 				/>
diff --git a/src/app/channel/components/updateModal.tsx b/src/app/channel/components/updateModal.tsx
deleted file mode 100644
index 3d3a674f..00000000
--- a/src/app/channel/components/updateModal.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { getChannel } from "@libs/storage";
-import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
-import { AvatarUploader } from "@shared/avatarUploader";
-import { CancelIcon, EditIcon } from "@shared/icons";
-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 { Fragment, useContext, useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-
-export function ChannelUpdateModal({ id }: { id: string }) {
-	const ndk = useContext(RelayContext);
-	const account = useActiveAccount((state: any) => state.account);
-
-	const [isOpen, setIsOpen] = useState(false);
-	const [image, setImage] = useState(DEFAULT_AVATAR);
-	const [loading, setLoading] = useState(false);
-
-	const closeModal = () => {
-		setIsOpen(false);
-	};
-
-	const openModal = () => {
-		setIsOpen(true);
-	};
-
-	const {
-		register,
-		handleSubmit,
-		reset,
-		setValue,
-		formState: { isDirty, isValid },
-	} = useForm({
-		defaultValues: async () => {
-			const channel = await getChannel(id);
-			const metadata = JSON.parse(channel.metadata);
-			// update image state
-			setImage(metadata.image);
-			// set default values
-			return metadata;
-		},
-	});
-
-	const onSubmit = (data: any) => {
-		setLoading(true);
-
-		try {
-			const signer = new NDKPrivateKeySigner(account.privkey);
-			ndk.signer = signer;
-
-			const event = new NDKEvent(ndk);
-			// build event
-			event.content = JSON.stringify(data);
-			event.kind = 41;
-			event.created_at = dateToUnix();
-			event.pubkey = account.pubkey;
-			event.tags = [["e", id]];
-
-			// publish event
-			event.publish();
-
-			// reset form
-			reset();
-
-			// close modal
-			setIsOpen(false);
-		} catch (e) {
-			console.log("error: ", e);
-		}
-	};
-
-	useEffect(() => {
-		setValue("picture", image);
-	}, [setValue, image]);
-
-	return (
-		<>
-			<button
-				type="button"
-				onClick={() => openModal()}
-				className="group inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800 focus:outline-none"
-			>
-				<EditIcon
-					width={16}
-					height={16}
-					className="text-zinc-400 group-hover:text-white"
-				/>
-			</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-5">
-									<div className="flex flex-col gap-2">
-										<div className="flex items-center justify-between">
-											<Dialog.Title
-												as="h3"
-												className="text-lg font-semibold leading-none text-white"
-											>
-												Update channel
-											</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="text-sm leading-tight text-zinc-400">
-											New metadata will be published on all relays, and will be
-											immediately available to all users, so please carefully.
-										</Dialog.Description>
-									</div>
-								</div>
-								<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
-									<form
-										onSubmit={handleSubmit(onSubmit)}
-										className="flex h-full w-full flex-col gap-4"
-									>
-										<input
-											type={"hidden"}
-											{...register("picture")}
-											value={image}
-											className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
-										/>
-										<div className="flex flex-col gap-1">
-											<label className="text-sm font-medium uppercase tracking-wider text-zinc-400">
-												Picture
-											</label>
-											<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
-												<Image
-													src={image}
-													alt="channel picture"
-													className="relative z-10 h-11 w-11 rounded-md"
-												/>
-												<div className="absolute bottom-3 right-3 z-10">
-													<AvatarUploader valueState={setImage} />
-												</div>
-											</div>
-										</div>
-										<div className="flex flex-col gap-1">
-											<label className="text-sm font-medium uppercase tracking-wider text-zinc-400">
-												Channel name *
-											</label>
-											<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
-												<input
-													type={"text"}
-													{...register("name", {
-														required: true,
-														minLength: 4,
-													})}
-													spellCheck={false}
-													className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
-												/>
-											</div>
-										</div>
-										<div className="flex flex-col gap-1">
-											<label className="text-sm font-medium uppercase tracking-wider text-zinc-400">
-												Description
-											</label>
-											<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
-												<textarea
-													{...register("about")}
-													spellCheck={false}
-													className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
-												/>
-											</div>
-										</div>
-										<div className="flex h-14 items-center justify-between gap-1 rounded-lg bg-zinc-800 px-4 py-2">
-											<div className="flex flex-col gap-0.5">
-												<div className="inline-flex items-center gap-1">
-													<span className="text-base font-bold leading-none text-white">
-														Make Private
-													</span>
-													<div className="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-0.5 text-base font-medium ring-1 ring-inset ring-zinc-400/20">
-														<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
-															Coming soon
-														</span>
-													</div>
-												</div>
-												<p className="text-base leading-none text-zinc-400">
-													Private channels can only be viewed by member
-												</p>
-											</div>
-											<div>
-												<button
-													type="button"
-													disabled
-													className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-zinc-900 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-600 focus:ring-offset-2"
-													role="switch"
-													aria-checked="false"
-												>
-													<span className="pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-zinc-600 shadow ring-0 transition duration-200 ease-in-out" />
-												</button>
-											</div>
-										</div>
-										<div>
-											<button
-												type="submit"
-												disabled={!isDirty || !isValid}
-												className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
-											>
-												{loading ? (
-													<svg
-														className="h-4 w-4 animate-spin text-black dark:text-white"
-														xmlns="http://www.w3.org/2000/svg"
-														fill="none"
-														viewBox="0 0 24 24"
-													>
-														<title id="loading">Loading</title>
-														<circle
-															className="opacity-25"
-															cx="12"
-															cy="12"
-															r="10"
-															stroke="currentColor"
-															strokeWidth="4"
-														/>
-														<path
-															className="opacity-75"
-															fill="currentColor"
-															d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-														/>
-													</svg>
-												) : (
-													"Update channel"
-												)}
-											</button>
-										</div>
-									</form>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</Dialog>
-			</Transition>
-		</>
-	);
-}
diff --git a/src/app/channel/hooks/useChannelProfile.tsx b/src/app/channel/hooks/useChannelProfile.tsx
index d9e3a4f0..084077bf 100644
--- a/src/app/channel/hooks/useChannelProfile.tsx
+++ b/src/app/channel/hooks/useChannelProfile.tsx
@@ -1,7 +1,7 @@
 import { getChannel, updateChannelMetadata } from "@libs/storage";
 import { RelayContext } from "@shared/relayProvider";
 import { useContext } from "react";
-import useSWR, { useSWRConfig } from "swr";
+import useSWR from "swr";
 import useSWRSubscription from "swr/subscription";
 
 const fetcher = async ([, id]) => {
@@ -13,39 +13,33 @@ const fetcher = async ([, id]) => {
 	}
 };
 
-export function useChannelProfile(id: string, channelPubkey: string) {
+export function useChannelProfile(id: string) {
 	const ndk = useContext(RelayContext);
+	const { data, mutate } = useSWR(["channel-metadata", id], fetcher);
 
-	const { mutate } = useSWRConfig();
-	const { data, isLoading } = useSWR(["channel-metadata", id], fetcher);
+	useSWRSubscription(data ? ["channel-metadata", id] : null, () => {
+		// subscribe to channel
+		const sub = ndk.subscribe(
+			{
+				"#e": [id],
+				kinds: [41],
+			},
+			{
+				closeOnEose: true,
+			},
+		);
 
-	useSWRSubscription(
-		!isLoading && data ? ["channel-metadata", id] : null,
-		([, key]) => {
-			// subscribe to channel
-			const sub = ndk.subscribe(
-				{
-					"#e": [key],
-					authors: [channelPubkey],
-					kinds: [41],
-				},
-				{
-					closeOnEose: true,
-				},
-			);
+		sub.addListener("event", (event: { content: string }) => {
+			// update in local database
+			updateChannelMetadata(id, event.content);
+			// revaildate
+			mutate();
+		});
 
-			sub.addListener("event", (event: { content: string }) => {
-				// update in local database
-				updateChannelMetadata(key, event.content);
-				// revaildate
-				mutate(["channel-metadata", key]);
-			});
-
-			return () => {
-				sub.stop();
-			};
-		},
-	);
+		return () => {
+			sub.stop();
+		};
+	});
 
 	return data;
 }
diff --git a/src/app/channel/pages/index.page.tsx b/src/app/channel/pages/index.page.tsx
index 1ebfc23c..c9c1e879 100644
--- a/src/app/channel/pages/index.page.tsx
+++ b/src/app/channel/pages/index.page.tsx
@@ -1,98 +1,98 @@
-import { ChannelBlackList } from "@app/channel/components/blacklist";
+import { ChannelMessageItem } from "../components/messages/item";
 import { ChannelMembers } from "@app/channel/components/members";
-import { ChannelMessageList } from "@app/channel/components/messageList";
 import { ChannelMessageForm } from "@app/channel/components/messages/form";
 import { ChannelMetadata } from "@app/channel/components/metadata";
-import { ChannelUpdateModal } from "@app/channel/components/updateModal";
-import { getActiveBlacklist, getBlacklist } from "@libs/storage";
-import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { RelayContext } from "@shared/relayProvider";
-import { useActiveAccount } from "@stores/accounts";
 import { useChannelMessages } from "@stores/channels";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { dateToUnix, getHourAgo } from "@utils/date";
 import { usePageContext } from "@utils/hooks/usePageContext";
-import { arrayObjToPureArr } from "@utils/transform";
-import { useContext, useRef } from "react";
-import useSWR from "swr";
+import { useCallback, useContext, useEffect, useRef } from "react";
 import useSWRSubscription from "swr/subscription";
 
-const fetchMuted = async ([, id]) => {
-	const res = await getBlacklist(id, 44);
-	const array = arrayObjToPureArr(res);
-	return { original: res, array: array };
-};
-
-const fetchHided = async ([, id]) => {
-	const res = await getActiveBlacklist(id, 43);
-	const array = arrayObjToPureArr(res);
-	return array;
-};
+const now = new Date();
+const since = dateToUnix(getHourAgo(24, now));
 
 export function Page() {
 	const ndk = useContext(RelayContext);
-
 	const pageContext = usePageContext();
+
 	const searchParams: any = pageContext.urlParsed.search;
 	const channelID = searchParams.id;
-	const channelPubkey = searchParams.channelpub;
 
-	const account: any = useActiveAccount((state: any) => state.account);
-	const [addMessage, clear] = useChannelMessages((state: any) => [
-		state.add,
-		state.clear,
-	]);
+	const [messages, addMessage, fetchMessages, clearMessages]: any =
+		useChannelMessages((state: any) => [
+			state.messages,
+			state.addMessage,
+			state.fetch,
+			state.clear,
+		]);
 
-	const { data: muted } = useSWR(
-		account ? ["muted", account.id] : null,
-		fetchMuted,
-	);
-	const { data: hided } = useSWR(
-		account ? ["hided", account.id] : null,
-		fetchHided,
-	);
+	useSWRSubscription(["channelMessagesSubscribe", channelID], () => {
+		// subscribe to channel
+		const sub = ndk.subscribe({
+			"#e": [channelID],
+			kinds: [42],
+			since: dateToUnix(),
+		});
 
-	const now = useRef(new Date());
+		sub.addListener("event", (event) => {
+			addMessage(event);
+		});
 
-	useSWRSubscription(
-		account && channelID && muted && hided ? ["channel", channelID] : null,
-		() => {
-			// subscribe to channel
-			const sub = ndk.subscribe({
-				"#e": [channelID],
-				kinds: [42],
-				since: dateToUnix(getHourAgo(24, now.current)),
-				limit: 20,
-			});
+		return () => {
+			sub.stop();
+		};
+	});
 
-			sub.addListener("event", (event: NDKEvent) => {
-				const message: NDKEvent = event;
+	useEffect(() => {
+		fetchMessages(ndk, channelID, since);
+		return () => {
+			clearMessages();
+		};
+	}, [fetchMessages]);
 
-				// handle hide message
-				if (hided.includes(event.id)) {
-					message["hide"] = true;
-				} else {
-					message["hide"] = false;
-				}
+	const count = messages.length;
+	const reverseIndex = useCallback((index) => count - 1 - index, [count]);
+	const parentRef = useRef();
+	const virtualizerRef = useRef(null);
 
-				// handle mute user
-				if (muted.array.includes(event.pubkey)) {
-					message["mute"] = true;
-				} else {
-					message["mute"] = false;
-				}
+	if (
+		virtualizerRef.current &&
+		count !== virtualizerRef.current.options.count
+	) {
+		const delta = count - virtualizerRef.current.options.count;
+		const nextOffset = virtualizerRef.current.scrollOffset + delta * 200;
 
-				// add to store
-				addMessage(message);
-			});
+		virtualizerRef.current.scrollOffset = nextOffset;
+		virtualizerRef.current.scrollToOffset(nextOffset, { align: "start" });
+	}
 
-			return () => {
-				sub.stop();
-				clear();
-			};
-		},
-	);
+	const virtualizer = useVirtualizer({
+		count,
+		getScrollElement: () => parentRef.current,
+		estimateSize: () => 200,
+		getItemKey: useCallback(
+			(index) => messages[reverseIndex(index)].id,
+			[messages, reverseIndex],
+		),
+		overscan: 5,
+		scrollMargin: 50,
+	});
 
-	if (!account) return <div>Fuck SSR</div>;
+	useEffect(() => {
+		virtualizerRef.current = virtualizer;
+	}, []);
+
+	const items = virtualizer.getVirtualItems();
+
+	const [paddingTop, paddingBottom] =
+		items.length > 0
+			? [
+					Math.max(0, items[0].start - virtualizer.options.scrollMargin),
+					Math.max(0, virtualizer.getTotalSize() - items[items.length - 1].end),
+			  ]
+			: [0, 0];
 
 	return (
 		<div className="h-full w-full grid grid-cols-3">
@@ -104,9 +104,41 @@ export function Page() {
 					<h3 className="font-semibold text-zinc-100">Public Channel</h3>
 				</div>
 				<div className="w-full flex-1 p-3">
-					<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900 shadow-input shadow-black/20">
-						<ChannelMessageList />
-						<div className="inline-flex shrink-0 p-3">
+					<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900">
+						<div
+							ref={parentRef}
+							className="scrollbar-hide overflow-y-auto h-full w-full"
+							style={{ contain: "strict" }}
+						>
+							{!messages ? (
+								<p>Loading...</p>
+							) : (
+								<div
+									style={{
+										overflowAnchor: "none",
+										paddingTop,
+										paddingBottom,
+									}}
+								>
+									{items.map((item) => {
+										const index = reverseIndex(item.index);
+										const message = messages[index];
+
+										return (
+											<div
+												key={item.key}
+												data-index={item.index}
+												data-reverse-index={index}
+												ref={virtualizer.measureElement}
+											>
+												<ChannelMessageItem data={message} />
+											</div>
+										);
+									})}
+								</div>
+							)}
+						</div>
+						<div className="w-full inline-flex shrink-0 border-t border-zinc-800">
 							<ChannelMessageForm channelID={channelID} />
 						</div>
 					</div>
@@ -118,12 +150,8 @@ export function Page() {
 					className="h-11 w-full shrink-0 inline-flex items-center justify-center border-b border-zinc-900"
 				/>
 				<div className="p-3 flex flex-col gap-3">
-					<ChannelMetadata id={channelID} pubkey={channelPubkey} />
+					<ChannelMetadata id={channelID} />
 					<ChannelMembers />
-					{muted && <ChannelBlackList blacklist={muted.original} />}
-					{account && account.pubkey === channelPubkey && (
-						<ChannelUpdateModal id={channelID} />
-					)}
 				</div>
 			</div>
 		</div>
diff --git a/src/app/chat/components/item.tsx b/src/app/chat/components/item.tsx
index 4561ae4a..e5bf6723 100644
--- a/src/app/chat/components/item.tsx
+++ b/src/app/chat/components/item.tsx
@@ -16,7 +16,7 @@ export function ChatsListItem({ data }: { data: any }) {
 		<>
 			{isError && <div>error</div>}
 			{isLoading && !user ? (
-				<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
+				<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
 					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div>
 						<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
@@ -26,10 +26,8 @@ export function ChatsListItem({ data }: { data: any }) {
 				<a
 					href={`/app/chat?pubkey=${data.sender_pubkey}`}
 					className={twMerge(
-						"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
-						pagePubkey === data.sender_pubkey
-							? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-							: "",
+						"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
+						pagePubkey === data.sender_pubkey ? "bg-zinc-900 text-white" : "",
 					)}
 				>
 					<div className="relative h-5 w-5 shrink-0 rounded">
@@ -41,7 +39,7 @@ export function ChatsListItem({ data }: { data: any }) {
 					</div>
 					<div className="w-full inline-flex items-center justify-between">
 						<div className="inline-flex items-baseline gap-1">
-							<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
+							<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
 								{user?.nip05 ||
 									user?.displayName ||
 									shortenKey(data.sender_pubkey)}
diff --git a/src/app/chat/components/list.tsx b/src/app/chat/components/list.tsx
index fae34fcb..4dca215b 100644
--- a/src/app/chat/components/list.tsx
+++ b/src/app/chat/components/list.tsx
@@ -16,12 +16,12 @@ export function ChatsList() {
 
 	if (!account)
 		return (
-			<div className="flex flex-col">
-				<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
+			<div className="flex flex-col gap-0.5">
+				<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
 					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
 				</div>
-				<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
+				<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
 					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
 				</div>
@@ -29,15 +29,15 @@ export function ChatsList() {
 		);
 
 	return (
-		<div className="flex flex-col gap-1">
+		<div className="flex flex-col gap-0.5">
 			<ChatsListSelfItem data={account} />
 			{!chats ? (
 				<>
-					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
+					<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
 						<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 						<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
 					</div>
-					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
+					<div className="inline-flex h-9 items-center gap-2 rounded-md px-2.5">
 						<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 						<div className="h-3 w-full rounded-sm animate-pulse bg-zinc-800" />
 					</div>
diff --git a/src/app/chat/components/self.tsx b/src/app/chat/components/self.tsx
index f97c2aae..b59e4a71 100644
--- a/src/app/chat/components/self.tsx
+++ b/src/app/chat/components/self.tsx
@@ -10,13 +10,12 @@ export function ChatsListSelfItem({ data }: { data: any }) {
 	const searchParams: any = pageContext.urlParsed.search;
 	const pagePubkey = searchParams.pubkey;
 
-	const { user, isError, isLoading } = useProfile(data.pubkey);
+	const { user, isLoading } = useProfile(data.pubkey);
 
 	return (
 		<>
-			{isError && <div>error</div>}
 			{isLoading && !user ? (
-				<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
+				<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
 					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div>
 						<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
@@ -26,10 +25,8 @@ export function ChatsListSelfItem({ data }: { data: any }) {
 				<a
 					href={`/app/chat?pubkey=${data.pubkey}`}
 					className={twMerge(
-						"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
-						pagePubkey === data.pubkey
-							? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-							: "",
+						"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
+						pagePubkey === data.pubkey ? "bg-zinc-900 text-white" : "",
 					)}
 				>
 					<div className="relative h-5 w-5 shrink-0 rounded">
@@ -40,7 +37,7 @@ export function ChatsListSelfItem({ data }: { data: any }) {
 						/>
 					</div>
 					<div className="inline-flex items-baseline gap-1">
-						<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
+						<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
 							{user?.nip05 || user?.name || shortenKey(data.pubkey)}
 						</h5>
 						<span className="text-zinc-500">(you)</span>
diff --git a/src/app/chat/pages/index.page.tsx b/src/app/chat/pages/index.page.tsx
index 5e442b1c..764d7b5b 100644
--- a/src/app/chat/pages/index.page.tsx
+++ b/src/app/chat/pages/index.page.tsx
@@ -61,7 +61,7 @@ export function Page() {
 					<h3 className="font-semibold text-zinc-100">Encrypted Chat</h3>
 				</div>
 				<div className="w-full flex-1 p-3">
-					<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900 shadow-input shadow-black/20">
+					<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900">
 						<ChatMessageList />
 						<div className="shrink-0 px-5 p-3 border-t border-zinc-800">
 							<ChatMessageForm
diff --git a/src/app/space/components/blocks/feed.tsx b/src/app/space/components/blocks/feed.tsx
index 31cb9d5e..8551b124 100644
--- a/src/app/space/components/blocks/feed.tsx
+++ b/src/app/space/components/blocks/feed.tsx
@@ -18,7 +18,7 @@ export function FeedBlock({ params }: { params: any }) {
 	const removeBlock = useActiveAccount((state: any) => state.removeBlock);
 
 	const close = () => {
-		removeBlock(params.id);
+		removeBlock(params.id, true);
 	};
 
 	const getKey = (pageIndex, previousPageData) => {
diff --git a/src/app/space/components/blocks/image.tsx b/src/app/space/components/blocks/image.tsx
index 45d83983..e5311e15 100644
--- a/src/app/space/components/blocks/image.tsx
+++ b/src/app/space/components/blocks/image.tsx
@@ -6,7 +6,7 @@ export function ImageBlock({ params }: { params: any }) {
 	const removeBlock = useActiveAccount((state: any) => state.removeBlock);
 
 	const close = () => {
-		removeBlock(params.id);
+		removeBlock(params.id, true);
 	};
 
 	return (
diff --git a/src/app/user/_default.page.tsx b/src/app/user/_default.page.tsx
new file mode 100644
index 00000000..e4596971
--- /dev/null
+++ b/src/app/user/_default.page.tsx
@@ -0,0 +1 @@
+export { LayoutUser as Layout } from "./layout";
diff --git a/src/app/user/layout.tsx b/src/app/user/layout.tsx
new file mode 100644
index 00000000..90a31e26
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/src/app/user/pages/index.page.tsx b/src/app/user/pages/index.page.tsx
new file mode 100644
index 00000000..aec93a38
--- /dev/null
+++ b/src/app/user/pages/index.page.tsx
@@ -0,0 +1,13 @@
+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>
+	);
+}
diff --git a/src/libs/storage.tsx b/src/libs/storage.tsx
index a9ec7e79..bc108fae 100644
--- a/src/libs/storage.tsx
+++ b/src/libs/storage.tsx
@@ -299,7 +299,7 @@ export async function updateChannelMetadata(event_id: string, value: string) {
 
 	return await db.execute(
 		"UPDATE channels SET name = ?, picture = ?, about = ? WHERE event_id = ?;",
-		[data.name, data.image, data.about, event_id],
+		[data.name, data.picture, data.about, event_id],
 	);
 }
 
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index 8414fe21..5c4f4035 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -29,8 +29,8 @@ export function Navigation() {
 					<div className="flex flex-col gap-1">
 						<ActiveLink
 							href="/app/space"
-							className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-zinc-200 hover:text-white"
-							activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
+							className="flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200"
+							activeClassName="bg-zinc-900/50"
 						>
 							<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
 								<SpaceIcon width={12} height={12} className="text-white" />
@@ -39,8 +39,8 @@ export function Navigation() {
 						</ActiveLink>
 						<ActiveLink
 							href="/app/trending"
-							className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-zinc-200 hover:text-white"
-							activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
+							className="flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200"
+							activeClassName="bg-zinc-900/50"
 						>
 							<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
 								<TrendingIcon width={12} height={12} className="text-white" />
diff --git a/src/shared/notes/base.tsx b/src/shared/notes/base.tsx
index 2f72c74a..ca9691c4 100644
--- a/src/shared/notes/base.tsx
+++ b/src/shared/notes/base.tsx
@@ -11,7 +11,7 @@ import { useMemo } from "react";
 export function NoteBase({
 	event,
 	block,
-	metadata,
+	metadata = true,
 }: { event: LumeEvent; block?: number; metadata?: boolean }) {
 	const content = useMemo(() => parser(event), [event]);
 	const checkParentID = isTagsIncludeID(event.parent_id, event.tags);
diff --git a/src/shared/notes/metadata/reply.tsx b/src/shared/notes/metadata/reply.tsx
index b14ea9c3..bd71e901 100644
--- a/src/shared/notes/metadata/reply.tsx
+++ b/src/shared/notes/metadata/reply.tsx
@@ -22,7 +22,7 @@ export function NoteReply({
 		<button
 			type="button"
 			onClick={(e) => openThread(e, id)}
-			className="w-14 group inline-flex items-center gap-1.5"
+			className="w-20 group inline-flex items-center gap-1.5"
 		>
 			<ReplyIcon
 				width={16}
diff --git a/src/shared/notes/metadata/repost.tsx b/src/shared/notes/metadata/repost.tsx
index 242dd47f..27d0d96d 100644
--- a/src/shared/notes/metadata/repost.tsx
+++ b/src/shared/notes/metadata/repost.tsx
@@ -44,7 +44,7 @@ export function NoteRepost({
 		<button
 			type="button"
 			onClick={(e) => submitEvent(e)}
-			className="w-14 group inline-flex items-center gap-1.5"
+			className="w-20 group inline-flex items-center gap-1.5"
 		>
 			<RepostIcon
 				width={16}
diff --git a/src/shared/notes/metadata/zap.tsx b/src/shared/notes/metadata/zap.tsx
index cf506cf4..2274cd54 100644
--- a/src/shared/notes/metadata/zap.tsx
+++ b/src/shared/notes/metadata/zap.tsx
@@ -5,7 +5,7 @@ export function NoteZap({ zaps }: { zaps: number }) {
 	return (
 		<button
 			type="button"
-			className="w-14 group inline-flex items-center gap-1.5"
+			className="w-20 group inline-flex items-center gap-1.5"
 		>
 			<ZapIcon
 				width={16}
diff --git a/src/shared/notes/replies/item.tsx b/src/shared/notes/replies/item.tsx
index 6e4d0108..03ec56ac 100644
--- a/src/shared/notes/replies/item.tsx
+++ b/src/shared/notes/replies/item.tsx
@@ -10,7 +10,7 @@ export function Reply({ data }: { data: any }) {
 		<div className="flex h-min min-h-min w-full select-text flex-col px-3 pt-5 mb-3 rounded-md bg-zinc-900">
 			<div className="flex flex-col">
 				<User pubkey={data.pubkey} time={data.created_at} />
-				<div className="-mt-[20px] pl-[47px]">
+				<div className="-mt-[20px] pl-[50px]">
 					<Kind1 content={content} />
 					<NoteMetadata id={data.id} eventPubkey={data.pubkey} />
 				</div>
diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index a2b06a42..441adeee 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -56,11 +56,7 @@ export function User({
 				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">
-					<div
-						onClick={(e) => e.stopPropagation()}
-						onKeyDown={(e) => e.stopPropagation()}
-						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-lg border border-zinc-700 bg-zinc-900 shadow-input ring-1 ring-black ring-opacity-5">
 						<div className="flex items-start gap-2.5 border-b border-zinc-800 px-3 py-3">
 							<Image
 								src={user?.image || DEFAULT_AVATAR}
@@ -90,7 +86,7 @@ export function User({
 								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"
 							>
-								View full profile
+								View profile
 							</a>
 							<a
 								href={`/app/chat?pubkey=${pubkey}`}
diff --git a/src/stores/channels.tsx b/src/stores/channels.tsx
index 9430f1af..04b384be 100644
--- a/src/stores/channels.tsx
+++ b/src/stores/channels.tsx
@@ -1,4 +1,5 @@
 import { getChannels } from "@libs/storage";
+import NDK, { NDKFilter } from "@nostr-dev-kit/ndk";
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
@@ -37,8 +38,20 @@ export const useChannelMessages = create(
 	immer((set) => ({
 		messages: [],
 		replyTo: { id: null, pubkey: null, content: null },
+		fetch: async (ndk: NDK, id: string, since: number) => {
+			const filter: NDKFilter = {
+				"#e": [id],
+				kinds: [42],
+				since: since,
+			};
+			const events = await ndk.fetchEvents(filter);
+			const array = [...events];
+			set({ messages: array });
+		},
 		add: (message: any) => {
-			set((state: any) => ({ messages: [message, ...state.messages] }));
+			set((state: any) => {
+				state.messages.push(message);
+			});
 		},
 		openReply: (id: string, pubkey: string, content: string) => {
 			set(() => ({ replyTo: { id, pubkey, content } }));
diff --git a/src/utils/parser.tsx b/src/utils/parser.tsx
index effeefb9..2749b603 100644
--- a/src/utils/parser.tsx
+++ b/src/utils/parser.tsx
@@ -58,9 +58,7 @@ export function parser(event: any) {
 		const event = item.event;
 		if (event) {
 			content.notes.push(event.id);
-			content.parsed = reactStringReplace(content.parsed, item.text, () => (
-				<></>
-			));
+			content.parsed = content.parsed.replace(item.text, "");
 		}
 		if (profile) {
 			content.parsed = reactStringReplace(