From 325b379ed6f8bd124bd6f3d2a2ba2a90f9fedec2 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 9 Mar 2025 15:30:10 -0500
Subject: [PATCH] Add titles to recipe overlays

---
 src/photo/PhotoLarge.tsx          |  1 +
 src/recipe/PhotoRecipeOverlay.tsx | 23 ++++++++++++++++-------
 src/recipe/RecipeHeader.tsx       |  3 ++-
 src/recipe/index.ts               |  1 +
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 0b5936e6..7c1a063e 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -203,6 +203,7 @@ export default function PhotoLarge({
           photo.filmSimulation &&
             <PhotoRecipeOverlay
               ref={refRecipe}
+              title={photo.recipeTitle}
               recipe={photo.recipeData}
               simulation={photo.filmSimulation}
               iso={photo.isoFormatted}
diff --git a/src/recipe/PhotoRecipeOverlay.tsx b/src/recipe/PhotoRecipeOverlay.tsx
index b98fc732..80c2255c 100644
--- a/src/recipe/PhotoRecipeOverlay.tsx
+++ b/src/recipe/PhotoRecipeOverlay.tsx
@@ -6,10 +6,11 @@ import clsx from 'clsx/lite';
 import { ReactNode, RefObject } from 'react';
 import { IoCloseCircle } from 'react-icons/io5';
 import { motion } from 'framer-motion';
-import { addSign, formatWhiteBalance, RecipeProps } from '.';
+import { addSign, formatRecipe, formatWhiteBalance, RecipeProps } from '.';
 
 export default function PhotoRecipeOverlay({
   ref,
+  title,
   recipe,
   simulation,
   iso,
@@ -74,7 +75,7 @@ export default function PhotoRecipeOverlay({
       exit={{ opacity: 0, translateY: -10 }}
       className={clsx(
         'z-10',
-        'w-[19rem] p-3 space-y-3',
+        'w-[20rem] p-3 space-y-2',
         'rounded-lg shadow-2xl',
         'text-[13.5px] text-black',
         'bg-white/70 border border-neutral-200/30',
@@ -82,17 +83,25 @@ export default function PhotoRecipeOverlay({
       )}
     >
       <div className="flex items-center gap-2">
-        <PhotoFilmSimulation
-          contrast="frosted"
-          className="grow"
-          simulation={simulation}
-        />
+        <div className="flex items-center gap-2 grow truncate">
+          <div className={clsx(
+            'truncate text-sm uppercase',
+            'translate-y-[0.5px] tracking-wide grow',
+          )}>
+            {title ? formatRecipe(title) : 'Recipe'}
+          </div>
+          <PhotoFilmSimulation
+            contrast="frosted"
+            simulation={simulation}
+          />
+        </div>
         <LoaderButton
           icon={<IoCloseCircle size={20} />}
           onClick={onClose}
           className={clsx(
             'link p-0 m-0 h-4!',
             'text-black/40 active:text-black/75',
+            'translate-y-[2.5px]',
           )}
         />
       </div>
diff --git a/src/recipe/RecipeHeader.tsx b/src/recipe/RecipeHeader.tsx
index bca9a67f..451467c6 100644
--- a/src/recipe/RecipeHeader.tsx
+++ b/src/recipe/RecipeHeader.tsx
@@ -34,8 +34,9 @@ export default function RecipeHeader({
           photo?.recipeData &&
           photo?.filmSimulation
         ) ? setRecipeModalProps?.({
-            simulation: photo.filmSimulation,
+            title: photo.recipeTitle,
             recipe: photo.recipeData,
+            simulation: photo.filmSimulation,
             iso: photo.isoFormatted,
             exposure: photo.exposureTimeFormatted,
           })
diff --git a/src/recipe/index.ts b/src/recipe/index.ts
index fd6ebed2..88d5feff 100644
--- a/src/recipe/index.ts
+++ b/src/recipe/index.ts
@@ -17,6 +17,7 @@ export type RecipeWithCount = {
 export type Recipes = RecipeWithCount[]
 
 export interface RecipeProps {
+  title?: string
   recipe: FujifilmRecipe
   simulation: FilmSimulation
   iso?: string