mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13: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 { LoaderIcon } from '@shared/icons';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { useStronghold } from '@stores/stronghold';
|
||||
|
||||
@ -35,6 +36,7 @@ export function ChatScreen() {
|
||||
message={message}
|
||||
userPubkey={db.account.pubkey}
|
||||
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="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="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' ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
@ -92,7 +97,7 @@ export function ChatScreen() {
|
||||
</VList>
|
||||
)}
|
||||
</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
|
||||
receiverPubkey={pubkey}
|
||||
userPubkey={db.account.pubkey}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -16,7 +16,12 @@ export function ChatsScreen() {
|
||||
async () => {
|
||||
return await getAllNIP04Chats();
|
||||
},
|
||||
{ refetchOnWindowFocus: false }
|
||||
{
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnMount: false,
|
||||
refetchOnReconnect: false,
|
||||
staleTime: Infinity,
|
||||
}
|
||||
);
|
||||
|
||||
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
|
||||
data-tauri-drag-region
|
||||
className="h-16 w-full shrink-0 border-b border-white/5"
|
||||
/>
|
||||
<div className="flex h-full flex-col gap-1 py-2">
|
||||
className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
|
||||
>
|
||||
<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' ? (
|
||||
<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">
|
||||
|
@ -57,9 +57,9 @@ export function WidgetList({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
const renderItem = useCallback(
|
||||
(row: WidgetGroup) => {
|
||||
(row: WidgetGroup, index: number) => {
|
||||
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>
|
||||
<div className="flex flex-col divide-y divide-white/5 overflow-hidden rounded-xl bg-white/10">
|
||||
{row.data.map((item, index) => (
|
||||
@ -101,7 +101,9 @@ export function WidgetList({ params }: { params: Widget }) {
|
||||
<TitleBar id={params.id} title="Add widget" />
|
||||
<div className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
<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">
|
||||
<button
|
||||
type="button"
|
||||
|
@ -67,8 +67,8 @@ export function ActiveAccount() {
|
||||
alt={db.account.npub}
|
||||
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">
|
||||
<p className="max-w-[10rem] truncate font-semibold leading-none text-white">
|
||||
<div className="flex flex-col items-start">
|
||||
<p className="max-w-[10rem] truncate text-base font-semibold leading-none text-white">
|
||||
{user?.name || user?.display_name || user?.displayName}
|
||||
</p>
|
||||
<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 './home';
|
||||
export * from './chats';
|
||||
export * from './community';
|
||||
|
@ -10,6 +10,7 @@ import {
|
||||
ArrowLeftIcon,
|
||||
ArrowRightIcon,
|
||||
ChatsIcon,
|
||||
CommunityIcon,
|
||||
ExploreIcon,
|
||||
HomeIcon,
|
||||
RelayIcon,
|
||||
@ -90,6 +91,23 @@ export function Navigation() {
|
||||
</span>
|
||||
Chats
|
||||
</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
|
||||
to="/relays"
|
||||
preventScrollReset={true}
|
||||
|
@ -61,8 +61,10 @@ export const NIP05 = memo(function NIP05({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={twMerge('leadning-none inline-flex items-center gap-1', className)}>
|
||||
<p>{nip05}</p>
|
||||
<div className={twMerge('inline-flex items-center gap-1', className)}>
|
||||
<div>
|
||||
<p className="text-sm">{nip05}</p>
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
{data === true ? (
|
||||
<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">
|
||||
<h5 className="line-clamp-1 font-medium leading-none text-white">
|
||||
<h5 className="line-clamp-1 text-base font-medium text-white">
|
||||
{metadata.title}
|
||||
</h5>
|
||||
<p className="line-clamp-3 break-all text-sm text-white/50">
|
||||
{metadata.summary}
|
||||
</p>
|
||||
<span className="mt-2.5 text-sm leading-none text-white/50">
|
||||
{metadata.summary ? (
|
||||
<p className="line-clamp-3 break-all text-sm text-white/70">
|
||||
{metadata.summary}
|
||||
</p>
|
||||
) : null}
|
||||
<span className="mt-2.5 text-sm text-white/70">
|
||||
{metadata.publishedAt.toString()}
|
||||
</span>
|
||||
</div>
|
||||
|
@ -7,7 +7,7 @@ export function Hashtag({ tag }: { tag: string }) {
|
||||
const setWidget = useWidgets((state) => state.setWidget);
|
||||
|
||||
return (
|
||||
<div
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() =>
|
||||
@ -27,6 +27,6 @@ export function Hashtag({ tag }: { tag: string }) {
|
||||
className="break-all text-fuchsia-400 hover:text-fuchsia-500"
|
||||
>
|
||||
{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">
|
||||
<h5 className="line-clamp-1 font-semibold leading-none text-white">
|
||||
<h5 className="line-clamp-1 text-base font-semibold text-white">
|
||||
{data.title}
|
||||
</h5>
|
||||
{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}
|
||||
</p>
|
||||
)}
|
||||
<span className="mt-2.5 text-sm leading-none text-white/80">
|
||||
{domain.hostname}
|
||||
</span>
|
||||
<span className="mt-2.5 text-sm text-white/80">{domain.hostname}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
@ -80,14 +80,14 @@ export const User = memo(function User({
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<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?.display_name ||
|
||||
user?.displayName ||
|
||||
displayNpub(pubkey, 16)}
|
||||
</h5>
|
||||
<span className="leading-none text-white/50">·</span>
|
||||
<span className="leading-none text-white/50">{createdAt}</span>
|
||||
<span className="text-white/50">·</span>
|
||||
<span className="text-white/50">{createdAt}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -111,7 +111,7 @@ export const User = memo(function User({
|
||||
</Avatar.Root>
|
||||
<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">
|
||||
<p className="max-w-[15rem] truncate text-lg font-semibold text-white">
|
||||
{user?.name || user?.display_name || user?.displayName}
|
||||
</p>
|
||||
<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" />
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div className="flex w-full flex-col items-start gap-1">
|
||||
<h3 className="max-w-[15rem] truncate font-medium leading-none text-white">
|
||||
<div className="flex w-full flex-col items-start">
|
||||
<h3 className="max-w-[15rem] truncate font-medium text-white">
|
||||
{user?.name || user?.display_name || user?.displayName}
|
||||
</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)}
|
||||
</p>
|
||||
</div>
|
||||
@ -230,7 +230,7 @@ export const User = memo(function User({
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<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?.display_name ||
|
||||
user?.displayName ||
|
||||
@ -260,13 +260,13 @@ export const User = memo(function User({
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<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'}
|
||||
</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>
|
||||
<span className="text-white/50">{createdAt}</span>
|
||||
<span className="text-white/50">·</span>
|
||||
<span className="text-white/50">{displayNpub(pubkey, 16)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -295,15 +295,15 @@ export const User = memo(function User({
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
</HoverCard.Trigger>
|
||||
<div className="flex flex-1 items-baseline gap-2">
|
||||
<h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
|
||||
<div className="flex flex-1 items-center gap-2">
|
||||
<h5 className="max-w-[15rem] truncate font-semibold text-white">
|
||||
{user?.name ||
|
||||
user?.display_name ||
|
||||
user?.displayName ||
|
||||
displayNpub(pubkey, 16)}
|
||||
</h5>
|
||||
<span className="leading-none text-white/50">·</span>
|
||||
<span className="leading-none text-white/50">{createdAt}</span>
|
||||
<span className="text-white/50">·</span>
|
||||
<span className="text-white/50">{createdAt}</span>
|
||||
</div>
|
||||
</div>
|
||||
<HoverCard.Portal>
|
||||
@ -331,7 +331,7 @@ export const User = memo(function User({
|
||||
</Avatar.Root>
|
||||
<div className="flex flex-1 flex-col gap-2">
|
||||
<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?.display_name ||
|
||||
user?.displayName ||
|
||||
@ -341,10 +341,10 @@ export const User = memo(function User({
|
||||
<NIP05
|
||||
pubkey={pubkey}
|
||||
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)}
|
||||
</span>
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user