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"

src/shared/accounts/active.tsx

@@ -2,7 +2,7 @@ import { Image } from "@shared/image";
 import { RelayContext } from "@shared/relayProvider";
 import { useActiveAccount } from "@stores/accounts";
 import { useChannels } from "@stores/channels";
-import { useChats } from "@stores/chats";
+import { useChatMessages, useChats } from "@stores/chats";
 import { DEFAULT_AVATAR, READONLY_RELAYS } from "@stores/constants";
 import { usePageContext } from "@utils/hooks/usePageContext";
 import { useProfile } from "@utils/hooks/useProfile";
@@ -13,26 +13,27 @@ import useSWRSubscription from "swr/subscription";
 export function ActiveAccount({ data }: { data: any }) {
 	const pool: any = useContext(RelayContext);
 	const pageContext = usePageContext();
-	const pathnames: any = pageContext.urlParsed.pathname;
+	const pathname: any = pageContext.urlParsed.pathname;
 
-	const notChatPage = pathnames.includes("/chat") ? false : true;
-	const notChannelPage = pathnames.includes("/channel") ? false : true;
+	const isChatPage = pathname.includes("/chat");
+	const isChannelPage = pathname.includes("/channel");
 	// const notSpacePage = pathnames.includes("/space") ? false : true;
 
 	const lastLogin = useActiveAccount((state: any) => state.lastLogin);
 	const notifyChat = useChats((state: any) => state.add);
+	const saveChat = useChatMessages((state: any) => state.add);
 	const notifyChannel = useChannels((state: any) => state.add);
 
 	const { user } = useProfile(data.pubkey);
 
 	useSWRSubscription(
 		user && lastLogin > 0 ? ["account", data.pubkey] : null,
-		([, key]) => {
+		() => {
 			// subscribe to channel
 			const unsubscribe = pool.subscribe(
 				[
 					{
-						"#p": [key],
+						"#p": [data.pubkey],
 						since: lastLogin,
 					},
 				],
@@ -42,7 +43,9 @@ export function ActiveAccount({ data }: { data: any }) {
 						case 1:
 							break;
 						case 4:
-							if (notChatPage) {
+							if (!isChatPage) {
+								// save
+								saveChat(data.pubkey, event);
 								// update state
 								notifyChat(event.pubkey);
 								// send native notifiation
@@ -50,7 +53,7 @@ export function ActiveAccount({ data }: { data: any }) {
 							}
 							break;
 						case 42:
-							if (notChannelPage) {
+							if (!isChannelPage) {
 								// update state
 								notifyChannel(event);
 								// send native notifiation

src/shared/appHeader.tsx

@@ -1,4 +1,3 @@
-import { EventCollector } from "@shared/eventCollector";
 import { ArrowLeftIcon, ArrowRightIcon } from "@shared/icons";
 
 export function AppHeader() {
@@ -39,7 +38,6 @@ export function AppHeader() {
 					/>
 				</button>
 			</div>
-			<EventCollector />
 		</div>
 	);
 }

src/shared/eventCollector.tsx

@@ -3,8 +3,8 @@ import { RelayContext } from "@shared/relayProvider";
 import { useActiveAccount } from "@stores/accounts";
 import { READONLY_RELAYS } from "@stores/constants";
 import { dateToUnix } from "@utils/date";
-import { createChat, createNote, updateAccount } from "@utils/storage";
-import { getParentID, nip02ToArray } from "@utils/transform";
+import { createNote } from "@utils/storage";
+import { getParentID } from "@utils/transform";
 import { useContext } from "react";
 import useSWRSubscription from "swr/subscription";
 
@@ -21,20 +21,6 @@ export function EventCollector() {
 					authors: follows,
 					since: dateToUnix(),
 				},
-				{
-					kinds: [3],
-					authors: [account.pubkey],
-				},
-				{
-					kinds: [4],
-					"#p": [account.pubkey],
-					since: dateToUnix(),
-				},
-				{
-					kinds: [4],
-					authors: [account.pubkey],
-					since: dateToUnix(),
-				},
 			],
 			READONLY_RELAYS,
 			(event: any) => {
@@ -54,37 +40,6 @@ export function EventCollector() {
 						);
 						break;
 					}
-					// contacts
-					case 3: {
-						const follows = nip02ToArray(event.tags);
-						// update account's folllows with NIP-02 tag list
-						updateAccount("follows", follows, event.pubkey);
-						break;
-					}
-					// chat
-					case 4: {
-						if (event.pubkey === account.pubkey) {
-							const receiver = event.tags.find((t) => t[0] === "p")[1];
-							createChat(
-								event.id,
-								receiver,
-								event.pubkey,
-								event.content,
-								event.tags,
-								event.created_at,
-							);
-						} else {
-							createChat(
-								event.id,
-								account.pubkey,
-								event.pubkey,
-								event.content,
-								event.tags,
-								event.created_at,
-							);
-						}
-						break;
-					}
 					// repost
 					case 6:
 						createNote(

src/stores/channels.tsx

@@ -38,7 +38,7 @@ export const useChannelMessages = create(
 		messages: [],
 		replyTo: { id: null, pubkey: null, content: null },
 		add: (message: any) => {
-			set((state: any) => ({ messages: [...state.messages, message] }));
+			set((state: any) => ({ messages: [message, ...state.messages] }));
 		},
 		openReply: (id: string, pubkey: string, content: string) => {
 			set(() => ({ replyTo: { id, pubkey, content } }));

src/stores/chats.tsx

@@ -1,4 +1,4 @@
-import { getChatMessages, getChatsByPubkey } from "@utils/storage";
+import { createChat, getChatMessages, getChatsByPubkey } from "@utils/storage";
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
@@ -9,7 +9,7 @@ export const useChats = create(
 			const response: any = await getChatsByPubkey(pubkey);
 			set({ chats: response });
 		},
-		add: (pubkey: string) => {
+		add: async (pubkey: string) => {
 			set((state) => {
 				const target = state.chats.findIndex(
 					(m: { sender_pubkey: string }) => m.sender_pubkey === pubkey,
@@ -39,8 +39,23 @@ export const useChatMessages = create((set) => ({
 		const response: any = await getChatMessages(receiver_pubkey, sender_pubkey);
 		set({ messages: response });
 	},
-	add: (message: any) => {
-		set((state: any) => ({ messages: [...state.messages, message] }));
+	add: async (receiver: string, event: any) => {
+		const save = await createChat(
+			event.id,
+			receiver,
+			event.pubkey,
+			event.content,
+			event.tags,
+			event.created_at,
+		);
+		if (save) {
+			set((state: any) => ({
+				messages: [
+					...state.messages,
+					{ ...event, sender_pubkey: event.pubkey, receiver_pubkey: receiver },
+				],
+			}));
+		}
 	},
 	clear: () => {
 		set(() => ({ messages: [] }));