update channel notification

src/app/channel/components/item.tsx

@@ -29,8 +29,15 @@ export function ChannelsListItem({ data }: { data: any }) {
 			>
 				<span className="text-base text-white">#</span>
 			</div>
-			<div>
+			<div className="w-full inline-flex items-center justify-between">
 				<h5 className="truncate font-medium text-zinc-200">{channel?.name}</h5>
+				<div className="flex items-center">
+					{data.new_messages && (
+						<span className="inline-flex items-center justify-center rounded bg-fuchsia-400/10 w-8 px-1 py-1 text-xs font-medium text-fuchsia-500 ring-1 ring-inset ring-fuchsia-400/20">
+							{data.new_messages}
+						</span>
+					)}
+				</div>
 			</div>
 		</a>
 	);

src/app/chat/components/list.tsx

@@ -29,9 +29,11 @@ export function ChatsList() {
 					</div>
 				</>
 			) : (
-				chats.map((item) => (
-					<ChatsListItem key={item.sender_pubkey} data={item} />
-				))
+				chats.map((item) => {
+					if (account.pubkey !== item.sender_pubkey) {
+						return <ChatsListItem key={item.sender_pubkey} data={item} />;
+					}
+				})
 			)}
 		</div>
 	);

src/shared/accounts/active.tsx

@@ -1,8 +1,10 @@
 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 { DEFAULT_AVATAR, READONLY_RELAYS } from "@stores/constants";
+import { usePageContext } from "@utils/hooks/usePageContext";
 import { useProfile } from "@utils/hooks/useProfile";
 import { sendNativeNotification } from "@utils/notification";
 import { useContext } from "react";
@@ -10,8 +12,16 @@ 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 notChatPage = pathnames.includes("/chat") ? false : true;
+	const notChannelPage = pathnames.includes("/channel") ? false : true;
+	const notSpacePage = pathnames.includes("/space") ? false : true;
+
 	const lastLogin = useActiveAccount((state: any) => state.lastLogin);
-	const addChat = useChats((state: any) => state.add);
+	const notifyChat = useChats((state: any) => state.add);
+	const notifyChannel = useChannels((state: any) => state.add);
 
 	const { user } = useProfile(data.pubkey);
 
@@ -29,11 +39,23 @@ export function ActiveAccount({ data }: { data: any }) {
 				READONLY_RELAYS,
 				(event) => {
 					switch (event.kind) {
+						case 1:
+							break;
 						case 4:
-							// update state
-							addChat(event.pubkey);
-							// send native notifiation
-							sendNativeNotification(event.content);
+							if (notChatPage) {
+								// update state
+								notifyChat(event.pubkey);
+								// send native notifiation
+								sendNativeNotification("You've received new message");
+							}
+							break;
+						case 42:
+							if (notChannelPage) {
+								// update state
+								notifyChannel(event);
+								// send native notifiation
+								sendNativeNotification(event.content);
+							}
 							break;
 						default:
 							break;

src/stores/channels.tsx

@@ -2,13 +2,36 @@ import { getChannels } from "@utils/storage";
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
-export const useChannels = create((set) => ({
-	channels: [],
-	fetch: async () => {
-		const response = await getChannels(10, 0);
-		set({ channels: response });
-	},
-}));
+export const useChannels = create(
+	immer((set) => ({
+		channels: [],
+		fetch: async () => {
+			const response = await getChannels(10, 0);
+			set({ channels: response });
+		},
+		add: (event) => {
+			set((state) => {
+				const target = state.channels.findIndex(
+					(m: { event_id: string }) => m.event_id === event.id,
+				);
+				if (target !== -1) {
+					state.channels[target]["new_messages"] =
+						state.channels[target]["new_messages"] + 1 || 1;
+				} else {
+					state.channels.push({ event_id: event.id, ...event });
+				}
+			});
+		},
+		clearBubble: (id: string) => {
+			set((state) => {
+				const target = state.channels.findIndex(
+					(m: { event_id: string }) => m.event_id === id,
+				);
+				state.channels[target]["new_messages"] = 0;
+			});
+		},
+	})),
+);
 
 export const useChannelMessages = create(
 	immer((set) => ({