fix: only use hex string when send message via compose dialog

src/commons.ts

@@ -79,11 +79,6 @@ export function getReceivers(tags: string[][]) {
 	return p;
 }
 
-export function getChatId(pubkey: string, tags: string[][]) {
-	const id = [pubkey, tags.map((tag) => tag[0] === "p" && tag[1])].join("-");
-	return id;
-}
-
 export function groupEventByDate(events: NostrEvent[]) {
 	const groups = Object.groupBy(events, (event) => {
 		return dayjs.unix(event.created_at).startOf("day").format("MMM DD, YYYY");

src/components/user/avatar.tsx

@@ -26,7 +26,7 @@ export function UserAvatar({ className }: { className?: string }) {
 				<>
 					{user.profile?.picture ? (
 						<Avatar.Image
-							src={`https://wsrv.nl/?url=${user.profile?.picture}&w=200&h=200`}
+							src={`https://wsrv.nl/?url=${user.profile?.picture}&w=200&h=200&default=1`}
 							alt={user.pubkey}
 							loading="lazy"
 							decoding="async"

src/routes/$account.chats.$id.lazy.tsx

@@ -157,7 +157,7 @@ function List() {
 			await queryClient.setQueryData(
 				["chats", id],
 				(prevEvents: NostrEvent[]) => {
-					if (!prevEvents) return prevEvents;
+					if (!prevEvents) return [event];
 					return [event, ...prevEvents];
 				},
 			);

src/routes/$account.chats.lazy.tsx

@@ -19,8 +19,9 @@ import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { readText } from "@tauri-apps/plugin-clipboard-manager";
 import { message } from "@tauri-apps/plugin-dialog";
 import { open } from "@tauri-apps/plugin-shell";
-import type { NostrEvent } from "nostr-tools";
+import { type NostrEvent, nip19 } from "nostr-tools";
-import { useCallback, useEffect, useState, useTransition } from "react";
+import { useCallback, useEffect, useRef, useState, useTransition } from "react";
+import { Virtualizer } from "virtua";
 
 type EventPayload = {
 	event: string;
@@ -273,6 +274,7 @@ function Compose() {
 	});
 
 	const navigate = Route.useNavigate();
+	const scrollRef = useRef<HTMLDivElement>(null);
 
 	const pasteFromClipboard = async () => {
 		const val = await readText();
@@ -283,13 +285,33 @@ function Compose() {
 		startTransition(async () => {
 			if (!newMessage.length) return;
 			if (!target.length) return;
+			if (!target.startsWith("npub1")) {
+				await message("You must enter the public key as npub", {
+					title: "Send Message",
+					kind: "error",
+				});
+				return;
+			}
+
+			const decoded = nip19.decode(target);
+			let id: string;
+
+			if (decoded.type !== "npub") {
+				await message("You must enter the public key as npub", {
+					title: "Send Message",
+					kind: "error",
+				});
+				return;
+			} else {
+				id = decoded.data;
+			}
 
 			// Connect to user's inbox relays
 			const connect = await commands.connectInboxRelays(target, false);
 
 			// Send message
 			if (connect.status === "ok") {
-				const res = await commands.sendMessage(target, newMessage);
+				const res = await commands.sendMessage(id, newMessage);
 
 				if (res.status === "ok") {
 					setTarget("");
@@ -298,7 +320,7 @@ function Compose() {
 
 					navigate({
 						to: "/$account/chats/$id",
-						params: { account, id: target },
+						params: { account, id },
 					});
 				} else {
 					await message(res.error, { title: "Send Message", kind: "error" });
@@ -343,7 +365,7 @@ function Compose() {
 									placeholder="npub1..."
 									value={target}
 									onChange={(e) => setTarget(e.target.value)}
-									disabled={isPending || isLoading}
+									disabled={isPending}
 									className="w-full pr-14 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
 								/>
 								<button
@@ -361,7 +383,7 @@ function Compose() {
 								placeholder="hello..."
 								value={newMessage}
 								onChange={(e) => setNewMessage(e.target.value)}
-								disabled={isPending || isLoading}
+								disabled={isPending}
 								className="flex-1 h-9 bg-transparent focus:outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"
 							/>
 							<button
@@ -383,7 +405,11 @@ function Compose() {
 						scrollHideDelay={300}
 						className="overflow-hidden flex-1 size-full"
 					>
-						<ScrollArea.Viewport className="relative h-full p-2">
+						<ScrollArea.Viewport
+							ref={scrollRef}
+							className="relative h-full p-2"
+						>
+							<Virtualizer scrollRef={scrollRef} overscan={1}>
 								{isLoading ? (
 									<div className="h-[400px] flex items-center justify-center">
 										<Spinner className="size-4" />
@@ -409,6 +435,7 @@ function Compose() {
 										</button>
 									))
 								)}
+							</Virtualizer>
 						</ScrollArea.Viewport>
 						<ScrollArea.Scrollbar
 							className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"