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(pubkey);
+	const { user, isError, isLoading } = useProfile(data.sender_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">
-						<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
-							{user?.nip05 || user?.name || shortenKey(pubkey)}
-						</h5>
-						{account?.pubkey === pubkey && (
-							<span className="text-zinc-500">(you)</span>
-						)}
+					<div className="w-full inline-flex items-center justify-between">
+						<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.sender_pubkey)}
+							</h5>
+						</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>
 			)}