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

5
src/shared/nip05.tsx
View File

@@ -1,5 +1,6 @@
import { useQuery } from '@tanstack/react-query';
import { fetch } from '@tauri-apps/api/http';
import { memo } from 'react';
import { twMerge } from 'tailwind-merge';
import { UnverifiedIcon, VerifiedIcon } from '@shared/icons';
@@ -10,7 +11,7 @@ interface NIP05 {
};
}
export function NIP05({
export const NIP05 = memo(function NIP05({
pubkey,
nip05,
className,
@@ -71,4 +72,4 @@ export function NIP05({
</div>
</div>
);
}
});

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>
);
}

192
src/shared/user.tsx
View File

@@ -1,7 +1,8 @@
import * as Popover from '@radix-ui/react-popover';
import { memo } from 'react';
import { Link } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { WorldIcon } from '@shared/icons';
import { Image } from '@shared/image';
import { NIP05 } from '@shared/nip05';
@@ -9,77 +10,172 @@ import { formatCreatedAt } from '@utils/createdAt';
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
export function User({
export const User = memo(function User({
pubkey,
time,
size,
isRepost = false,
isChat = false,
variant = 'default',
embedProfile,
}: {
pubkey: string;
time: number;
size?: string;
isRepost?: boolean;
isChat?: boolean;
time?: number;
variant?: 'default' | 'simple' | 'mention' | 'repost' | 'chat' | 'large' | 'thread';
embedProfile?: string;
}) {
const { status, user } = useProfile(pubkey);
const createdAt = formatCreatedAt(time, isChat);
const avatarWidth = size === 'small' ? 'w-6' : 'w-11';
const avatarHeight = size === 'small' ? 'h-6' : 'h-11';
const { status, user } = useProfile(pubkey, embedProfile);
const createdAt = time ? formatCreatedAt(time, variant === 'chat') : 0;
if (status === 'loading') {
return (
<div
className={`relative flex gap-3 ${
size === 'small' ? 'items-center' : 'items-start'
}`}
>
<div
className={`${avatarWidth} ${avatarHeight} ${
size === 'small' ? 'rounded' : 'rounded-lg'
} relative z-10 shrink-0 animate-pulse overflow-hidden bg-white/10 backdrop-blur-xl`}
/>
<div className="flex flex-wrap items-baseline gap-1">
if (variant === 'mention') {
return (
<div className="relative flex items-center gap-3">
<div className="relative z-10 h-6 w-6 shrink-0 animate-pulse overflow-hidden rounded bg-white/10 backdrop-blur-xl" />
<div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
</div>
);
}
return (
<div className="relative flex items-start gap-3">
<div className="relative z-10 h-11 w-11 shrink-0 animate-pulse overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl" />
<div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
</div>
);
}
if (variant === 'mention') {
return (
<div className="relative z-10 flex items-center gap-2">
<button type="button" className="relative z-40 h-6 w-6 shrink-0 overflow-hidden">
<Image
src={user?.picture || user?.image}
alt={pubkey}
className="h-6 w-6 rounded object-cover"
/>
</button>
<div className="flex flex-1 items-baseline gap-2">
<h5 className="max-w-[10rem] truncate font-semibold leading-none text-white">
{user?.display_name || user?.name || displayNpub(pubkey, 16)}
</h5>
<span className="leading-none text-white/50">·</span>
<span className="leading-none text-white/50">{createdAt}</span>
</div>
</div>
);
}
if (variant === 'large') {
return (
<div className="flex h-full w-full flex-col gap-2.5">
<Image
src={user?.picture || user?.image}
alt={pubkey}
className="h-14 w-14 shrink-0 rounded-lg object-cover"
/>
<div className="flex h-full flex-col items-start justify-between">
<div className="flex flex-col items-start gap-1 text-start">
<p className="max-w-[15rem] truncate text-lg font-semibold leading-none text-white">
{user?.name || user?.display_name}
</p>
<p className="line-clamp-6 break-all text-white/70">
{user?.about || user?.bio || 'No bio'}
</p>
</div>
<div className="flex flex-col gap-2">
{user?.website ? (
<Link
to={user?.website}
target="_blank"
className="inline-flex items-center gap-2 text-sm text-white/70"
>
<WorldIcon className="h-4 w-4" />
<p className="max-w-[10rem] truncate">{user.website}</p>
</Link>
) : null}
</div>
</div>
</div>
);
}
if (variant === 'simple') {
return (
<div className="flex items-center gap-2.5">
<Image
src={user?.picture || user?.image}
alt={pubkey}
className="h-12 w-12 shrink-0 rounded-lg object-cover"
/>
<div className="flex w-full flex-col gap-1">
<h3 className="max-w-[15rem] truncate font-medium leading-none text-white">
{user?.name || user?.display_name}
</h3>
<p className="text-sm leading-none text-white/70">
{user?.nip05 || user?.username || displayNpub(pubkey, 16)}
</p>
</div>
</div>
);
}
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>
</div>
);
}
if (variant === 'thread') {
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>
);
}
return (
<Popover.Root>
<div
className={twMerge(
'relative z-10 flex',
size === 'small' ? 'items-center gap-2' : 'items-start gap-3'
)}
>
<div className="relative z-10 flex items-start gap-3">
<Popover.Trigger asChild>
<button
type="button"
className={`${avatarWidth} ${avatarHeight} relative z-40 shrink-0 overflow-hidden`}
className="relative z-40 h-11 w-11 shrink-0 overflow-hidden"
>
<Image
src={user?.picture || user?.image}
alt={pubkey}
className={twMerge(
`object-cover ${avatarWidth} ${avatarHeight}`,
size === 'small' ? 'rounded' : 'rounded-lg',
isRepost ? 'ring-1 ring-black' : ''
)}
className="h-11 w-11 rounded-lg object-cover"
/>
</button>
</Popover.Trigger>
<div
className={twMerge('flex flex-1 items-baseline gap-2', isRepost ? 'mt-4' : '')}
>
<h5
className={twMerge(
'truncate font-semibold leading-none text-white',
size === 'small' ? 'max-w-[10rem]' : 'max-w-[15rem]'
)}
>
<div className="flex flex-1 items-baseline gap-2">
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
{user?.display_name || user?.name || displayNpub(pubkey, 16)}
</h5>
<span className="leading-none text-white/50">·</span>
@@ -139,4 +235,4 @@ export function User({
</Popover.Portal>
</Popover.Root>
);
}
});

4
src/shared/widgets/local/thread.tsx
View File

@@ -10,12 +10,12 @@ import {
NoteReplyForm,
NoteStats,
TextNote,
ThreadUser,
UnknownNote,
} from '@shared/notes';
import { RepliesList } from '@shared/notes/replies/list';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { TitleBar } from '@shared/titleBar';
import { User } from '@shared/user';
import { useEvent } from '@utils/hooks/useEvent';
import { Widget } from '@utils/types';
@@ -53,7 +53,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
) : (
<div className="h-min w-full px-3 pt-1.5">
<div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
<div className="mt-2">{renderKind(data)}</div>
<NoteActions
id={params.content}

5
src/shared/widgets/tmp/feeds.tsx
View File

@@ -1,10 +1,9 @@
import { useState } from 'react';
import { User } from '@app/auth/components/user';
import { useStorage } from '@libs/storage/provider';
import { ArrowRightCircleIcon, CheckCircleIcon } from '@shared/icons';
import { User } from '@shared/user';
import { WidgetKinds, useWidgets } from '@stores/widgets';
@@ -65,7 +64,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
onClick={() => toggleGroup(item)}
className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-white/20"
>
<User pubkey={item} />
<User pubkey={item} variant="simple" />
{groups.includes(item) && (
<div>
<CheckCircleIcon className="h-4 w-4 text-green-400" />