minor updates

src/app/channel/components/messages/item.tsx

@@ -2,6 +2,7 @@ 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 { MentionNote } from "@app/note/components/mentions/note";
 import { ImagePreview } from "@app/note/components/preview/image";
 import { VideoPreview } from "@app/note/components/preview/video";
@@ -16,7 +17,12 @@ export function ChannelMessageItem({ data }: { data: any }) {
 		setHide((prev) => !prev);
 	};
 
-	if (data.mute) return null;
+	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">

src/app/channel/components/messages/userMute.tsx

@@ -0,0 +1,41 @@
+import { Image } from "@shared/image";
+import { DEFAULT_AVATAR } from "@stores/constants";
+import { useProfile } from "@utils/hooks/useProfile";
+
+export function ChannelMessageUserMute({
+	pubkey,
+}: {
+	pubkey: string;
+}) {
+	const { user, isError, isLoading } = useProfile(pubkey);
+
+	return (
+		<div className="flex items-center gap-3">
+			{isError || isLoading ? (
+				<>
+					<div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
+					<div className="flex w-full flex-1 items-center justify-between">
+						<div className="flex items-baseline gap-2 text-base">
+							<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
+						</div>
+					</div>
+				</>
+			) : (
+				<>
+					<div className="relative h-11 w-11 shrink-0 rounded-md">
+						<Image
+							src={user?.picture || DEFAULT_AVATAR}
+							alt={pubkey}
+							className="h-11 w-11 rounded-md object-cover"
+						/>
+					</div>
+					<div className="flex w-full flex-1 items-center justify-between">
+						<span className="leading-none text-zinc-300">
+							You has been muted this user
+						</span>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}

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

@@ -55,12 +55,12 @@ export function Page() {
 
 	useSWRSubscription(
 		account && channelID && muted && hided ? ["channel", channelID] : null,
-		([, key]) => {
+		() => {
 			// subscribe to channel
 			const unsubscribe = pool.subscribe(
 				[
 					{
-						"#e": [key],
+						"#e": [channelID],
 						kinds: [42],
 						since: dateToUnix(getHourAgo(24, now.current)),
 						limit: 20,

src/app/chat/components/messages/form.tsx

@@ -38,13 +38,7 @@ export function ChatMessageForm({
 		pool.publish(event, WRITEONLY_RELAYS);
 
 		// add message to store
-		addMessage({
-			receiver_pubkey: receiverPubkey,
-			sender_pubkey: event.pubkey,
-			content: event.content,
-			tags: event.tags,
-			created_at: event.created_at,
-		});
+		addMessage(receiverPubkey, event);
 
 		// reset state
 		setValue("");

src/app/chat/components/self.tsx

@@ -27,7 +27,7 @@ export function ChatsListSelfItem({ data }: { data: any }) {
 					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.sender_pubkey
+						pagePubkey === data.pubkey
 							? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
 							: "",
 					)}

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

@@ -22,34 +22,31 @@ export function Page() {
 		state.fetch,
 		state.clear,
 	]);
-	const addMessage = useChatMessages((state: any) => state.add);
+	const add = useChatMessages((state: any) => state.add);
 
-	useSWRSubscription(account && pubkey ? ["chat", pubkey] : null, ([, key]) => {
-		const unsubscribe = pool.subscribe(
-			[
-				{
-					kinds: [4],
-					authors: [key],
-					"#p": [account.pubkey],
-					since: dateToUnix(),
+	useSWRSubscription(
+		account.pubkey !== pubkey ? ["chat", pubkey] : null,
+		() => {
+			const unsubscribe = pool.subscribe(
+				[
+					{
+						kinds: [4],
+						authors: [pubkey],
+						"#p": [account.pubkey],
+						since: dateToUnix(),
+					},
+				],
+				READONLY_RELAYS,
+				(event: any) => {
+					add(account.pubkey, event);
 				},
-			],
-			READONLY_RELAYS,
-			(event: any) => {
-				addMessage({
-					receiver_pubkey: account.pubkey,
-					sender_pubkey: event.pubkey,
-					content: event.content,
-					tags: event.tags,
-					created_at: event.created_at,
-				});
-			},
-		);
+			);
 
-		return () => {
-			unsubscribe();
-		};
-	});
+			return () => {
+				unsubscribe();
+			};
+		},
+	);
 
 	useEffect(() => {
 		fetchMessages(account.pubkey, pubkey);
@@ -57,7 +54,7 @@ export function Page() {
 		return () => {
 			clear();
 		};
-	}, [pubkey]);
+	}, [pubkey, fetchMessages]);
 
 	if (!account) return <div>Fuck SSR</div>;
 

src/app/note/components/preview/image.tsx

@@ -8,7 +8,7 @@ export function ImagePreview({ urls }: { urls: string[] }) {
 		<div ref={emblaRef} className="mt-3 overflow-hidden">
 			<div className="flex">
 				{urls.map((url) => (
-					<div className="mr-2 min-w-0 grow-0 shrink-0 basis-full">
+					<div key={url} className="mr-2 min-w-0 grow-0 shrink-0 basis-full">
 						<Image
 							src={url}
 							alt="image"