feat: photo-viewer; use <img> instead of blob urls, simplify/refactor, avoid window.events (#9883)

* Photoviewer

* make copyImage/zoomToggle optional

* Add e2e test

* lint

* Accept bo0tzz suggestion

Co-authored-by: bo0tzz <git@bo0tzz.me>

* Bad merge and review comments

* unused import

---------

Co-authored-by: bo0tzz <git@bo0tzz.me>
Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/actions/zoom-image.ts

@@ -0,0 +1,31 @@
+import { photoZoomState, zoomed } from '$lib/stores/zoom-image.store';
+import { useZoomImageWheel } from '@zoom-image/svelte';
+import { get } from 'svelte/store';
+
+export { zoomed } from '$lib/stores/zoom-image.store';
+
+export const zoomImageAction = (node: HTMLElement) => {
+  const { createZoomImage, zoomImageState, setZoomImageState } = useZoomImageWheel();
+
+  createZoomImage(node, {
+    maxZoom: 10,
+    wheelZoomRatio: 0.2,
+  });
+
+  const state = get(photoZoomState);
+  if (state) {
+    setZoomImageState(state);
+  }
+
+  const unsubscribes = [
+    zoomed.subscribe((state) => setZoomImageState({ currentZoom: state ? 2 : 1 })),
+    zoomImageState.subscribe((state) => photoZoomState.set(state)),
+  ];
+  return {
+    destroy() {
+      for (const unsubscribe of unsubscribes) {
+        unsubscribe();
+      }
+    },
+  };
+};