From 6676fb3cc8e3e2dc27ef5224ba560b211bcddd3f Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 24 Feb 2025 08:44:35 -0600
Subject: [PATCH] Add recipe debugging

---
 src/components/cmdk/CommandKClient.tsx | 7 +++++++
 src/photo/PhotoLarge.tsx               | 5 ++++-
 src/state/AppState.ts                  | 2 ++
 src/state/AppStateProvider.tsx         | 4 ++++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/cmdk/CommandKClient.tsx b/src/components/cmdk/CommandKClient.tsx
index 817ddc0f..2f5682ea 100644
--- a/src/components/cmdk/CommandKClient.tsx
+++ b/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,
+        ),
       ],
     });
   }
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 1ec3f2ed..b6f859e4 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/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}
diff --git a/src/state/AppState.ts b/src/state/AppState.ts
index d1214339..ebd1f451 100644
--- a/src/state/AppState.ts
+++ b/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>({});
diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx
index 9a191069..28dc7455 100644
--- a/src/state/AppStateProvider.tsx
+++ b/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}