reya/coop
1
0
Fork 0
Code Issues Pull Requests Releases Activity

feat: improve popup visibility

Browse Source
This commit is contained in:
reya
2024-09-19 09:22:25 +07:00
parent 82500b35f4
commit 2fcb9e584b
1 changed files with 453 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
src/routes/$account/_layout/chats.lazy.tsx
View File

@@ -1,36 +1,36 @@
import { commands } from '@/commands' import { commands } from "@/commands";
import { ago, cn } from '@/commons' import { ago, cn } from "@/commons";
import { Spinner } from '@/components/spinner' import { Spinner } from "@/components/spinner";
import { User } from '@/components/user' import { User } from "@/components/user";
import { import {
ArrowRight, ArrowRight,
CaretDown, CaretDown,
CirclesFour, CirclesFour,
Plus, Plus,
X, X,
} from '@phosphor-icons/react' } from "@phosphor-icons/react";
import * as Dialog from '@radix-ui/react-dialog' import * as Dialog from "@radix-ui/react-dialog";
import * as Progress from '@radix-ui/react-progress' import * as Progress from "@radix-ui/react-progress";
import * as ScrollArea from '@radix-ui/react-scroll-area' import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery } from '@tanstack/react-query' import { useQuery } from "@tanstack/react-query";
import { Link, Outlet, createLazyFileRoute } from '@tanstack/react-router' import { Link, Outlet, createLazyFileRoute } from "@tanstack/react-router";
import { listen } from '@tauri-apps/api/event' import { listen } from "@tauri-apps/api/event";
import { Menu, MenuItem, PredefinedMenuItem } from '@tauri-apps/api/menu' import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
import { readText, writeText } from '@tauri-apps/plugin-clipboard-manager' import { readText, writeText } from "@tauri-apps/plugin-clipboard-manager";
import { message } from '@tauri-apps/plugin-dialog' import { message } from "@tauri-apps/plugin-dialog";
import { open } from '@tauri-apps/plugin-shell' import { open } from "@tauri-apps/plugin-shell";
import { type NostrEvent, nip19 } from 'nostr-tools' import { type NostrEvent, nip19 } from "nostr-tools";
import { useCallback, useEffect, useRef, useState, useTransition } from 'react' import { useCallback, useEffect, useRef, useState, useTransition } from "react";
import { Virtualizer } from 'virtua' import { Virtualizer } from "virtua";
type EventPayload = { type EventPayload = {
event: string event: string;
sender: string sender: string;
} };
export const Route = createLazyFileRoute('/$account/_layout/chats')({ export const Route = createLazyFileRoute("/$account/_layout/chats")({
component: Screen, component: Screen,
}) });
function Screen() { function Screen() {
return ( return (
@@ -46,19 +46,19 @@ function Screen() {
<Outlet /> <Outlet />
</div> </div>
</div> </div>
) );
} }
function Header() { function Header() {
const { platform } = Route.useRouteContext() const { platform } = Route.useRouteContext();
const { account } = Route.useParams() const { account } = Route.useParams();
return ( return (
<div <div
data-tauri-drag-region data-tauri-drag-region
className={cn( className={cn(
'z-[200] shrink-0 h-12 flex items-center justify-between', "z-[200] shrink-0 h-12 flex items-center justify-between",
platform === 'macos' ? 'pl-[78px] pr-3.5' : 'px-3.5', platform === "macos" ? "pl-[78px] pr-3.5" : "px-3.5",
)} )}
> >
<CurrentUser /> <CurrentUser />
@@ -73,90 +73,90 @@ function Header() {
<Compose /> <Compose />
</div> </div>
</div> </div>
) );
} }
function ChatList() { function ChatList() {
const { account } = Route.useParams() const { account } = Route.useParams();
const { queryClient } = Route.useRouteContext() const { queryClient } = Route.useRouteContext();
const { isLoading, data } = useQuery({ const { isLoading, data } = useQuery({
queryKey: ['chats'], queryKey: ["chats"],
queryFn: async () => { queryFn: async () => {
const res = await commands.getChats() const res = await commands.getChats();
if (res.status === 'ok') { if (res.status === "ok") {
const raw = res.data const raw = res.data;
const events = raw.map((item) => JSON.parse(item) as NostrEvent) const events = raw.map((item) => JSON.parse(item) as NostrEvent);
return events return events;
} else { } else {
throw new Error(res.error) throw new Error(res.error);
} }
}, },
select: (data) => data.sort((a, b) => b.created_at - a.created_at), select: (data) => data.sort((a, b) => b.created_at - a.created_at),
refetchOnMount: false, refetchOnMount: false,
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
}) });
const [isSync, setIsSync] = useState(false) const [isSync, setIsSync] = useState(false);
const [progress, setProgress] = useState(0) const [progress, setProgress] = useState(0);
useEffect(() => { useEffect(() => {
const timer = setInterval( const timer = setInterval(
() => setProgress((prev) => (prev <= 100 ? prev + 4 : 100)), () => setProgress((prev) => (prev <= 100 ? prev + 4 : 100)),
1200, 1200,
) );
return () => clearInterval(timer) return () => clearInterval(timer);
}, []) }, []);
useEffect(() => { useEffect(() => {
const unlisten = listen('synchronized', async () => { const unlisten = listen("synchronized", async () => {
await queryClient.refetchQueries({ queryKey: ['chats'] }) await queryClient.refetchQueries({ queryKey: ["chats"] });
setIsSync(true) setIsSync(true);
}) });
return () => { return () => {
unlisten.then((f) => f()) unlisten.then((f) => f());
} };
}, []) }, []);
useEffect(() => { useEffect(() => {
const unlisten = listen<EventPayload>('event', async (data) => { const unlisten = listen<EventPayload>("event", async (data) => {
const event: NostrEvent = JSON.parse(data.payload.event) const event: NostrEvent = JSON.parse(data.payload.event);
const chats: NostrEvent[] = await queryClient.getQueryData(['chats']) const chats: NostrEvent[] = await queryClient.getQueryData(["chats"]);
if (chats) { if (chats) {
const index = chats.findIndex((item) => item.pubkey === event.pubkey) const index = chats.findIndex((item) => item.pubkey === event.pubkey);
if (index === -1) { if (index === -1) {
await queryClient.setQueryData( await queryClient.setQueryData(
['chats'], ["chats"],
(prevEvents: NostrEvent[]) => { (prevEvents: NostrEvent[]) => {
if (!prevEvents) return prevEvents if (!prevEvents) return prevEvents;
if (event.pubkey === account) return if (event.pubkey === account) return;
return [event, ...prevEvents] return [event, ...prevEvents];
}, },
) );
} else { } else {
const newEvents = [...chats] const newEvents = [...chats];
newEvents[index] = { newEvents[index] = {
...event, ...event,
} };
await queryClient.setQueryData(['chats'], newEvents) await queryClient.setQueryData(["chats"], newEvents);
} }
} }
}) });
return () => { return () => {
unlisten.then((f) => f()) unlisten.then((f) => f());
} };
}, []) }, []);
return ( return (
<ScrollArea.Root <ScrollArea.Root
type={'scroll'} type={"scroll"}
scrollHideDelay={300} scrollHideDelay={300}
className="relative overflow-hidden flex-1 w-full" className="relative overflow-hidden flex-1 w-full"
> >
@@ -190,8 +190,8 @@ function ChatList() {
<User.Provider pubkey={item.pubkey}> <User.Provider pubkey={item.pubkey}>
<User.Root <User.Root
className={cn( className={cn(
'flex items-center rounded-lg p-2 mb-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5', "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' : '', isActive ? "bg-black/5 dark:bg-white/5" : "",
)} )}
> >
<User.Avatar className="size-8 rounded-full" /> <User.Avatar className="size-8 rounded-full" />
@@ -199,7 +199,7 @@ function ChatList() {
<div className="inline-flex leading-tight"> <div className="inline-flex leading-tight">
<User.Name className="max-w-[8rem] truncate font-semibold" /> <User.Name className="max-w-[8rem] truncate font-semibold" />
<span className="ml-1.5 text-neutral-500"> <span className="ml-1.5 text-neutral-500">
{account === item.pubkey ? '(you)' : ''} {account === item.pubkey ? "(you)" : ""}
</span> </span>
</div> </div>
{isTransitioning ? ( {isTransitioning ? (
@@ -226,17 +226,18 @@ function ChatList() {
</ScrollArea.Scrollbar> </ScrollArea.Scrollbar>
<ScrollArea.Corner className="bg-transparent" /> <ScrollArea.Corner className="bg-transparent" />
</ScrollArea.Root> </ScrollArea.Root>
) );
} }
function SyncPopup({ progress }: { progress: number }) { function SyncPopup({ progress }: { progress: number }) {
return ( return (
<div className="absolute bottom-0 w-full p-4"> <div className="absolute bottom-0 w-full h-36 flex flex-col justify-end">
<div className="relative flex flex-col items-center gap-1.5"> <div className="absolute left-0 bottom-0 w-full h-32 gradient-mask-t-10 bg-white dark:bg-black" />
<div className="relative flex flex-col items-center gap-1.5 p-4">
<Progress.Root <Progress.Root
className="relative overflow-hidden bg-black/20 dark:bg-white/20 rounded-full w-full h-1" className="relative overflow-hidden bg-black/20 dark:bg-white/20 rounded-full w-full h-1"
style={{ style={{
transform: 'translateZ(0)', transform: "translateZ(0)",
}} }}
value={progress} value={progress}
> >
@@ -248,93 +249,93 @@ function SyncPopup({ progress }: { progress: number }) {
<span className="text-center text-xs">Syncing message...</span> <span className="text-center text-xs">Syncing message...</span>
</div> </div>
</div> </div>
) );
} }
function Compose() { function Compose() {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false);
const [target, setTarget] = useState('') const [target, setTarget] = useState("");
const [newMessage, setNewMessage] = useState('') const [newMessage, setNewMessage] = useState("");
const [isPending, startTransition] = useTransition() const [isPending, startTransition] = useTransition();
const { account } = Route.useParams() const { account } = Route.useParams();
const { isLoading, data: contacts } = useQuery({ const { isLoading, data: contacts } = useQuery({
queryKey: ['contacts', account], queryKey: ["contacts", account],
queryFn: async () => { queryFn: async () => {
const res = await commands.getContactList() const res = await commands.getContactList();
if (res.status === 'ok') { if (res.status === "ok") {
return res.data return res.data;
} else { } else {
return [] return [];
} }
}, },
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
enabled: isOpen, enabled: isOpen,
}) });
const navigate = Route.useNavigate() const navigate = Route.useNavigate();
const scrollRef = useRef<HTMLDivElement>(null) const scrollRef = useRef<HTMLDivElement>(null);
const pasteFromClipboard = async () => { const pasteFromClipboard = async () => {
const val = await readText() const val = await readText();
setTarget(val) setTarget(val);
} };
const sendMessage = () => { const sendMessage = () => {
startTransition(async () => { startTransition(async () => {
if (!newMessage.length) return if (!newMessage.length) return;
if (!target.length) return if (!target.length) return;
if (!target.startsWith('npub1')) { if (!target.startsWith("npub1")) {
await message('You must enter the public key as npub', { await message("You must enter the public key as npub", {
title: 'Send Message', title: "Send Message",
kind: 'error', kind: "error",
}) });
return return;
} }
const decoded = nip19.decode(target) const decoded = nip19.decode(target);
let id: string let id: string;
if (decoded.type !== 'npub') { if (decoded.type !== "npub") {
await message('You must enter the public key as npub', { await message("You must enter the public key as npub", {
title: 'Send Message', title: "Send Message",
kind: 'error', kind: "error",
}) });
return return;
} else { } else {
id = decoded.data id = decoded.data;
} }
// Connect to user's inbox relays // Connect to user's inbox relays
const connect = await commands.connectInboxRelays(target, false) const connect = await commands.connectInboxRelays(target, false);
// Send message // Send message
if (connect.status === 'ok') { if (connect.status === "ok") {
const res = await commands.sendMessage(id, newMessage) const res = await commands.sendMessage(id, newMessage);
if (res.status === 'ok') { if (res.status === "ok") {
setTarget('') setTarget("");
setNewMessage('') setNewMessage("");
setIsOpen(false) setIsOpen(false);
navigate({ navigate({
to: '/$account/chats/$id', to: "/$account/chats/$id",
params: { account, id }, params: { account, id },
}) });
} else { } else {
await message(res.error, { title: 'Send Message', kind: 'error' }) await message(res.error, { title: "Send Message", kind: "error" });
return return;
} }
} else { } else {
await message(connect.error, { await message(connect.error, {
title: 'Connect Inbox Relays', title: "Connect Inbox Relays",
kind: 'error', kind: "error",
}) });
return return;
}
})
} }
});
};
return ( return (
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}> <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
@@ -401,7 +402,7 @@ function Compose() {
</div> </div>
</div> </div>
<ScrollArea.Root <ScrollArea.Root
type={'scroll'} type={"scroll"}
scrollHideDelay={300} scrollHideDelay={300}
className="overflow-hidden flex-1 size-full" className="overflow-hidden flex-1 size-full"
> >
@@ -448,45 +449,45 @@ function Compose() {
</Dialog.Content> </Dialog.Content>
</Dialog.Portal> </Dialog.Portal>
</Dialog.Root> </Dialog.Root>
) );
} }
function CurrentUser() { function CurrentUser() {
const params = Route.useParams() const params = Route.useParams();
const navigate = Route.useNavigate() const navigate = Route.useNavigate();
const showContextMenu = useCallback(async (e: React.MouseEvent) => { const showContextMenu = useCallback(async (e: React.MouseEvent) => {
e.preventDefault() e.preventDefault();
const menuItems = await Promise.all([ const menuItems = await Promise.all([
MenuItem.new({ MenuItem.new({
text: 'Copy Public Key', text: "Copy Public Key",
action: async () => { action: async () => {
const npub = nip19.npubEncode(params.account) const npub = nip19.npubEncode(params.account);
await writeText(npub) await writeText(npub);
}, },
}), }),
MenuItem.new({ MenuItem.new({
text: 'Settings', text: "Settings",
action: () => navigate({ to: '/' }), action: () => navigate({ to: "/" }),
}), }),
MenuItem.new({ MenuItem.new({
text: 'Feedback', text: "Feedback",
action: async () => await open('https://github.com/lumehq/coop/issues'), action: async () => await open("https://github.com/lumehq/coop/issues"),
}), }),
PredefinedMenuItem.new({ item: 'Separator' }), PredefinedMenuItem.new({ item: "Separator" }),
MenuItem.new({ MenuItem.new({
text: 'Switch account', text: "Switch account",
action: () => navigate({ to: '/' }), action: () => navigate({ to: "/" }),
}), }),
]) ]);
const menu = await Menu.new({ const menu = await Menu.new({
items: menuItems, items: menuItems,
}) });
await menu.popup().catch((e) => console.error(e)) await menu.popup().catch((e) => console.error(e));
}, []) }, []);
return ( return (
<button <button
@@ -501,5 +502,5 @@ function CurrentUser() {
</User.Provider> </User.Provider>
<CaretDown className="size-3 text-neutral-600 dark:text-neutral-400" /> <CaretDown className="size-3 text-neutral-600 dark:text-neutral-400" />
</button> </button>
) );
} }