Refine recipe behavior

src/photo/PhotoLarge.tsx

@@ -106,9 +106,8 @@ export default function PhotoLarge({
   const showZoomControls = showZoomControlsProp && areZoomControlsShown;
 
   const refRecipe = useRef<HTMLDivElement>(null);
-  const refRecipeTitle = useRef<HTMLButtonElement>(null);
   const refRecipeButton = useRef<HTMLButtonElement>(null);
-  const refTriggers = useMemo(() => [refRecipeTitle, refRecipeButton], []);
+  const refTriggers = useMemo(() => [refRecipeButton], []);
   const {
     shouldShowRecipe,
     toggleRecipe,
@@ -271,11 +270,8 @@ export default function PhotoLarge({
                     />}
                   {showRecipeContent &&
                     <PhotoRecipe
-                      refButton={refRecipeTitle}
                       recipe={recipe}
                       contrast="medium"
-                      isOpen={shouldShowRecipe}
-                      recipeOnClick={toggleRecipe}
                       prefetch={prefetchRelatedLinks}
                     />}
                   {showTagsContent &&

src/recipe/RecipeHeader.tsx

@@ -4,7 +4,7 @@ import { Photo, PhotoDateRange } from '@/photo';
 import PhotoHeader from '@/photo/PhotoHeader';
 import PhotoRecipe from './PhotoRecipe';
 import { useAppState } from '@/state/AppState';
-import { descriptionForRecipePhotos } from '.';
+import { descriptionForRecipePhotos, photoHasRecipe } from '.';
 export default function RecipeHeader({
   recipe,
   photos,
@@ -22,8 +22,9 @@ export default function RecipeHeader({
 }) {
   const { setRecipeModalProps } = useAppState();
 
-  const photo = photos.find(({ filmSimulation, recipeData }) =>
-    recipeData && filmSimulation);
+  const photo = photoHasRecipe(selectedPhoto)
+    ? selectedPhoto
+    : photos.find(photoHasRecipe);
 
   return (
     <PhotoHeader

src/recipe/index.ts

@@ -60,3 +60,6 @@ export const generateMetaForRecipe = (
     descriptionForRecipePhotos(photos, true, explicitCount, explicitDateRange),
   images: absolutePathForRecipeImage(recipe),
 });
+
+export const photoHasRecipe = (photo?: Photo) =>
+  photo?.filmSimulation && photo?.recipeData;

src/tag/index.ts

@@ -51,9 +51,9 @@ export const shareTextForTag = (tag: string) =>
 
 export const sortTags = (
   tags: string[],
-  tagToHide?: string,
+  tagToExclude?: string,
 ) => tags
-  .filter(tag => tag !== tagToHide)
+  .filter(tag => tag !== tagToExclude)
   .sort((a, b) => isTagFavs(a) ? -1 : a.localeCompare(b));
 
 export const sortTagsObject = (