nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +00:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/auth/complete.tsx
View File

@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
export function CompleteScreen() { export function CompleteScreen() {
const navigate = useNavigate(); const navigate = useNavigate();
const [count, setCount] = useState(3); const [count, setCount] = useState(5);
useEffect(() => { useEffect(() => {
let counter: NodeJS.Timeout; let counter: NodeJS.Timeout;
@ -26,7 +26,6 @@ export function CompleteScreen() {
<div className="mx-auto flex max-w-xl flex-col gap-1.5 text-center"> <div className="mx-auto flex max-w-xl flex-col gap-1.5 text-center">
<h1 className="text-2xl font-light leading-none text-white"> <h1 className="text-2xl font-light leading-none text-white">
<span className="font-semibold">You&apos;re ready</span>, redirecting in {count} <span className="font-semibold">You&apos;re ready</span>, redirecting in {count}
...
</h1> </h1>
<p className="text-white/70"> <p className="text-white/70">
Thank you for using Lume. Lume doesn&apos;t use telemetry. If you encounter any Thank you for using Lume. Lume doesn&apos;t use telemetry. If you encounter any

54
src/app/auth/components/user.tsx
View File

@ -1,54 +0,0 @@
import { Link } from 'react-router-dom';
import { WorldIcon } from '@shared/icons';
import { Image } from '@shared/image';
import { useProfile } from '@utils/hooks/useProfile';
export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }) {
const { status, user } = useProfile(pubkey, fallback);
if (status === 'loading') {
return (
<div className="flex items-center gap-2">
<div className="relative h-14 w-14 shrink-0 animate-pulse rounded-md bg-white/10 backdrop-blur-xl" />
<div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
<span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
</div>
</div>
);
}
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>
);
}

38
src/app/auth/components/userImport.tsx
View File

@ -1,38 +0,0 @@
import { Image } from '@shared/image';
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
export function UserImport({ pubkey }: { pubkey: string }) {
const { status, user } = useProfile(pubkey);
if (status === 'loading') {
return (
<div className="flex items-center gap-2.5">
<div className="12 12 relative shrink-0 animate-pulse rounded-lg bg-white/10 backdrop-blur-xl" />
<div className="flex flex-col gap-1">
<span className="h-5 w-1/2 animate-pulse rounded bg-white/10" />
<span className="h-4 w-1/3 animate-pulse rounded bg-white/10" />
</div>
</div>
);
}
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 text-lg font-semibold leading-none text-white">
{user?.name || user?.display_name}
</h3>
<p className="leading-none text-white/70">
{user?.nip05 || user?.username || displayNpub(pubkey, 16)}
</p>
</div>
</div>
);
}

36
src/app/auth/components/userRelay.tsx
View File

@ -1,36 +0,0 @@
import { Image } from '@shared/image';
import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey';
export function UserRelay({ pubkey }: { pubkey: string }) {
const { status, user } = useProfile(pubkey);
if (status === 'loading') {
return (
<div className="flex items-center gap-2">
<div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10 backdrop-blur-xl" />
<div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
<span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
</div>
</div>
);
}
return (
<div className="inline-flex items-center gap-2 text-white/50">
<span className="text-sm">Use by</span>
<div className="inline-flex items-center gap-1">
<Image
src={user?.picture || user?.image}
alt={pubkey}
className="h-5 w-5 shrink-0 rounded object-cover"
/>
<span className="truncate text-sm font-medium leading-none text-white">
{user?.name || user?.display_name || displayNpub(pubkey, 16)}
</span>
</div>
</div>
);
}

5
src/app/auth/import/step-3.tsx
View File

@ -1,11 +1,10 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { UserImport } from '@app/auth/components/userImport';
import { useStorage } from '@libs/storage/provider'; import { useStorage } from '@libs/storage/provider';
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons'; import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
import { User } from '@shared/user';
import { useOnboarding } from '@stores/onboarding'; import { useOnboarding } from '@stores/onboarding';
import { WidgetKinds } from '@stores/widgets'; import { WidgetKinds } from '@stores/widgets';
@ -60,7 +59,7 @@ export function ImportStep3Screen() {
</div> </div>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="rounded-lg border-t border-white/10 bg-white/20 px-3 py-3"> <div className="rounded-lg border-t border-white/10 bg-white/20 px-3 py-3">
<UserImport pubkey={db.account.pubkey} /> <User pubkey={db.account.pubkey} variant="simple" />
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<button <button

9
src/app/auth/onboarding/step-1.tsx
View File

@ -2,11 +2,10 @@ import { useQuery } from '@tanstack/react-query';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { User } from '@app/auth/components/user';
import { useStorage } from '@libs/storage/provider'; import { useStorage } from '@libs/storage/provider';
import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons'; import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
import { User } from '@shared/user';
import { useOnboarding } from '@stores/onboarding'; import { useOnboarding } from '@stores/onboarding';
@ -92,7 +91,11 @@ export function OnboardStep1Screen() {
onClick={() => toggleFollow(item.pubkey)} onClick={() => toggleFollow(item.pubkey)}
className="relative h-[300px] shrink-0 grow-0 basis-[250px] rounded-lg border-t border-white/10 bg-white/20 px-4 py-4 hover:bg-white/30" className="relative h-[300px] shrink-0 grow-0 basis-[250px] rounded-lg border-t border-white/10 bg-white/20 px-4 py-4 hover:bg-white/30"
> >
<User pubkey={item.pubkey} fallback={item.profile?.content} /> <User
pubkey={item.pubkey}
variant="large"
embedProfile={item.profile?.content}
/>
{follows.includes(item.pubkey) && ( {follows.includes(item.pubkey) && (
<div className="absolute right-2 top-2"> <div className="absolute right-2 top-2">
<CheckCircleIcon className="h-4 w-4 text-green-400" /> <CheckCircleIcon className="h-4 w-4 text-green-400" />

5
src/app/auth/onboarding/step-3.tsx
View File

@ -2,12 +2,11 @@ import { useQuery } from '@tanstack/react-query';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { UserRelay } from '@app/auth/components/userRelay';
import { useNDK } from '@libs/ndk/provider'; import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider'; import { useStorage } from '@libs/storage/provider';
import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons'; import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
import { User } from '@shared/user';
import { FULL_RELAYS } from '@stores/constants'; import { FULL_RELAYS } from '@stores/constants';
import { useOnboarding } from '@stores/onboarding'; import { useOnboarding } from '@stores/onboarding';
@ -136,7 +135,7 @@ export function OnboardStep3Screen() {
> >
<div className="flex flex-col items-start gap-1"> <div className="flex flex-col items-start gap-1">
<p className="max-w-[15rem] truncate">{item.replace(/\/+$/, '')}</p> <p className="max-w-[15rem] truncate">{item.replace(/\/+$/, '')}</p>
<UserRelay pubkey={data.get(item)} /> <User pubkey={data.get(item)} variant="mention" />
</div> </div>
{relays.has(item) && ( {relays.has(item) && (
<div className="pt-1.5"> <div className="pt-1.5">

14
src/app/auth/reset.tsx
View File

@ -116,28 +116,28 @@ export function ResetScreen() {
</div> </div>
<form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3"> <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label htmlFor="privkey" className="font-medium text-white/50"> <label htmlFor="privkey" className="font-medium text-white">
Private key Private key
</label> </label>
<div className="relative"> <div className="relative">
<input <input
{...register('privkey', { required: true })} {...register('privkey', { required: true })}
type="text" type="text"
placeholder="nsec..." placeholder="nsec1..."
className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50" className="relative h-12 w-full rounded-lg border-t border-white/10 bg-white/20 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/70"
/> />
</div> </div>
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label htmlFor="password" className="font-medium text-white/50"> <label htmlFor="password" className="font-medium text-white">
Set a new password to protect your key Set a new password to protect your key
</label> </label>
<div className="relative"> <div className="relative">
<input <input
{...register('password', { required: true })} {...register('password', { required: true })}
type={passwordInput} type={passwordInput}
placeholder="min. 4 characters" placeholder="Min. 4 characters"
className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50" className="relative h-12 w-full rounded-lg border-t border-white/10 bg-white/20 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/70"
/> />
<button <button
type="button" type="button"
@ -169,7 +169,7 @@ export function ResetScreen() {
</button> </button>
<Link <Link
to="/auth/unlock" to="/auth/unlock"
className="mt-1 inline-flex h-11 w-full items-center justify-center rounded-lg text-center text-white/50 hover:bg-white/10" className="mt-1 inline-flex h-12 w-full items-center justify-center rounded-lg text-center text-white/70 hover:bg-white/20"
> >
Back Back
</Link> </Link>

5
src/app/auth/unlock.tsx
View File

@ -4,11 +4,10 @@ import { Resolver, useForm } from 'react-hook-form';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Stronghold } from 'tauri-plugin-stronghold-api'; import { Stronghold } from 'tauri-plugin-stronghold-api';
import { UserImport } from '@app/auth/components/userImport';
import { useStorage } from '@libs/storage/provider'; import { useStorage } from '@libs/storage/provider';
import { ArrowRightCircleIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons'; import { ArrowRightCircleIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
import { User } from '@shared/user';
import { useStronghold } from '@stores/stronghold'; import { useStronghold } from '@stores/stronghold';
@ -82,7 +81,7 @@ export function UnlockScreen() {
<form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col"> <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
<div className="flex flex-col rounded-lg bg-white/5"> <div className="flex flex-col rounded-lg bg-white/5">
<div className="w-full rounded-t-lg border-b border-white/10 bg-white/5 p-4"> <div className="w-full rounded-t-lg border-b border-white/10 bg-white/5 p-4">
<UserImport pubkey={db.account.pubkey} /> <User pubkey={db.account.pubkey} variant="simple" />
</div> </div>
<div className="relative"> <div className="relative">
<input <input

2
src/app/chats/components/messages/item.tsx
View File

@ -22,7 +22,7 @@ export function ChatMessageItem({
return ( return (
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 backdrop-blur-xl hover:bg-white/10"> <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 backdrop-blur-xl hover:bg-white/10">
<div className="flex flex-col"> <div className="flex flex-col">
<User pubkey={message.pubkey} time={message.created_at} isChat={true} /> <User pubkey={message.pubkey} time={message.created_at} variant="chat" />
<div className="-mt-[20px] pl-[49px]"> <div className="-mt-[20px] pl-[49px]">
<p className="select-text whitespace-pre-line break-words text-base text-white"> <p className="select-text whitespace-pre-line break-words text-base text-white">
{message.content} {message.content}

11
src/app/chats/components/modal.tsx
View File

@ -2,11 +2,10 @@ import * as Dialog from '@radix-ui/react-dialog';
import { useState } from 'react'; import { useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { User } from '@app/auth/components/user';
import { useStorage } from '@libs/storage/provider'; import { useStorage } from '@libs/storage/provider';
import { CancelIcon, PlusIcon } from '@shared/icons'; import { CancelIcon, PlusIcon } from '@shared/icons';
import { User } from '@shared/user';
export function NewMessageModal() { export function NewMessageModal() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -54,16 +53,16 @@ export function NewMessageModal() {
</div> </div>
</div> </div>
<div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-2 pt-2"> <div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-2 pt-2">
{db.account?.follows?.map((follow) => ( {db.account?.follows?.map((pubkey) => (
<div <div
key={follow} key={pubkey}
className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10" className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
> >
<User pubkey={follow} /> <User pubkey={pubkey} variant="simple" />
<div> <div>
<button <button
type="button" type="button"
onClick={() => openChat(follow)} onClick={() => openChat(pubkey)}
className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500 group-hover:inline-flex" className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500 group-hover:inline-flex"
> >
Chat Chat

5
src/app/chats/components/unknowns.tsx
View File

@ -2,9 +2,8 @@ import * as Dialog from '@radix-ui/react-dialog';
import { useState } from 'react'; import { useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { User } from '@app/auth/components/user';
import { CancelIcon, StrangersIcon } from '@shared/icons'; import { CancelIcon, StrangersIcon } from '@shared/icons';
import { User } from '@shared/user';
import { compactNumber } from '@utils/number'; import { compactNumber } from '@utils/number';
@ -59,7 +58,7 @@ export function UnknownsModal({ data }: { data: string[] }) {
key={pubkey} key={pubkey}
className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10" className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
> >
<User pubkey={pubkey} /> <User pubkey={pubkey} variant="simple" />
<div> <div>
<button <button
type="button" type="button"

32
src/app/notes/article.tsx
View File

@ -13,11 +13,11 @@ import {
NoteActions, NoteActions,
NoteReplyForm, NoteReplyForm,
NoteStats, NoteStats,
ThreadUser,
UnknownNote, UnknownNote,
} from '@shared/notes'; } from '@shared/notes';
import { RepliesList } from '@shared/notes/replies/list'; import { RepliesList } from '@shared/notes/replies/list';
import { NoteSkeleton } from '@shared/notes/skeleton'; import { NoteSkeleton } from '@shared/notes/skeleton';
import { User } from '@shared/user';
import { useEvent } from '@utils/hooks/useEvent'; import { useEvent } from '@utils/hooks/useEvent';
@ -100,21 +100,27 @@ export function ArticleNoteScreen() {
</div> </div>
</div> </div>
) : ( ) : (
<div className="h-min w-full px-3"> <>
<div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl"> <div className="h-min w-full px-3">
<ThreadUser pubkey={data.pubkey} time={data.created_at} /> <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
<div className="mt-2">{renderKind(data)}</div> <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
<div> <div className="mt-2">{renderKind(data)}</div>
<NoteActions id={data.id} pubkey={data.pubkey} extraButtons={false} /> <div>
<NoteStats id={data.id} /> <NoteActions
id={data.id}
pubkey={data.pubkey}
extraButtons={false}
/>
<NoteStats id={data.id} />
</div>
</div> </div>
</div> </div>
</div> <div ref={replyRef} className="px-3">
<NoteReplyForm id={data.id} pubkey={db.account.pubkey} />
<RepliesList id={data.id} />
</div>
</>
)} )}
<div ref={replyRef} className="px-3">
<NoteReplyForm id={data?.id} pubkey={db.account.pubkey} />
<RepliesList id={data?.id} />
</div>
</div> </div>
<div className="col-span-1" /> <div className="col-span-1" />
</div> </div>

4
src/app/notes/text.tsx
View File

@ -15,11 +15,11 @@ import {
NoteReplyForm, NoteReplyForm,
NoteStats, NoteStats,
TextNote, TextNote,
ThreadUser,
UnknownNote, UnknownNote,
} from '@shared/notes'; } from '@shared/notes';
import { RepliesList } from '@shared/notes/replies/list'; import { RepliesList } from '@shared/notes/replies/list';
import { NoteSkeleton } from '@shared/notes/skeleton'; import { NoteSkeleton } from '@shared/notes/skeleton';
import { User } from '@shared/user';
import { useEvent } from '@utils/hooks/useEvent'; import { useEvent } from '@utils/hooks/useEvent';
@ -106,7 +106,7 @@ export function TextNoteScreen() {
) : ( ) : (
<div className="h-min w-full px-3"> <div className="h-min w-full px-3">
<div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl"> <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> <div className="mt-2">{renderKind(data)}</div>
<div> <div>
<NoteActions id={id} pubkey={data.pubkey} extraButtons={false} /> <NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />

2
src/app/notifications/components/simpleNote.tsx
View File

@ -48,7 +48,7 @@ export const SimpleNote = memo(function SimpleNote({ id }: { id: string }) {
tabIndex={0} tabIndex={0}
className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl" className="mb-2 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="markdown"> <div className="markdown">
<p> <p>
{data.content.length > 200 {data.content.length > 200

18
src/app/nwc/index.tsx
View File

@ -27,13 +27,13 @@ export function NWCScreen() {
<h3 className="text-2xl font-bold leading-tight"> <h3 className="text-2xl font-bold leading-tight">
Nostr Wallet Connect (Beta) Nostr Wallet Connect (Beta)
</h3> </h3>
<p className="leading-tight text-white/50"> <p className="leading-tight text-white/70">
Sending tips easily via Bitcoin Lightning. Sending tips easily via Bitcoin Lightning.
</p> </p>
</div> </div>
<div className="mx-auto max-w-lg"> <div className="mx-auto max-w-lg">
{!walletConnectURL ? ( {!walletConnectURL ? (
<div className="flex w-full flex-col gap-4 divide-y divide-white/5 rounded-xl bg-white/10 p-3"> <div className="flex w-full flex-col gap-4 divide-y divide-white/5 rounded-xl border-t border-white/10 bg-white/20 p-3">
<NWCAlby /> <NWCAlby />
<NWCOther /> <NWCOther />
</div> </div>
@ -61,12 +61,12 @@ export function NWCScreen() {
)} )}
<div className="mt-5 flex flex-col gap-4"> <div className="mt-5 flex flex-col gap-4">
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<h5 className="text-sm font-bold text-white/80">Introduction</h5> <h5 className="text-sm font-bold text-white">Introduction</h5>
<p className="text-sm text-white/50"> <p className="text-sm text-white/70">
Nostr Wallet Connect (NWC) is a way for applications like Nostr clients to Nostr Wallet Connect (NWC) is a way for applications like Nostr clients to
access a remote Lightning wallet through a standardized protocol. access a remote Lightning wallet through a standardized protocol.
</p> </p>
<p className="text-sm text-white/50"> <p className="text-sm text-white/70">
To learn more about the details have a look at{' '} To learn more about the details have a look at{' '}
<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"
@ -79,15 +79,15 @@ export function NWCScreen() {
</p> </p>
</div> </div>
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<h5 className="text-sm font-bold text-white/80">About tipping</h5> <h5 className="text-sm font-bold text-white">About tipping</h5>
<p className="text-sm text-white/50"> <p className="text-sm text-white/70">
Also known as Zap in other Nostr client. Also known as Zap in other Nostr client.
</p> </p>
<p className="text-sm text-white/50"> <p className="text-sm text-white/70">
Lume doesn&apos;t take any commission or platform fees when you tip Lume doesn&apos;t take any commission or platform fees when you tip
someone. someone.
</p> </p>
<p className="text-sm text-white/50">Lume doesn&apos;t hold your Bitcoin</p> <p className="text-sm text-white/70">Lume doesn&apos;t hold your Bitcoin</p>
</div> </div>
</div> </div>
</div> </div>

2
src/index.css
View File

@ -12,7 +12,7 @@
} }
.markdown { .markdown {
@apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2; @apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
} }
.ProseMirror p.is-empty::before { .ProseMirror p.is-empty::before {

5
src/shared/nip05.tsx
View File

@ -1,5 +1,6 @@
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { fetch } from '@tauri-apps/api/http'; import { fetch } from '@tauri-apps/api/http';
import { memo } from 'react';
import { twMerge } from 'tailwind-merge'; import { twMerge } from 'tailwind-merge';
import { UnverifiedIcon, VerifiedIcon } from '@shared/icons'; import { UnverifiedIcon, VerifiedIcon } from '@shared/icons';
@ -10,7 +11,7 @@ interface NIP05 {
}; };
} }
export function NIP05({ export const NIP05 = memo(function NIP05({
pubkey, pubkey,
nip05, nip05,
className, className,
@ -71,4 +72,4 @@ export function NIP05({
</div> </div>
</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.Portal>
</Tooltip.Root> </Tooltip.Root>
<DropdownMenu.Portal> <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> <DropdownMenu.Item asChild>
<button <button
type="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/articleDetail';
export * from './kinds/unknown'; export * from './kinds/unknown';
export * from './metadata'; export * from './metadata';
export * from './users/mini';
export * from './users/repost';
export * from './users/thread';
export * from './kinds/repost'; export * from './kinds/repost';
export * from './child'; export * from './child';
export * from './skeleton'; export * from './skeleton';

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

@ -12,7 +12,6 @@ import {
LinkPreview, LinkPreview,
NoteActions, NoteActions,
NoteSkeleton, NoteSkeleton,
RepostUser,
TextNote, TextNote,
UnknownNote, UnknownNote,
} from '@shared/notes'; } from '@shared/notes';
@ -23,14 +22,14 @@ export function Repost({ event }: { event: NDKEvent }) {
event.content.length > 0 ? JSON.parse(event.content) : null; event.content.length > 0 ? JSON.parse(event.content) : null;
const { ndk } = useNDK(); const { ndk } = useNDK();
const { status, data } = useQuery( const { status, isError, data } = useQuery(
['repost', event.id], ['repost', event.id],
async () => { async () => {
const id = event.tags.find((el) => el[0] === 'e')[1]; 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); 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; return ndkEvent;
}, },
@ -56,17 +55,11 @@ 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 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="relative flex flex-col">
<div className="isolate flex flex-col -space-y-4"> <User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
<RepostUser pubkey={event.pubkey} /> <div className="-mt-6 flex items-start gap-3">
<User
pubkey={embedEvent.pubkey}
time={embedEvent.created_at}
isRepost={true}
/>
</div>
<div className="-mt-2 flex items-start gap-3">
<div className="w-11 shrink-0" /> <div className="w-11 shrink-0" />
<div className="relative z-20 flex-1"> <div className="relative z-20 flex-1">
{renderKind(embedEvent)} {renderKind(embedEvent)}
@ -89,32 +82,38 @@ export function Repost({ event }: { event: NDKEvent }) {
); );
} }
if (status === 'error') { if (isError) {
// @ts-expect-error, root_id isn't exist on NDKEvent const noteLink = `https://njump.me/${nip19.noteEncode(
const noteLink = `https://njump.me/${nip19.noteEncode(event.root_id)}`; event.tags.find((el) => el[0] === 'e')[1]
)}`;
return ( return (
<div className="relative mb-5 flex flex-col"> <div className="h-min w-full px-3 pb-3">
<div className="relative z-10 flex items-start gap-3"> <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<div className="inline-flex h-11 w-11 items-end justify-center rounded-lg bg-black pb-1"> <div className="relative flex flex-col">
<img src="/lume.png" alt="lume" className="h-auto w-1/3" /> <div className="relative z-10 flex items-start gap-3">
</div> <div className="inline-flex h-11 w-11 items-end justify-center rounded-lg bg-black pb-1">
<h5 className="truncate font-semibold leading-none text-white"> <img src="/lume.png" alt="lume" className="h-auto w-1/3" />
Lume <span className="text-green-500">(System)</span> </div>
</h5> <h5 className="truncate font-semibold leading-none text-white">
</div> Lume <span className="text-green-500">(System)</span>
<div className="-mt-6 flex items-start gap-3"> </h5>
<div className="w-11 shrink-0" /> </div>
<div> <div className="-mt-6 flex items-start gap-3">
<div className="relative z-20 mt-1 flex-1 select-text"> <div className="w-11 shrink-0" />
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm"> <div>
Lume cannot find this post with your current relays, but you can view it <div className="relative z-20 mt-1 flex-1 select-text">
via njump.me.{' '} <div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
<Link to={noteLink} className="text-fuchsia-500"> Lume cannot find this post with your current relays, but you can view
Learn more it via njump.me.{' '}
</Link> <Link to={noteLink} className="text-fuchsia-500">
Learn more
</Link>
</div>
</div>
<LinkPreview urls={[noteLink]} />
</div> </div>
</div> </div>
<LinkPreview urls={[noteLink]} />
</div> </div>
</div> </div>
</div> </div>
@ -124,11 +123,9 @@ 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 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="relative flex flex-col">
<div className="isolate flex flex-col -space-y-4"> <User pubkey={data.pubkey} time={data.created_at} />
<RepostUser pubkey={event.pubkey} />
<User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
</div>
<div className="-mt-2 flex items-start gap-3"> <div className="-mt-2 flex items-start gap-3">
<div className="w-11 shrink-0" /> <div className="w-11 shrink-0" />
<div className="relative z-20 flex-1"> <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} tabIndex={0}
className="mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl" 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 className="mt-1">{renderKind(data)}</div>
</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 { useStorage } from '@libs/storage/provider';
import { LoaderIcon } from '@shared/icons'; import { LoaderIcon } from '@shared/icons';
import { MiniUser } from '@shared/notes/users/mini'; import { User } from '@shared/user';
import { WidgetKinds, useWidgets } from '@stores/widgets'; 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="mt-2 inline-flex h-6 w-11 shrink-0 items-center justify-center">
<div className="isolate flex -space-x-1"> <div className="isolate flex -space-x-1">
{data.users?.map((user, index) => ( {data.users?.map((user, index) => (
<MiniUser key={user + index} pubkey={user} /> <User key={user + index} pubkey={user} />
))} ))}
</div> </div>
</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 { useEffect, useState } from 'react';
import { NoteSkeleton, Reply } from '@shared/notes'; import { NoteSkeleton, Reply } from '@shared/notes';
@ -21,7 +20,6 @@ export function RepliesList({ id }: { id: string }) {
// subscribe for new replies // subscribe for new replies
sub( sub(
{ {
kinds: [NDKKind.Text],
'#e': [id], '#e': [id],
since: Math.floor(Date.now() / 1000), since: Math.floor(Date.now() / 1000),
}, },
@ -50,7 +48,7 @@ export function RepliesList({ id }: { id: string }) {
return ( return (
<div className="mt-5 pb-10"> <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 {data?.length || 0} replies
</h5> </h5>
<div className="flex flex-col gap-3"> <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 * as Popover from '@radix-ui/react-popover';
import { memo } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { WorldIcon } from '@shared/icons';
import { Image } from '@shared/image'; import { Image } from '@shared/image';
import { NIP05 } from '@shared/nip05'; import { NIP05 } from '@shared/nip05';
@ -9,77 +10,172 @@ import { formatCreatedAt } from '@utils/createdAt';
import { useProfile } from '@utils/hooks/useProfile'; import { useProfile } from '@utils/hooks/useProfile';
import { displayNpub } from '@utils/shortenKey'; import { displayNpub } from '@utils/shortenKey';
export function User({ export const User = memo(function User({
pubkey, pubkey,
time, time,
size, variant = 'default',
isRepost = false, embedProfile,
isChat = false,
}: { }: {
pubkey: string; pubkey: string;
time: number; time?: number;
size?: string; variant?: 'default' | 'simple' | 'mention' | 'repost' | 'chat' | 'large' | 'thread';
isRepost?: boolean; embedProfile?: string;
isChat?: boolean;
}) { }) {
const { status, user } = useProfile(pubkey); const { status, user } = useProfile(pubkey, embedProfile);
const createdAt = time ? formatCreatedAt(time, variant === 'chat') : 0;
const createdAt = formatCreatedAt(time, isChat);
const avatarWidth = size === 'small' ? 'w-6' : 'w-11';
const avatarHeight = size === 'small' ? 'h-6' : 'h-11';
if (status === 'loading') { if (status === 'loading') {
return ( if (variant === 'mention') {
<div return (
className={`relative flex gap-3 ${ <div className="relative flex items-center gap-3">
size === 'small' ? 'items-center' : 'items-start' <div className="relative z-10 h-6 w-6 shrink-0 animate-pulse overflow-hidden rounded bg-white/10 backdrop-blur-xl" />
}`}
>
<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">
<div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" /> <div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
</div> </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> </div>
); );
} }
return ( return (
<Popover.Root> <Popover.Root>
<div <div className="relative z-10 flex items-start gap-3">
className={twMerge(
'relative z-10 flex',
size === 'small' ? 'items-center gap-2' : 'items-start gap-3'
)}
>
<Popover.Trigger asChild> <Popover.Trigger asChild>
<button <button
type="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 <Image
src={user?.picture || user?.image} src={user?.picture || user?.image}
alt={pubkey} alt={pubkey}
className={twMerge( className="h-11 w-11 rounded-lg object-cover"
`object-cover ${avatarWidth} ${avatarHeight}`,
size === 'small' ? 'rounded' : 'rounded-lg',
isRepost ? 'ring-1 ring-black' : ''
)}
/> />
</button> </button>
</Popover.Trigger> </Popover.Trigger>
<div <div className="flex flex-1 items-baseline gap-2">
className={twMerge('flex flex-1 items-baseline gap-2', isRepost ? 'mt-4' : '')} <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
>
<h5
className={twMerge(
'truncate font-semibold leading-none text-white',
size === 'small' ? 'max-w-[10rem]' : 'max-w-[15rem]'
)}
>
{user?.display_name || user?.name || displayNpub(pubkey, 16)} {user?.display_name || user?.name || displayNpub(pubkey, 16)}
</h5> </h5>
<span className="leading-none text-white/50">·</span> <span className="leading-none text-white/50">·</span>
@ -139,4 +235,4 @@ export function User({
</Popover.Portal> </Popover.Portal>
</Popover.Root> </Popover.Root>
); );
} });

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

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

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

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

3
src/utils/hooks/useEvent.ts
View File

@ -25,6 +25,7 @@ export function useEvent(
authors: [naddr.pubkey], authors: [naddr.pubkey],
}); });
const rEvent = [...rEvents].slice(-1)[0]; const rEvent = [...rEvents].slice(-1)[0];
if (!rEvent) return Promise.reject(new Error('event not found'));
return rEvent; return rEvent;
} }
@ -40,7 +41,7 @@ export function useEvent(
// get event from relay if event in db not present // get event from relay if event in db not present
const event = await ndk.fetchEvent(id); const event = await ndk.fetchEvent(id);
if (!event) throw new Error(`Event not found: ${id}`); if (!event) return Promise.reject(new Error('event not found'));
const rawEvent = toRawEvent(event); const rawEvent = toRawEvent(event);
await db.createEvent(rawEvent); await db.createEvent(rawEvent);