mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
improve notification
This commit is contained in:
parent
60e93965ea
commit
5c2bfa0ea3
@ -5,6 +5,8 @@ import { NotiMention } from '@app/notifications/components/mention';
|
|||||||
import { NotiReaction } from '@app/notifications/components/reaction';
|
import { NotiReaction } from '@app/notifications/components/reaction';
|
||||||
import { NotiRepost } from '@app/notifications/components/repost';
|
import { NotiRepost } from '@app/notifications/components/repost';
|
||||||
|
|
||||||
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
import { LoaderIcon } from '@shared/icons';
|
import { LoaderIcon } from '@shared/icons';
|
||||||
import { TitleBar } from '@shared/titleBar';
|
import { TitleBar } from '@shared/titleBar';
|
||||||
|
|
||||||
@ -13,7 +15,9 @@ import { useActivities } from '@stores/activities';
|
|||||||
import { useNostr } from '@utils/hooks/useNostr';
|
import { useNostr } from '@utils/hooks/useNostr';
|
||||||
|
|
||||||
export function NotificationScreen() {
|
export function NotificationScreen() {
|
||||||
|
const { db } = useStorage();
|
||||||
const { fetchActivities } = useNostr();
|
const { fetchActivities } = useNostr();
|
||||||
|
|
||||||
const [activities, setActivities, clearTotalNewActivities] = useActivities((state) => [
|
const [activities, setActivities, clearTotalNewActivities] = useActivities((state) => [
|
||||||
state.activities,
|
state.activities,
|
||||||
state.setActivities,
|
state.setActivities,
|
||||||
@ -39,12 +43,13 @@ export function NotificationScreen() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function getActivities() {
|
async function getActivities() {
|
||||||
const events = await fetchActivities();
|
const events = await fetchActivities();
|
||||||
setActivities(events);
|
setActivities(events, db.account.last_login_at);
|
||||||
// clear total new activities
|
|
||||||
clearTotalNewActivities();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getActivities();
|
getActivities();
|
||||||
|
|
||||||
|
// clear total new activities
|
||||||
|
clearTotalNewActivities();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -71,7 +71,7 @@ export function NWCAlby() {
|
|||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-8 w-min items-center justify-center rounded-md bg-white/10 px-2.5 text-sm font-medium text-white hover:bg-green-500"
|
className="inline-flex h-9 w-min items-center justify-center rounded-md border-t border-white/10 bg-white/20 px-3 text-sm font-medium text-white hover:bg-green-500"
|
||||||
>
|
>
|
||||||
Connect
|
Connect
|
||||||
</button>
|
</button>
|
||||||
|
@ -89,7 +89,7 @@ export function NWCOther() {
|
|||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-8 w-min items-center justify-center rounded-md bg-white/10 px-2.5 text-sm font-medium text-white hover:bg-green-500"
|
className="inline-flex h-9 w-min items-center justify-center rounded-md border-t border-white/10 bg-white/20 px-3 text-sm font-medium text-white hover:bg-green-500"
|
||||||
>
|
>
|
||||||
Connect
|
Connect
|
||||||
</button>
|
</button>
|
||||||
|
@ -71,7 +71,7 @@ export function NWCScreen() {
|
|||||||
<a
|
<a
|
||||||
href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
|
href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="text-fuchsia-200"
|
className="text-fuchsia-300"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
>
|
>
|
||||||
the specs (NIP47)
|
the specs (NIP47)
|
||||||
@ -89,6 +89,33 @@ export function NWCScreen() {
|
|||||||
</p>
|
</p>
|
||||||
<p className="text-sm text-white/70">Lume doesn't hold your Bitcoin</p>
|
<p className="text-sm text-white/70">Lume doesn't hold your Bitcoin</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex flex-col gap-1.5">
|
||||||
|
<h5 className="text-sm font-bold text-white">
|
||||||
|
Recommend wallet that support NWC
|
||||||
|
</h5>
|
||||||
|
<p className="text-sm text-white/70">
|
||||||
|
Mutiny Wallet:{' '}
|
||||||
|
<a
|
||||||
|
href="https://www.mutinywallet.com/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="text-fuchsia-300"
|
||||||
|
>
|
||||||
|
website
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-white/70">
|
||||||
|
Self hosted NWC on Umbrel :{' '}
|
||||||
|
<a
|
||||||
|
href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="text-fuchsia-300"
|
||||||
|
>
|
||||||
|
website
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -40,7 +40,7 @@ export function ActiveAccount() {
|
|||||||
case NDKKind.Text:
|
case NDKKind.Text:
|
||||||
return await sendNativeNotification('Mention');
|
return await sendNativeNotification('Mention');
|
||||||
case NDKKind.Contacts:
|
case NDKKind.Contacts:
|
||||||
return await sendNativeNotification("You've new follower");
|
return await sendNativeNotification("You've a new follower");
|
||||||
case NDKKind.Repost:
|
case NDKKind.Repost:
|
||||||
return await sendNativeNotification('Repost');
|
return await sendNativeNotification('Repost');
|
||||||
case NDKKind.Reaction:
|
case NDKKind.Reaction:
|
||||||
@ -48,7 +48,6 @@ export function ActiveAccount() {
|
|||||||
case NDKKind.Zap:
|
case NDKKind.Zap:
|
||||||
return await sendNativeNotification('Zap');
|
return await sendNativeNotification('Zap');
|
||||||
default:
|
default:
|
||||||
console.log('[notify] new event: ', event);
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -56,8 +55,8 @@ export function ActiveAccount() {
|
|||||||
|
|
||||||
if (status === 'loading') {
|
if (status === 'loading') {
|
||||||
return (
|
return (
|
||||||
<div className="inline-flex h-10 items-center gap-2.5 rounded-md px-2">
|
<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-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
<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 className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -64,18 +64,20 @@ export function Navigation() {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2.5">
|
<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">
|
{totalNewActivities > 0 ? (
|
||||||
<BellIcon className="h-4 w-4 text-white" />
|
<div className="relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-fuchsia-500/20 backdrop-blur-xl">
|
||||||
</span>
|
<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
|
Notifications
|
||||||
</div>
|
</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>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
<Collapsible.Root open={integrations} onOpenChange={toggleIntegrations}>
|
<Collapsible.Root open={integrations} onOpenChange={toggleIntegrations}>
|
||||||
|
@ -55,8 +55,8 @@ export function Repost({ event }: { event: NDKEvent }) {
|
|||||||
if (embedEvent) {
|
if (embedEvent) {
|
||||||
return (
|
return (
|
||||||
<div className="h-min w-full px-3 pb-3">
|
<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">
|
<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} variant="repost" />
|
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
||||||
<div className="relative flex flex-col">
|
<div className="relative flex flex-col">
|
||||||
<User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
|
<User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
|
||||||
<div className="-mt-6 flex items-start gap-3">
|
<div className="-mt-6 flex items-start gap-3">
|
||||||
@ -122,8 +122,8 @@ export function Repost({ event }: { event: NDKEvent }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-min w-full px-3 pb-3">
|
<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">
|
<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} variant="repost" />
|
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
||||||
<div className="relative flex flex-col">
|
<div className="relative flex flex-col">
|
||||||
<User pubkey={data.pubkey} time={data.created_at} />
|
<User pubkey={data.pubkey} time={data.created_at} />
|
||||||
<div className="-mt-2 flex items-start gap-3">
|
<div className="-mt-2 flex items-start gap-3">
|
||||||
|
@ -12,6 +12,13 @@ export function VideoPreview({ urls }: { urls: string[] }) {
|
|||||||
className="!h-auto overflow-hidden rounded-lg object-fill"
|
className="!h-auto overflow-hidden rounded-lg object-fill"
|
||||||
controls={true}
|
controls={true}
|
||||||
pip={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>
|
</div>
|
||||||
|
@ -119,21 +119,24 @@ export const User = memo(function User({
|
|||||||
|
|
||||||
if (variant === 'repost') {
|
if (variant === 'repost') {
|
||||||
return (
|
return (
|
||||||
<div className="flex gap-3">
|
<>
|
||||||
<Image
|
<div className="flex gap-3">
|
||||||
src={user?.picture || user?.image}
|
<Image
|
||||||
alt={pubkey}
|
src={user?.picture || user?.image}
|
||||||
className="relative z-20 inline-block h-11 w-11 rounded-lg"
|
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">
|
<div className="inline-flex items-baseline gap-1">
|
||||||
{user?.display_name || user?.name || displayNpub(pubkey, 16)}
|
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
|
||||||
</h5>
|
{user?.display_name || user?.name || displayNpub(pubkey, 16)}
|
||||||
<span className="font-semibold text-fuchsia-500">reposted</span>
|
</h5>
|
||||||
<span className="leading-none text-white/50">·</span>
|
<span className="font-semibold text-fuchsia-500">reposted</span>
|
||||||
<span className="leading-none text-white/50">{createdAt}</span>
|
<span className="leading-none text-white/50">·</span>
|
||||||
|
<span className="leading-none text-white/50">{createdAt}</span>
|
||||||
|
</div>
|
||||||
</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" />
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@ export const useActivities = create<ActivitiesState>((set) => ({
|
|||||||
addActivity: (event: NDKEvent) => {
|
addActivity: (event: NDKEvent) => {
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
activities: state.activities ? [event, ...state.activities] : [event],
|
activities: state.activities ? [event, ...state.activities] : [event],
|
||||||
totalNewActivities: state.totalNewActivities++,
|
totalNewActivities: (state.totalNewActivities += 1),
|
||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
clearTotalNewActivities: () => {
|
clearTotalNewActivities: () => {
|
||||||
|
@ -37,14 +37,10 @@ export function useNostr() {
|
|||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
const sub = async (
|
const sub = async (filter: NDKFilter, callback: (event: NDKEvent) => void) => {
|
||||||
filter: NDKFilter,
|
|
||||||
callback: (event: NDKEvent) => void,
|
|
||||||
closeOnEose?: boolean
|
|
||||||
) => {
|
|
||||||
if (!ndk) throw new Error('NDK instance not found');
|
if (!ndk) throw new Error('NDK instance not found');
|
||||||
|
|
||||||
const subEvent = ndk.subscribe(filter, { closeOnEose: closeOnEose ?? true });
|
const subEvent = ndk.subscribe(filter, { closeOnEose: false });
|
||||||
subManager.set(JSON.stringify(filter), subEvent);
|
subManager.set(JSON.stringify(filter), subEvent);
|
||||||
|
|
||||||
subEvent.addListener('event', (event: NDKEvent) => {
|
subEvent.addListener('event', (event: NDKEvent) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user