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 { NotiRepost } from '@app/notifications/components/repost';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { LoaderIcon } from '@shared/icons';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
|
||||
@ -13,7 +15,9 @@ import { useActivities } from '@stores/activities';
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
|
||||
export function NotificationScreen() {
|
||||
const { db } = useStorage();
|
||||
const { fetchActivities } = useNostr();
|
||||
|
||||
const [activities, setActivities, clearTotalNewActivities] = useActivities((state) => [
|
||||
state.activities,
|
||||
state.setActivities,
|
||||
@ -39,12 +43,13 @@ export function NotificationScreen() {
|
||||
useEffect(() => {
|
||||
async function getActivities() {
|
||||
const events = await fetchActivities();
|
||||
setActivities(events);
|
||||
// clear total new activities
|
||||
clearTotalNewActivities();
|
||||
setActivities(events, db.account.last_login_at);
|
||||
}
|
||||
|
||||
getActivities();
|
||||
|
||||
// clear total new activities
|
||||
clearTotalNewActivities();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
@ -71,7 +71,7 @@ export function NWCAlby() {
|
||||
<Dialog.Trigger asChild>
|
||||
<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
|
||||
</button>
|
||||
|
@ -89,7 +89,7 @@ export function NWCOther() {
|
||||
<Dialog.Trigger asChild>
|
||||
<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
|
||||
</button>
|
||||
|
@ -71,7 +71,7 @@ export function NWCScreen() {
|
||||
<a
|
||||
href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
|
||||
target="_blank"
|
||||
className="text-fuchsia-200"
|
||||
className="text-fuchsia-300"
|
||||
rel="noreferrer"
|
||||
>
|
||||
the specs (NIP47)
|
||||
@ -89,6 +89,33 @@ export function NWCScreen() {
|
||||
</p>
|
||||
<p className="text-sm text-white/70">Lume doesn't hold your Bitcoin</p>
|
||||
</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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}>
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -22,7 +22,7 @@ export const useActivities = create<ActivitiesState>((set) => ({
|
||||
addActivity: (event: NDKEvent) => {
|
||||
set((state) => ({
|
||||
activities: state.activities ? [event, ...state.activities] : [event],
|
||||
totalNewActivities: state.totalNewActivities++,
|
||||
totalNewActivities: (state.totalNewActivities += 1),
|
||||
}));
|
||||
},
|
||||
clearTotalNewActivities: () => {
|
||||
|
@ -37,14 +37,10 @@ export function useNostr() {
|
||||
[]
|
||||
);
|
||||
|
||||
const sub = async (
|
||||
filter: NDKFilter,
|
||||
callback: (event: NDKEvent) => void,
|
||||
closeOnEose?: boolean
|
||||
) => {
|
||||
const sub = async (filter: NDKFilter, callback: (event: NDKEvent) => void) => {
|
||||
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);
|
||||
|
||||
subEvent.addListener('event', (event: NDKEvent) => {
|
||||
|
Loading…
Reference in New Issue
Block a user