Add explicit zoom button

src/components/image/useImageZoomControls.ts

@@ -33,6 +33,14 @@ export default function useImageZoomControls(
     }
   }, [imageRef, isEnabled]);
 
+  const open = useCallback(() => {
+    viewerRef.current?.show();
+  }, [viewerRef]);
+
+  const close = useCallback(() => {
+    viewerRef.current?.hide();
+  }, [viewerRef]);
+
   // On shown, disable keyboard commands
   const onShown = useCallback(() =>
     setShouldRespondToKeyboardCommands?.(false),
@@ -69,4 +77,9 @@ export default function useImageZoomControls(
       document.removeEventListener(EVENT_KEYDOWN, handleKeyDown);
     };
   }, [handleKeyDown]);
+
+  return {
+    open,
+    close,
+  };
 }

src/photo/PhotoLarge.tsx

@@ -37,6 +37,8 @@ import useOnVisible from '@/utility/useOnVisible';
 import PhotoDate from './PhotoDate';
 import { useAppState } from '@/state/AppState';
 import useImageZoomControls from '@/components/image/useImageZoomControls';
+import { LuZoomIn } from 'react-icons/lu';
+import LoaderButton from '@/components/primitives/LoaderButton';
 
 export default function PhotoLarge({
   photo,
@@ -79,7 +81,7 @@ export default function PhotoLarge({
   onVisible?: () => void
 }) {
   const ref = useRef<HTMLDivElement>(null);
-  const refZoomControls = useRef<HTMLDivElement>(null);
+  const refZoomControlsContainer = useRef<HTMLDivElement>(null);
 
   const {
     areZoomControlsEnabled,
@@ -97,7 +99,10 @@ export default function PhotoLarge({
 
   useOnVisible(ref, onVisible);
 
-  useImageZoomControls(refZoomControls, areZoomControlsEnabled);
+  const { open } = useImageZoomControls(
+    refZoomControlsContainer,
+    areZoomControlsEnabled,
+  );
 
   const hasTitle =
     showTitle &&
@@ -152,7 +157,7 @@ export default function PhotoLarge({
             arePhotosMatted && matteContentWidthForAspectRatio(),
           )}>
             <div
-              ref={refZoomControls}
+              ref={refZoomControlsContainer}
               className={clsx(areZoomControlsEnabled && 'cursor-zoom-in')}
             >
               <ImageLarge
@@ -293,6 +298,13 @@ export default function PhotoLarge({
                     focal={shouldShareFocalLength ? photo.focalLength : undefined}
                     prefetch={prefetchRelatedLinks}
                   />}
+                {areZoomControlsEnabled &&
+                  <LoaderButton
+                    icon={<LuZoomIn size={17} />}
+                    onClick={open}
+                    styleAs="link"
+                    className="text-medium"
+                  />}
                 {ALLOW_PUBLIC_DOWNLOADS && 
                   <DownloadButton 
                     className={clsx(