fix: memory leak in image component

apps/desktop2/src/components/note/content.tsx

@@ -102,7 +102,7 @@ export function NoteContent({
 		<div className="flex flex-col gap-2">
 			<div
 				className={cn(
-					"select-text text-[15px] text-pretty overflow-hidden",
+					"select-text text-[15px] text-pretty content-break overflow-hidden",
 					event.content.length > 500 ? "max-h-[300px] gradient-mask-b-0" : "",
 					className,
 				)}

apps/desktop2/src/components/note/contentLarge.tsx

@@ -145,7 +145,9 @@ export function NoteContentLarge({
 
 	return (
 		<div className={cn("select-text", className)}>
-			<div className="text-[15px] text-pretty leading-normal">{content}</div>
+			<div className="text-[15px] text-pretty content-break leading-normal">
+				{content}
+			</div>
 		</div>
 	);
 }

apps/desktop2/src/components/note/mentions/note.tsx

@@ -48,7 +48,7 @@ export function MentionNote({
 			</User.Provider>
 			<div
 				className={cn(
-					"px-3 select-text whitespace-normal text-pretty leading-normal",
+					"px-3 select-text whitespace-normal text-pretty content-break leading-normal",
 					data.content.length > 100 ? "max-h-[150px] gradient-mask-b-0" : "",
 				)}
 			>

apps/desktop2/src/components/note/preview/image.tsx

@@ -1,61 +1,44 @@
-import { CheckCircleIcon, DownloadIcon } from "@lume/icons";
-import { downloadDir } from "@tauri-apps/api/path";
 import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
-import { download } from "@tauri-apps/plugin-upload";
-import { type SyntheticEvent, useState } from "react";
 
 export function ImagePreview({ url }: { url: string }) {
-	const [downloaded, setDownloaded] = useState(false);
+	const open = async (url: string) => {
+		const name = new URL(url).pathname
+			.split("/")
+			.pop()
+			.replace(/[^a-zA-Z ]/g, "");
+		const label = `viewer-${name}`;
+		const window = WebviewWindow.getByLabel(label);
 
-	const downloadImage = async (e: { stopPropagation: () => void }) => {
-		try {
-			e.stopPropagation();
+		if (!window) {
+			const newWindow = new WebviewWindow(label, {
+				url,
+				title: "Image Viewer",
+				width: 800,
+				height: 800,
+				titleBarStyle: "overlay",
+			});
 
-			const downloadDirPath = await downloadDir();
-			const filename = url.substring(url.lastIndexOf("/") + 1);
-			await download(url, `${downloadDirPath}/${filename}`);
-
-			setDownloaded(true);
-		} catch (e) {
-			console.error(e);
+			return newWindow;
 		}
-	};
 
-	const open = async () => {
-		const name = new URL(url).pathname.split("/").pop();
-		return new WebviewWindow("image-viewer", {
-			url,
-			title: name,
-		});
-	};
-
-	const fallback = (event: SyntheticEvent<HTMLImageElement, Event>) => {
-		event.currentTarget.src = "/fallback-image.jpg";
+		return await window.setFocus();
 	};
 
 	return (
-		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
-		<div onClick={() => open()} className="group relative my-1">
+		<div className="group relative my-1">
 			<img
 				src={url}
 				alt={url}
 				loading="lazy"
 				decoding="async"
 				style={{ contentVisibility: "auto" }}
-				onError={fallback}
 				className="max-h-[600px] w-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
+				onClick={() => open(url)}
+				onError={({ currentTarget }) => {
+					currentTarget.onerror = null;
+					currentTarget.src = "/404.jpg";
+				}}
 			/>
-			<button
-				type="button"
-				onClick={(e) => downloadImage(e)}
-				className="absolute right-2 top-2 z-20 hidden size-8 items-center justify-center rounded-md bg-white/10 text-white/70 backdrop-blur-2xl hover:bg-blue-500 hover:text-white group-hover:inline-flex"
-			>
-				{downloaded ? (
-					<CheckCircleIcon className="size-4" />
-				) : (
-					<DownloadIcon className="size-4" />
-				)}
-			</button>
 		</div>
 	);
 }

apps/desktop2/src/components/note/preview/images.tsx

@@ -36,6 +36,10 @@ export function Images({ urls }: { urls: string[] }) {
 					style={{ contentVisibility: "auto" }}
 					className="max-h-[400px] w-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
 					onClick={() => open(urls[0])}
+					onError={({ currentTarget }) => {
+						currentTarget.onerror = null;
+						currentTarget.src = "/404.jpg";
+					}}
 				/>
 			</div>
 		);
@@ -54,6 +58,10 @@ export function Images({ urls }: { urls: string[] }) {
 						style={{ contentVisibility: "auto" }}
 						className="w-full h-full object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
 						onClick={() => open(item)}
+						onError={({ currentTarget }) => {
+							currentTarget.onerror = null;
+							currentTarget.src = "/404.jpg";
+						}}
 					/>
 				</CarouselItem>
 			)}

apps/desktop2/src/routes/index.tsx

@@ -57,7 +57,10 @@ function Screen() {
 	});
 
 	return (
-		<div className="relative flex h-full w-full items-center justify-center">
+		<div
+			data-tauri-drag-region
+			className="relative flex h-full w-full items-center justify-center"
+		>
 			<div className="relative z-20 flex flex-col items-center gap-16">
 				<div className="text-center">
 					<h2 className="text-xl text-neutral-700 dark:text-neutral-300">