feat: preview image in new window

src/main/tipc.ts

@@ -4,6 +4,7 @@ import { dialog, Menu, ShareMenu } from "electron"
 
 import { getMainWindow } from "."
 import type { RendererHandlers } from "./renderer-handlers"
+import { createWindow } from "./window"
 
 const t = tipc.create()
 
@@ -104,6 +105,26 @@ export const router = {
       const handlers = getRendererHandlers<RendererHandlers>(mainWindow.webContents)
       handlers.invalidateQuery.send(input)
     }),
+
+  previewImage: t.procedure
+    .input<{
+      realUrl: string
+      url: string
+      width: number
+      height: number
+    }>()
+    .action(async ({ input }) => {
+      if (process.env["VITE_IMGPROXY_URL"] && input.url.startsWith(process.env["VITE_IMGPROXY_URL"])) {
+        const meta = await fetch(`${process.env["VITE_IMGPROXY_URL"]}/unsafe/meta/${encodeURIComponent(input.realUrl)}`).then((res) => res.json())
+        input.width = meta.thumbor.source.width
+        input.height = meta.thumbor.source.height
+      }
+      createWindow({
+        extraPath: `/preview?url=${encodeURIComponent(input.realUrl)}`,
+        width: input.width,
+        height: input.height,
+      })
+    }),
 }
 
 export type Router = typeof router

src/renderer/src/components/ui/image.tsx

@@ -1,3 +1,4 @@
+import { client } from "@renderer/lib/client"
 import { getProxyUrl } from "@renderer/lib/img-proxy"
 import { cn } from "@renderer/lib/utils"
 import type { ImgHTMLAttributes } from "react"
@@ -42,6 +43,17 @@ export const Image = ({
         onError={errorHandle}
         className={cn(hidden && "hidden", "size-full object-cover")}
         src={imgSrc}
+        onClick={async (e) => {
+          props.onClick?.(e)
+          if (props.src && imgSrc && client) {
+            client.previewImage({
+              realUrl: props.src,
+              url: imgSrc,
+              width: (e.target as HTMLImageElement).naturalWidth,
+              height: (e.target as HTMLImageElement).naturalHeight,
+            })
+          }
+        }}
       />
     </div>
   )

src/renderer/src/main.tsx

@@ -105,6 +105,15 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: "preview",
+        children: [
+          {
+            path: "",
+            lazy: () => import("./pages/preview"),
+          },
+        ],
+      },
     ],
   },
 ])

src/renderer/src/pages/preview.tsx

@@ -0,0 +1,10 @@
+export function Component() {
+  const urlSearchParams = new URLSearchParams(location.search)
+  const url = urlSearchParams.get("url")
+
+  return url && (
+    <div className="w-screen h-screen">
+      <img src={url} />
+    </div>
+  )
+}