Add recipe debugging

src/components/cmdk/CommandKClient.tsx

@@ -112,6 +112,7 @@ export default function CommandKClient({
     shouldShowBaselineGrid,
     shouldDebugImageFallbacks,
     shouldDebugInsights,
+    shouldDebugRecipeOverlays,
     setIsCommandKOpen: setIsOpen,
     setShouldRespondToKeyboardCommands,
     setShouldShowBaselineGrid,
@@ -120,6 +121,7 @@ export default function CommandKClient({
     setArePhotosMatted,
     setShouldDebugImageFallbacks,
     setShouldDebugInsights,
+    setShouldDebugRecipeOverlays,
   } = useAppState();
 
   const isOpenRef = useRef(isOpen);
@@ -299,6 +301,11 @@ export default function CommandKClient({
           setShouldDebugInsights,
           shouldDebugInsights,
         ),
+        renderToggle(
+          'Recipe Overlays',
+          setShouldDebugRecipeOverlays,
+          shouldDebugRecipeOverlays,
+        ),
       ],
     });
   }

src/photo/PhotoLarge.tsx

@@ -93,6 +93,7 @@ export default function PhotoLarge({
   const {
     areZoomControlsShown,
     arePhotosMatted,
+    shouldDebugRecipeOverlays,
     isUserSignedIn,
   } = useAppState();
 
@@ -182,7 +183,9 @@ export default function PhotoLarge({
         'flex items-center justify-center',
       )}>
         <AnimatePresence>
-          {shouldShowRecipe && photo.fujifilmRecipe && photo.filmSimulation &&
+          {(shouldShowRecipe || shouldDebugRecipeOverlays) &&
+          photo.fujifilmRecipe &&
+          photo.filmSimulation &&
             <PhotoRecipe
               ref={refRecipe}
               recipe={photo.fujifilmRecipe}

src/state/AppState.ts

@@ -46,6 +46,8 @@ export interface AppStateContext {
   setShouldShowBaselineGrid?: Dispatch<SetStateAction<boolean>>
   shouldDebugInsights?: boolean
   setShouldDebugInsights?: Dispatch<SetStateAction<boolean>>
+  shouldDebugRecipeOverlays?: boolean
+  setShouldDebugRecipeOverlays?: Dispatch<SetStateAction<boolean>>
 }
 
 export const AppStateContext = createContext<AppStateContext>({});

src/state/AppStateProvider.tsx

@@ -65,6 +65,8 @@ export default function AppStateProvider({
     useState(false);
   const [shouldDebugInsights, setShouldDebugInsights] =
     useState(IS_DEVELOPMENT);
+  const [shouldDebugRecipeOverlays, setShouldDebugRecipeOverlays] =
+    useState(false);
 
   const invalidateSwr = useCallback(() => setSwrTimestamp(Date.now()), []);
 
@@ -143,6 +145,8 @@ export default function AppStateProvider({
         setShouldShowBaselineGrid,
         shouldDebugInsights,
         setShouldDebugInsights,
+        shouldDebugRecipeOverlays,
+        setShouldDebugRecipeOverlays,
       }}
     >
       {children}