420 lines
13 KiB
TypeScript
420 lines
13 KiB
TypeScript
import { commands } from "@/commands";
|
|
import { ago, cn } from "@/commons";
|
|
import { Spinner } from "@/components/spinner";
|
|
import { User } from "@/components/user";
|
|
import {
|
|
ArrowRight,
|
|
CaretDown,
|
|
CirclesFour,
|
|
Plus,
|
|
X,
|
|
} from "@phosphor-icons/react";
|
|
import * as Dialog from "@radix-ui/react-dialog";
|
|
import * as ScrollArea from "@radix-ui/react-scroll-area";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { Link, Outlet, createLazyFileRoute } from "@tanstack/react-router";
|
|
import { listen } from "@tauri-apps/api/event";
|
|
import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
|
|
import { message } from "@tauri-apps/plugin-dialog";
|
|
import type { NostrEvent } from "nostr-tools";
|
|
import { useCallback, useEffect, useState, useTransition } from "react";
|
|
|
|
type ChatPayload = {
|
|
events: string[];
|
|
};
|
|
|
|
type EventPayload = {
|
|
event: string;
|
|
sender: string;
|
|
};
|
|
|
|
export const Route = createLazyFileRoute("/$account/chats")({
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
return (
|
|
<div className="size-full flex">
|
|
<div
|
|
data-tauri-drag-region
|
|
className="shrink-0 w-[280px] h-full flex flex-col justify-between border-r border-black/5 dark:border-white/5"
|
|
>
|
|
<Header />
|
|
<ChatList />
|
|
</div>
|
|
<div className="flex-1 min-w-0 min-h-0 bg-white dark:bg-neutral-900 overflow-auto">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Header() {
|
|
const { platform } = Route.useRouteContext();
|
|
const { account } = Route.useParams();
|
|
|
|
return (
|
|
<div
|
|
data-tauri-drag-region
|
|
className={cn(
|
|
"shrink-0 h-12 flex items-center justify-between",
|
|
platform === "macos" ? "pl-[78px] pr-3.5" : "px-3.5",
|
|
)}
|
|
>
|
|
<CurrentUser />
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Link
|
|
to="/$account/contacts"
|
|
params={{ account }}
|
|
className="size-8 rounded-full inline-flex items-center justify-center bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10"
|
|
>
|
|
<CirclesFour className="size-4" />
|
|
</Link>
|
|
<Compose />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChatList() {
|
|
const { account } = Route.useParams();
|
|
const { queryClient } = Route.useRouteContext();
|
|
const { isLoading, data } = useQuery({
|
|
queryKey: ["chats"],
|
|
queryFn: async () => {
|
|
const res = await commands.getChats();
|
|
|
|
if (res.status === "ok") {
|
|
const raw = res.data;
|
|
const events = raw.map((item) => JSON.parse(item) as NostrEvent);
|
|
|
|
return events;
|
|
} else {
|
|
throw new Error(res.error);
|
|
}
|
|
},
|
|
select: (data) => data.sort((a, b) => b.created_at - a.created_at),
|
|
refetchOnMount: false,
|
|
refetchOnWindowFocus: false,
|
|
});
|
|
|
|
useEffect(() => {
|
|
const unlisten = listen<ChatPayload>("sync_chat", async (data) => {
|
|
const raw = data.payload.events;
|
|
const events: NostrEvent[] = raw.map((item) => JSON.parse(item));
|
|
const chats: NostrEvent[] = await queryClient.getQueryData(["chats"]);
|
|
|
|
if (chats?.length) {
|
|
const newEvents = [...events, ...chats];
|
|
const uniqs = [
|
|
...new Map(newEvents.map((item) => [item.pubkey, item])).values(),
|
|
];
|
|
await queryClient.setQueryData(["chats"], uniqs);
|
|
} else {
|
|
await queryClient.setQueryData(["chats"], events);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
unlisten.then((f) => f());
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const unlisten = listen<EventPayload>("event", async (data) => {
|
|
const event: NostrEvent = JSON.parse(data.payload.event);
|
|
const chats: NostrEvent[] = await queryClient.getQueryData(["chats"]);
|
|
|
|
if (chats) {
|
|
const index = chats.findIndex((item) => item.pubkey === event.pubkey);
|
|
|
|
if (index === -1) {
|
|
await queryClient.setQueryData(
|
|
["chats"],
|
|
(prevEvents: NostrEvent[]) => {
|
|
if (!prevEvents) return prevEvents;
|
|
if (event.pubkey === account) return;
|
|
|
|
return [event, ...prevEvents];
|
|
},
|
|
);
|
|
} else {
|
|
const newEvents = [...chats];
|
|
newEvents[index] = {
|
|
...event,
|
|
};
|
|
|
|
await queryClient.setQueryData(["chats"], newEvents);
|
|
}
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
unlisten.then((f) => f());
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<ScrollArea.Root
|
|
type={"scroll"}
|
|
scrollHideDelay={300}
|
|
className="overflow-hidden flex-1 w-full"
|
|
>
|
|
<ScrollArea.Viewport className="relative h-full px-1.5">
|
|
{isLoading || !data.length ? (
|
|
<div>
|
|
{[...Array(5).keys()].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center rounded-lg p-2 mb-1 gap-2"
|
|
>
|
|
<div className="size-9 rounded-full animate-pulse bg-black/10 dark:bg-white/10" />
|
|
<div className="size-4 w-20 rounded animate-pulse bg-black/10 dark:bg-white/10" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : !data?.length ? (
|
|
<div className="p-2">
|
|
<div className="px-2 h-12 w-full rounded-lg bg-black/5 dark:bg-white/5 flex items-center justify-center text-sm">
|
|
No chats.
|
|
</div>
|
|
</div>
|
|
) : (
|
|
data.map((item) => (
|
|
<Link
|
|
key={item.id + item.pubkey}
|
|
to="/$account/chats/$id"
|
|
params={{ account, id: item.pubkey }}
|
|
>
|
|
{({ isActive }) => (
|
|
<User.Provider pubkey={item.pubkey}>
|
|
<User.Root
|
|
className={cn(
|
|
"flex items-center rounded-lg p-2 mb-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5",
|
|
isActive ? "bg-black/5 dark:bg-white/5" : "",
|
|
)}
|
|
>
|
|
<User.Avatar className="size-8 rounded-full" />
|
|
<div className="flex-1 inline-flex items-center justify-between text-sm">
|
|
<div className="inline-flex leading-tight">
|
|
<User.Name className="max-w-[8rem] truncate font-semibold" />
|
|
<span className="ml-1.5 text-neutral-500">
|
|
{account === item.pubkey ? "(you)" : ""}
|
|
</span>
|
|
</div>
|
|
<span className="leading-tight text-right text-neutral-600 dark:text-neutral-400">
|
|
{ago(item.created_at)}
|
|
</span>
|
|
</div>
|
|
</User.Root>
|
|
</User.Provider>
|
|
)}
|
|
</Link>
|
|
))
|
|
)}
|
|
</ScrollArea.Viewport>
|
|
<ScrollArea.Scrollbar
|
|
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
|
orientation="vertical"
|
|
>
|
|
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
|
</ScrollArea.Scrollbar>
|
|
<ScrollArea.Corner className="bg-transparent" />
|
|
</ScrollArea.Root>
|
|
);
|
|
}
|
|
|
|
function Compose() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [target, setTarget] = useState("");
|
|
const [newMessage, setNewMessage] = useState("");
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const { account } = Route.useParams();
|
|
const { isLoading, data: contacts } = useQuery({
|
|
queryKey: ["contacts", account],
|
|
queryFn: async () => {
|
|
const res = await commands.getContactList();
|
|
|
|
if (res.status === "ok") {
|
|
return res.data;
|
|
} else {
|
|
return [];
|
|
}
|
|
},
|
|
refetchOnWindowFocus: false,
|
|
enabled: isOpen,
|
|
});
|
|
|
|
const navigate = Route.useNavigate();
|
|
|
|
const sendMessage = async () => {
|
|
startTransition(async () => {
|
|
if (!newMessage.length) return;
|
|
if (!target.length) return;
|
|
|
|
const res = await commands.sendMessage(target, newMessage);
|
|
|
|
if (res.status === "ok") {
|
|
navigate({
|
|
to: "/$account/chats/$id",
|
|
params: { account, id: target },
|
|
});
|
|
} else {
|
|
await message(res.error, { title: "Coop", kind: "error" });
|
|
return;
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
|
|
<Dialog.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
className="size-8 rounded-full inline-flex items-center justify-center bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
|
|
>
|
|
<Plus className="size-4" weight="bold" />
|
|
</button>
|
|
</Dialog.Trigger>
|
|
<Dialog.Portal>
|
|
<Dialog.Overlay className="bg-black/20 dark:bg-white/20 data-[state=open]:animate-overlay fixed inset-0" />
|
|
<Dialog.Content className="flex flex-col data-[state=open]:animate-content fixed top-[50%] left-[50%] w-full h-full max-h-[500px] max-w-[400px] translate-x-[-50%] translate-y-[-50%] rounded-xl bg-white dark:bg-neutral-900 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
|
|
<div className="h-28 shrink-0 flex flex-col justify-end">
|
|
<div className="h-10 inline-flex items-center justify-between px-3.5 text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
|
Send to
|
|
<Dialog.Close asChild>
|
|
<button type="button">
|
|
<X className="size-4" />
|
|
</button>
|
|
</Dialog.Close>
|
|
</div>
|
|
<div className="flex items-center gap-1 px-3.5 border-b border-neutral-100 dark:border-neutral-800">
|
|
<span className="shrink-0 font-medium">To:</span>
|
|
<input
|
|
placeholder="npub1..."
|
|
value={target}
|
|
onChange={(e) => setTarget(e.target.value)}
|
|
disabled={isPending || isLoading}
|
|
className="flex-1 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-1 px-3.5 border-b border-neutral-100 dark:border-neutral-800">
|
|
<span className="shrink-0 font-medium">Message:</span>
|
|
<input
|
|
placeholder="hello..."
|
|
value={newMessage}
|
|
onChange={(e) => setNewMessage(e.target.value)}
|
|
disabled={isPending || isLoading}
|
|
className="flex-1 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
|
/>
|
|
<button
|
|
type="button"
|
|
disabled={isPending || isLoading || !newMessage.length}
|
|
onClick={() => sendMessage()}
|
|
className="rounded-full size-7 inline-flex items-center justify-center bg-blue-300 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 text-white"
|
|
>
|
|
<ArrowRight className="size-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<ScrollArea.Root
|
|
type={"scroll"}
|
|
scrollHideDelay={300}
|
|
className="overflow-hidden flex-1 size-full"
|
|
>
|
|
<ScrollArea.Viewport className="relative h-full p-2">
|
|
{isLoading ? (
|
|
<div className="h-[400px] flex items-center justify-center">
|
|
<Spinner className="size-4" />
|
|
</div>
|
|
) : !contacts?.length ? (
|
|
<div className="h-[400px] flex items-center justify-center">
|
|
<p className="text-sm">Contact is empty.</p>
|
|
</div>
|
|
) : (
|
|
contacts?.map((contact) => (
|
|
<button
|
|
key={contact}
|
|
type="button"
|
|
onClick={() => setTarget(contact)}
|
|
className="block w-full p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800"
|
|
>
|
|
<User.Provider pubkey={contact}>
|
|
<User.Root className="flex items-center gap-2">
|
|
<User.Avatar className="size-10 rounded-full" />
|
|
<User.Name className="font-medium" />
|
|
</User.Root>
|
|
</User.Provider>
|
|
</button>
|
|
))
|
|
)}
|
|
</ScrollArea.Viewport>
|
|
<ScrollArea.Scrollbar
|
|
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
|
orientation="vertical"
|
|
>
|
|
<ScrollArea.Thumb className="flex-1 bg-black/40 dark:bg-white/40 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
|
|
</ScrollArea.Scrollbar>
|
|
<ScrollArea.Corner className="bg-transparent" />
|
|
</ScrollArea.Root>
|
|
</Dialog.Content>
|
|
</Dialog.Portal>
|
|
</Dialog.Root>
|
|
);
|
|
}
|
|
|
|
function CurrentUser() {
|
|
const params = Route.useParams();
|
|
const navigate = Route.useNavigate();
|
|
|
|
const showContextMenu = useCallback(async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
|
|
const menuItems = await Promise.all([
|
|
MenuItem.new({
|
|
text: "Contacts",
|
|
action: () =>
|
|
navigate({
|
|
to: "/$account/contacts",
|
|
params: { account: params.account },
|
|
}),
|
|
}),
|
|
MenuItem.new({
|
|
text: "Settings",
|
|
action: () => navigate({ to: "/" }),
|
|
}),
|
|
MenuItem.new({
|
|
text: "Feedback",
|
|
action: () => navigate({ to: "/" }),
|
|
}),
|
|
PredefinedMenuItem.new({ item: "Separator" }),
|
|
MenuItem.new({
|
|
text: "Switch account",
|
|
action: () => navigate({ to: "/" }),
|
|
}),
|
|
]);
|
|
|
|
const menu = await Menu.new({
|
|
items: menuItems,
|
|
});
|
|
|
|
await menu.popup().catch((e) => console.error(e));
|
|
}, []);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => showContextMenu(e)}
|
|
className="h-8 inline-flex items-center gap-1.5"
|
|
>
|
|
<User.Provider pubkey={params.account}>
|
|
<User.Root className="shrink-0">
|
|
<User.Avatar className="size-8 rounded-full" />
|
|
</User.Root>
|
|
</User.Provider>
|
|
<CaretDown className="size-3 text-neutral-600 dark:text-neutral-400" />
|
|
</button>
|
|
);
|
|
}
|