reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve notification

Browse Source
This commit is contained in:
Ren Amamiya
2023-09-19 11:15:35 +07:00
parent 60e93965ea
commit 5c2bfa0ea3
11 changed files with 84 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,7 @@ export function ActiveAccount() {
case NDKKind.Text:
return await sendNativeNotification('Mention');
case NDKKind.Contacts:
return await sendNativeNotification("You've new follower");
return await sendNativeNotification("You've a new follower");
case NDKKind.Repost:
return await sendNativeNotification('Repost');
case NDKKind.Reaction:
@@ -48,7 +48,6 @@ export function ActiveAccount() {
case NDKKind.Zap:
return await sendNativeNotification('Zap');
default:
console.log('[notify] new event: ', event);
break;
}
});
@@ -56,8 +55,8 @@ export function ActiveAccount() {
if (status === 'loading') {
return (
<div className="inline-flex h-10 items-center gap-2.5 rounded-md px-2">
<div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="inline-flex h-16 items-center gap-2.5 border-l-2 border-transparent pb-2 pl-4 pr-2">
<div className="relative h-10 w-10 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
</div>
);

22
src/shared/navigation.tsx
View File

@@ -64,18 +64,20 @@ export function Navigation() {
}
>
<div className="flex items-center gap-2.5">
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<BellIcon className="h-4 w-4 text-white" />
</span>
{totalNewActivities > 0 ? (
<div className="relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-fuchsia-500/20 backdrop-blur-xl">
<p className="text-sm font-bold text-fuchsia-500">
{compactNumber.format(totalNewActivities)}
</p>
<span className="absolute right-0 top-0 block h-1 w-1 -translate-y-1/2 translate-x-1/2 transform rounded-full bg-fuchsia-500 ring-2 ring-black/80" />
</div>
) : (
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
<BellIcon className="h-4 w-4 text-white" />
</span>
)}
Notifications
</div>
{totalNewActivities > 0 ? (
<div className="inline-flex h-5 w-8 items-center justify-center rounded bg-fuchsia-500">
<span className="text-xs font-medium text-white">
{compactNumber.format(totalNewActivities)}
</span>
</div>
) : null}
</NavLink>
</div>
<Collapsible.Root open={integrations} onOpenChange={toggleIntegrations}>

8
src/shared/notes/kinds/repost.tsx
View File

@@ -55,8 +55,8 @@ export function Repost({ event }: { event: NDKEvent }) {
if (embedEvent) {
return (
<div className="h-min w-full px-3 pb-3">
<div className="relative flex flex-col gap-3 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<User pubkey={event.pubkey} variant="repost" />
<div className="relative flex flex-col gap-10 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
<div className="relative flex flex-col">
<User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
<div className="-mt-6 flex items-start gap-3">
@@ -122,8 +122,8 @@ export function Repost({ event }: { event: NDKEvent }) {
return (
<div className="h-min w-full px-3 pb-3">
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<User pubkey={event.pubkey} variant="repost" />
<div className="relative flex flex-col gap-10 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
<div className="relative flex flex-col">
<User pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-2 flex items-start gap-3">

7
src/shared/notes/preview/video.tsx
View File

@@ -12,6 +12,13 @@ export function VideoPreview({ urls }: { urls: string[] }) {
className="!h-auto overflow-hidden rounded-lg object-fill"
controls={true}
pip={true}
light={
<img
src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
alt={url}
className="h-auto w-full bg-white object-cover"
/>
}
/>
))}
</div>

31
src/shared/user.tsx
View File

@@ -119,21 +119,24 @@ export const User = memo(function User({
if (variant === 'repost') {
return (
<div className="flex gap-3">
<Image
src={user?.picture || user?.image}
alt={pubkey}
className="relative z-20 inline-block h-11 w-11 rounded-lg"
/>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
{user?.display_name || user?.name || displayNpub(pubkey, 16)}
</h5>
<span className="font-semibold text-fuchsia-500">reposted</span>
<span className="leading-none text-white/50">·</span>
<span className="leading-none text-white/50">{createdAt}</span>
<>
<div className="flex gap-3">
<Image
src={user?.picture || user?.image}
alt={pubkey}
className="relative z-20 inline-block h-11 w-11 rounded-lg"
/>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
{user?.display_name || user?.name || displayNpub(pubkey, 16)}
</h5>
<span className="font-semibold text-fuchsia-500">reposted</span>
<span className="leading-none text-white/50">·</span>
<span className="leading-none text-white/50">{createdAt}</span>
</div>
</div>
</div>
<div className="absolute left-[28px] top-16 h-6 w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
</>
);
}