add notification modal

src/app/chat/components/messages/item.tsx

@@ -35,28 +35,13 @@ export function ChatMessageItem({
 					<p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
 						{content.parsed}
 					</p>
-					{Array.isArray(content.images) && content.images.length ? (
+					{content.images.length > 0 && <ImagePreview urls={content.images} />}
-						<ImagePreview urls={content.images} />
+					{content.videos.length > 0 && <VideoPreview urls={content.videos} />}
-					) : (
+					{content.links.length > 0 && <LinkPreview urls={content.links} />}
-						<></>
+					{content.notes.length > 0 &&
-					)}
-					{Array.isArray(content.videos) && content.videos.length ? (
-						<VideoPreview urls={content.videos} />
-					) : (
-						<></>
-					)}
-					{Array.isArray(content.links) && content.links.length ? (
-						<LinkPreview urls={content.links} />
-					) : (
-						<></>
-					)}
-					{Array.isArray(content.notes) && content.notes.length ? (
 						content.notes.map((note: string) => (
 							<MentionNote key={note} id={note} />
-						))
+						))}
-					) : (
-						<></>
-					)}
 				</div>
 			</div>
 		</div>

src/app/chat/components/modal.tsx

@@ -1,6 +1,6 @@
 import { User } from "@app/auth/components/user";
 import { Dialog, Transition } from "@headlessui/react";
