nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-14 09:13:31 +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 { 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}

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

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

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

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

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

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

@ -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
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 './home';
export * from './chats';
export * from './community';

18
src/shared/navigation.tsx
View File

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

6
src/shared/nip05.tsx
View File

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

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

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

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

38
src/shared/user.tsx
View File

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