wip: tired...

packages/ui/src/note/preview/image.tsx

@@ -0,0 +1,61 @@
+import { CheckCircleIcon, DownloadIcon } from "@lume/icons";
+import { downloadDir } from "@tauri-apps/api/path";
+import { WebviewWindow } from "@tauri-apps/api/webview";
+import { download } from "@tauri-apps/plugin-upload";
+import { SyntheticEvent, useState } from "react";
+
+export function ImagePreview({ url }: { url: string }) {
+	const [downloaded, setDownloaded] = useState(false);
+
+	const downloadImage = async (e: { stopPropagation: () => void }) => {
+		try {
+			e.stopPropagation();
+
+			const downloadDirPath = await downloadDir();
+			const filename = url.substring(url.lastIndexOf("/") + 1);
+			await download(url, `${downloadDirPath}/${filename}`);
+
+			setDownloaded(true);
+		} catch (e) {
+			console.error(e);
+		}
+	};
+
+	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 (
+		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+		<div onClick={open} className="relative mt-1 mb-2.5 group">
+			<img
+				src={url}
+				alt={url}
+				loading="lazy"
+				decoding="async"
+				style={{ contentVisibility: "auto" }}
+				onError={fallback}
+				className="object-cover w-full h-auto border rounded-xl border-neutral-200/50 dark:border-neutral-800/50"
+			/>
+			<button
+				type="button"
+				onClick={(e) => downloadImage(e)}
+				className="absolute z-10 items-center justify-center hidden size-10 bg-white/10 text-black/70 backdrop-blur-xl rounded-lg right-2 top-2 group-hover:inline-flex hover:bg-blue-500 hover:text-white"
+			>
+				{downloaded ? (
+					<CheckCircleIcon className="size-5" />
+				) : (
+					<DownloadIcon className="size-5" />
+				)}
+			</button>
+		</div>
+	);
+}

packages/ui/src/note/preview/link.tsx

@@ -0,0 +1,87 @@
+import { useOpenGraph } from "@lume/utils";
+
+function isImage(url: string) {
+  return /^https?:\/\/.+\.(jpg|jpeg|png|webp|avif)$/.test(url);
+}
+
+export function LinkPreview({ url }: { url: string }) {
+  const domain = new URL(url);
+  const { isLoading, isError, data } = useOpenGraph(url);
+
+  if (isLoading) {
+    return (
+      <div className="mb-2.5 mt-1 flex w-full flex-col overflow-hidden rounded-xl border border-black/5 bg-neutral-100 dark:border-white/5 dark:bg-neutral-900">
+        <div className="h-48 w-full shrink-0 animate-pulse bg-neutral-300 dark:bg-neutral-700" />
+        <div className="flex flex-col gap-2 px-3 py-3">
+          <div className="h-3 w-2/3 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          <div className="h-3 w-3/4 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          <span className="mt-2.5 text-sm leading-none text-neutral-600 dark:text-neutral-400">
+            {domain.hostname}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data.title && !data.image && !data.description) {
+    return (
+      <a
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        className="text-blue-500 hover:text-blue-600"
+      >
+        {url}
+      </a>
+    );
+  }
+
+  if (isError) {
+    return (
+      <a
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        className="text-blue-500 hover:text-blue-600"
+      >
+        {url}
+      </a>
+    );
+  }
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noreferrer"
+      className="mb-2.5 mt-1 flex w-full flex-col overflow-hidden rounded-xl border border-black/5 bg-neutral-100 dark:border-white/5 dark:bg-neutral-900"
+    >
+      {isImage(data.image) ? (
+        <img
+          src={data.image}
+          alt={url}
+          loading="lazy"
+          decoding="async"
+          className="h-48 w-full shrink-0 rounded-t-lg bg-white object-cover"
+        />
+      ) : null}
+      <div className="flex flex-col items-start p-3">
+        <div className="flex flex-col items-start text-left">
+          {data.title ? (
+            <div className="break-p text-base font-semibold text-neutral-900 dark:text-neutral-100">
+              {data.title}
+            </div>
+          ) : null}
+          {data.description ? (
+            <div className="break-p mb-2 line-clamp-3 text-balance text-sm text-neutral-700 dark:text-neutral-400">
+              {data.description}
+            </div>
+          ) : null}
+        </div>
+        <div className="break-all text-sm font-semibold text-blue-500">
+          {domain.hostname}
+        </div>
+      </div>
+    </a>
+  );
+}

packages/ui/src/note/preview/video.tsx

@@ -0,0 +1,30 @@
+import {
+	MediaControlBar,
+	MediaController,
+	MediaMuteButton,
+	MediaPlayButton,
+	MediaTimeDisplay,
+	MediaTimeRange,
+} from "media-chrome/dist/react";
+
+export function VideoPreview({ url }: { url: string }) {
+	return (
+		<div className="mt-1 mb-2.5 w-full rounded-xl overflow-hidden">
+			<MediaController>
+				<video
+					slot="media"
+					src={url}
+					preload="auto"
+					muted
+					className="w-full h-auto"
+				/>
+				<MediaControlBar>
+					<MediaPlayButton />
+					<MediaTimeRange />
+					<MediaTimeDisplay showDuration />
+					<MediaMuteButton />
+				</MediaControlBar>
+			</MediaController>
+		</div>
+	);
+}