-import { CancelIcon, PlusIcon } from "@shared/icons";
+import { CancelIcon, LoaderIcon, PlusIcon } from "@shared/icons";
 import { useAccount } from "@utils/hooks/useAccount";
 import { Fragment, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -92,7 +92,9 @@ export function NewMessageModal() {
 								</div>
 								<div className="h-[500px] flex flex-col pb-5 overflow-x-hidden overflow-y-auto">
 									{status === "loading" ? (
-										<p>Loading...</p>
+										<div className="px-4 py-3 inline-flex items-center justify-center">
+											<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
+										</div>
 									) : (
 										follows.map((follow) => (
 											<div

src/app/trending/components/profile.tsx

@@ -26,22 +26,27 @@ export function Profile({ data }: { data: any }) {
 		);
 
 	return (
-		<div className="rounded-md bg-zinc-900 px-5 py-5">
+		<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-5 py-5">
-			<div className="flex items-center gap-2">
+			<div className="flex items-center justify-between">
-				<div className="w-12 h-12 shrink-0">
+				<div className="inline-flex items-center gap-2">
-					<Image
+					<div className="w-11 h-11 shrink-0">
-						src={profile.picture}
+						<Image
-						fallback={DEFAULT_AVATAR}
+							src={profile.picture}
-						className="w-12 h-12 object-cover rounded"
+							fallback={DEFAULT_AVATAR}
-					/>
+							className="w-11 h-11 object-cover rounded-lg"
+						/>
+					</div>
+					<div className="inline-flex flex-col gap-1">
+						<h3 className="max-w-[15rem] truncate font-semibold text-zinc-100 leading-none">
+							{profile.display_name || profile.name}
+						</h3>
+						<p className="max-w-[10rem] truncate text-sm text-zinc-400 leading-none">
+							{profile.nip05 || shortenKey(data.pubkey)}
+						</p>
+					</div>
 				</div>
-				<div className="inline-flex flex-col gap-1">
+				<div className="inline-flex items-center gap-2">
-					<h3 className="max-w-[15rem] truncate font-semibold text-zinc-100 leading-none">
+					<button type="button">Follow</button>
-						{profile.display_name || profile.name}
-					</h3>
-					<p className="max-w-[10rem] truncate text-sm text-zinc-400 leading-none">
-						{profile.nip05 || shortenKey(data.pubkey)}
-					</p>
 				</div>
 			</div>
 			<div className="mt-2">

src/app/trending/components/trendingProfiles.tsx

@@ -24,7 +24,7 @@ export function TrendingProfiles() {
 						</div>
 					</div>
 				) : (
-					<div className="relative w-full flex flex-col gap-3 px-3 pt-1.5">
+					<div className="relative w-full flex flex-col gap-3 px-3 pt-3">
 						{data.profiles.map((item) => (
 							<Profile key={item.pubkey} data={item} />
 						))}

src/shared/accounts/active.tsx

@@ -50,7 +50,7 @@ export function ActiveAccount({ data }: { data: any }) {
 		const since = lastLogin > 0 ? lastLogin : Math.floor(Date.now() / 1000);
 		const sub = ndk.subscribe(
 			{
-				kinds: [1, 4],
+				kinds: [4],
 				"#p": [data.pubkey],
 				since: since,
 			},
@@ -61,10 +61,6 @@ export function ActiveAccount({ data }: { data: any }) {
 
 		sub.addListener("event", (event) => {
 			switch (event.kind) {
-				case 1:
-					// send native notifiation
-					sendNativeNotification("Someone mention you");
-					break;
 				case 4:
 					// update state
 					chat.mutate({

src/shared/lumeBar.tsx

@@ -1,7 +1,7 @@
 import { ActiveAccount } from "@shared/accounts/active";
 import { SettingsIcon } from "@shared/icons";
 import { Logout } from "@shared/logout";
-import { Notification } from "@shared/notification";
+import { NotificationModal } from "@shared/notification/modal";
 import { useAccount } from "@utils/hooks/useAccount";
 import { Link } from "react-router-dom";
 
@@ -12,11 +12,16 @@ export function LumeBar() {
 		<div className="rounded-xl p-2 border-t border-zinc-800/50 bg-zinc-900/80 backdrop-blur-md">
 			<div className="flex items-center justify-between">
 				{status === "loading" ? (
-					<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-md bg-zinc-900" />
+					<>
+						<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-md bg-zinc-900" />
+						<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-md bg-zinc-900" />
+					</>
 				) : (
-					<ActiveAccount data={account} />
+					<>
+						<ActiveAccount data={account} />
+						<NotificationModal pubkey={account.pubkey} />
+					</>
 				)}
-				<Notification />
 				<Link
 					to="/settings/general"
 					className="inline-flex items-center justify-center w-9 h-9 rounded-md border-t bg-zinc-800 border-zinc-700/50 transform active:translate-y-1"

src/shared/notification.tsx

@@ -1,58 +0,0 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { BellIcon } from "@shared/icons";
-import { Fragment, useState } from "react";
-
-export function Notification() {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const closeModal = () => {
-		setIsOpen(false);
-	};
-
-	const openModal = () => {
-		setIsOpen(true);
-	};
-
-	return (
-		<>
-			<button
-				type="button"
-				onClick={() => openModal()}
-				aria-label="Notification"
-				className="inline-flex items-center justify-center w-9 h-9 rounded-md border-t bg-zinc-800 border-zinc-700/50 transform active:translate-y-1"
-			>
-				<BellIcon className="w-4 h-4 text-zinc-400" />
-			</button>
-			<Transition appear show={isOpen} as={Fragment}>
-				<Dialog as="div" className="relative z-10" onClose={closeModal}>
-					<Transition.Child
-						as={Fragment}
-						enter="ease-out duration-300"
-						enterFrom="opacity-0"
-						enterTo="opacity-100"
-						leave="ease-in duration-200"
-						leaveFrom="opacity-100"
-						leaveTo="opacity-0"
-					>
-						<div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
-					</Transition.Child>
-					<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 scale-95"
-							enterTo="opacity-100 scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 scale-100"
-							leaveTo="opacity-0 scale-95"
-						>
-							<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
-								<p>OK</p>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</Dialog>
-			</Transition>
-		</>
-	);
-}

src/shared/notification/modal.tsx

@@ -0,0 +1,153 @@
+import { NotificationUser } from "./user";
+import { Dialog, Transition } from "@headlessui/react";
+import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
+import { BellIcon, CancelIcon, LoaderIcon } from "@shared/icons";
+import { RelayContext } from "@shared/relayProvider";
+import { User } from "@shared/user";
+import { useQuery } from "@tanstack/react-query";
+import { dateToUnix, getHourAgo } from "@utils/date";
+import { Fragment, useContext, useRef, useState } from "react";
+
+export function NotificationModal({ pubkey }: { pubkey: string }) {
+	const ndk = useContext(RelayContext);
+	const now = useRef(new Date());
+
+	const [isOpen, setIsOpen] = useState(false);
+	const [refresh, setRefresh] = useState(false);
+
+	const { status, data } = useQuery(
+		["user-notification", pubkey],
+		async () => {
+			const filter: NDKFilter = {
+				"#p": [pubkey],
+				kinds: [1, 6, 7, 9735],
+				since: dateToUnix(getHourAgo(100, now.current)),
+			};
+			const events = await ndk.fetchEvents(filter);
+			return [...events];
+		},
+		{
+			refetchOnMount: false,
+			refetchOnReconnect: false,
+			refetchOnWindowFocus: false,
+			staleTime: Infinity,
+		},
+	);
+
+	const closeModal = () => {
+		setIsOpen(false);
+	};
+
+	const openModal = () => {
+		setIsOpen(true);
+	};
+
+	const renderItem = (event: NDKEvent) => {
+		if (event.kind === 1) {
+			return (
+				<div key={event.id} className="flex flex-col px-5 py-2">
+					<User pubkey={event.pubkey} time={event.created_at} isChat={true} />
+					<div className="-mt-[20px] pl-[49px]">
+						<p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
+							{event.content}
+						</p>
+					</div>
+				</div>
+			);
+		}
+
+		if (event.kind === 6) {
+			return (
+				<div key={event.id} className="flex flex-col px-5 py-2">
+					<NotificationUser pubkey={event.pubkey} desc="repost your post" />
+				</div>
+			);
+		}
+
+		if (event.kind === 7) {
+			return (
+				<div key={event.id} className="flex flex-col px-5 py-2">
+					<NotificationUser pubkey={event.pubkey} desc="liked your post" />
+				</div>
+			);
+		}
+
+		if (event.kind === 9735) {
+			return (
+				<div key={event.id} className="flex flex-col px-5 py-2">
+					<NotificationUser pubkey={event.pubkey} desc="zapped your post" />
+				</div>
+			);
+		}
+
+		return <div className="flex flex-col px-5 py-2">{event.content}</div>;
+	};
+
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => openModal()}
+				aria-label="Notification"
+				className="inline-flex items-center justify-center w-9 h-9 rounded-md border-t bg-zinc-800 border-zinc-700/50 transform active:translate-y-1"
+			>
+				<BellIcon className="w-4 h-4 text-zinc-400" />
+			</button>
+			<Transition appear show={isOpen} as={Fragment}>
+				<Dialog as="div" className="relative z-10" onClose={closeModal}>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
+					</Transition.Child>
+					<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 scale-95"
+							enterTo="opacity-100 scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 scale-100"
+							leaveTo="opacity-0 scale-95"
+						>
+							<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
+								<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
+									<div className="flex items-center justify-between">
+										<Dialog.Title
+											as="h3"
+											className="text-lg font-semibold leading-none text-zinc-100"
+										>
+											24 hours ago
+										</Dialog.Title>
+										<button
+											type="button"
+											onClick={closeModal}
+											className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+										>
+											<CancelIcon className="w-5 h-5 text-zinc-300" />
+										</button>
+									</div>
+								</div>
+								<div className="h-[500px] flex flex-col pb-5 overflow-x-hidden overflow-y-auto">
+									{status === "loading" ? (
+										<div className="px-4 py-3 inline-flex items-center justify-center">
+											<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
+										</div>
+									) : (
+										data.map((event) => renderItem(event))
+									)}
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</Dialog>
+			</Transition>
+		</>
+	);
+}

src/shared/notification/user.tsx

@@ -0,0 +1,42 @@
+import { Image } from "@shared/image";
+import { DEFAULT_AVATAR } from "@stores/constants";
+import { useProfile } from "@utils/hooks/useProfile";
+import { shortenKey } from "@utils/shortenKey";
+
+export function NotificationUser({
+	pubkey,
+	desc,
+}: { pubkey: string; desc: string }) {
+	const { status, user } = useProfile(pubkey);
+
+	if (status === "loading") {
+		return (
+			<div className="flex items-center gap-2">
+				<div className="relative h-11 w-11 shrink-0 rounded-md bg-zinc-800 animate-pulse" />
+				<div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
+					<span className="w-1/2 h-4 rounded bg-zinc-800 animate-pulse" />
+					<span className="w-1/3 h-3 rounded bg-zinc-800 animate-pulse" />
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex items-center justify-start gap-2">
+			<div className="relative h-11 w-11 shrink rounded-md">
+				<Image
+					src={user.image}
+					fallback={DEFAULT_AVATAR}
+					alt={pubkey}
+					className="h-11 w-11 rounded-md object-cover"
+				/>
+			</div>
+			<div className="flex-1 inline-flex items-center justify-start text-start gap-1">
+				<span className="leading-none text-zinc-400">
+					{user.nip05 || user.name || user.displayName || shortenKey(pubkey)}
+				</span>
+				<span className="leading-none text-zinc-400">{desc}</span>
+			</div>
+		</div>
+	);
+}