highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-09-19 14:00:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

add notification modal

Browse Source
This commit is contained in:
Ren Amamiya
2023-07-03 15:23:31 +07:00
parent 6f29df112b
commit 861b04100a
9 changed files with 235 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/chat/components/messages/item.tsx
View File

@@ -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 ? (
<ImagePreview urls={content.images} />
) : (
<></>
)}
{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.images.length > 0 && <ImagePreview urls={content.images} />}
{content.videos.length > 0 && <VideoPreview urls={content.videos} />}
{content.links.length > 0 && <LinkPreview urls={content.links} />}
{content.notes.length > 0 &&
content.notes.map((note: string) => (
<MentionNote key={note} id={note} />
))
) : (
<></>
)}
))}
</div>
</div>
</div>

6
src/app/chat/components/modal.tsx
View File

@@ -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

35
src/app/trending/components/profile.tsx
View File

@@ -26,22 +26,27 @@ export function Profile({ data }: { data: any }) {
);
return (
<div className="rounded-md bg-zinc-900 px-5 py-5">
<div className="flex items-center gap-2">
<div className="w-12 h-12 shrink-0">
<Image
src={profile.picture}
fallback={DEFAULT_AVATAR}
className="w-12 h-12 object-cover rounded"
/>
<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-5 py-5">
<div className="flex items-center justify-between">
<div className="inline-flex items-center gap-2">
<div className="w-11 h-11 shrink-0">
<Image
src={profile.picture}
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">
<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 className="inline-flex items-center gap-2">
<button type="button">Follow</button>
</div>
</div>
<div className="mt-2">

2
src/app/trending/components/trendingProfiles.tsx
View File

@@ -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} />
))}

6
src/shared/accounts/active.tsx
View File

@@ -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({

13
src/shared/lumeBar.tsx
View File

@@ -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"

58
src/shared/notification.tsx
View File

@@ -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>
</>
);
}

153
src/shared/notification/modal.tsx Normal file
View File

@@ -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>
</>
);
}

42
src/shared/notification/user.tsx Normal file
View File

@@ -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>
);
}