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

wip: i'm tired

Browse Source
This commit is contained in:
reya
2024-11-05 10:19:51 +07:00
parent 605b847a66
commit 8525ac3fdd
9 changed files with 973 additions and 1009 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src-tauri/Cargo.lock generated
View File

@@ -2,39 +2,6 @@
# It is not intended for manual editing. # It is not intended for manual editing.
version = 3 version = 3
[[package]]
name = "COOP"
version = "0.2.0"
dependencies = [
"border",
"futures",
"itertools 0.13.0",
"keyring",
"keyring-search",
"nostr-connect",
"nostr-sdk",
"serde",
"serde_json",
"specta",
"specta-typescript",
"tauri",
"tauri-build",
"tauri-plugin-clipboard-manager",
"tauri-plugin-decorum",
"tauri-plugin-dialog",
"tauri-plugin-fs",
"tauri-plugin-notification",
"tauri-plugin-os",
"tauri-plugin-prevent-default",
"tauri-plugin-process",
"tauri-plugin-shell",
"tauri-plugin-store",
"tauri-plugin-updater",
"tauri-specta",
"tokio",
"tracing-subscriber",
]
[[package]] [[package]]
name = "Inflector" name = "Inflector"
version = "0.11.4" version = "0.11.4"
@@ -1006,6 +973,39 @@ version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "6245d59a3e82a7fc217c5828a6692dbc6dfb63a0c8c90495621f7b9d79704a0e" checksum = "6245d59a3e82a7fc217c5828a6692dbc6dfb63a0c8c90495621f7b9d79704a0e"
[[package]]
name = "coop"
version = "0.2.0"
dependencies = [
"border",
"futures",
"itertools 0.13.0",
"keyring",
"keyring-search",
"nostr-connect",
"nostr-sdk",
"serde",
"serde_json",
"specta",
"specta-typescript",
"tauri",
"tauri-build",
"tauri-plugin-clipboard-manager",
"tauri-plugin-decorum",
"tauri-plugin-dialog",
"tauri-plugin-fs",
"tauri-plugin-notification",
"tauri-plugin-os",
"tauri-plugin-prevent-default",
"tauri-plugin-process",
"tauri-plugin-shell",
"tauri-plugin-store",
"tauri-plugin-updater",
"tauri-specta",
"tokio",
"tracing-subscriber",
]
[[package]] [[package]]
name = "core-foundation" name = "core-foundation"
version = "0.9.4" version = "0.9.4"

2
src-tauri/Cargo.toml
View File

@@ -1,5 +1,5 @@
[package] [package]
name = "COOP" name = "coop"
version = "0.2.0" version = "0.2.0"
description = "direct message client for desktop" description = "direct message client for desktop"
authors = ["npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445"] authors = ["npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445"]

33
src-tauri/src/commands/account.rs
View File

@@ -328,6 +328,13 @@ pub async fn login(
for url in urls.iter() { for url in urls.iter() {
let _ = client.add_relay(url).await; let _ = client.add_relay(url).await;
let _ = client.connect_relay(url).await; let _ = client.connect_relay(url).await;
// Workaround for https://github.com/rust-nostr/nostr/issues/509
// TODO: remove
let filter = Filter::new().kind(Kind::TextNote).limit(0);
let _ = client
.fetch_events_from(vec![url], vec![filter], Some(Duration::from_secs(3)))
.await;
} }
let mut inbox_relays = state.inbox_relays.write().await; let mut inbox_relays = state.inbox_relays.write().await;
@@ -341,34 +348,32 @@ pub async fn login(
let inbox_relays = state.inbox_relays.read().await; let inbox_relays = state.inbox_relays.read().await;
let relays = inbox_relays.get(&public_key).unwrap().to_owned(); let relays = inbox_relays.get(&public_key).unwrap().to_owned();
let sub_id = SubscriptionId::new(SUBSCRIPTION_ID); let subscription_id = SubscriptionId::new(SUBSCRIPTION_ID);
// Create a filter for getting new message
let new_message = Filter::new() let new_message = Filter::new()
.kind(Kind::GiftWrap) .kind(Kind::GiftWrap)
.pubkey(public_key) .pubkey(public_key)
.limit(0); .limit(0);
// Subscribe for new message
if let Err(e) = client if let Err(e) = client
.subscribe_with_id_to(&relays, sub_id, vec![new_message], None) .subscribe_with_id_to(&relays, subscription_id, vec![new_message], None)
.await .await
{ {
println!("Subscribe error: {}", e) println!("Subscribe error: {}", e)
}; };
let filter = Filter::new() // Create a filter for getting all gift wrapped events send to current user
.kind(Kind::GiftWrap) let filter = Filter::new().kind(Kind::GiftWrap).pubkey(public_key);
.pubkey(public_key)
.limit(200);
let mut rx = client let opts = SubscribeAutoCloseOptions::default().filter(
.stream_events_from(&relays, vec![filter], Some(Duration::from_secs(40))) FilterOptions::WaitDurationAfterEOSE(Duration::from_secs(10)),
.await );
.unwrap();
while let Some(event) = rx.next().await { if let Ok(output) = client.subscribe_to(&relays, vec![filter], Some(opts)).await {
println!("Event: {}", event.as_json()); println!("Output: {:?}", output)
} }
// handle.emit("synchronized", ()).unwrap();
}); });
Ok(public_key.to_hex()) Ok(public_key.to_hex())

