fix(web): Improve zoom behavior in photo-viewer. (#18803)

* Fix an issue where clicking the zoom-button after having zoomed in
would not zoom completely out, but leave the image in the zoomed-in
state. The new behavior properly zoomes the image completely out after
clicking the zoom-button.
* Revert to the default setting for `wheelZoomRatio` as the previous
setting of 0.2 was borderline unusable on a trackpad. This could
probably be moved to a user setting if needed.
* Add a keyboard shortcut 'z' to toggle image zoom.

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

@@ -1,15 +1,12 @@
-import { photoZoomState, zoomed } from '$lib/stores/zoom-image.store';
+import { photoZoomState } 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);
@@ -17,10 +14,7 @@ export const zoomImageAction = (node: HTMLElement) => {
     setZoomImageState(state);
   }
 
-  const unsubscribes = [
-    zoomed.subscribe((state) => setZoomImageState({ currentZoom: state ? 2 : 1 })),
-    zoomImageState.subscribe((state) => photoZoomState.set(state)),
-  ];
+  const unsubscribes = [photoZoomState.subscribe(setZoomImageState), zoomImageState.subscribe(photoZoomState.set)];
   return {
     destroy() {
       for (const unsubscribe of unsubscribes) {