add noti bubble to chats

src/app/chat/components/item.tsx

@@ -1,19 +1,16 @@
 import { Image } from "@shared/image";
-import { useActiveAccount } from "@stores/accounts";
 import { DEFAULT_AVATAR } from "@stores/constants";
 import { usePageContext } from "@utils/hooks/usePageContext";
 import { useProfile } from "@utils/hooks/useProfile";
 import { shortenKey } from "@utils/shortenKey";
 import { twMerge } from "tailwind-merge";
 
-export function ChatsListItem({ pubkey }: { pubkey: string }) {
+export function ChatsListItem({ data }: { data: any }) {
 	const pageContext = usePageContext();
-
 	const searchParams: any = pageContext.urlParsed.search;
 	const pagePubkey = searchParams.pubkey;
 
-	const account = useActiveAccount((state: any) => state.account);
+	const { user, isError, isLoading } = useProfile(data.sender_pubkey);
-	const { user, isError, isLoading } = useProfile(pubkey);
 
 	return (
 		<>
@@ -27,10 +24,10 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
 				</div>
 			) : (
 				<a
-					href={`/app/chat?pubkey=${pubkey}`}
+					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 === pubkey
+						pagePubkey === data.sender_pubkey
 							? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
 							: "",
 					)}
@@ -38,17 +35,23 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
 					<div className="relative h-5 w-5 shrink-0 rounded">
 						<Image
 							src={user?.picture || DEFAULT_AVATAR}
-							alt={pubkey}
+							alt={data.sender_pubkey}
 							className="h-5 w-5 rounded bg-white object-cover"
 						/>
 					</div>
-					<div className="inline-flex items-baseline gap-1">
+					<div className="w-full inline-flex items-center justify-between">
-						<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
+						<div className="inline-flex items-baseline gap-1">
-							{user?.nip05 || user?.name || shortenKey(pubkey)}
+							<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
-						</h5>
+								{user?.nip05 || user?.name || shortenKey(data.sender_pubkey)}
-						{account?.pubkey === pubkey && (
+							</h5>
-							<span className="text-zinc-500">(you)</span>
+						</div>
-						)}
+						<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

@@ -1,4 +1,5 @@
 import { ChatsListItem } from "@app/chat/components/item";
+import { ChatsListSelfItem } from "@app/chat/components/self";
 import { useActiveAccount } from "@stores/accounts";
 import { useChats } from "@stores/chats";
 import { useEffect } from "react";
@@ -15,6 +16,7 @@ export function ChatsList() {
 
 	return (
 		<div className="flex flex-col gap-1">
+			<ChatsListSelfItem data={account} />
 			{!chats ? (
 				<>
 					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
@@ -27,8 +29,8 @@ export function ChatsList() {
 					</div>
 				</>
 			) : (
-				chats.map((item: { sender_pubkey: string }) => (
+				chats.map((item) => (
-					<ChatsListItem key={item.sender_pubkey} pubkey={item.sender_pubkey} />
+					<ChatsListItem key={item.sender_pubkey} data={item} />
 				))
 			)}
 		</div>

src/app/chat/components/self.tsx

@@ -0,0 +1,52 @@
+import { Image } from "@shared/image";
+import { DEFAULT_AVATAR } from "@stores/constants";
+import { usePageContext } from "@utils/hooks/usePageContext";
+import { useProfile } from "@utils/hooks/useProfile";
+import { shortenKey } from "@utils/shortenKey";
+import { twMerge } from "tailwind-merge";
+
+export function ChatsListSelfItem({ data }: { data: any }) {
+	const pageContext = usePageContext();
+	const searchParams: any = pageContext.urlParsed.search;
+	const pagePubkey = searchParams.pubkey;
+
+	const { user, isError, 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="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" />
+					</div>
+				</div>
+			) : (
+				<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.sender_pubkey
+							? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
+							: "",
+					)}
+				>
+					<div className="relative h-5 w-5 shrink-0 rounded">
+						<Image
+							src={user?.picture || DEFAULT_AVATAR}
+							alt={data.pubkey}
+							className="h-5 w-5 rounded bg-white object-cover"
+						/>
+					</div>
+					<div className="inline-flex items-baseline gap-1">
+						<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
+							{user?.nip05 || user?.name || shortenKey(data.pubkey)}
+						</h5>
+						<span className="text-zinc-500">(you)</span>
+					</div>
+				</a>
+			)}
+		</>
+	);
+}

src/shared/accounts/active.tsx

@@ -1,6 +1,7 @@
 import { Image } from "@shared/image";
 import { RelayContext } from "@shared/relayProvider";
 import { useActiveAccount } from "@stores/accounts";
+import { useChats } from "@stores/chats";
 import { DEFAULT_AVATAR, READONLY_RELAYS } from "@stores/constants";
 import { useProfile } from "@utils/hooks/useProfile";
 import { sendNativeNotification } from "@utils/notification";
@@ -10,6 +11,7 @@ import useSWRSubscription from "swr/subscription";
 export function ActiveAccount({ data }: { data: any }) {
 	const pool: any = useContext(RelayContext);
 	const lastLogin = useActiveAccount((state: any) => state.lastLogin);
+	const addChat = useChats((state: any) => state.add);
 
 	const { user } = useProfile(data.pubkey);
 
@@ -22,12 +24,20 @@ export function ActiveAccount({ data }: { data: any }) {
 					{
 						"#p": [key],
 						since: lastLogin,
-						limit: 20,
 					},
 				],
 				READONLY_RELAYS,
 				(event) => {
-					sendNativeNotification(event.content);
+					switch (event.kind) {
+						case 4:
+							// update state
+							addChat(event.pubkey);
+							// send native notifiation
+							sendNativeNotification(event.content);
+							break;
+						default:
+							break;
+					}
 				},
 			);
 

src/stores/chats.tsx

@@ -1,13 +1,37 @@
 import { getChatMessages, getChatsByPubkey } from "@utils/storage";
 import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
 
-export const useChats = create((set) => ({
+export const useChats = create(
-	chats: [],
+	immer((set: any, get: any) => ({
-	fetch: async (pubkey: string) => {
+		chats: [],
-		const response = await getChatsByPubkey(pubkey);
+		fetch: async (pubkey: string) => {
-		set({ chats: response });
+			const response: any = await getChatsByPubkey(pubkey);
-	},
+			set({ chats: response });
-}));
+		},
+		add: (pubkey: string) => {
+			set((state) => {
+				const target = state.chats.findIndex(
+					(m: { sender_pubkey: string }) => m.sender_pubkey === pubkey,
+				);
+				if (target !== -1) {
+					state.chats[target]["new_messages"] =
+						state.chats[target]["new_messages"] + 1 || 1;
+				} else {
+					state.chats.push({ sender_pubkey: pubkey, new_messages: 1 });
+				}
+			});
+		},
+		clearBubble: (pubkey: string) => {
+			set((state) => {
+				const target = state.chats.findIndex(
+					(m: { sender_pubkey: string }) => m.sender_pubkey === pubkey,
+				);
+				state.chats[target]["new_messages"] = 0;
+			});
+		},
+	})),
+);
 
 export const useChatMessages = create((set) => ({
 	messages: [],