wip

src/shared/notes/mentions/note.tsx

@@ -1,7 +1,9 @@
+import { createBlock } from "@libs/storage";
 import { Kind1 } from "@shared/notes/contents/kind1";
 import { Kind1063 } from "@shared/notes/contents/kind1063";
 import { NoteSkeleton } from "@shared/notes/skeleton";
 import { User } from "@shared/user";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useEvent } from "@utils/hooks/useEvent";
 import { memo } from "react";
 
@@ -11,8 +13,30 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
 	const kind1 = data?.kind === 1 ? data.content : null;
 	const kind1063 = data?.kind === 1063 ? data.tags : null;
 
+	const queryClient = useQueryClient();
+
+	const block = useMutation({
+		mutationFn: (data: any) => createBlock(data.kind, data.title, data.content),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["blocks"] });
+		},
+	});
+
+	const openThread = (event: any, thread: string) => {
+		const selection = window.getSelection();
+		if (selection.toString().length === 0) {
+			block.mutate({ kind: 2, title: "Thread", content: thread });
+		} else {
+			event.stopPropagation();
+		}
+	};
+
 	return (
-		<div className="mt-3 rounded-lg border border-zinc-800 px-3 py-3">
+		<div
+			onClick={(e) => openThread(e, id)}
+			onKeyDown={(e) => openThread(e, id)}
+			className="mt-3 rounded-lg bg-zinc-800 border-t border-zinc-700/50 px-3 py-3"
+		>
 			{isFetching || status === "loading" ? (
 				<NoteSkeleton />
 			) : (

src/shared/notes/metadata/reply.tsx

@@ -1,18 +1,25 @@
+import { createBlock } from "@libs/storage";
 import { ReplyIcon } from "@shared/icons";
-import { useActiveAccount } from "@stores/accounts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { compactNumber } from "@utils/number";
 
 export function NoteReply({
 	id,
 	replies,
-	currentBlock,
 }: { id: string; replies: number; currentBlock?: number }) {
-	const addTempBlock = useActiveAccount((state: any) => state.addTempBlock);
+	const queryClient = useQueryClient();
+
+	const block = useMutation({
+		mutationFn: (data: any) => createBlock(data.kind, data.title, data.content),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["blocks"] });
+		},
+	});
 
 	const openThread = (event: any, thread: string) => {
 		const selection = window.getSelection();
 		if (selection.toString().length === 0) {
-			addTempBlock(currentBlock, 2, "Thread", thread);
+			block.mutate({ kind: 2, title: "Thread", content: thread });
 		} else {
 			event.stopPropagation();
 		}

src/shared/notes/preview/link.tsx

@@ -1,23 +1,12 @@
 import { Image } from "@shared/image";
 import { useOpenGraph } from "@utils/hooks/useOpenGraph";
 
-function isValidURL(string: string) {
-	let url: URL;
-	try {
-		url = new URL(string);
-	} catch (_) {
-		return false;
-	}
-	return true;
-}
-
 export function LinkPreview({ urls }: { urls: string[] }) {
 	const domain = new URL(urls[0]);
-	const { status, data, error, isFetching } = useOpenGraph(urls[0]);
+	const { status, data, isFetching } = useOpenGraph(urls[0]);
 
 	return (
 		<div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
-			{error && <p>failed to load</p>}
 			{isFetching || status === "loading" ? (
 				<div className="flex flex-col">
 					<div className="w-full h-44 bg-zinc-700 animate-pulse" />
@@ -29,20 +18,6 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 						</span>
 					</div>
 				</div>
-			) : !data ? (
-				<a
-					className="flex flex-col px-3 py-3 rounded-lg border border-transparent hover:border-fuchsia-900"
-					href={urls[0]}
-					target="_blank"
-					rel="noreferrer"
-				>
-					<p className="leading-none text-sm text-zinc-400 line-clamp-3">
-						Can't fetch open graph, click to open website directly
-					</p>
-					<span className="mt-2.5 leading-none text-sm text-zinc-500">
-						{domain.hostname}
-					</span>
-				</a>
 			) : (
 				<a
 					className="flex flex-col rounded-lg border border-transparent hover:border-fuchsia-900"
@@ -50,31 +25,20 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 					target="_blank"
 					rel="noreferrer"
 				>
-					{isValidURL(data["og:image"]) ? (
-						<Image
-							src={data["og:image"]}
-							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
-							alt={urls[0]}
-							className="w-full h-44 object-cover rounded-t-lg bg-white"
-						/>
-					) : (
-						<Image
-							src="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
-							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
-							alt={urls[0]}
-							className="w-full h-44 object-cover rounded-t-lg bg-white"
-						/>
-					)}
+					<Image
+						src={data.images[0]}
+						fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
+						alt={urls[0]}
+						className="w-full h-44 object-cover rounded-t-lg"
+					/>
 					<div className="flex flex-col gap-2 px-3 py-3">
-						<h5 className="leading-none font-medium text-zinc-200">
-							{data["og:title"]}
+						<h5 className="leading-none font-medium text-zinc-200 line-clamp-1">
+							{data.title}
 						</h5>
-						{data["og:description"] ? (
-							<p className="leading-none text-sm text-zinc-400 line-clamp-3">
-								{data["og:description"]}
+						{data.description && (
+							<p className="text-sm text-zinc-400 break-all line-clamp-3">
+								{data.description}
 							</p>
-						) : (
-							<></>
 						)}
 						<span className="mt-2.5 leading-none text-sm text-zinc-500">
 							{domain.hostname}

src/shared/notes/preview/video.tsx

@@ -1,9 +1,13 @@
+import ReactPlayer from "react-player/es6";
+
 export function VideoPreview({ urls }: { urls: string[] }) {
 	return (
-		<div
-			onClick={(e) => e.stopPropagation()}
-			onKeyDown={(e) => e.stopPropagation()}
-			className="relative mt-3 max-w-[420px] flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
-		/>
+		<div className="relative mt-3 max-w-[420px] flex w-full flex-col gap-2">
+			{urls.map((url) => (
+				<div key={url} className="aspect-video">
+					<ReactPlayer url={url} width="100%" height="100%" />
+				</div>
+			))}
+		</div>
 	);
 }

src/shared/notes/replies/form.tsx

@@ -2,16 +2,16 @@ import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
 import { Button } from "@shared/button";
 import { Image } from "@shared/image";
 import { RelayContext } from "@shared/relayProvider";
-import { useActiveAccount } from "@stores/accounts";
 import { DEFAULT_AVATAR } from "@stores/constants";
 import { dateToUnix } from "@utils/date";
+import { useAccount } from "@utils/hooks/useAccount";
 import { useProfile } from "@utils/hooks/useProfile";
 import { useContext, useState } from "react";
 
 export function NoteReplyForm({ id }: { id: string }) {
 	const ndk = useContext(RelayContext);
-	const account = useActiveAccount((state) => state.account);
 
+	const { account } = useAccount();
 	const { status, user } = useProfile(account.npub);
 
 	const [value, setValue] = useState("");