update urls and user page
This commit is contained in:
Ren Amamiya
61
src/app/chats/components/item.tsx
Normal file
61
src/app/chats/components/item.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
import { Image } from '@shared/image';
|
||||
|
||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { shortenKey } from '@utils/shortenKey';
|
||||
|
||||
export function ChatsListItem({ data }: { data: any }) {
|
||||
const { status, user } = useProfile(data.sender_pubkey);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-2.5 w-2/3 animate-pulse rounded bg-zinc-800" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={`/app/chats/${data.sender_pubkey}`}
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'inline-flex h-9 items-center gap-2.5 rounded-md px-2.5',
|
||||
isActive ? 'bg-zinc-900/50 text-zinc-100' : ''
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
fallback={DEFAULT_AVATAR}
|
||||
alt={data.sender_pubkey}
|
||||
className="h-6 w-6 rounded object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex w-full items-center justify-between">
|
||||
<div className="inline-flex items-baseline gap-1">
|
||||
<h5 className="max-w-[10rem] truncate font-medium text-zinc-200">
|
||||
{user?.nip05 ||
|
||||
user?.name ||
|
||||
user?.displayName ||
|
||||
shortenKey(data.sender_pubkey)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{data.new_messages > 0 && (
|
||||
<span className="inline-flex w-8 items-center justify-center rounded bg-fuchsia-400/10 px-1 py-1 text-xs font-medium text-fuchsia-500 ring-1 ring-inset ring-fuchsia-400/20">
|
||||
{data.new_messages}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
76
src/app/chats/components/list.tsx
Normal file
76
src/app/chats/components/list.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { ChatsListItem } from '@app/chats/components/item';
|
||||
import { NewMessageModal } from '@app/chats/components/modal';
|
||||
import { ChatsListSelfItem } from '@app/chats/components/self';
|
||||
|
||||
import { getChats } from '@libs/storage';
|
||||
|
||||
import { StrangersIcon } from '@shared/icons';
|
||||
|
||||
import { useAccount } from '@utils/hooks/useAccount';
|
||||
import { compactNumber } from '@utils/number';
|
||||
|
||||
export function ChatsList() {
|
||||
const { account } = useAccount();
|
||||
const {
|
||||
status,
|
||||
data: chats,
|
||||
isFetching,
|
||||
} = useQuery(['chats'], async () => {
|
||||
return await getChats();
|
||||
});
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
||||
</div>
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{account ? (
|
||||
<ChatsListSelfItem data={account} />
|
||||
) : (
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
||||
</div>
|
||||
)}
|
||||
{chats.follows.map((item) => {
|
||||
if (account.pubkey !== item.sender_pubkey) {
|
||||
return <ChatsListItem key={item.sender_pubkey} data={item} />;
|
||||
}
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||
<StrangersIcon className="h-3 w-3 text-zinc-200" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium text-zinc-400">
|
||||
{compactNumber.format(chats.unknown)} strangers
|
||||
</h5>
|
||||
</div>
|
||||
</button>
|
||||
<NewMessageModal />
|
||||
{isFetching && (
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div className="h-3 w-full animate-pulse rounded-sm bg-zinc-800" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
src/app/chats/components/messages/form.tsx
Normal file
71
src/app/chats/components/messages/form.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { nip04 } from 'nostr-tools';
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
import { EnterIcon } from '@shared/icons';
|
||||
import { MediaUploader } from '@shared/mediaUploader';
|
||||
|
||||
import { usePublish } from '@utils/hooks/usePublish';
|
||||
|
||||
export function ChatMessageForm({
|
||||
receiverPubkey,
|
||||
userPrivkey,
|
||||
}: {
|
||||
receiverPubkey: string;
|
||||
userPubkey: string;
|
||||
userPrivkey: string;
|
||||
}) {
|
||||
const { publish } = usePublish();
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
const encryptMessage = useCallback(async () => {
|
||||
return await nip04.encrypt(userPrivkey, receiverPubkey, value);
|
||||
}, [receiverPubkey, value]);
|
||||
|
||||
const submit = async () => {
|
||||
const message = await encryptMessage();
|
||||
const tags = [['p', receiverPubkey]];
|
||||
|
||||
// publish message
|
||||
await publish({ content: message, kind: 4, tags });
|
||||
|
||||
// reset state
|
||||
setValue('');
|
||||
};
|
||||
|
||||
const handleEnterPress = (e: {
|
||||
key: string;
|
||||
shiftKey: any;
|
||||
preventDefault: () => void;
|
||||
}) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative h-11 w-full">
|
||||
<input
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={handleEnterPress}
|
||||
spellCheck={false}
|
||||
placeholder="Message"
|
||||
className="relative h-11 w-full resize-none rounded-md bg-zinc-800 px-5 !outline-none placeholder:text-zinc-500"
|
||||
/>
|
||||
<div className="absolute right-2 top-0 h-11">
|
||||
<div className="flex h-full items-center justify-end gap-3 text-zinc-500">
|
||||
<MediaUploader setState={setValue} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={submit}
|
||||
className="inline-flex items-center gap-1 text-sm leading-none"
|
||||
>
|
||||
<EnterIcon width={14} height={14} className="" />
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
src/app/chats/components/messages/item.tsx
Normal file
45
src/app/chats/components/messages/item.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage';
|
||||
|
||||
import { MentionNote } from '@shared/notes/mentions/note';
|
||||
import { ImagePreview } from '@shared/notes/preview/image';
|
||||
import { LinkPreview } from '@shared/notes/preview/link';
|
||||
import { VideoPreview } from '@shared/notes/preview/video';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { parser } from '@utils/parser';
|
||||
|
||||
export function ChatMessageItem({
|
||||
data,
|
||||
userPubkey,
|
||||
userPrivkey,
|
||||
}: {
|
||||
data: any;
|
||||
userPubkey: string;
|
||||
userPrivkey: string;
|
||||
}) {
|
||||
const decryptedContent = useDecryptMessage(data, userPubkey, userPrivkey);
|
||||
// if we have decrypted content, use it instead of the encrypted content
|
||||
if (decryptedContent) {
|
||||
data['content'] = decryptedContent;
|
||||
}
|
||||
// parse the note content
|
||||
const content = parser(data);
|
||||
|
||||
return (
|
||||
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
|
||||
<div className="flex flex-col">
|
||||
<User pubkey={data.sender_pubkey} time={data.created_at} isChat={true} />
|
||||
<div className="-mt-[20px] pl-[49px]">
|
||||
<p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
|
||||
{content.parsed}
|
||||
</p>
|
||||
{content.images.length > 0 && <ImagePreview urls={content.images} />}
|
||||
{content.videos.length > 0 && <VideoPreview urls={content.videos} />}
|
||||
{content.links.length > 0 && <LinkPreview urls={content.links} />}
|
||||
{content.notes.length > 0 &&
|
||||
content.notes.map((note: string) => <MentionNote key={note} id={note} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
123
src/app/chats/components/modal.tsx
Normal file
123
src/app/chats/components/modal.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
import { Fragment, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { User } from '@app/auth/components/user';
|
||||
|
||||
import { CancelIcon, LoaderIcon, PlusIcon } from '@shared/icons';
|
||||
|
||||
import { useAccount } from '@utils/hooks/useAccount';
|
||||
|
||||
export function NewMessageModal() {
|
||||
const navigate = useNavigate();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const { status, account } = useAccount();
|
||||
const follows = account ? JSON.parse(account.follows as string) : [];
|
||||
|
||||
const closeModal = () => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
const openChat = (pubkey: string) => {
|
||||
closeModal();
|
||||
navigate(`/app/chats/${pubkey}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openModal()}
|
||||
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5"
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||
<PlusIcon className="h-3 w-3 text-zinc-200" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium text-zinc-400">New chat</h5>
|
||||
</div>
|
||||
</button>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={closeModal}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
|
||||
</Transition.Child>
|
||||
<div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
|
||||
<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-semibold leading-none text-zinc-100"
|
||||
>
|
||||
New chat
|
||||
</Dialog.Title>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
|
||||
>
|
||||
<CancelIcon width={20} height={20} className="text-zinc-300" />
|
||||
</button>
|
||||
</div>
|
||||
<Dialog.Description className="text-sm leading-tight text-zinc-400">
|
||||
All messages will be encrypted, but anyone can see who you chat
|
||||
</Dialog.Description>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
|
||||
{status === 'loading' ? (
|
||||
<div className="inline-flex items-center justify-center px-4 py-3">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
|
||||
</div>
|
||||
) : (
|
||||
follows.map((follow) => (
|
||||
<div
|
||||
key={follow}
|
||||
className="group flex items-center justify-between px-4 py-3 hover:bg-zinc-800"
|
||||
>
|
||||
<User pubkey={follow} />
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openChat(follow)}
|
||||
className="inline-flex w-max translate-x-20 transform rounded border-t border-zinc-600/50 bg-zinc-700 px-3 py-1.5 text-sm transition-transform duration-150 ease-in-out hover:bg-fuchsia-500 group-hover:translate-x-0"
|
||||
>
|
||||
Chat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}
|
||||
52
src/app/chats/components/self.tsx
Normal file
52
src/app/chats/components/self.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
import { Image } from '@shared/image';
|
||||
|
||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { shortenKey } from '@utils/shortenKey';
|
||||
|
||||
export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
|
||||
const { status, user } = useProfile(data.pubkey);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
|
||||
<div>
|
||||
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={`/app/chats/${data.pubkey}`}
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'inline-flex h-9 items-center gap-2.5 rounded-md px-2.5',
|
||||
isActive ? 'bg-zinc-900/50 text-zinc-100' : ''
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
fallback={DEFAULT_AVATAR}
|
||||
alt={data.pubkey}
|
||||
className="h-6 w-6 rounded bg-white object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex items-baseline gap-1">
|
||||
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
|
||||
{user?.nip05 || user?.name || shortenKey(data.pubkey)}
|
||||
</h5>
|
||||
<span className="text-zinc-500">(you)</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
46
src/app/chats/components/sidebar.tsx
Normal file
46
src/app/chats/components/sidebar.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Image } from '@shared/image';
|
||||
|
||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { shortenKey } from '@utils/shortenKey';
|
||||
|
||||
export function ChatSidebar({ pubkey }: { pubkey: string }) {
|
||||
const { user } = useProfile(pubkey);
|
||||
|
||||
return (
|
||||
<div className="px-3 py-2">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="relative h-11 w-11 shrink rounded-md">
|
||||
<Image
|
||||
src={user?.picture || user?.image}
|
||||
fallback={DEFAULT_AVATAR}
|
||||
alt={pubkey}
|
||||
className="h-11 w-11 rounded-md object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="text-lg font-semibold leading-none">
|
||||
{user?.displayName || user?.name}
|
||||
</h3>
|
||||
<h5 className="leading-none text-zinc-400">
|
||||
{user?.nip05 || shortenKey(pubkey)}
|
||||
</h5>
|
||||
</div>
|
||||
<div>
|
||||
<p className="leading-tight">{user?.bio || user?.about}</p>
|
||||
<Link
|
||||
to={`/app/users/${pubkey}`}
|
||||
className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-md bg-zinc-900 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100"
|
||||
>
|
||||
View full profile
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user