Add zoom controls to admin debugging

src/components/cmdk/CommandKClient.tsx

@@ -92,6 +92,7 @@ export default function CommandKClient({
     selectedPhotoIds,
     setSelectedPhotoIds,
     isGridHighDensity,
+    areZoomControlsEnabled,
     arePhotosMatted,
     shouldShowBaselineGrid,
     shouldDebugImageFallbacks,
@@ -99,6 +100,7 @@ export default function CommandKClient({
     setShouldRespondToKeyboardCommands,
     setShouldShowBaselineGrid,
     setIsGridHighDensity,
+    setAreZoomControlsEnabled,
     setArePhotosMatted,
     setShouldDebugImageFallbacks,
   } = useAppState();
@@ -250,6 +252,10 @@ export default function CommandKClient({
       heading: 'Debug Tools',
       accessory: <RiToolsFill size={16} className="translate-x-[-1px]" />,
       items: [{
+        label: 'Toggle Zoom Controls',
+        action: () => setAreZoomControlsEnabled?.(prev => !prev),
+        annotation: areZoomControlsEnabled ? <FaCheck size={12} /> : undefined,
+      }, {
         label: 'Toggle Photo Matting',
         action: () => setArePhotosMatted?.(prev => !prev),
         annotation: arePhotosMatted ? <FaCheck size={12} /> : undefined,

src/photo/PhotoLarge.tsx

@@ -55,7 +55,6 @@ export default function PhotoLarge({
   shouldShareCamera,
   shouldShareSimulation,
   shouldShareFocalLength,
-  shouldShowZoomControls,
   includeFavoriteInAdminMenu,
   onVisible,
 }: {
@@ -76,13 +75,18 @@ export default function PhotoLarge({
   shouldShareSimulation?: boolean
   shouldShareFocalLength?: boolean
   shouldScrollOnShare?: boolean
-  shouldShowZoomControls?: boolean
   includeFavoriteInAdminMenu?: boolean
   onVisible?: () => void
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const refZoomControls = useRef<HTMLDivElement>(null);
 
+  const {
+    areZoomControlsEnabled,
+    arePhotosMatted,
+    isUserSignedIn,
+  } = useAppState();
+
   const tags = sortTags(photo.tags, primaryTag);
 
   const camera = cameraFromPhoto(photo);
@@ -93,9 +97,7 @@ export default function PhotoLarge({
 
   useOnVisible(ref, onVisible);
 
-  useImageZoomControls(refZoomControls, shouldShowZoomControls);
-
-  const { arePhotosMatted, isUserSignedIn } = useAppState();
+  useImageZoomControls(refZoomControls, areZoomControlsEnabled);
 
   const hasTitle =
     showTitle &&
@@ -151,7 +153,7 @@ export default function PhotoLarge({
           )}>
             <div
               ref={refZoomControls}
-              className={clsx(shouldShowZoomControls && 'cursor-zoom-in')}
+              className={clsx(areZoomControlsEnabled && 'cursor-zoom-in')}
             >
               <ImageLarge
                 className={clsx(arePhotosMatted && 'h-full')}

src/state/AppState.ts

@@ -33,6 +33,8 @@ export interface AppStateContext {
   // DEBUG
   isGridHighDensity?: boolean
   setIsGridHighDensity?: Dispatch<SetStateAction<boolean>>
+  areZoomControlsEnabled?: boolean
+  setAreZoomControlsEnabled?: Dispatch<SetStateAction<boolean>>
   arePhotosMatted?: boolean
   setArePhotosMatted?: Dispatch<SetStateAction<boolean>>
   shouldDebugImageFallbacks?: boolean

src/state/AppStateProvider.tsx

@@ -6,7 +6,11 @@ import { AnimationConfig } from '@/components/AnimateItems';
 import usePathnames from '@/utility/usePathnames';
 import { getAuthAction } from '@/auth/actions';
 import useSWR from 'swr';
-import { HIGH_DENSITY_GRID, MATTE_PHOTOS } from '@/site/config';
+import {
+  HIGH_DENSITY_GRID,
+  MATTE_PHOTOS,
+  ZOOM_CONTROLS_ENABLED,
+} from '@/site/config';
 import { getPhotosHiddenMetaCachedAction } from '@/photo/actions';
 import { ShareModalProps } from '@/share';
 import { storeTimezoneCookie } from '@/utility/timezone';
@@ -46,6 +50,8 @@ export default function AppStateProvider({
   // DEBUG
   const [isGridHighDensity, setIsGridHighDensity] =
     useState(HIGH_DENSITY_GRID);
+  const [areZoomControlsEnabled, setAreZoomControlsEnabled] =
+    useState(ZOOM_CONTROLS_ENABLED);
   const [arePhotosMatted, setArePhotosMatted] =
     useState(MATTE_PHOTOS);
   const [shouldDebugImageFallbacks, setShouldDebugImageFallbacks] =
@@ -116,6 +122,8 @@ export default function AppStateProvider({
         // DEBUG
         isGridHighDensity,
         setIsGridHighDensity,
+        areZoomControlsEnabled,
+        setAreZoomControlsEnabled,
         arePhotosMatted,
         setArePhotosMatted,
         shouldDebugImageFallbacks,