48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { AccountContext } from '@components/accountProvider';
|
|
import { ChatListItem } from '@components/chats/chatListItem';
|
|
import { ChatModal } from '@components/chats/chatModal';
|
|
|
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
|
|
|
import { useContext } from 'react';
|
|
|
|
let list: any = [];
|
|
|
|
if (typeof window !== 'undefined') {
|
|
const { getChats, getActiveAccount } = await import('@utils/storage');
|
|
const activeAccount = await getActiveAccount();
|
|
|
|
list = await getChats(activeAccount.id);
|
|
}
|
|
|
|
export default function ChatList() {
|
|
const activeAccount: any = useContext(AccountContext);
|
|
const profile = activeAccount ? JSON.parse(activeAccount.metadata) : null;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-px">
|
|
<a
|
|
href={`/chat?pubkey=${activeAccount.pubkey}`}
|
|
className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
|
|
>
|
|
<div className="relative h-5 w-5 shrink rounded bg-white">
|
|
<img
|
|
src={profile?.picture || DEFAULT_AVATAR}
|
|
alt={activeAccount.pubkey}
|
|
className="h-5 w-5 rounded object-cover"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h5 className="text-sm font-medium text-zinc-400">
|
|
{profile?.display_name || profile?.name} <span className="text-zinc-500">(you)</span>
|
|
</h5>
|
|
</div>
|
|
</a>
|
|
{list.map((item: { id: string; pubkey: string }) => (
|
|
<ChatListItem key={item.id} pubkey={item.pubkey} />
|
|
))}
|
|
<ChatModal />
|
|
</div>
|
|
);
|
|
}
|