mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
wip: new chat layout
This commit is contained in:
parent
508a746578
commit
cef6b9aca9
@ -11,6 +11,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 { User } from '@shared/user';
|
||||||
|
|
||||||
import { useStronghold } from '@stores/stronghold';
|
import { useStronghold } from '@stores/stronghold';
|
||||||
|
|
||||||
@ -35,6 +36,7 @@ export function ChatScreen() {
|
|||||||
message={message}
|
message={message}
|
||||||
userPubkey={db.account.pubkey}
|
userPubkey={db.account.pubkey}
|
||||||
userPrivkey={userPrivkey}
|
userPrivkey={userPrivkey}
|
||||||
|
self={message.pubkey === db.account.pubkey}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
@ -71,7 +73,10 @@ export function ChatScreen() {
|
|||||||
<div className="h-full w-full p-3">
|
<div className="h-full w-full p-3">
|
||||||
<div className="rounded-lg border-t border-white/5 bg-white/10 backdrop-blur-xl">
|
<div className="rounded-lg border-t border-white/5 bg-white/10 backdrop-blur-xl">
|
||||||
<div className="flex h-full flex-col justify-between overflow-hidden">
|
<div className="flex h-full flex-col justify-between overflow-hidden">
|
||||||
<div className="h-full w-full flex-1">
|
<div className="flex h-16 shrink-0 items-center border-b border-white/10 px-3">
|
||||||
|
<User pubkey={pubkey} variant="simple" />
|
||||||
|
</div>
|
||||||
|
<div className="h-full w-full flex-1 px-3 py-3">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
<div className="flex flex-col items-center gap-1.5">
|
<div className="flex flex-col items-center gap-1.5">
|
||||||
@ -92,7 +97,7 @@ export function ChatScreen() {
|
|||||||
</VList>
|
</VList>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="z-50 shrink-0 rounded-b-xl border-t border-white/5 bg-white/10 p-3 backdrop-blur-xl">
|
<div className="z-50 shrink-0 rounded-b-lg border-t border-white/5 bg-white/10 p-3 backdrop-blur-xl">
|
||||||
<ChatForm
|
<ChatForm
|
||||||
receiverPubkey={pubkey}
|
receiverPubkey={pubkey}
|
||||||
userPubkey={db.account.pubkey}
|
userPubkey={db.account.pubkey}
|
||||||
|
@ -28,9 +28,12 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
|
|||||||
|
|
||||||
if (status === 'loading') {
|
if (status === 'loading') {
|
||||||
return (
|
return (
|
||||||
<div className="inline-flex h-10 items-center gap-2.5 rounded-md px-3">
|
<div className="flex items-center gap-2.5 rounded-md px-3">
|
||||||
<div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
<div className="h-9 w-9 shrink-0 animate-pulse rounded-lg bg-white/10 backdrop-blur-xl" />
|
||||||
<div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
<div className="flex w-full flex-col">
|
||||||
|
<div className="h-2.5 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||||
|
<div className="h-2.5 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -55,24 +58,28 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
|
|||||||
loading="lazy"
|
loading="lazy"
|
||||||
decoding="async"
|
decoding="async"
|
||||||
style={{ contentVisibility: 'auto' }}
|
style={{ contentVisibility: 'auto' }}
|
||||||
className="h-9 w-9 rounded-lg"
|
className="h-10 w-10 rounded-lg"
|
||||||
/>
|
/>
|
||||||
<Avatar.Fallback delayMs={300}>
|
<Avatar.Fallback delayMs={300}>
|
||||||
<img src={svgURI} alt={event.pubkey} className="h-9 w-9 rounded-lg bg-white" />
|
<img
|
||||||
|
src={svgURI}
|
||||||
|
alt={event.pubkey}
|
||||||
|
className="h-10 w-10 rounded-lg bg-white"
|
||||||
|
/>
|
||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex w-full flex-col">
|
<div className="flex w-full flex-col">
|
||||||
<h5 className="max-w-[10rem] truncate font-semibold text-white">
|
<div className="max-w-[10rem] truncate font-semibold text-white">
|
||||||
{user?.name ||
|
{user?.name ||
|
||||||
user?.display_name ||
|
user?.display_name ||
|
||||||
user?.displayName ||
|
user?.displayName ||
|
||||||
displayNpub(event.pubkey, 16)}
|
displayNpub(event.pubkey, 16)}
|
||||||
</h5>
|
</div>
|
||||||
<div className="flex w-full items-center justify-between">
|
<div className="flex w-full items-center justify-between">
|
||||||
<p className="max-w-[8rem] truncate text-sm text-white/70">
|
<div className="max-w-[10rem] truncate text-sm text-white/70">
|
||||||
{decryptedContent}
|
{decryptedContent}
|
||||||
</p>
|
</div>
|
||||||
<p className="text-sm text-white/70">{createdAt}</p>
|
<div className="text-sm text-white/70">{createdAt}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||||
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
|
import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
|
||||||
|
|
||||||
import { ImagePreview, LinkPreview, MentionNote, VideoPreview } from '@shared/notes';
|
import { ImagePreview, LinkPreview, MentionNote, VideoPreview } from '@shared/notes';
|
||||||
import { User } from '@shared/user';
|
|
||||||
|
|
||||||
import { parser } from '@utils/parser';
|
import { parser } from '@utils/parser';
|
||||||
|
|
||||||
@ -11,20 +11,23 @@ export function ChatMessage({
|
|||||||
message,
|
message,
|
||||||
userPubkey,
|
userPubkey,
|
||||||
userPrivkey,
|
userPrivkey,
|
||||||
|
self,
|
||||||
}: {
|
}: {
|
||||||
message: NDKEvent;
|
message: NDKEvent;
|
||||||
userPubkey: string;
|
userPubkey: string;
|
||||||
userPrivkey: string;
|
userPrivkey: string;
|
||||||
|
self: boolean;
|
||||||
}) {
|
}) {
|
||||||
const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
|
const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
|
||||||
const richContent = parser(decryptedContent) ?? null;
|
const richContent = parser(decryptedContent) ?? null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
|
<div
|
||||||
<div className="flex flex-col">
|
className={twMerge(
|
||||||
<User pubkey={message.pubkey} time={message.created_at} variant="chat" />
|
'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
|
||||||
<div className="-mt-6 flex items-start gap-3">
|
self ? 'ml-auto rounded-l-xl bg-fuchsia-500' : 'rounded-r-xl bg-white/10'
|
||||||
<div className="w-10 shrink-0" />
|
)}
|
||||||
|
>
|
||||||
{!richContent ? (
|
{!richContent ? (
|
||||||
<p>Decrypting...</p>
|
<p>Decrypting...</p>
|
||||||
) : (
|
) : (
|
||||||
@ -33,12 +36,8 @@ export function ChatMessage({
|
|||||||
{richContent.parsed}
|
{richContent.parsed}
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
{richContent.images.length > 0 && (
|
{richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
|
||||||
<ImagePreview urls={richContent.images} />
|
{richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
|
||||||
)}
|
|
||||||
{richContent.videos.length > 0 && (
|
|
||||||
<VideoPreview urls={richContent.videos} />
|
|
||||||
)}
|
|
||||||
{richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
|
{richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
|
||||||
{richContent.notes.length > 0 &&
|
{richContent.notes.length > 0 &&
|
||||||
richContent.notes.map((note: string) => (
|
richContent.notes.map((note: string) => (
|
||||||
@ -48,7 +47,5 @@ export function ChatMessage({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -16,7 +16,12 @@ export function ChatsScreen() {
|
|||||||
async () => {
|
async () => {
|
||||||
return await getAllNIP04Chats();
|
return await getAllNIP04Chats();
|
||||||
},
|
},
|
||||||
{ refetchOnWindowFocus: false }
|
{
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
refetchOnMount: false,
|
||||||
|
refetchOnReconnect: false,
|
||||||
|
staleTime: Infinity,
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderItem = useCallback(
|
const renderItem = useCallback(
|
||||||
@ -31,9 +36,13 @@ export function ChatsScreen() {
|
|||||||
<div className="scrollbar-hide col-span-1 h-full overflow-y-auto border-r border-white/5">
|
<div className="scrollbar-hide col-span-1 h-full overflow-y-auto border-r border-white/5">
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
data-tauri-drag-region
|
||||||
className="h-16 w-full shrink-0 border-b border-white/5"
|
className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
|
||||||
/>
|
>
|
||||||
<div className="flex h-full flex-col gap-1 py-2">
|
<h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
|
||||||
|
All chats
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex h-full flex-col gap-1">
|
||||||
{status === 'loading' ? (
|
{status === 'loading' ? (
|
||||||
<div className="flex h-full w-full items-center justify-center pb-16">
|
<div className="flex h-full w-full items-center justify-center pb-16">
|
||||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||||
|
@ -57,9 +57,9 @@ export function WidgetList({ params }: { params: Widget }) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const renderItem = useCallback(
|
const renderItem = useCallback(
|
||||||
(row: WidgetGroup) => {
|
(row: WidgetGroup, index: number) => {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-3">
|
<div key={index} className="flex flex-col gap-3">
|
||||||
<h3 className="font-medium text-white/50">{row.title}</h3>
|
<h3 className="font-medium text-white/50">{row.title}</h3>
|
||||||
<div className="flex flex-col divide-y divide-white/5 overflow-hidden rounded-xl bg-white/10">
|
<div className="flex flex-col divide-y divide-white/5 overflow-hidden rounded-xl bg-white/10">
|
||||||
{row.data.map((item, index) => (
|
{row.data.map((item, index) => (
|
||||||
@ -101,7 +101,9 @@ export function WidgetList({ params }: { params: Widget }) {
|
|||||||
<TitleBar id={params.id} title="Add widget" />
|
<TitleBar id={params.id} title="Add widget" />
|
||||||
<div className="scrollbar-hide h-full overflow-y-auto pb-20">
|
<div className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||||
<div className="flex flex-col gap-6 px-3">
|
<div className="flex flex-col gap-6 px-3">
|
||||||
{DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
|
{DefaultWidgets.map((row: WidgetGroup, index: number) =>
|
||||||
|
renderItem(row, index)
|
||||||
|
)}
|
||||||
<div className="border-t border-white/5 pt-6">
|
<div className="border-t border-white/5 pt-6">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -67,8 +67,8 @@ export function ActiveAccount() {
|
|||||||
alt={db.account.npub}
|
alt={db.account.npub}
|
||||||
className="h-9 w-9 shrink-0 rounded-lg object-cover"
|
className="h-9 w-9 shrink-0 rounded-lg object-cover"
|
||||||
/>
|
/>
|
||||||
<div className="flex w-full flex-1 flex-col items-start gap-0.5">
|
<div className="flex flex-col items-start">
|
||||||
<p className="max-w-[10rem] truncate font-semibold leading-none text-white">
|
<p className="max-w-[10rem] truncate text-base font-semibold leading-none text-white">
|
||||||
{user?.name || user?.display_name || user?.displayName}
|
{user?.name || user?.display_name || user?.displayName}
|
||||||
</p>
|
</p>
|
||||||
<span className="max-w-[7rem] truncate text-sm leading-none text-white/50">
|
<span className="max-w-[7rem] truncate text-sm leading-none text-white/50">
|
||||||
|
19
src/shared/icons/community.tsx
Normal file
19
src/shared/icons/community.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { SVGProps } from 'react';
|
||||||
|
|
||||||
|
export function CommunityIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M14.606 17.613C13.593 13.981 10.87 12 8 12s-5.594 1.98-6.608 5.613C.861 19.513 2.481 21 4.145 21h7.708c1.663 0 3.283-1.487 2.753-3.387zM3.999 7a4 4 0 118 0 4 4 0 01-8 0zM13.498 7.5a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0zM14.194 12.773c1.046 1.136 1.86 2.59 2.339 4.303A4.501 4.501 0 0116.387 20h3.918c1.497 0 2.983-1.344 2.497-3.084-.883-3.168-3.268-4.916-5.8-4.916-.985 0-1.947.264-2.808.773z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
@ -72,3 +72,4 @@ export * from './explore';
|
|||||||
export * from './explore2';
|
export * from './explore2';
|
||||||
export * from './home';
|
export * from './home';
|
||||||
export * from './chats';
|
export * from './chats';
|
||||||
|
export * from './community';
|
||||||
|
@ -10,6 +10,7 @@ import {
|
|||||||
ArrowLeftIcon,
|
ArrowLeftIcon,
|
||||||
ArrowRightIcon,
|
ArrowRightIcon,
|
||||||
ChatsIcon,
|
ChatsIcon,
|
||||||
|
CommunityIcon,
|
||||||
ExploreIcon,
|
ExploreIcon,
|
||||||
HomeIcon,
|
HomeIcon,
|
||||||
RelayIcon,
|
RelayIcon,
|
||||||
@ -90,6 +91,23 @@ export function Navigation() {
|
|||||||
</span>
|
</span>
|
||||||
Chats
|
Chats
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/communities"
|
||||||
|
preventScrollReset={true}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
twMerge(
|
||||||
|
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||||
|
isActive
|
||||||
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||||
|
: 'border-transparent text-white/70'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
|
||||||
|
<CommunityIcon className="h-5 w-5" />
|
||||||
|
</span>
|
||||||
|
Communities
|
||||||
|
</NavLink>
|
||||||
<NavLink
|
<NavLink
|
||||||
to="/relays"
|
to="/relays"
|
||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
|
@ -61,8 +61,10 @@ export const NIP05 = memo(function NIP05({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={twMerge('leadning-none inline-flex items-center gap-1', className)}>
|
<div className={twMerge('inline-flex items-center gap-1', className)}>
|
||||||
<p>{nip05}</p>
|
<div>
|
||||||
|
<p className="text-sm">{nip05}</p>
|
||||||
|
</div>
|
||||||
<div className="shrink-0">
|
<div className="shrink-0">
|
||||||
{data === true ? (
|
{data === true ? (
|
||||||
<VerifiedIcon className="h-3 w-3 text-green-500" />
|
<VerifiedIcon className="h-3 w-3 text-green-500" />
|
||||||
|
@ -38,13 +38,15 @@ export function ArticleNote(props: { event?: NDKEvent }) {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div className="flex flex-col gap-2 rounded-b-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
|
<div className="flex flex-col gap-2 rounded-b-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
|
||||||
<h5 className="line-clamp-1 font-medium leading-none text-white">
|
<h5 className="line-clamp-1 text-base font-medium text-white">
|
||||||
{metadata.title}
|
{metadata.title}
|
||||||
</h5>
|
</h5>
|
||||||
<p className="line-clamp-3 break-all text-sm text-white/50">
|
{metadata.summary ? (
|
||||||
|
<p className="line-clamp-3 break-all text-sm text-white/70">
|
||||||
{metadata.summary}
|
{metadata.summary}
|
||||||
</p>
|
</p>
|
||||||
<span className="mt-2.5 text-sm leading-none text-white/50">
|
) : null}
|
||||||
|
<span className="mt-2.5 text-sm text-white/70">
|
||||||
{metadata.publishedAt.toString()}
|
{metadata.publishedAt.toString()}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -7,7 +7,7 @@ export function Hashtag({ tag }: { tag: string }) {
|
|||||||
const setWidget = useWidgets((state) => state.setWidget);
|
const setWidget = useWidgets((state) => state.setWidget);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<span
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
@ -27,6 +27,6 @@ export function Hashtag({ tag }: { tag: string }) {
|
|||||||
className="break-all text-fuchsia-400 hover:text-fuchsia-500"
|
className="break-all text-fuchsia-400 hover:text-fuchsia-500"
|
||||||
>
|
>
|
||||||
{tag}
|
{tag}
|
||||||
</div>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -46,17 +46,15 @@ export function LinkPreview({ urls }: { urls: string[] }) {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
|
<div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
|
||||||
<h5 className="line-clamp-1 font-semibold leading-none text-white">
|
<h5 className="line-clamp-1 text-base font-semibold text-white">
|
||||||
{data.title}
|
{data.title}
|
||||||
</h5>
|
</h5>
|
||||||
{data.description && (
|
{data.description && (
|
||||||
<p className="line-clamp-3 break-all text-sm text-white/50">
|
<p className="line-clamp-3 break-all text-sm text-white/80">
|
||||||
{data.description}
|
{data.description}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
<span className="mt-2.5 text-sm leading-none text-white/80">
|
<span className="mt-2.5 text-sm text-white/80">{domain.hostname}</span>
|
||||||
{domain.hostname}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -80,14 +80,14 @@ export const User = memo(function User({
|
|||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex flex-1 items-baseline gap-2">
|
<div className="flex flex-1 items-baseline gap-2">
|
||||||
<h5 className="max-w-[10rem] truncate font-semibold leading-none text-white">
|
<h5 className="max-w-[10rem] truncate font-semibold text-white">
|
||||||
{user?.name ||
|
{user?.name ||
|
||||||
user?.display_name ||
|
user?.display_name ||
|
||||||
user?.displayName ||
|
user?.displayName ||
|
||||||
displayNpub(pubkey, 16)}
|
displayNpub(pubkey, 16)}
|
||||||
</h5>
|
</h5>
|
||||||
<span className="leading-none text-white/50">·</span>
|
<span className="text-white/50">·</span>
|
||||||
<span className="leading-none text-white/50">{createdAt}</span>
|
<span className="text-white/50">{createdAt}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -111,7 +111,7 @@ export const User = memo(function User({
|
|||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex h-full flex-col items-start justify-between">
|
<div className="flex h-full flex-col items-start justify-between">
|
||||||
<div className="flex flex-col items-start gap-1 text-start">
|
<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">
|
<p className="max-w-[15rem] truncate text-lg font-semibold text-white">
|
||||||
{user?.name || user?.display_name || user?.displayName}
|
{user?.name || user?.display_name || user?.displayName}
|
||||||
</p>
|
</p>
|
||||||
<ReactMarkdown
|
<ReactMarkdown
|
||||||
@ -157,11 +157,11 @@ export const User = memo(function User({
|
|||||||
<img src={svgURI} alt={pubkey} className="h-10 w-10 rounded-lg bg-black" />
|
<img src={svgURI} alt={pubkey} className="h-10 w-10 rounded-lg bg-black" />
|
||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex w-full flex-col items-start gap-1">
|
<div className="flex w-full flex-col items-start">
|
||||||
<h3 className="max-w-[15rem] truncate font-medium leading-none text-white">
|
<h3 className="max-w-[15rem] truncate font-medium text-white">
|
||||||
{user?.name || user?.display_name || user?.displayName}
|
{user?.name || user?.display_name || user?.displayName}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="max-w-[10rem] truncate text-sm leading-none text-white/70">
|
<p className="max-w-[10rem] truncate text-sm text-white/70">
|
||||||
{user?.nip05 || user?.username || displayNpub(pubkey, 16)}
|
{user?.nip05 || user?.username || displayNpub(pubkey, 16)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -230,7 +230,7 @@ export const User = memo(function User({
|
|||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="inline-flex items-baseline gap-1">
|
<div className="inline-flex items-baseline gap-1">
|
||||||
<h5 className="max-w-[10rem] truncate font-medium leading-none text-white/80">
|
<h5 className="max-w-[10rem] truncate font-medium text-white/80">
|
||||||
{user?.name ||
|
{user?.name ||
|
||||||
user?.display_name ||
|
user?.display_name ||
|
||||||
user?.displayName ||
|
user?.displayName ||
|
||||||
@ -260,13 +260,13 @@ export const User = memo(function User({
|
|||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex flex-1 flex-col gap-2">
|
<div className="flex flex-1 flex-col gap-2">
|
||||||
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
|
<h5 className="max-w-[15rem] truncate font-semibold text-white">
|
||||||
{user?.name || user?.display_name || user?.displayName || 'Anon'}
|
{user?.name || user?.display_name || user?.displayName || 'Anon'}
|
||||||
</h5>
|
</h5>
|
||||||
<div className="inline-flex items-center gap-2">
|
<div className="inline-flex items-center gap-2">
|
||||||
<span className="leading-none text-white/50">{createdAt}</span>
|
<span className="text-white/50">{createdAt}</span>
|
||||||
<span className="leading-none text-white/50">·</span>
|
<span className="text-white/50">·</span>
|
||||||
<span className="leading-none text-white/50">{displayNpub(pubkey, 16)}</span>
|
<span className="text-white/50">{displayNpub(pubkey, 16)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -295,15 +295,15 @@ export const User = memo(function User({
|
|||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
</HoverCard.Trigger>
|
</HoverCard.Trigger>
|
||||||
<div className="flex flex-1 items-baseline gap-2">
|
<div className="flex flex-1 items-center gap-2">
|
||||||
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
|
<h5 className="max-w-[15rem] truncate font-semibold text-white">
|
||||||
{user?.name ||
|
{user?.name ||
|
||||||
user?.display_name ||
|
user?.display_name ||
|
||||||
user?.displayName ||
|
user?.displayName ||
|
||||||
displayNpub(pubkey, 16)}
|
displayNpub(pubkey, 16)}
|
||||||
</h5>
|
</h5>
|
||||||
<span className="leading-none text-white/50">·</span>
|
<span className="text-white/50">·</span>
|
||||||
<span className="leading-none text-white/50">{createdAt}</span>
|
<span className="text-white/50">{createdAt}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<HoverCard.Portal>
|
<HoverCard.Portal>
|
||||||
@ -331,7 +331,7 @@ export const User = memo(function User({
|
|||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<div className="flex flex-1 flex-col gap-2">
|
<div className="flex flex-1 flex-col gap-2">
|
||||||
<div className="inline-flex flex-col gap-1">
|
<div className="inline-flex flex-col gap-1">
|
||||||
<h5 className="text-sm font-semibold leading-none">
|
<h5 className="text-sm font-semibold">
|
||||||
{user?.name ||
|
{user?.name ||
|
||||||
user?.display_name ||
|
user?.display_name ||
|
||||||
user?.displayName ||
|
user?.displayName ||
|
||||||
@ -341,10 +341,10 @@ export const User = memo(function User({
|
|||||||
<NIP05
|
<NIP05
|
||||||
pubkey={pubkey}
|
pubkey={pubkey}
|
||||||
nip05={user?.nip05}
|
nip05={user?.nip05}
|
||||||
className="max-w-[15rem] truncate text-sm leading-none text-white/50"
|
className="max-w-[15rem] truncate text-sm text-white/50"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
|
<span className="max-w-[15rem] truncate text-sm text-white/50">
|
||||||
{displayNpub(pubkey, 16)}
|
{displayNpub(pubkey, 16)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user