mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
update notification screen
This commit is contained in:
parent
53227c7050
commit
963328e064
@ -1,5 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "lume",
|
"name": "lume",
|
||||||
|
"description": "the communication app",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
@ -70,10 +70,10 @@ const router = createBrowserRouter([
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'notifications',
|
path: 'lodge',
|
||||||
async lazy() {
|
async lazy() {
|
||||||
const { NotificationScreen } = await import('@app/notification');
|
const { LodgeScreen } = await import('@app/lodge');
|
||||||
return { Component: NotificationScreen };
|
return { Component: LodgeScreen };
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
3
src/app/lodge/components/base/list.tsx
Normal file
3
src/app/lodge/components/base/list.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export function BaseList() {
|
||||||
|
return <div />;
|
||||||
|
}
|
32
src/app/lodge/components/mention.tsx
Normal file
32
src/app/lodge/components/mention.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
|
import { NotiContent } from '@app/lodge/components/content';
|
||||||
|
import { NotiUser } from '@app/lodge/components/user';
|
||||||
|
|
||||||
|
import { formatCreatedAt } from '@utils/createdAt';
|
||||||
|
import { parser } from '@utils/parser';
|
||||||
|
|
||||||
|
export function NotiMention({ event }: { event: NDKEvent }) {
|
||||||
|
const createdAt = formatCreatedAt(event.created_at);
|
||||||
|
const content = useMemo(() => parser(event), [event]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-min w-full px-3 py-1.5">
|
||||||
|
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-1">
|
||||||
|
<NotiUser pubkey={event.pubkey} />
|
||||||
|
<p className="leading-none text-white/50">has reply you post · {createdAt}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="f- relative z-10 -mt-6 flex gap-3">
|
||||||
|
<div className="h-11 w-11 shrink-0" />
|
||||||
|
<div className="mb-2 mt-3 w-full cursor-default rounded-lg bg-white/10 px-3 py-3">
|
||||||
|
<NotiContent content={content} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
30
src/app/lodge/components/reaction.tsx
Normal file
30
src/app/lodge/components/reaction.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||||
|
|
||||||
|
import { SimpleNote } from '@app/lodge/components/simpleNote';
|
||||||
|
import { NotiUser } from '@app/lodge/components/user';
|
||||||
|
|
||||||
|
import { formatCreatedAt } from '@utils/createdAt';
|
||||||
|
|
||||||
|
export function NotiReaction({ event }: { event: NDKEvent }) {
|
||||||
|
const root = event.tags.find((e) => e[0] === 'e')?.[1];
|
||||||
|
const createdAt = formatCreatedAt(event.created_at);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-min w-full px-3 py-1.5">
|
||||||
|
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-1">
|
||||||
|
<NotiUser pubkey={event.pubkey} />
|
||||||
|
<p className="leading-none text-white/50">
|
||||||
|
reacted {event.content} · {createdAt}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative z-10 -mt-6 flex gap-3">
|
||||||
|
<div className="h-11 w-11 shrink-0" />
|
||||||
|
<div className="flex-1">{root && <SimpleNote id={root} />}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
38
src/app/lodge/components/repost.tsx
Normal file
38
src/app/lodge/components/repost.tsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||||
|
|
||||||
|
import { SimpleNote } from '@app/lodge/components/simpleNote';
|
||||||
|
import { NotiUser } from '@app/lodge/components/user';
|
||||||
|
|
||||||
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
|
import { formatCreatedAt } from '@utils/createdAt';
|
||||||
|
|
||||||
|
export function NotiRepost({ event }: { event: NDKEvent }) {
|
||||||
|
const { db } = useStorage();
|
||||||
|
|
||||||
|
const root = event.tags.find((e) => e[0] === 'e')?.[1];
|
||||||
|
const createdAt = formatCreatedAt(event.created_at);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-min w-full px-3 py-1.5">
|
||||||
|
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start gap-1">
|
||||||
|
<NotiUser pubkey={event.pubkey} />
|
||||||
|
<p className="leading-none text-white/50">
|
||||||
|
repost{' '}
|
||||||
|
{event.pubkey !== db.account.pubkey
|
||||||
|
? 'a post that mention you'
|
||||||
|
: 'your post'}{' '}
|
||||||
|
· {createdAt}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative z-10 -mt-6 flex gap-3">
|
||||||
|
<div className="h-11 w-11 shrink-0" />
|
||||||
|
<div className="flex-1">{root && <SimpleNote id={root} />}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
61
src/app/lodge/components/simpleNote.tsx
Normal file
61
src/app/lodge/components/simpleNote.tsx
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import { memo } from 'react';
|
||||||
|
|
||||||
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
|
import { NoteSkeleton } from '@shared/notes';
|
||||||
|
import { User } from '@shared/user';
|
||||||
|
|
||||||
|
import { WidgetKinds, useWidgets } from '@stores/widgets';
|
||||||
|
|
||||||
|
import { useEvent } from '@utils/hooks/useEvent';
|
||||||
|
|
||||||
|
export const SimpleNote = memo(function SimpleNote({ id }: { id: string }) {
|
||||||
|
const { db } = useStorage();
|
||||||
|
const { status, data } = useEvent(id);
|
||||||
|
|
||||||
|
const setWidget = useWidgets((state) => state.setWidget);
|
||||||
|
|
||||||
|
const openThread = (event, thread: string) => {
|
||||||
|
const selection = window.getSelection();
|
||||||
|
if (selection.toString().length === 0) {
|
||||||
|
setWidget(db, { kind: WidgetKinds.thread, title: 'Thread', content: thread });
|
||||||
|
} else {
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (status === 'loading') {
|
||||||
|
return (
|
||||||
|
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
|
||||||
|
<NoteSkeleton />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status === 'error') {
|
||||||
|
return (
|
||||||
|
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
|
||||||
|
<p>Can't get event from relay</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onClick={(e) => openThread(e, id)}
|
||||||
|
onKeyDown={(e) => openThread(e, id)}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
|
||||||
|
>
|
||||||
|
<User pubkey={data.pubkey} time={data.created_at} size="small" />
|
||||||
|
<div className="markdown">
|
||||||
|
<p>
|
||||||
|
{data.content.length > 200
|
||||||
|
? data.content.substring(0, 200) + '...'
|
||||||
|
: data.content}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
@ -22,7 +22,7 @@ export function NotiUser({ pubkey }: { pubkey: string }) {
|
|||||||
<Image
|
<Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
alt={pubkey}
|
alt={pubkey}
|
||||||
className="h-10 w-10 shrink-0 rounded-md object-cover"
|
className="h-11 w-11 shrink-0 rounded-lg object-cover"
|
||||||
/>
|
/>
|
||||||
<span className="max-w-[10rem] flex-1 truncate font-medium leading-none text-white">
|
<span className="max-w-[10rem] flex-1 truncate font-medium leading-none text-white">
|
||||||
{user?.nip05 || user?.name || user?.display_name || displayNpub(pubkey, 16)}
|
{user?.nip05 || user?.name || user?.display_name || displayNpub(pubkey, 16)}
|
85
src/app/lodge/index.tsx
Normal file
85
src/app/lodge/index.tsx
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
import { NDKEvent, NDKFilter } from '@nostr-dev-kit/ndk';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { useCallback, useEffect } from 'react';
|
||||||
|
|
||||||
|
import { NotiMention } from '@app/lodge/components/mention';
|
||||||
|
import { NotiReaction } from '@app/lodge/components/reaction';
|
||||||
|
import { NotiRepost } from '@app/lodge/components/repost';
|
||||||
|
|
||||||
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
|
import { LoaderIcon } from '@shared/icons';
|
||||||
|
import { TitleBar } from '@shared/titleBar';
|
||||||
|
|
||||||
|
import { useNostr } from '@utils/hooks/useNostr';
|
||||||
|
|
||||||
|
export function LodgeScreen() {
|
||||||
|
const { db } = useStorage();
|
||||||
|
const { sub, fetchActivities } = useNostr();
|
||||||
|
const { status, data } = useQuery(
|
||||||
|
['lodge', db.account.pubkey],
|
||||||
|
async () => {
|
||||||
|
return await fetchActivities();
|
||||||
|
},
|
||||||
|
{ refetchOnWindowFocus: false }
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderItem = useCallback(
|
||||||
|
(event: NDKEvent) => {
|
||||||
|
switch (event.kind) {
|
||||||
|
case 1:
|
||||||
|
return <NotiMention key={event.id} event={event} />;
|
||||||
|
case 6:
|
||||||
|
return <NotiRepost key={event.id} event={event} />;
|
||||||
|
case 7:
|
||||||
|
return <NotiReaction key={event.id} event={event} />;
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const filter: NDKFilter = {
|
||||||
|
'#p': [db.account.pubkey],
|
||||||
|
kinds: [1, 3, 6, 7, 9735],
|
||||||
|
since: db.account.last_login_at ?? Math.floor(Date.now() / 1000),
|
||||||
|
};
|
||||||
|
|
||||||
|
sub(filter, async (event) => {
|
||||||
|
console.log('[notify] new noti', event.id);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="scrollbar-hide h-full w-full overflow-y-auto bg-white/10">
|
||||||
|
<div className="grid grid-cols-3">
|
||||||
|
<div className="col-span-2 h-full border-r border-white/5">
|
||||||
|
<TitleBar title="Activities in the last 24 hours" />
|
||||||
|
<div className="flex h-full flex-col gap-1.5">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{status === 'loading' ? (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<div className="flex flex-col items-center gap-1.5">
|
||||||
|
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||||
|
<p className="text-sm font-medium text-white/50">Loading</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : data?.length < 1 ? (
|
||||||
|
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||||
|
<p className="mb-1 text-4xl">🎉</p>
|
||||||
|
<p className="font-medium text-white/50">
|
||||||
|
Yo!, you've no new activities
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
data.map((event) => renderItem(event))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,28 +0,0 @@
|
|||||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
||||||
import { useMemo } from 'react';
|
|
||||||
|
|
||||||
import { NotiContent } from '@app/notification/components/content';
|
|
||||||
import { NotiUser } from '@app/notification/components/user';
|
|
||||||
|
|
||||||
import { formatCreatedAt } from '@utils/createdAt';
|
|
||||||
import { parser } from '@utils/parser';
|
|
||||||
|
|
||||||
export function NotiMention({ event }: { event: NDKEvent }) {
|
|
||||||
const createdAt = formatCreatedAt(event.created_at);
|
|
||||||
const content = useMemo(() => parser(event), [event]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-min flex-col px-3 py-3">
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div className="flex items-start gap-1">
|
|
||||||
<NotiUser pubkey={event.pubkey} />
|
|
||||||
<p className="leading-none text-white/50">mention you · {createdAt}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative z-10 -mt-6 flex gap-3">
|
|
||||||
<div className="h-10 w-10 shrink-0" />
|
|
||||||
<NotiContent content={content} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,29 +0,0 @@
|
|||||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
||||||
|
|
||||||
import { NotiUser } from '@app/notification/components/user';
|
|
||||||
|
|
||||||
import { MentionNote } from '@shared/notes';
|
|
||||||
|
|
||||||
import { formatCreatedAt } from '@utils/createdAt';
|
|
||||||
|
|
||||||
export function NotiReaction({ event }: { event: NDKEvent }) {
|
|
||||||
const root = event.tags.find((e) => e[0] === 'e')?.[1];
|
|
||||||
const createdAt = formatCreatedAt(event.created_at);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-min flex-col px-3 py-3">
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div className="flex items-start gap-1">
|
|
||||||
<NotiUser pubkey={event.pubkey} />
|
|
||||||
<p className="leading-none text-white/50">
|
|
||||||
reacted {event.content} · {createdAt}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative z-10 -mt-6 flex gap-3">
|
|
||||||
<div className="h-10 w-10 shrink-0" />
|
|
||||||
<div className="flex-1">{root && <MentionNote id={root} />}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,27 +0,0 @@
|
|||||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
||||||
|
|
||||||
import { NotiUser } from '@app/notification/components/user';
|
|
||||||
|
|
||||||
import { MentionNote } from '@shared/notes';
|
|
||||||
|
|
||||||
import { formatCreatedAt } from '@utils/createdAt';
|
|
||||||
|
|
||||||
export function NotiRepost({ event }: { event: NDKEvent }) {
|
|
||||||
const root = event.tags.find((e) => e[0] === 'e')?.[1];
|
|
||||||
const createdAt = formatCreatedAt(event.created_at);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex h-min flex-col px-3 py-3">
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div className="flex items-start gap-1">
|
|
||||||
<NotiUser pubkey={event.pubkey} />
|
|
||||||
<p className="leading-none text-white/50">repostr your postr · {createdAt}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative z-10 -mt-6 flex gap-3">
|
|
||||||
<div className="h-10 w-10 shrink-0" />
|
|
||||||
<div className="flex-1">{root && <MentionNote id={root} />}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,79 +0,0 @@
|
|||||||
import { NDKEvent, NDKFilter } from '@nostr-dev-kit/ndk';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import { useCallback, useEffect } from 'react';
|
|
||||||
|
|
||||||
import { NotiMention } from '@app/notification/components/mention';
|
|
||||||
import { NotiReaction } from '@app/notification/components/reaction';
|
|
||||||
import { NotiRepost } from '@app/notification/components/repost';
|
|
||||||
|
|
||||||
import { useStorage } from '@libs/storage/provider';
|
|
||||||
|
|
||||||
import { LoaderIcon } from '@shared/icons';
|
|
||||||
|
|
||||||
import { useNostr } from '@utils/hooks/useNostr';
|
|
||||||
|
|
||||||
export function NotificationScreen() {
|
|
||||||
const { db } = useStorage();
|
|
||||||
const { sub, fetchActivities } = useNostr();
|
|
||||||
const { status, data } = useQuery(
|
|
||||||
['notification', db.account.pubkey],
|
|
||||||
async () => {
|
|
||||||
return await fetchActivities();
|
|
||||||
},
|
|
||||||
{ refetchOnWindowFocus: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderItem = useCallback(
|
|
||||||
(event: NDKEvent) => {
|
|
||||||
switch (event.kind) {
|
|
||||||
case 1:
|
|
||||||
return <NotiMention key={event.id} event={event} />;
|
|
||||||
case 6:
|
|
||||||
return <NotiRepost key={event.id} event={event} />;
|
|
||||||
case 7:
|
|
||||||
return <NotiReaction key={event.id} event={event} />;
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[data]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const filter: NDKFilter = {
|
|
||||||
'#p': [db.account.pubkey],
|
|
||||||
kinds: [1, 3, 6, 7, 9735],
|
|
||||||
since: db.account.last_login_at ?? Math.floor(Date.now() / 1000),
|
|
||||||
};
|
|
||||||
|
|
||||||
sub(filter, async (event) => {
|
|
||||||
console.log('[notify] new noti', event.id);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="h-full w-full overflow-y-auto bg-white/10 px-3">
|
|
||||||
<div className="mb-3 px-3 pt-11">
|
|
||||||
<h3 className="text-xl font-bold">Notifications</h3>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-3 gap-3">
|
|
||||||
<div className="col-span-2 flex flex-col">
|
|
||||||
{status === 'loading' ? (
|
|
||||||
<div className="inline-flex items-center justify-center px-4 py-3">
|
|
||||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
|
|
||||||
</div>
|
|
||||||
) : data?.length < 1 ? (
|
|
||||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
|
||||||
<p className="mb-1 text-4xl">🎉</p>
|
|
||||||
<p className="font-medium text-white/50">
|
|
||||||
Yo!, you've no new notifications
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
data.map((event) => renderItem(event))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -130,7 +130,7 @@ export function FeedWidget({ params }: { params: Widget }) {
|
|||||||
<div className="bbg-white/10 rounded-xl px-3 py-6">
|
<div className="bbg-white/10 rounded-xl px-3 py-6">
|
||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<p className="text-center text-sm text-white">
|
<p className="text-center text-sm text-white">
|
||||||
There have been no new postrs.
|
There have been no new posts.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -128,7 +128,7 @@ export function HashtagWidget({ params }: { params: Widget }) {
|
|||||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<p className="text-center text-sm font-medium text-white">
|
<p className="text-center text-sm font-medium text-white">
|
||||||
There have been no new postrs with this hashtag in the last 24 hours.
|
There have been no new posts with this hashtag in the last 24 hours.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -167,7 +167,7 @@ export function NetworkWidget() {
|
|||||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<p className="text-center text-sm text-white">
|
<p className="text-center text-sm text-white">
|
||||||
You not have any postrs to see yet
|
You not have any posts to see yet
|
||||||
<br />
|
<br />
|
||||||
Follow more people to have more fun.
|
Follow more people to have more fun.
|
||||||
</p>
|
</p>
|
||||||
|
@ -127,7 +127,7 @@ export function UserWidget({ params }: { params: Widget }) {
|
|||||||
<UserProfile pubkey={params.content} />
|
<UserProfile pubkey={params.content} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="mt-4 px-3 text-lg font-semibold text-white">Latest postrs</h3>
|
<h3 className="mt-4 px-3 text-lg font-semibold text-white">Latest posts</h3>
|
||||||
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
|
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="px-3 py-1.5">
|
<div className="px-3 py-1.5">
|
||||||
@ -140,7 +140,7 @@ export function UserWidget({ params }: { params: Widget }) {
|
|||||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<p className="text-center text-sm text-white">
|
<p className="text-center text-sm text-white">
|
||||||
No new postr from user in 24 hours ago
|
No new post from user in 24 hours ago
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -120,7 +120,7 @@ export function UserScreen() {
|
|||||||
<UserProfile pubkey={pubkey} />
|
<UserProfile pubkey={pubkey} />
|
||||||
<div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
|
<div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
|
||||||
<h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-white">
|
<h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-white">
|
||||||
Latest postrs
|
Latest posts
|
||||||
</h3>
|
</h3>
|
||||||
<div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
|
<div className="mx-auto flex h-full max-w-[500px] flex-col justify-between gap-1.5 pb-4 pt-1.5">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
@ -134,7 +134,7 @@ export function UserScreen() {
|
|||||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||||
<div className="flex flex-col items-center gap-4">
|
<div className="flex flex-col items-center gap-4">
|
||||||
<p className="text-center text-sm font-medium text-white">
|
<p className="text-center text-sm font-medium text-white">
|
||||||
User doesn't have any postrs in the last 48 hours.
|
User doesn't have any posts in the last 48 hours.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -111,7 +111,7 @@ export function Composer() {
|
|||||||
await publish({ content: serializedContent, kind: 1, tags });
|
await publish({ content: serializedContent, kind: 1, tags });
|
||||||
|
|
||||||
// send native notifiation
|
// send native notifiation
|
||||||
await sendNativeNotification('Publish postr successfully');
|
await sendNativeNotification('Publish post successfully');
|
||||||
|
|
||||||
// update state
|
// update state
|
||||||
setStatus('done');
|
setStatus('done');
|
||||||
@ -166,7 +166,7 @@ export function Composer() {
|
|||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
||||||
) : (
|
) : (
|
||||||
'Postr'
|
'Post'
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -21,7 +21,7 @@ export function ComposerModal() {
|
|||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-9 w-min items-center justify-center gap-2 rounded-md bg-white/10 px-6 text-sm font-medium text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1"
|
className="inline-flex h-9 w-max items-center justify-center gap-2 rounded-md bg-white/10 px-4 text-sm font-medium text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1"
|
||||||
>
|
>
|
||||||
<ComposeIcon className="h-4 w-4" />
|
<ComposeIcon className="h-4 w-4" />
|
||||||
Postr
|
Postr
|
||||||
@ -38,7 +38,7 @@ export function ComposerModal() {
|
|||||||
<ChevronRightIcon className="h-4 w-4 text-white/50" />
|
<ChevronRightIcon className="h-4 w-4 text-white/50" />
|
||||||
</span>
|
</span>
|
||||||
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-white/10 pl-3 pr-1.5 text-sm font-medium text-white">
|
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-white/10 pl-3 pr-1.5 text-sm font-medium text-white">
|
||||||
New Postr
|
New Post
|
||||||
<ChevronDownIcon className="h-4 w-4" />
|
<ChevronDownIcon className="h-4 w-4" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -85,7 +85,7 @@ export function Navigation() {
|
|||||||
Space
|
Space
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink
|
<NavLink
|
||||||
to="/notifications"
|
to="/lodge"
|
||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
twMerge(
|
twMerge(
|
||||||
@ -97,7 +97,7 @@ export function Navigation() {
|
|||||||
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
|
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
|
||||||
<BellIcon className="h-3 w-3 text-white" />
|
<BellIcon className="h-3 w-3 text-white" />
|
||||||
</span>
|
</span>
|
||||||
Notifications
|
Lodge
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
</Collapsible.Content>
|
</Collapsible.Content>
|
||||||
|
@ -51,7 +51,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
to={`/notes/text/${id}`}
|
to={`/notes/text/${id}`}
|
||||||
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
|
className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
|
||||||
>
|
>
|
||||||
Open as new screen
|
Focus mode
|
||||||
</Link>
|
</Link>
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
<DropdownMenu.Item asChild>
|
<DropdownMenu.Item asChild>
|
||||||
|
@ -38,7 +38,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
</Tooltip.Trigger>
|
</Tooltip.Trigger>
|
||||||
<Tooltip.Portal>
|
<Tooltip.Portal>
|
||||||
<Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
<Tooltip.Content className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
|
||||||
Repostr
|
Repost
|
||||||
<Tooltip.Arrow className="fill-black" />
|
<Tooltip.Arrow className="fill-black" />
|
||||||
</Tooltip.Content>
|
</Tooltip.Content>
|
||||||
</Tooltip.Portal>
|
</Tooltip.Portal>
|
||||||
@ -49,11 +49,11 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
|
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
|
||||||
<div className="flex flex-col gap-2 border-b border-white/5 px-5 py-4">
|
<div className="flex flex-col gap-2 border-b border-white/5 px-5 py-4">
|
||||||
<AlertDialog.Title className="text-lg font-semibold leading-none text-white">
|
<AlertDialog.Title className="text-lg font-semibold leading-none text-white">
|
||||||
Confirm repostr this postr?
|
Confirm repost this post?
|
||||||
</AlertDialog.Title>
|
</AlertDialog.Title>
|
||||||
<AlertDialog.Description className="text-sm leading-none text-white/50">
|
<AlertDialog.Description className="text-sm leading-none text-white/50">
|
||||||
Repostred postr will be visible to your followers, and you cannot undo
|
Reposted post will be visible to your followers, and you cannot undo this
|
||||||
this action.
|
action.
|
||||||
</AlertDialog.Description>
|
</AlertDialog.Description>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-end gap-6 px-5 py-3">
|
<div className="flex justify-end gap-6 px-5 py-3">
|
||||||
@ -67,7 +67,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
|
|||||||
onClick={() => submit()}
|
onClick={() => submit()}
|
||||||
className="inline-flex h-11 items-center justify-center rounded-lg bg-fuchsia-500 px-4 font-medium leading-none text-white outline-none"
|
className="inline-flex h-11 items-center justify-center rounded-lg bg-fuchsia-500 px-4 font-medium leading-none text-white outline-none"
|
||||||
>
|
>
|
||||||
Yes, repostr
|
Yes, repost
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -33,7 +33,7 @@ export function Repost({ event }: { event: NDKEvent }) {
|
|||||||
<div className="h-min w-full px-3 py-1.5">
|
<div className="h-min w-full px-3 py-1.5">
|
||||||
<div className="flex flex-col gap-1 overflow-hidden rounded-xl bg-white/10 px-3 py-3">
|
<div className="flex flex-col gap-1 overflow-hidden rounded-xl bg-white/10 px-3 py-3">
|
||||||
<p className="select-text break-all text-white/50">
|
<p className="select-text break-all text-white/50">
|
||||||
Failed to get repostr with ID
|
Failed to get repost with ID
|
||||||
</p>
|
</p>
|
||||||
<div className="break-all rounded-lg bg-white/10 px-2 py-2">
|
<div className="break-all rounded-lg bg-white/10 px-2 py-2">
|
||||||
<p className="text-white">{repostID}</p>
|
<p className="text-white">{repostID}</p>
|
||||||
|
@ -72,7 +72,7 @@ export function NoteStats({ id }: { id: string }) {
|
|||||||
<span className="font-semibold text-white">
|
<span className="font-semibold text-white">
|
||||||
{compactNumber.format(data.reposts)}
|
{compactNumber.format(data.reposts)}
|
||||||
</span>{' '}
|
</span>{' '}
|
||||||
repostrs
|
reposts
|
||||||
</p>
|
</p>
|
||||||
<span className="text-white/50">·</span>
|
<span className="text-white/50">·</span>
|
||||||
<p className="text-white/50">
|
<p className="text-white/50">
|
||||||
|
Loading…
Reference in New Issue
Block a user