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">