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

wip: new chat layout

Browse Source
This commit is contained in:
Ren Amamiya
2023-10-05 14:55:12 +07:00
parent 508a746578
commit cef6b9aca9
14 changed files with 143 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/chats/components/chatListItem.tsx
View File

@@ -28,9 +28,12 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
if (status === 'loading') {
return (
<div className="inline-flex h-10 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-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
<div className="flex items-center gap-2.5 rounded-md px-3">
<div className="h-9 w-9 shrink-0 animate-pulse rounded-lg 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>
);
}
@@ -55,24 +58,28 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
className="h-9 w-9 rounded-lg"
className="h-10 w-10 rounded-lg"
/>
<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.Root>
<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?.display_name ||
user?.displayName ||
displayNpub(event.pubkey, 16)}
</h5>
</div>
<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}
</p>
<p className="text-sm text-white/70">{createdAt}</p>
</div>
<div className="text-sm text-white/70">{createdAt}</div>
</div>
</div>
</NavLink>

55
src/app/chats/components/message.tsx
View File

@@ -1,9 +1,9 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { twMerge } from 'tailwind-merge';
import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
import { ImagePreview, LinkPreview, MentionNote, VideoPreview } from '@shared/notes';
import { User } from '@shared/user';
import { parser } from '@utils/parser';
@@ -11,44 +11,41 @@ export function ChatMessage({
message,
userPubkey,
userPrivkey,
self,
}: {
message: NDKEvent;
userPubkey: string;
userPrivkey: string;
self: boolean;
}) {
const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
const richContent = parser(decryptedContent) ?? null;
return (
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-white/10">
<div className="flex flex-col">
<User pubkey={message.pubkey} time={message.created_at} variant="chat" />
<div className="-mt-6 flex items-start gap-3">
<div className="w-10 shrink-0" />
{!richContent ? (
<p>Decrypting...</p>
) : (
<div>
<p className="select-text whitespace-pre-line text-white">
{richContent.parsed}
</p>
<div>
{richContent.images.length > 0 && (
<ImagePreview urls={richContent.images} />
)}
{richContent.videos.length > 0 && (
<VideoPreview urls={richContent.videos} />
)}
{richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
{richContent.notes.length > 0 &&
richContent.notes.map((note: string) => (
<MentionNote key={note} id={note} />
))}
</div>
</div>
)}
<div
className={twMerge(
'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
self ? 'ml-auto rounded-l-xl bg-fuchsia-500' : 'rounded-r-xl bg-white/10'
)}
>
{!richContent ? (
<p>Decrypting...</p>
) : (
<div>
<p className="select-text whitespace-pre-line text-white">
{richContent.parsed}
</p>
<div>
{richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
{richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
{richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
{richContent.notes.length > 0 &&
richContent.notes.map((note: string) => (
<MentionNote key={note} id={note} />
))}
</div>
</div>
</div>
)}
</div>
);
}