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

clean up messy code

Browse Source
This commit is contained in:
Ren Amamiya
2023-09-18 09:50:15 +07:00
parent 13f5190ba1
commit 53aa13c8aa
31 changed files with 256 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/shared/notes/actions/more.tsx
View File

@@ -44,7 +44,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
</Tooltip.Portal>
</Tooltip.Root>
<DropdownMenu.Portal>
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-white/10 bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-white/10 bg-white/20 p-2 backdrop-blur-3xl focus:outline-none">
<DropdownMenu.Item asChild>
<button
type="button"

3
src/shared/notes/index.ts
View File

@@ -17,9 +17,6 @@ export * from './kinds/article';
export * from './kinds/articleDetail';
export * from './kinds/unknown';
export * from './metadata';
export * from './users/mini';
export * from './users/repost';
export * from './users/thread';
export * from './kinds/repost';
export * from './child';
export * from './skeleton';

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

@@ -12,7 +12,6 @@ import {
LinkPreview,
NoteActions,
NoteSkeleton,
RepostUser,
TextNote,
UnknownNote,
} from '@shared/notes';
@@ -23,14 +22,14 @@ export function Repost({ event }: { event: NDKEvent }) {
event.content.length > 0 ? JSON.parse(event.content) : null;
const { ndk } = useNDK();
const { status, data } = useQuery(
const { status, isError, data } = useQuery(
['repost', event.id],
async () => {
const id = event.tags.find((el) => el[0] === 'e')[1];
if (id === undefined) throw new Error('wrong id');
if (!id) throw new Error('wrong id');
const ndkEvent = await ndk.fetchEvent(id);
if (!ndkEvent) throw new Error('Event not found');
if (!ndkEvent) return Promise.reject(new Error('event not found'));
return ndkEvent;
},
@@ -56,17 +55,11 @@ export function Repost({ event }: { event: NDKEvent }) {
if (embedEvent) {
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">
<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">
<div className="isolate flex flex-col -space-y-4">
<RepostUser pubkey={event.pubkey} />
<User
pubkey={embedEvent.pubkey}
time={embedEvent.created_at}
isRepost={true}
/>
</div>
<div className="-mt-2 flex items-start gap-3">
<User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="relative z-20 flex-1">
{renderKind(embedEvent)}
@@ -89,32 +82,38 @@ export function Repost({ event }: { event: NDKEvent }) {
);
}
if (status === 'error') {
// @ts-expect-error, root_id isn't exist on NDKEvent
const noteLink = `https://njump.me/${nip19.noteEncode(event.root_id)}`;
if (isError) {
const noteLink = `https://njump.me/${nip19.noteEncode(
event.tags.find((el) => el[0] === 'e')[1]
)}`;
return (
<div className="relative mb-5 flex flex-col">
<div className="relative z-10 flex items-start gap-3">
<div className="inline-flex h-11 w-11 items-end justify-center rounded-lg bg-black pb-1">
<img src="/lume.png" alt="lume" className="h-auto w-1/3" />
</div>
<h5 className="truncate font-semibold leading-none text-white">
Lume <span className="text-green-500">(System)</span>
</h5>
</div>
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div>
<div className="relative z-20 mt-1 flex-1 select-text">
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
Lume cannot find this post with your current relays, but you can view it
via njump.me.{' '}
<Link to={noteLink} className="text-fuchsia-500">
Learn more
</Link>
<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">
<div className="relative z-10 flex items-start gap-3">
<div className="inline-flex h-11 w-11 items-end justify-center rounded-lg bg-black pb-1">
<img src="/lume.png" alt="lume" className="h-auto w-1/3" />
</div>
<h5 className="truncate font-semibold leading-none text-white">
Lume <span className="text-green-500">(System)</span>
</h5>
</div>
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div>
<div className="relative z-20 mt-1 flex-1 select-text">
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
Lume cannot find this post with your current relays, but you can view
it via njump.me.{' '}
<Link to={noteLink} className="text-fuchsia-500">
Learn more
</Link>
</div>
</div>
<LinkPreview urls={[noteLink]} />
</div>
</div>
<LinkPreview urls={[noteLink]} />
</div>
</div>
</div>
@@ -124,11 +123,9 @@ 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">
<div className="isolate flex flex-col -space-y-4">
<RepostUser pubkey={event.pubkey} />
<User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
</div>
<User pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-2 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="relative z-20 flex-1">

2
src/shared/notes/mentions/note.tsx
View File

@@ -89,7 +89,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
tabIndex={0}
className="mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
>
<User pubkey={data.pubkey} time={data.created_at} size="small" />
<User pubkey={data.pubkey} time={data.created_at} variant="mention" />
<div className="mt-1">{renderKind(data)}</div>
</div>
);

4
src/shared/notes/metadata.tsx
View File

@@ -6,7 +6,7 @@ import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
import { LoaderIcon } from '@shared/icons';
import { MiniUser } from '@shared/notes/users/mini';
import { User } from '@shared/user';
import { WidgetKinds, useWidgets } from '@stores/widgets';
@@ -86,7 +86,7 @@ export function NoteMetadata({ id }: { id: string }) {
<div className="mt-2 inline-flex h-6 w-11 shrink-0 items-center justify-center">
<div className="isolate flex -space-x-1">
{data.users?.map((user, index) => (
<MiniUser key={user + index} pubkey={user} />
<User key={user + index} pubkey={user} />
))}
</div>
</div>

4
src/shared/notes/replies/list.tsx
View File

@@ -1,4 +1,3 @@
import { NDKKind } from '@nostr-dev-kit/ndk';
import { useEffect, useState } from 'react';
import { NoteSkeleton, Reply } from '@shared/notes';
@@ -21,7 +20,6 @@ export function RepliesList({ id }: { id: string }) {
// subscribe for new replies
sub(
{
kinds: [NDKKind.Text],
'#e': [id],
since: Math.floor(Date.now() / 1000),
},
@@ -50,7 +48,7 @@ export function RepliesList({ id }: { id: string }) {
return (
<div className="mt-5 pb-10">
<h5 className="mb-5 text-lg font-semibold text-white">
<h5 className="mb-2 text-lg font-semibold text-white">
{data?.length || 0} replies
</h5>
<div className="flex flex-col gap-3">

19
src/shared/notes/users/mini.tsx
View File

@@ -1,19 +0,0 @@
import { Image } from '@shared/image';
import { useProfile } from '@utils/hooks/useProfile';
export function MiniUser({ pubkey }: { pubkey: string }) {
const { status, user } = useProfile(pubkey);
if (status === 'loading') {
return <div className="h-4 w-4 animate-pulse rounded bg-white/10"></div>;
}
return (
<Image
src={user?.picture || user?.image}
alt={pubkey}
className="relative z-20 inline-block h-4 w-4 rounded ring-1 ring-black"
/>
);
}

28
src/shared/notes/users/repost.tsx
View File

@@ -1,28 +0,0 @@
import { Image } from '@shared/image';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
export function RepostUser({ pubkey }: { pubkey: string }) {
const { status, user } = useProfile(pubkey);
if (status === 'loading') {
return <div className="h-4 w-4 animate-pulse rounded bg-white/10"></div>;
}
return (
<div className="flex gap-2 pl-6">
<Image
src={user?.picture || user?.image}
alt={pubkey}
className="relative z-20 inline-block h-6 w-6 rounded bg-white ring-1 ring-black"
/>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[13rem] truncate text-sm text-white/50">
{user?.name || user?.display_name || shortenKey(pubkey)}
</h5>
<span className="text-sm text-white/50">reposted</span>
</div>
</div>
);
}

34
src/shared/notes/users/thread.tsx
View File

@@ -1,34 +0,0 @@
import { Image } from '@shared/image';
import { formatCreatedAt } from '@utils/createdAt';
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
export function ThreadUser({ pubkey, time }: { pubkey: string; time: number }) {
const { status, user } = useProfile(pubkey);
const createdAt = formatCreatedAt(time);
if (status === 'loading') {
return <div className="h-4 w-4 animate-pulse rounded bg-white/10"></div>;
}
return (
<div className="flex items-center gap-3">
<Image
src={user.picture || user.image}
alt={pubkey}
className="relative z-20 inline-block h-11 w-11 rounded-lg"
/>
<div className="flex flex-1 flex-col gap-2">
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
{user.display_name || user.name}
</h5>
<div className="inline-flex items-center gap-2">
<span className="leading-none text-white/50">{createdAt}</span>
<span className="leading-none text-white/50">·</span>
<span className="leading-none text-white/50">{displayNpub(pubkey, 16)}</span>
</div>
</div>
</div>
);
}