11
src-tauri/src/commands/relay.rs
View File

@@ -175,6 +175,17 @@ pub async fn connect_inbox_relays(
let _ = client.add_relay(&url).await; let _ = client.add_relay(&url).await;
let _ = client.connect_relay(&url).await; let _ = client.connect_relay(&url).await;
// Workaround for https://github.com/rust-nostr/nostr/issues/509
// TODO: remove
let filter = Filter::new().kind(Kind::TextNote).limit(0);
let _ = client
.fetch_events_from(
vec![url.clone()],
vec![filter],
Some(Duration::from_secs(3)),
)
.await;
relays.push(url) relays.push(url)
} }
} }

148
src-tauri/src/main.rs
View File

@@ -104,51 +104,51 @@ fn main() {
main_window.add_border(None); main_window.add_border(None);
// Setup tray menu item // Setup tray menu item
let open_i = MenuItem::with_id(app, "open", "Open COOP", true, None::<&str>)?; let open_i = MenuItem::with_id(app, "open", "Open COOP", true, None::<&str>)?;
let quit_i = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?; let quit_i = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;
// Create tray menu // Create tray menu
let menu = Menu::with_items(app, &[&open_i, &quit_i])?; let menu = Menu::with_items(app, &[&open_i, &quit_i])?;
// Get main tray // Get main tray
let tray = app.tray_by_id("main").unwrap(); let tray = app.tray_by_id("main").unwrap();
// Set menu // Set menu
tray.set_menu(Some(menu)).unwrap(); tray.set_menu(Some(menu)).unwrap();
// Listen to tray events // Listen to tray events
tray.on_menu_event(|handle, event| match event.id().as_ref() { tray.on_menu_event(|handle, event| match event.id().as_ref() {
"open" => { "open" => {
if let Some(window) = handle.get_webview_window("main") { if let Some(window) = handle.get_webview_window("main") {
if window.is_visible().unwrap_or_default() { if window.is_visible().unwrap_or_default() {
let _ = window.set_focus(); let _ = window.set_focus();
} else { } else {
let _ = window.show(); let _ = window.show();
let _ = window.set_focus(); let _ = window.set_focus();
}; };
} else { } else {
let window = WebviewWindowBuilder::from_config( let window = WebviewWindowBuilder::from_config(
handle, handle,
handle.config().app.windows.first().unwrap(), handle.config().app.windows.first().unwrap(),
) )
.unwrap() .unwrap()
.build() .build()
.unwrap(); .unwrap();
// Set decoration // Set decoration
#[cfg(target_os = "windows")] #[cfg(target_os = "windows")]
window.create_overlay_titlebar().unwrap(); window.create_overlay_titlebar().unwrap();
// Restore native border // Restore native border
#[cfg(target_os = "macos")] #[cfg(target_os = "macos")]
window.add_border(None); window.add_border(None);
// Set a custom inset to the traffic lights // Set a custom inset to the traffic lights
#[cfg(target_os = "macos")] #[cfg(target_os = "macos")]
window.set_traffic_lights_inset(12.0, 18.0).unwrap(); window.set_traffic_lights_inset(12.0, 18.0).unwrap();
} }
} }
"quit" => { "quit" => {
std::process::exit(0); std::process::exit(0);
} }
_ => {} _ => {}
}); });
let client = tauri::async_runtime::block_on(async move { let client = tauri::async_runtime::block_on(async move {
// Get config directory // Get config directory
@@ -163,10 +163,7 @@ fn main() {
.expect("Error: cannot create database."); .expect("Error: cannot create database.");
// Config // Config
let opts = Options::new() let opts = Options::new().gossip(true).max_avg_latency(Duration::from_millis(500));
.gossip(true)
.automatic_authentication(false)
.max_avg_latency(Duration::from_millis(500));
// Setup nostr client // Setup nostr client
let client = ClientBuilder::default() let client = ClientBuilder::default()
@@ -207,6 +204,7 @@ fn main() {
// Connect // Connect
client.connect().await; client.connect().await;
// Return nostr client
client client
}); });
@@ -271,30 +269,13 @@ fn main() {
let _ = client let _ = client
.handle_notifications(|notification| async { .handle_notifications(|notification| async {
#[allow(clippy::collapsible_match)] #[allow(clippy::collapsible_match)]
if let RelayPoolNotification::Message { message, relay_url, .. } = notification { if let RelayPoolNotification::Message { message, .. } = notification {
if let RelayMessage::Auth { challenge } = message { if let RelayMessage::Event { event, subscription_id, .. } = message {
match client.auth(challenge, relay_url.clone()).await {
Ok(..) => {
if let Ok(relay) = client.relay(relay_url).await {
if let Err(e) = relay.resubscribe().await {
println!("Resubscribe error: {}", e)
}
// Workaround for https://github.com/rust-nostr/nostr/issues/509
// TODO: remove
let filter = Filter::new().kind(Kind::TextNote).limit(0);
let _ = client.fetch_events(vec![filter], Some(Duration::from_secs(1))).await;
}
}
Err(e) => {
println!("Auth error: {}", e)
}
}
} else if let RelayMessage::Event { event, .. } = message {
if event.kind == Kind::GiftWrap { if event.kind == Kind::GiftWrap {
if let Ok(UnwrappedGift { rumor, sender }) = if let Ok(UnwrappedGift { rumor, sender }) =
client.unwrap_gift_wrap(&event).await client.unwrap_gift_wrap(&event).await
{ {
let subscription_id = subscription_id.to_string();
let mut rumor_clone = rumor.clone(); let mut rumor_clone = rumor.clone();
// Compute event id if not exist // Compute event id if not exist
@@ -312,25 +293,32 @@ fn main() {
// Save rumor to database to further query // Save rumor to database to further query
if let Err(e) = client.database().save_event(&ev).await { if let Err(e) = client.database().save_event(&ev).await {
println!("[save event] error: {}", e) println!("Error: {}", e)
} }
// Emit new event to frontend if subscription_id == SUBSCRIPTION_ID {
if let Err(e) = handle.emit( // Emit new message to current chat screen
"event", if let Err(e) = handle.emit(
EventPayload { "event",
event: rumor.as_json(), EventPayload {
sender: sender.to_hex(), event: rumor.as_json(),
}, sender: sender.to_hex(),
) { },
println!("[emit] error: {}", e) ) {
println!("Emit error: {}", e)
}
} else {
// Emit new message to home screen
if let Err(e) = handle.emit("synchronized", ()) {
println!("Emit error: {}", e)
}
} }
} }
} else if event.kind == Kind::Metadata { } else if event.kind == Kind::Metadata {
if let Err(e) = handle.emit("metadata", event.as_json()) { if let Err(e) = handle.emit("metadata", event.as_json()) {
println!("Emit error: {}", e) println!("Emit error: {}", e)
} }
} }
} }
} }
Ok(false) Ok(false)

167
src-tauri/tauri.conf.json
View File

@@ -1,86 +1,85 @@
{ {
"productName": "COOP", "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
"version": "0.2.0", "productName": "Coop",
"identifier": "su.reya.coop", "version": "0.2.0",
"build": { "identifier": "su.reya.coop",
"beforeDevCommand": "pnpm dev", "build": {
"devUrl": "http://localhost:1420", "beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm build", "devUrl": "http://localhost:1420",
"frontendDist": "../dist" "beforeBuildCommand": "pnpm build",
}, "frontendDist": "../dist"
"app": { },
"macOSPrivateApi": true, "app": {
"withGlobalTauri": true, "macOSPrivateApi": true,
"security": { "withGlobalTauri": true,
"assetProtocol": { "security": {
"enable": true, "assetProtocol": {
"scope": [ "enable": true,
"$APPDATA/*", "scope": [
"$DATA/*", "$APPDATA/*",
"$LOCALDATA/*", "$DATA/*",
"$DESKTOP/*", "$LOCALDATA/*",
"$DOCUMENT/*", "$DESKTOP/*",
"$DOWNLOAD/*", "$DOCUMENT/*",
"$HOME/*", "$DOWNLOAD/*",
"$PICTURE/*", "$HOME/*",
"$PUBLIC/*", "$PICTURE/*",
"$VIDEO/*", "$PUBLIC/*",
"$APPCONFIG/*", "$VIDEO/*",
"$RESOURCE/*" "$APPCONFIG/*",
] "$RESOURCE/*"
} ]
}, }
"trayIcon": { },
"id": "main", "trayIcon": {
"iconPath": "./icons/32x32.png", "id": "main",
"iconAsTemplate": true, "iconPath": "./icons/32x32.png",
"menuOnLeftClick": true "iconAsTemplate": true,
} "menuOnLeftClick": true
}, }
"bundle": { },
"homepage": "https://coop.reya.su", "bundle": {
"longDescription": "A direct message nostr client for desktop.", "homepage": "https://coop.reya.su",
"shortDescription": "Nostr NIP-17 client", "longDescription": "A direct message nostr client for desktop.",
"targets": "all", "shortDescription": "Nostr NIP-17 client",
"active": true, "targets": "all",
"category": "SocialNetworking", "active": true,
"resources": [ "category": "SocialNetworking",
"resources/*" "resources": ["resources/*"],
], "icon": [
"icon": [ "icons/32x32.png",
"icons/32x32.png", "icons/128x128.png",
"icons/128x128.png", "icons/128x128@2x.png",
"icons/128x128@2x.png", "icons/icon.icns",
"icons/icon.icns", "icons/icon.ico"
"icons/icon.ico" ],
], "linux": {
"linux": { "appimage": {
"appimage": { "bundleMediaFramework": true,
"bundleMediaFramework": true, "files": {}
"files": {} },
}, "deb": {
"deb": { "files": {}
"files": {} },
}, "rpm": {
"rpm": { "epoch": 0,
"epoch": 0, "files": {},
"files": {}, "release": "1"
"release": "1" }
} },
}, "macOS": {
"macOS": { "minimumSystemVersion": "10.15"
"minimumSystemVersion": "10.15" },
}, "createUpdaterArtifacts": true
"createUpdaterArtifacts": true },
}, "plugins": {
"plugins": { "updater": {
"updater": { "active": true,
"active": true, "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEY2OUJBNzZDOUYwNzREOApSV1RZZFBESmRycHBEMDV0NVZodllibXZNT21YTXBVOG1kRjdpUEpVS1ZkOGVuT295RENrWkpBRAo=",
"pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEY2OUJBNzZDOUYwNzREOApSV1RZZFBESmRycHBEMDV0NVZodllibXZNT21YTXBVOG1kRjdpUEpVS1ZkOGVuT295RENrWkpBRAo=", "endpoints": [
"endpoints": [ "https://releases.coop-updater-service.workers.dev/check/lumehq/coop/{{target}}/{{arch}}/{{current_version}}",
"https://releases.coop-updater-service.workers.dev/check/lumehq/coop/{{target}}/{{arch}}/{{current_version}}", "https://github.com/lumehq/coop/releases/latest/download/latest.json"
"https://github.com/lumehq/coop/releases/latest/download/latest.json" ]
] }
} }
}
} }

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

@@ -11,399 +11,399 @@ import { listen } from "@tauri-apps/api/event";
import { message } from "@tauri-apps/plugin-dialog"; import { message } from "@tauri-apps/plugin-dialog";
import type { NostrEvent } from "nostr-tools"; import type { NostrEvent } from "nostr-tools";
import { import {
type Dispatch, type Dispatch,
type RefObject, type RefObject,
type SetStateAction, type SetStateAction,
useCallback, useCallback,
useRef, useRef,
useState, useState,
useTransition, useTransition,
} from "react"; } from "react";
import { useEffect } from "react"; import { useEffect } from "react";
import { Virtualizer, type VirtualizerHandle } from "virtua"; import { Virtualizer, type VirtualizerHandle } from "virtua";
type EventPayload = { type EventPayload = {
event: string; event: string;
sender: string; sender: string;
}; };
export const Route = createLazyFileRoute("/$account/_layout/chats/$id")({ export const Route = createLazyFileRoute("/$account/_layout/chats/$id")({
component: Screen, component: Screen,
}); });
function Screen() { function Screen() {
return ( return (
<div className="size-full flex flex-col"> <div className="size-full flex flex-col">
<Header /> <Header />
<List /> <List />
<Form /> <Form />
</div> </div>
); );
} }
function Header() { function Header() {
const { account, id } = Route.useParams(); const { account, id } = Route.useParams();
const { platform } = Route.useRouteContext(); const { platform } = Route.useRouteContext();
return ( return (
<div <div
data-tauri-drag-region data-tauri-drag-region
className={cn( className={cn(
"h-12 shrink-0 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-800", "h-12 shrink-0 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-800",
platform === "windows" ? "pl-3.5 pr-[150px]" : "px-3.5", platform === "windows" ? "pl-3.5 pr-[150px]" : "px-3.5",
)} )}
> >
<div className="z-[200]"> <div className="z-[200]">
<div className="flex -space-x-1 overflow-hidden"> <div className="flex -space-x-1 overflow-hidden">
<User.Provider pubkey={account}> <User.Provider pubkey={account}>
<User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900"> <User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">
<User.Avatar className="size-8 rounded-full" /> <User.Avatar className="size-8 rounded-full" />
</User.Root> </User.Root>
</User.Provider> </User.Provider>
<User.Provider pubkey={id}> <User.Provider pubkey={id}>
<User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900"> <User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">
<User.Avatar className="size-8 rounded-full" /> <User.Avatar className="size-8 rounded-full" />
</User.Root> </User.Root>
</User.Provider> </User.Provider>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="h-7 inline-flex items-center justify-center gap-1.5 px-2 rounded-full bg-neutral-100 dark:bg-neutral-900"> <div className="h-7 inline-flex items-center justify-center gap-1.5 px-2 rounded-full bg-neutral-100 dark:bg-neutral-900">
<span className="relative flex size-2"> <span className="relative flex size-2">
<span className="animate-ping absolute inline-flex size-full rounded-full bg-teal-400 opacity-75" /> <span className="animate-ping absolute inline-flex size-full rounded-full bg-teal-400 opacity-75" />
<span className="relative inline-flex rounded-full size-2 bg-teal-500" /> <span className="relative inline-flex rounded-full size-2 bg-teal-500" />
</span> </span>
<div className="text-xs leading-tight">Connected</div> <div className="text-xs leading-tight">Connected</div>
</div> </div>
</div> </div>
</div> </div>
); );
} }
function List() { function List() {
const { account, id } = Route.useParams(); const { account, id } = Route.useParams();
const { isLoading, isError, data } = useQuery({ const { isLoading, isError, data } = useQuery({
queryKey: ["chats", id], queryKey: ["chats", id],
queryFn: async () => { queryFn: async () => {
const res = await commands.getChatMessages(id); const res = await commands.getChatMessages(id);
if (res.status === "ok") { if (res.status === "ok") {
const raw = res.data; const raw = res.data;
const events: NostrEvent[] = raw.map((item) => JSON.parse(item)); const events: NostrEvent[] = raw.map((item) => JSON.parse(item));
return events; return events;
} else { } else {
throw new Error(res.error); throw new Error(res.error);
} }
}, },
select: (data) => { select: (data) => {
const groups = groupEventByDate(data); const groups = groupEventByDate(data);
return Object.entries(groups).reverse(); return Object.entries(groups).reverse();
}, },
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
}); });
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const ref = useRef<VirtualizerHandle>(null); const ref = useRef<VirtualizerHandle>(null);
const shouldStickToBottom = useRef(true); const shouldStickToBottom = useRef(true);
const renderItem = useCallback( const renderItem = useCallback(
(item: NostrEvent, idx: number) => { (item: NostrEvent, idx: number) => {
const self = account === item.pubkey; const self = account === item.pubkey;
return ( return (
<div <div
key={idx + item.id} key={idx + item.id}
className="flex items-center justify-between gap-3 my-1.5 px-3 border-l-2 border-transparent hover:border-blue-400" className="flex items-center justify-between gap-3 my-1.5 px-3 border-l-2 border-transparent hover:border-blue-400"
> >
<div <div
className={cn( className={cn(
"flex-1 min-w-0 inline-flex", "flex-1 min-w-0 inline-flex",
self ? "justify-end" : "justify-start", self ? "justify-end" : "justify-start",
)} )}
> >
<div <div
className={cn( className={cn(
"select-text py-2 px-3 w-fit max-w-[400px] text-pretty break-message", "select-text py-2 px-3 w-fit max-w-[400px] text-pretty break-message",
!self !self
? "bg-neutral-100 dark:bg-neutral-800 rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md" ? "bg-neutral-100 dark:bg-neutral-800 rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md"
: "bg-blue-500 text-white rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl", : "bg-blue-500 text-white rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl",
)} )}
> >
<Message text={item.content} /> <Message text={item.content} />
</div> </div>
</div> </div>
<div className="shrink-0 w-16 flex items-center justify-end"> <div className="shrink-0 w-16 flex items-center justify-end">
<span className="text-xs text-right text-neutral-600 dark:text-neutral-400"> <span className="text-xs text-right text-neutral-600 dark:text-neutral-400">
{time(item.created_at)} {time(item.created_at)}
</span> </span>
</div> </div>
</div> </div>
); );
}, },
[data], [data],
); );
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 sender = data.payload.sender; const sender = data.payload.sender;
const receivers = getReceivers(event.tags); const receivers = getReceivers(event.tags);
const group = [account, id]; const group = [account, id];
if (!group.includes(sender)) return; if (!group.includes(sender)) return;
if (!group.some((item) => receivers.includes(item))) return; if (!group.some((item) => receivers.includes(item))) return;
queryClient.setQueryData(["chats", id], (prevEvents: NostrEvent[]) => { queryClient.setQueryData(["chats", id], (prevEvents: NostrEvent[]) => {
if (!prevEvents) return [event]; if (!prevEvents) return [event];
return [event, ...prevEvents]; return [event, ...prevEvents];
}); });
await queryClient.invalidateQueries({ queryKey: ["chats", id] }); await queryClient.invalidateQueries({ queryKey: ["chats", id] });
}); });
return () => { return () => {
unlisten.then((f) => f()); unlisten.then((f) => f());
}; };
}, [account, id]); }, [account, id]);
useEffect(() => { useEffect(() => {
if (!data?.length) return; if (!data?.length) return;
if (!ref.current) return; if (!ref.current) return;
if (!shouldStickToBottom.current) return; if (!shouldStickToBottom.current) return;
ref.current.scrollToIndex(data.length - 1, { ref.current.scrollToIndex(data.length - 1, {
align: "end", align: "end",
}); });
}, [data]); }, [data]);
return ( return (
<ScrollArea.Root <ScrollArea.Root
type={"scroll"} type={"scroll"}
scrollHideDelay={300} scrollHideDelay={300}
className="overflow-hidden flex-1 w-full" className="overflow-hidden flex-1 w-full"
> >
<ScrollArea.Viewport <ScrollArea.Viewport
ref={scrollRef} ref={scrollRef}
className="relative h-full py-2 [&>div]:!flex [&>div]:flex-col [&>div]:justify-end [&>div]:min-h-full" className="relative h-full py-2 [&>div]:!flex [&>div]:flex-col [&>div]:justify-end"
> >
<Virtualizer <Virtualizer
scrollRef={scrollRef as unknown as RefObject<HTMLElement>} scrollRef={scrollRef as unknown as RefObject<HTMLElement>}
ref={ref} ref={ref}
shift={true} shift={true}
onScroll={(offset) => { onScroll={(offset) => {
if (!ref.current) return; if (!ref.current) return;
shouldStickToBottom.current = shouldStickToBottom.current =
offset - ref.current.scrollSize + ref.current.viewportSize >= offset - ref.current.scrollSize + ref.current.viewportSize >=
-1.5; -1.5;
}} }}
> >
{isLoading ? ( {isLoading ? (
<> <>
<div className="flex items-center gap-3 my-1.5 px-3"> <div className="flex items-center gap-3 my-1.5 px-3">
<div className="flex-1 min-w-0 inline-flex"> <div className="flex-1 min-w-0 inline-flex">
<div className="w-44 h-[35px] py-2 max-w-[400px] bg-neutral-100 dark:bg-neutral-800 animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md" /> <div className="w-44 h-[35px] py-2 max-w-[400px] bg-neutral-100 dark:bg-neutral-800 animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-3xl rounded-bl-md" />
</div> </div>
</div> </div>
<div className="flex items-center gap-3 my-1.5 px-3"> <div className="flex items-center gap-3 my-1.5 px-3">
<div className="flex-1 min-w-0 inline-flex justify-end"> <div className="flex-1 min-w-0 inline-flex justify-end">
<div className="w-44 h-[35px] py-2 max-w-[400px] bg-blue-500 text-white animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl" /> <div className="w-44 h-[35px] py-2 max-w-[400px] bg-blue-500 text-white animate-pulse rounded-tl-3xl rounded-tr-3xl rounded-br-md rounded-bl-3xl" />
</div> </div>
</div> </div>
</> </>
) : isError ? ( ) : isError ? (
<div className="w-full h-56 flex items-center justify-center"> <div className="w-full h-56 flex items-center justify-center">
<div className="text-sm flex items-center gap-1.5"> <div className="text-sm flex items-center gap-1.5">
Cannot load message. Please try again later. Cannot load message. Please try again later.
</div> </div>
</div> </div>
) : !data?.length ? ( ) : !data?.length ? (
<div className="h-20 flex items-center justify-center"> <div className="h-20 flex items-center justify-center">
<CoopIcon className="size-10 text-neutral-200 dark:text-neutral-800" /> <CoopIcon className="size-10 text-neutral-200 dark:text-neutral-800" />
</div> </div>
) : ( ) : (
data?.map((item) => ( data?.map((item) => (
<div <div
key={item[0]} key={item[0]}
className="w-full flex flex-col items-center mt-3 gap-3" className="w-full flex flex-col items-center mt-3 gap-3"
> >
<div className="text-xs text-center text-neutral-600 dark:text-neutral-400"> <div className="text-xs text-center text-neutral-600 dark:text-neutral-400">
{item[0]} {item[0]}
</div> </div>
<div className="w-full"> <div className="w-full">
{item[1] {item[1]
? item[1] ? item[1]
.sort((a, b) => a.created_at - b.created_at) .sort((a, b) => a.created_at - b.created_at)
.map((item, idx) => renderItem(item, idx)) .map((item, idx) => renderItem(item, idx))
: null} : null}
</div> </div>
</div> </div>
)) ))
)} )}
</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>
); );
} }
function Message({ text }: { text: string }) { function Message({ text }: { text: string }) {
const delimiter = const delimiter =
/((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi; /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;
return ( return (
<> <>
{text.split(delimiter).map((word) => { {text.split(delimiter).map((word) => {
const match = word.match(delimiter); const match = word.match(delimiter);
if (match) { if (match) {
const url = match[0]; const url = match[0];
return ( return (
<a <a
href={url.startsWith("http") ? url : `http://${url}`} href={url.startsWith("http") ? url : `http://${url}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="underline" className="underline"
> >
{url} {url}
</a> </a>
); );
} }
return word; return word;
})} })}
</> </>
); );
} }
function Form() { function Form() {
const { id } = Route.useParams(); const { id } = Route.useParams();
const inboxRelays = Route.useLoaderData(); const inboxRelays = Route.useLoaderData();
const [newMessage, setNewMessage] = useState(""); const [newMessage, setNewMessage] = useState("");
const [attaches, setAttaches] = useState<string[]>([]); const [attaches, setAttaches] = useState<string[]>([]);
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
const remove = (item: string) => { const remove = (item: string) => {
setAttaches((prev) => prev.filter((att) => att !== item)); setAttaches((prev) => prev.filter((att) => att !== item));
}; };
const submit = () => { const submit = () => {
startTransition(async () => { startTransition(async () => {
if (!newMessage.length) return; if (!newMessage.length) return;
const content = `${newMessage}\r\n${attaches.join("\r\n")}`; const content = `${newMessage}\r\n${attaches.join("\r\n")}`;
const res = await commands.sendMessage(id, content); const res = await commands.sendMessage(id, content);
if (res.status === "error") { if (res.status === "error") {
await message(res.error, { await message(res.error, {
title: "Send mesaage failed", title: "Send mesaage failed",
kind: "error", kind: "error",
}); });
return; return;
} }
setNewMessage(""); setNewMessage("");
setAttaches([]); setAttaches([]);
}); });
}; };
return ( return (
<div className="shrink-0 flex items-center justify-center px-3.5"> <div className="shrink-0 flex items-center justify-center px-3.5">
{!inboxRelays.length ? ( {!inboxRelays.length ? (
<div className="text-xs"> <div className="text-xs">
This user doesn't have inbox relays. You cannot send messages to them. This user doesn't have inbox relays. You cannot send messages to them.
</div> </div>
) : ( ) : (
<div className="flex-1 flex flex-col justify-end"> <div className="flex-1 flex flex-col justify-end">
{attaches?.length ? ( {attaches?.length ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{attaches.map((item, index) => ( {attaches.map((item, index) => (
<button <button
type="button" type="button"
key={item} key={item}
onClick={() => remove(item)} onClick={() => remove(item)}
className="relative" className="relative"
> >
<img <img
src={item} src={item}
alt={`File ${index}`} alt={`File ${index}`}
className="aspect-square w-16 object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/10 dark:outline-black/50" className="aspect-square w-16 object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/10 dark:outline-black/50"
loading="lazy" loading="lazy"
decoding="async" decoding="async"
/> />
<span className="absolute -top-2 -right-2 size-4 flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 rounded-full border border-neutral-200 dark:border-neutral-800"> <span className="absolute -top-2 -right-2 size-4 flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 rounded-full border border-neutral-200 dark:border-neutral-800">
<X className="size-2" /> <X className="size-2" />
</span> </span>
</button> </button>
))} ))}
</div> </div>
) : null} ) : null}
<div className="h-12 w-full flex items-center gap-2"> <div className="h-12 w-full flex items-center gap-2">
<div className="inline-flex gap-1"> <div className="inline-flex gap-1">
<AttachMedia onUpload={setAttaches} /> <AttachMedia onUpload={setAttaches} />
</div> </div>
<input <input
placeholder="Message..." placeholder="Message..."
value={newMessage} value={newMessage}
onChange={(e) => setNewMessage(e.target.value)} onChange={(e) => setNewMessage(e.target.value)}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter") submit(); if (e.key === "Enter") submit();
}} }}
className="flex-1 h-9 rounded-full px-3.5 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:outline-none focus:border-blue-500 placeholder:text-neutral-400 dark:placeholder:text-neutral-600" className="flex-1 h-9 rounded-full px-3.5 bg-transparent border border-neutral-200 dark:border-neutral-800 focus:outline-none focus:border-blue-500 placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
/> />
<button <button
type="button" type="button"
title="Send message" title="Send message"
disabled={isPending} disabled={isPending}
onClick={() => submit()} onClick={() => submit()}
className="rounded-full size-9 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-9 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 ? <Spinner /> : <ArrowUp className="size-5" />} {isPending ? <Spinner /> : <ArrowUp className="size-5" />}
</button> </button>
</div> </div>
</div> </div>
)} )}
</div> </div>
); );
} }
function AttachMedia({ function AttachMedia({
onUpload, onUpload,
}: { }: {
onUpload: Dispatch<SetStateAction<string[]>>; onUpload: Dispatch<SetStateAction<string[]>>;
}) { }) {
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
const attach = () => { const attach = () => {
startTransition(async () => { startTransition(async () => {
const file = await upload(); const file = await upload();
if (file) { if (file) {
onUpload((prev) => [...prev, file]); onUpload((prev) => [...prev, file]);
} else { } else {
return; return;
} }
}); });
}; };
return ( return (
<button <button
type="button" type="button"
title="Attach media" title="Attach media"
onClick={() => attach()} onClick={() => attach()}
className="size-9 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full" className="size-9 inline-flex items-center justify-center hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full"
> >
{isPending ? ( {isPending ? (
<Spinner className="size-4" /> <Spinner className="size-4" />
) : ( ) : (
<Paperclip className="size-5" /> <Paperclip className="size-5" />
)} )}
</button> </button>
); );
} }

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

@@ -3,14 +3,13 @@ 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 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";
@@ -21,500 +20,462 @@ 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 { import {
type RefObject, type RefObject,
useCallback, useCallback,
useEffect, useEffect,
useRef, useRef,
useState, useState,
useTransition, useTransition,
} from "react"; } 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); useEffect(() => {
const [progress, setProgress] = useState(0); const unlisten = listen("synchronized", async () => {
await queryClient.invalidateQueries({ queryKey: ["chats"] });
});
useEffect(() => { return () => {
const timer = setInterval( unlisten.then((f) => f());
() => setProgress((prev) => (prev <= 100 ? prev + 4 : 100)), };
1200, }, []);
);
return () => clearInterval(timer);
}, []);
useEffect(() => { useEffect(() => {
const unlisten = listen("synchronized", async () => { const unlisten = listen<EventPayload>("event", async (data) => {
await queryClient.refetchQueries({ queryKey: ["chats"] }); const chats: NostrEvent[] | undefined = await queryClient.getQueryData([
setIsSync(true); "chats",
}); ]);
return () => { if (chats) {
unlisten.then((f) => f()); const event: NostrEvent = JSON.parse(data.payload.event);
}; const index = chats.findIndex((item) => item.pubkey === event.pubkey);
}, []);
useEffect(() => { if (index === -1) {
const unlisten = listen<EventPayload>("event", async (data) => { queryClient.setQueryData(["chats"], (prevEvents: NostrEvent[]) => {
const chats: NostrEvent[] | undefined = await queryClient.getQueryData([ if (!prevEvents) return prevEvents;
"chats", if (event.pubkey === account) return;
]);
if (chats) { return [event, ...prevEvents];
const event: NostrEvent = JSON.parse(data.payload.event); });
const index = chats.findIndex((item) => item.pubkey === event.pubkey); } else {
const newEvents = [...chats];
if (index === -1) { newEvents[index] = {
await queryClient.setQueryData( ...event,
["chats"], };
(prevEvents: NostrEvent[]) => {
if (!prevEvents) return prevEvents;
if (event.pubkey === account) return;
return [event, ...prevEvents]; queryClient.setQueryData(["chats"], newEvents);
}, }
);
} else {
const newEvents = [...chats];
newEvents[index] = { await queryClient.invalidateQueries({ queryKey: ["chats"] });
...event, }
}; });
queryClient.setQueryData(["chats"], newEvents); return () => {
await queryClient.invalidateQueries({ queryKey: ["chats"] }); unlisten.then((f) => f());
} };
} }, []);
});
return () => { return (
unlisten.then((f) => f()); <ScrollArea.Root
}; type={"scroll"}
}, []); scrollHideDelay={300}
className="relative overflow-hidden flex-1 w-full"
return ( >
<ScrollArea.Root <ScrollArea.Viewport className="relative h-full px-1.5">
type={"scroll"} {isLoading ? (
scrollHideDelay={300} <>
className="relative overflow-hidden flex-1 w-full" {[...Array(5).keys()].map((i) => (
> <div
<ScrollArea.Viewport className="relative h-full px-1.5"> key={i}
{isLoading ? ( className="flex items-center rounded-lg p-2 mb-1 gap-2"
<> >
{[...Array(5).keys()].map((i) => ( <div className="size-9 rounded-full animate-pulse bg-black/10 dark:bg-white/10" />
<div <div className="size-4 w-20 rounded animate-pulse bg-black/10 dark:bg-white/10" />
key={i} </div>
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" /> ) : !data?.length ? (
<div className="size-4 w-20 rounded animate-pulse bg-black/10 dark:bg-white/10" /> <div className="p-2">
</div> <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>
) : isSync && !data?.length ? ( </div>
<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"> data?.map((item) => (
No chats. <Link
</div> key={item.id + item.pubkey}
</div> to="/$account/chats/$id"
) : ( params={{ account, id: item.pubkey }}
data?.map((item) => ( >
<Link {({ isActive, isTransitioning }) => (
key={item.id + item.pubkey} <User.Provider pubkey={item.pubkey}>
to="/$account/chats/$id" <User.Root
params={{ account, id: item.pubkey }} className={cn(
> "flex items-center rounded-lg p-2 mb-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5",
{({ isActive, isTransitioning }) => ( isActive ? "bg-black/5 dark:bg-white/5" : "",
<User.Provider pubkey={item.pubkey}> )}
<User.Root >
className={cn( <User.Avatar className="size-8 rounded-full" />
"flex items-center rounded-lg p-2 mb-1 gap-2 hover:bg-black/5 dark:hover:bg-white/5", <div className="flex-1 inline-flex items-center justify-between text-sm">
isActive ? "bg-black/5 dark:bg-white/5" : "", <div className="inline-flex leading-tight">
)} <User.Name className="max-w-[8rem] truncate font-semibold" />
> <span className="ml-1.5 text-neutral-500">
<User.Avatar className="size-8 rounded-full" /> {account === item.pubkey ? "(you)" : ""}
<div className="flex-1 inline-flex items-center justify-between text-sm"> </span>
<div className="inline-flex leading-tight"> </div>
<User.Name className="max-w-[8rem] truncate font-semibold" /> {isTransitioning ? (
<span className="ml-1.5 text-neutral-500"> <Spinner className="size-4" />
{account === item.pubkey ? "(you)" : ""} ) : (
</span> <span className="leading-tight text-right text-neutral-600 dark:text-neutral-400">
</div> {ago(item.created_at)}
{isTransitioning ? ( </span>
<Spinner className="size-4" /> )}
) : ( </div>
<span className="leading-tight text-right text-neutral-600 dark:text-neutral-400"> </User.Root>
{ago(item.created_at)} </User.Provider>
</span> )}
)} </Link>
</div> ))
</User.Root> )}
</User.Provider> </ScrollArea.Viewport>
)} <ScrollArea.Scrollbar
</Link> className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
)) orientation="vertical"
)} >
</ScrollArea.Viewport> <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]" />
{!isSync ? <SyncPopup progress={progress} /> : null} </ScrollArea.Scrollbar>
<ScrollArea.Scrollbar <ScrollArea.Corner className="bg-transparent" />
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2" </ScrollArea.Root>
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 SyncPopup({ progress }: { progress: number }) {
return (
<div className="absolute bottom-0 w-full h-36 flex flex-col justify-end">
<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
className="relative overflow-hidden bg-black/20 dark:bg-white/20 rounded-full w-full h-1"
style={{
transform: "translateZ(0)",
}}
value={progress}
>
<Progress.Indicator
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>
</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 <Virtualizer
scrollRef={scrollRef as unknown as RefObject<HTMLElement>} scrollRef={scrollRef as unknown as RefObject<HTMLElement>}
overscan={1} 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>
); );
} }

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

@@ -1,9 +1,9 @@
import { CoopIcon } from '@/icons/coop' import { CoopIcon } from "@/icons/coop";
import { createLazyFileRoute } from '@tanstack/react-router' import { createLazyFileRoute } from "@tanstack/react-router";
export const Route = createLazyFileRoute('/$account/_layout/chats/new')({ export const Route = createLazyFileRoute("/$account/_layout/chats/new")({
component: Screen, component: Screen,
}) });
function Screen() { function Screen() {
return ( return (
@@ -13,8 +13,8 @@ function Screen() {
> >
<CoopIcon className="size-10 text-neutral-200 dark:text-neutral-800" /> <CoopIcon className="size-10 text-neutral-200 dark:text-neutral-800" />
<h1 className="text-center font-bold text-neutral-300 dark:text-neutral-700"> <h1 className="text-center font-bold text-neutral-300 dark:text-neutral-700">
coop on nostr. let's gathering on nostr.
</h1> </h1>
</div> </div>
) );
} }