mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
add noti bubble to chats
This commit is contained in:
parent
1e5bd7e21f
commit
118c9d931c
@ -1,19 +1,16 @@
|
||||
import { Image } from "@shared/image";
|
||||
import { useActiveAccount } from "@stores/accounts";
|
||||
import { DEFAULT_AVATAR } from "@stores/constants";
|
||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||
import { useProfile } from "@utils/hooks/useProfile";
|
||||
import { shortenKey } from "@utils/shortenKey";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
||||
export function ChatsListItem({ data }: { data: any }) {
|
||||
const pageContext = usePageContext();
|
||||
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pagePubkey = searchParams.pubkey;
|
||||
|
||||
const account = useActiveAccount((state: any) => state.account);
|
||||
const { user, isError, isLoading } = useProfile(pubkey);
|
||||
const { user, isError, isLoading } = useProfile(data.sender_pubkey);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -27,10 +24,10 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
||||
</div>
|
||||
) : (
|
||||
<a
|
||||
href={`/app/chat?pubkey=${pubkey}`}
|
||||
href={`/app/chat?pubkey=${data.sender_pubkey}`}
|
||||
className={twMerge(
|
||||
"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
|
||||
pagePubkey === pubkey
|
||||
pagePubkey === data.sender_pubkey
|
||||
? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
|
||||
: "",
|
||||
)}
|
||||
@ -38,17 +35,23 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||
<Image
|
||||
src={user?.picture || DEFAULT_AVATAR}
|
||||
alt={pubkey}
|
||||
alt={data.sender_pubkey}
|
||||
className="h-5 w-5 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 group-hover:text-white">
|
||||
{user?.nip05 || user?.name || shortenKey(pubkey)}
|
||||
</h5>
|
||||
{account?.pubkey === pubkey && (
|
||||
<span className="text-zinc-500">(you)</span>
|
||||
)}
|
||||
<div className="w-full inline-flex items-center justify-between">
|
||||
<div className="inline-flex items-baseline gap-1">
|
||||
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
|
||||
{user?.nip05 || user?.name || shortenKey(data.sender_pubkey)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{data.new_messages && (
|
||||
<span className="inline-flex items-center justify-center rounded bg-fuchsia-400/10 w-8 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>
|
||||
</a>
|
||||
)}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { ChatsListItem } from "@app/chat/components/item";
|
||||
import { ChatsListSelfItem } from "@app/chat/components/self";
|
||||
import { useActiveAccount } from "@stores/accounts";
|
||||
import { useChats } from "@stores/chats";
|
||||
import { useEffect } from "react";
|
||||
@ -15,6 +16,7 @@ export function ChatsList() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<ChatsListSelfItem data={account} />
|
||||
{!chats ? (
|
||||
<>
|
||||
<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
|
||||
@ -27,8 +29,8 @@ export function ChatsList() {
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
chats.map((item: { sender_pubkey: string }) => (
|
||||
<ChatsListItem key={item.sender_pubkey} pubkey={item.sender_pubkey} />
|
||||
chats.map((item) => (
|
||||
<ChatsListItem key={item.sender_pubkey} data={item} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
52
src/app/chat/components/self.tsx
Normal file
52
src/app/chat/components/self.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { Image } from "@shared/image";
|
||||
import { DEFAULT_AVATAR } from "@stores/constants";
|
||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||
import { useProfile } from "@utils/hooks/useProfile";
|
||||
import { shortenKey } from "@utils/shortenKey";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function ChatsListSelfItem({ data }: { data: any }) {
|
||||
const pageContext = usePageContext();
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pagePubkey = searchParams.pubkey;
|
||||
|
||||
const { user, isError, isLoading } = useProfile(data.pubkey);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isError && <div>error</div>}
|
||||
{isLoading && !user ? (
|
||||
<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
|
||||
<div className="relative h-5 w-5 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>
|
||||
) : (
|
||||
<a
|
||||
href={`/app/chat?pubkey=${data.pubkey}`}
|
||||
className={twMerge(
|
||||
"group inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
|
||||
pagePubkey === data.sender_pubkey
|
||||
? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
|
||||
: "",
|
||||
)}
|
||||
>
|
||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||
<Image
|
||||
src={user?.picture || DEFAULT_AVATAR}
|
||||
alt={data.pubkey}
|
||||
className="h-5 w-5 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 group-hover:text-white">
|
||||
{user?.nip05 || user?.name || shortenKey(data.pubkey)}
|
||||
</h5>
|
||||
<span className="text-zinc-500">(you)</span>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
import { Image } from "@shared/image";
|
||||
import { RelayContext } from "@shared/relayProvider";
|
||||
import { useActiveAccount } from "@stores/accounts";
|
||||
import { useChats } from "@stores/chats";
|
||||
import { DEFAULT_AVATAR, READONLY_RELAYS } from "@stores/constants";
|
||||
import { useProfile } from "@utils/hooks/useProfile";
|
||||
import { sendNativeNotification } from "@utils/notification";
|
||||
@ -10,6 +11,7 @@ import useSWRSubscription from "swr/subscription";
|
||||
export function ActiveAccount({ data }: { data: any }) {
|
||||
const pool: any = useContext(RelayContext);
|
||||
const lastLogin = useActiveAccount((state: any) => state.lastLogin);
|
||||
const addChat = useChats((state: any) => state.add);
|
||||
|
||||
const { user } = useProfile(data.pubkey);
|
||||
|
||||
@ -22,12 +24,20 @@ export function ActiveAccount({ data }: { data: any }) {
|
||||
{
|
||||
"#p": [key],
|
||||
since: lastLogin,
|
||||
limit: 20,
|
||||
},
|
||||
],
|
||||
READONLY_RELAYS,
|
||||
(event) => {
|
||||
sendNativeNotification(event.content);
|
||||
switch (event.kind) {
|
||||
case 4:
|
||||
// update state
|
||||
addChat(event.pubkey);
|
||||
// send native notifiation
|
||||
sendNativeNotification(event.content);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
|
@ -1,13 +1,37 @@
|
||||
import { getChatMessages, getChatsByPubkey } from "@utils/storage";
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
export const useChats = create((set) => ({
|
||||
chats: [],
|
||||
fetch: async (pubkey: string) => {
|
||||
const response = await getChatsByPubkey(pubkey);
|
||||
set({ chats: response });
|
||||
},
|
||||
}));
|
||||
export const useChats = create(
|
||||
immer((set: any, get: any) => ({
|
||||
chats: [],
|
||||
fetch: async (pubkey: string) => {
|
||||
const response: any = await getChatsByPubkey(pubkey);
|
||||
set({ chats: response });
|
||||
},
|
||||
add: (pubkey: string) => {
|
||||
set((state) => {
|
||||
const target = state.chats.findIndex(
|
||||
(m: { sender_pubkey: string }) => m.sender_pubkey === pubkey,
|
||||
);
|
||||
if (target !== -1) {
|
||||
state.chats[target]["new_messages"] =
|
||||
state.chats[target]["new_messages"] + 1 || 1;
|
||||
} else {
|
||||
state.chats.push({ sender_pubkey: pubkey, new_messages: 1 });
|
||||
}
|
||||
});
|
||||
},
|
||||
clearBubble: (pubkey: string) => {
|
||||
set((state) => {
|
||||
const target = state.chats.findIndex(
|
||||
(m: { sender_pubkey: string }) => m.sender_pubkey === pubkey,
|
||||
);
|
||||
state.chats[target]["new_messages"] = 0;
|
||||
});
|
||||
},
|
||||
})),
|
||||
);
|
||||
|
||||
export const useChatMessages = create((set) => ({
|
||||
messages: [],
|
||||
|
Loading…
Reference in New Issue
Block a user