add noti bubble to chats

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) => ({
-	chats: [],
-	fetch: async (pubkey: string) => {
-		const response = await getChatsByPubkey(pubkey);
-		set({ chats: response });
-	},
-}));
+export const useChats = create(
+	immer((set: any, get: any) => ({
+		chats: [],
+		fetch: async (pubkey: string) => {
+			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: [],