Settings Manager (#211)

* refactor: landing screen

* fix: code debt

* feat: add settings screen

* chore: clean up

* feat: settings

* feat: small updates

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

@@ -1,42 +1,35 @@
-import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { Carousel, CarouselItem } from "@lume/ui";
+import { useRouteContext } from "@tanstack/react-router";
+import { open } from "@tauri-apps/plugin-shell";
+import { useMemo } from "react";
 
 export function Images({ urls }: { urls: string[] }) {
-	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 { settings } = useRouteContext({ strict: false });
 
-		if (!window) {
-			const newWindow = new WebviewWindow(label, {
-				url,
-				title: "Image Viewer",
-				width: 800,
-				height: 800,
-				titleBarStyle: "overlay",
-			});
-
-			return newWindow;
+	const imageUrls = useMemo(() => {
+		if (settings.image_resize_service.length) {
+			const newUrls = urls.map(
+				(url) =>
+					`${settings.image_resize_service}?url=${url}&ll&af&default=1&n=-1`,
+			);
+			return newUrls;
+		} else {
+			return urls;
 		}
-
-		return await window.setFocus();
-	};
+	}, [settings.image_resize_service]);
 
 	if (urls.length === 1) {
 		return (
 			<div className="px-3 group">
 				<img
-					src={urls[0]}
+					src={imageUrls[0]}
 					alt={urls[0]}
 					loading="lazy"
 					decoding="async"
 					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])}
-					onKeyDown={() => open(urls[0])}
+					onClick={() => urls[0]}
+					onKeyDown={() => urls[0]}
 					onError={({ currentTarget }) => {
 						currentTarget.onerror = null;
 						currentTarget.src = "/404.jpg";
@@ -48,7 +41,7 @@ export function Images({ urls }: { urls: string[] }) {
 
 	return (
 		<Carousel
-			items={urls}
+			items={imageUrls}
 			renderItem={({ item, isSnapPoint }) => (
 				<CarouselItem key={item} isSnapPoint={isSnapPoint}>
 					<img