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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/chats/chat.tsx
View File

@ -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}

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') { 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>

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

@ -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,44 +11,41 @@ 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 ? ( >
<p>Decrypting...</p> {!richContent ? (
) : ( <p>Decrypting...</p>
<div> ) : (
<p className="select-text whitespace-pre-line text-white"> <div>
{richContent.parsed} <p className="select-text whitespace-pre-line text-white">
</p> {richContent.parsed}
<div> </p>
{richContent.images.length > 0 && ( <div>
<ImagePreview urls={richContent.images} /> {richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
)} {richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
{richContent.videos.length > 0 && ( {richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
<VideoPreview urls={richContent.videos} /> {richContent.notes.length > 0 &&
)} richContent.notes.map((note: string) => (
{richContent.links.length > 0 && <LinkPreview urls={richContent.links} />} <MentionNote key={note} id={note} />
{richContent.notes.length > 0 && ))}
richContent.notes.map((note: string) => ( </div>
<MentionNote key={note} id={note} />
))}
</div>
</div>
)}
</div> </div>
</div> )}
</div> </div>
); );
} }

17
src/app/chats/index.tsx
View File

@ -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">

8
src/app/space/components/widgetList.tsx
View File

@ -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"

4
src/shared/accounts/active.tsx
View File

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

1
src/shared/icons/index.ts
View File

@ -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';

18
src/shared/navigation.tsx
View File

@ -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}

6
src/shared/nip05.tsx
View File

@ -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" />

12
src/shared/notes/kinds/article.tsx
View File

@ -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 ? (
{metadata.summary} <p className="line-clamp-3 break-all text-sm text-white/70">
</p> {metadata.summary}
<span className="mt-2.5 text-sm leading-none text-white/50"> </p>
) : null}
<span className="mt-2.5 text-sm text-white/70">
{metadata.publishedAt.toString()} {metadata.publishedAt.toString()}
</span> </span>
</div> </div>

4
src/shared/notes/mentions/hashtag.tsx
View File

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

8
src/shared/notes/preview/link.tsx
View File

@ -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>
</> </>
)} )}

38
src/shared/user.tsx
View File

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