feat: improve popup visibility
This commit is contained in:
@@ -1,505 +1,506 @@
|
|||||||
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 (
|
||||||
<div className="size-full flex">
|
<div className="size-full flex">
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
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"
|
className="shrink-0 w-[280px] h-full flex flex-col justify-between border-r border-black/5 dark:border-white/5"
|
||||||
>
|
>
|
||||||
<Header />
|
<Header />
|
||||||
<ChatList />
|
<ChatList />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0 min-h-0 bg-white dark:bg-neutral-900 overflow-auto">
|
<div className="flex-1 min-w-0 min-h-0 bg-white dark:bg-neutral-900 overflow-auto">
|
||||||
<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 />
|
||||||
<div className="flex items-center justify-end gap-2">
|
<div className="flex items-center justify-end gap-2">
|
||||||
<Link
|
<Link
|
||||||
to="/$account/contacts"
|
to="/$account/contacts"
|
||||||
params={{ account }}
|
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"
|
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" />
|
<CirclesFour className="size-4" />
|
||||||
</Link>
|
</Link>
|
||||||
<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"
|
||||||
>
|
>
|
||||||
<ScrollArea.Viewport className="relative h-full px-1.5">
|
<ScrollArea.Viewport className="relative h-full px-1.5">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<>
|
<>
|
||||||
{[...Array(5).keys()].map((i) => (
|
{[...Array(5).keys()].map((i) => (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
className="flex items-center rounded-lg p-2 mb-1 gap-2"
|
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-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 className="size-4 w-20 rounded animate-pulse bg-black/10 dark:bg-white/10" />
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
) : isSync && !data.length ? (
|
) : isSync && !data.length ? (
|
||||||
<div className="p-2">
|
<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">
|
<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.
|
No chats.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
data.map((item) => (
|
data.map((item) => (
|
||||||
<Link
|
<Link
|
||||||
key={item.id + item.pubkey}
|
key={item.id + item.pubkey}
|
||||||
to="/$account/chats/$id"
|
to="/$account/chats/$id"
|
||||||
params={{ account, id: item.pubkey }}
|
params={{ account, id: item.pubkey }}
|
||||||
>
|
>
|
||||||
{({ isActive, isTransitioning }) => (
|
{({ isActive, isTransitioning }) => (
|
||||||
<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" />
|
||||||
<div className="flex-1 inline-flex items-center justify-between text-sm">
|
<div className="flex-1 inline-flex items-center justify-between text-sm">
|
||||||
<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 ? (
|
||||||
<Spinner className="size-4" />
|
<Spinner className="size-4" />
|
||||||
) : (
|
) : (
|
||||||
<span className="leading-tight text-right text-neutral-600 dark:text-neutral-400">
|
<span className="leading-tight text-right text-neutral-600 dark:text-neutral-400">
|
||||||
{ago(item.created_at)}
|
{ago(item.created_at)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</User.Root>
|
</User.Root>
|
||||||
</User.Provider>
|
</User.Provider>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</ScrollArea.Viewport>
|
</ScrollArea.Viewport>
|
||||||
{!isSync ? <SyncPopup progress={progress} /> : null}
|
{!isSync ? <SyncPopup progress={progress} /> : null}
|
||||||
<ScrollArea.Scrollbar
|
<ScrollArea.Scrollbar
|
||||||
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
||||||
orientation="vertical"
|
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.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.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" />
|
||||||
<Progress.Root
|
<div className="relative flex flex-col items-center gap-1.5 p-4">
|
||||||
className="relative overflow-hidden bg-black/20 dark:bg-white/20 rounded-full w-full h-1"
|
<Progress.Root
|
||||||
style={{
|
className="relative overflow-hidden bg-black/20 dark:bg-white/20 rounded-full w-full h-1"
|
||||||
transform: 'translateZ(0)',
|
style={{
|
||||||
}}
|
transform: "translateZ(0)",
|
||||||
value={progress}
|
}}
|
||||||
>
|
value={progress}
|
||||||
<Progress.Indicator
|
>
|
||||||
className="bg-blue-500 size-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
|
<Progress.Indicator
|
||||||
style={{ transform: `translateX(-${100 - progress}%)` }}
|
className="bg-blue-500 size-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
|
||||||
/>
|
style={{ transform: `translateX(-${100 - progress}%)` }}
|
||||||
</Progress.Root>
|
/>
|
||||||
<span className="text-center text-xs">Syncing message...</span>
|
</Progress.Root>
|
||||||
</div>
|
<span className="text-center text-xs">Syncing message...</span>
|
||||||
</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}>
|
||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="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"
|
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" />
|
<Plus className="size-4" weight="bold" />
|
||||||
</button>
|
</button>
|
||||||
</Dialog.Trigger>
|
</Dialog.Trigger>
|
||||||
<Dialog.Portal>
|
<Dialog.Portal>
|
||||||
<Dialog.Overlay className="bg-black/20 dark:bg-white/20 data-[state=open]:animate-overlay fixed inset-0" />
|
<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">
|
<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-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">
|
<div className="h-10 inline-flex items-center justify-between px-3.5 text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
||||||
<Dialog.Title>Send to</Dialog.Title>
|
<Dialog.Title>Send to</Dialog.Title>
|
||||||
<Dialog.Close asChild>
|
<Dialog.Close asChild>
|
||||||
<button type="button">
|
<button type="button">
|
||||||
<X className="size-4" />
|
<X className="size-4" />
|
||||||
</button>
|
</button>
|
||||||
</Dialog.Close>
|
</Dialog.Close>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1 px-3.5 border-b border-neutral-100 dark:border-neutral-800">
|
<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>
|
<span className="shrink-0 font-medium">To:</span>
|
||||||
<div className="flex-1 relative">
|
<div className="flex-1 relative">
|
||||||
<input
|
<input
|
||||||
placeholder="npub1..."
|
placeholder="npub1..."
|
||||||
value={target}
|
value={target}
|
||||||
onChange={(e) => setTarget(e.target.value)}
|
onChange={(e) => setTarget(e.target.value)}
|
||||||
disabled={isPending}
|
disabled={isPending}
|
||||||
className="w-full pr-14 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
className="w-full pr-14 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => pasteFromClipboard()}
|
onClick={() => pasteFromClipboard()}
|
||||||
className="absolute uppercase top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
|
className="absolute uppercase top-1/2 right-2 transform -translate-y-1/2 text-xs font-semibold text-blue-500"
|
||||||
>
|
>
|
||||||
Paste
|
Paste
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1 px-3.5 border-b border-neutral-100 dark:border-neutral-800">
|
<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>
|
<span className="shrink-0 font-medium">Message:</span>
|
||||||
<input
|
<input
|
||||||
placeholder="hello..."
|
placeholder="hello..."
|
||||||
value={newMessage}
|
value={newMessage}
|
||||||
onChange={(e) => setNewMessage(e.target.value)}
|
onChange={(e) => setNewMessage(e.target.value)}
|
||||||
disabled={isPending}
|
disabled={isPending}
|
||||||
className="flex-1 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
className="flex-1 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
disabled={isPending || isLoading || !newMessage.length}
|
disabled={isPending || isLoading || !newMessage.length}
|
||||||
onClick={() => sendMessage()}
|
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"
|
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"
|
||||||
>
|
>
|
||||||
{isPending ? (
|
{isPending ? (
|
||||||
<Spinner className="size-4" />
|
<Spinner className="size-4" />
|
||||||
) : (
|
) : (
|
||||||
<ArrowRight className="size-4" />
|
<ArrowRight className="size-4" />
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
</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"
|
||||||
>
|
>
|
||||||
<ScrollArea.Viewport
|
<ScrollArea.Viewport
|
||||||
ref={scrollRef}
|
ref={scrollRef}
|
||||||
className="relative h-full p-2"
|
className="relative h-full p-2"
|
||||||
>
|
>
|
||||||
<Virtualizer scrollRef={scrollRef} overscan={1}>
|
<Virtualizer scrollRef={scrollRef} overscan={1}>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="h-[400px] flex items-center justify-center">
|
<div className="h-[400px] flex items-center justify-center">
|
||||||
<Spinner className="size-4" />
|
<Spinner className="size-4" />
|
||||||
</div>
|
</div>
|
||||||
) : !contacts?.length ? (
|
) : !contacts?.length ? (
|
||||||
<div className="h-[400px] flex items-center justify-center">
|
<div className="h-[400px] flex items-center justify-center">
|
||||||
<p className="text-sm">Contact is empty.</p>
|
<p className="text-sm">Contact is empty.</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
contacts?.map((contact) => (
|
contacts?.map((contact) => (
|
||||||
<button
|
<button
|
||||||
key={contact}
|
key={contact}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setTarget(contact)}
|
onClick={() => setTarget(contact)}
|
||||||
className="block w-full p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800"
|
className="block w-full p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800"
|
||||||
>
|
>
|
||||||
<User.Provider pubkey={contact}>
|
<User.Provider pubkey={contact}>
|
||||||
<User.Root className="flex items-center gap-2">
|
<User.Root className="flex items-center gap-2">
|
||||||
<User.Avatar className="size-8 rounded-full" />
|
<User.Avatar className="size-8 rounded-full" />
|
||||||
<User.Name className="text-sm font-medium" />
|
<User.Name className="text-sm font-medium" />
|
||||||
</User.Root>
|
</User.Root>
|
||||||
</User.Provider>
|
</User.Provider>
|
||||||
</button>
|
</button>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</Virtualizer>
|
</Virtualizer>
|
||||||
</ScrollArea.Viewport>
|
</ScrollArea.Viewport>
|
||||||
<ScrollArea.Scrollbar
|
<ScrollArea.Scrollbar
|
||||||
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
|
||||||
orientation="vertical"
|
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.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.Scrollbar>
|
||||||
<ScrollArea.Corner className="bg-transparent" />
|
<ScrollArea.Corner className="bg-transparent" />
|
||||||
</ScrollArea.Root>
|
</ScrollArea.Root>
|
||||||
</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
|
||||||
type="button"
|
type="button"
|
||||||
onClick={(e) => showContextMenu(e)}
|
onClick={(e) => showContextMenu(e)}
|
||||||
className="h-8 inline-flex items-center gap-1.5"
|
className="h-8 inline-flex items-center gap-1.5"
|
||||||
>
|
>
|
||||||
<User.Provider pubkey={params.account}>
|
<User.Provider pubkey={params.account}>
|
||||||
<User.Root className="shrink-0">
|
<User.Root className="shrink-0">
|
||||||
<User.Avatar className="size-8 rounded-full" />
|
<User.Avatar className="size-8 rounded-full" />
|
||||||
</User.Root>
|
</User.Root>
|
||||||
</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>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user