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 />
 			) : (