WIP

src/app/space/components/addFeed.tsx

@@ -2,14 +2,12 @@ import { Dialog, Transition } from "@headlessui/react";
 import { createBlock } from "@libs/storage";
 import { CancelIcon } from "@shared/icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useAccount } from "@utils/hooks/useAccount";
 import { nip19 } from "nostr-tools";
 import { Fragment, useState } from "react";
 import { useForm } from "react-hook-form";
 
 export function AddFeedBlock({ parentState }: { parentState: any }) {
 	const queryClient = useQueryClient();
-	const { account } = useAccount();
 
 	const [loading, setLoading] = useState(false);
 	const [isOpen, setIsOpen] = useState(true);
@@ -22,7 +20,9 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
 	};
 
 	const block = useMutation({
-		mutationFn: (data: any) => createBlock(data.kind, data.title, data.content),
+		mutationFn: (data: any) => {
+			return createBlock(data.kind, data.title, data.content);
+		},
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: ["blocks"] });
 		},

src/app/space/components/addImage.tsx

@@ -90,7 +90,9 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 	};
 
 	const block = useMutation({
-		mutationFn: (data: any) => createBlock(data.kind, data.title, data.content),
+		mutationFn: (data: any) => {
+			return createBlock(data.kind, data.title, data.content);
+		},
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: ["blocks"] });
 		},

src/app/space/components/blocks/feed.tsx

@@ -64,7 +64,9 @@ export function FeedBlock({ params }: { params: any }) {
 	}, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
 
 	const block = useMutation({
-		mutationFn: (id: string) => removeBlock(id),
+		mutationFn: (id: string) => {
+			return removeBlock(id);
+		},
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: ["blocks"] });
 		},

src/app/space/components/blocks/image.tsx

@@ -1,4 +1,5 @@
 import { removeBlock } from "@libs/storage";
+import { CancelIcon } from "@shared/icons";
 import { Image } from "@shared/image";
 import { TitleBar } from "@shared/titleBar";
 import { DEFAULT_AVATAR } from "@stores/constants";
@@ -8,7 +9,9 @@ export function ImageBlock({ params }: { params: any }) {
 	const queryClient = useQueryClient();
 
 	const block = useMutation({
-		mutationFn: (id: string) => removeBlock(id),
+		mutationFn: (id: string) => {
+			return removeBlock(id);
+		},
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: ["blocks"] });
 		},
@@ -16,15 +19,24 @@ export function ImageBlock({ params }: { params: any }) {
 
 	return (
 		<div className="shrink-0 w-[350px] h-full flex flex-col justify-between border-r border-zinc-900">
-			<div className="flex-1 w-full h-full overflow-hidden p-3">
-				<div className="w-full h-full">
-					<Image
-						src={params.content}
-						fallback={DEFAULT_AVATAR}
-						alt={params.title}
-						className="w-full h-full object-cover rounded-xl border-t border-zinc-800/50"
-					/>
+			<div className="relative flex-1 w-full h-full p-3 overflow-hidden">
+				<div className="absolute top-3 left-0 w-full h-16 px-3">
+					<div className="h-16 rounded-t-xl overflow-hidden flex items-center justify-end px-5">
+						<button
+							type="button"
+							onClick={() => block.mutate(params.id)}
+							className="inline-flex h-7 w-7 rounded-md items-center justify-center bg-white/30 backdrop-blur-lg"
+						>
+							<CancelIcon width={16} height={16} className="text-white" />
+						</button>
+					</div>
 				</div>
+				<Image
+					src={params.content}
+					fallback={DEFAULT_AVATAR}
+					alt={params.title}
+					className="w-full h-full object-cover rounded-xl border-t border-zinc-800/50"
+				/>
 			</div>
 		</div>
 	);

src/app/space/components/blocks/thread.tsx

@@ -21,7 +21,9 @@ export function ThreadBlock({ params }: { params: any }) {
 	);
 
 	const block = useMutation({
-		mutationFn: (id: string) => removeBlock(id),
+		mutationFn: (id: string) => {
+			return removeBlock(id);
+		},
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: ["blocks"] });
 		},