Add basic show/hide recipe behavior

src/photo/PhotoLarge.tsx

@@ -32,7 +32,7 @@ import {
 } from '@/app/config';
 import AdminPhotoMenuClient from '@/admin/AdminPhotoMenuClient';
 import { RevalidatePhoto } from './InfinitePhotoScroll';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import useVisible from '@/utility/useVisible';
 import PhotoDate from './PhotoDate';
 import { useAppState } from '@/state/AppState';
@@ -41,6 +41,8 @@ import LoaderButton from '@/components/primitives/LoaderButton';
 import Tooltip from '@/components/Tooltip';
 import ZoomControls, { ZoomControlsRef } from '@/components/image/ZoomControls';
 import PhotoRecipe from './PhotoRecipe';
+import { TbChecklist } from 'react-icons/tb';
+import { IoCloseSharp } from 'react-icons/io5';
 
 export default function PhotoLarge({
   photo,
@@ -89,6 +91,8 @@ export default function PhotoLarge({
 
   const zoomControlsRef = useRef<ZoomControlsRef>(null);
 
+  const [shouldShowRecipe, setShouldShowRecipe] = useState(false);
+
   const {
     areZoomControlsShown,
     arePhotosMatted,
@@ -165,14 +169,14 @@ export default function PhotoLarge({
           priority={priority}
         />
       </ZoomControls>
-      {photo.fujifilmRecipe && photo.filmSimulation &&
+      {shouldShowRecipe && photo.fujifilmRecipe && photo.filmSimulation &&
         <div className={clsx(
           'absolute inset-0',
           'flex items-center justify-center',
         )}>
           <PhotoRecipe
-            recipe={photo.fujifilmRecipe!}
+            recipe={photo.fujifilmRecipe}
-            simulation={photo.filmSimulation!}
+            simulation={photo.filmSimulation}
             iso={photo.isoFormatted}
             exposure={photo.exposureCompensationFormatted}
           />
@@ -289,11 +293,30 @@ export default function PhotoLarge({
                   <li>{photo.exposureCompensationFormatted ?? '0ev'}</li>
                 </ul>
                 {showSimulation && photo.filmSimulation &&
-                  <PhotoFilmSimulation
+                  <div className="flex items-center gap-2 *:w-auto">
-                    simulation={photo.filmSimulation}
+                    <PhotoFilmSimulation
-                    prefetch={prefetchRelatedLinks}
+                      simulation={photo.filmSimulation}
-                    recipe={photo.fujifilmRecipe}
+                      prefetch={prefetchRelatedLinks}
-                  />}
+                    />
+                    {photo.fujifilmRecipe &&
+                      <Tooltip content="Fujifilm Recipe">
+                        <button
+                          onClick={() => setShouldShowRecipe(!shouldShowRecipe)}
+                          className={clsx(
+                            'text-medium',
+                            'border-medium rounded-md',
+                            'px-[4px] py-[2.5px] my-[-2.5px]',
+                            'hover:bg-dim active:bg-main',
+                          )}>
+                          {shouldShowRecipe
+                            ? <IoCloseSharp size={15} />
+                            : <TbChecklist
+                              className="translate-x-[0.5px]"
+                              size={15}
+                            />}
+                        </button>
+                      </Tooltip>} 
+                  </div>}
               </>}
             <div className={clsx(
               'flex gap-x-3 gap-y-baseline',

src/simulation/PhotoFilmSimulation.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { labelForFilmSimulation } from '@/platforms/fujifilm/simulation';
 import PhotoFilmSimulationIcon from './PhotoFilmSimulationIcon';
 import { pathForFilmSimulation } from '@/app/paths';
@@ -8,11 +6,7 @@ import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
 import EntityLink, {
   EntityLinkExternalProps,
 } from '@/components/primitives/EntityLink';
-import { LuChevronsUpDown } from 'react-icons/lu';
 import clsx from 'clsx/lite';
-import { useState } from 'react';
-import Tooltip from '@/components/Tooltip';
-import PhotoRecipe from '@/photo/PhotoRecipe';
 
 export default function PhotoFilmSimulation({
   simulation,
@@ -21,8 +15,6 @@ export default function PhotoFilmSimulation({
   contrast = 'low',
   prefetch,
   countOnHover,
-  recipe,
-  className,
 }: {
   simulation: FilmSimulation
   countOnHover?: number
@@ -31,43 +23,22 @@ export default function PhotoFilmSimulation({
 } & EntityLinkExternalProps) {
   const { small, medium, large } = labelForFilmSimulation(simulation);
 
-  const [shouldShowRecipe, setShouldShowRecipe] = useState(false);
-
   return (
-    <div className={clsx('space-y-baseline', className)}>
+    <EntityLink
-      <div className="flex items-center gap-2 *:w-auto">
+      label={medium}
-        <EntityLink
+      labelSmall={small}
-          label={medium}
+      href={pathForFilmSimulation(simulation)}
-          labelSmall={small}
+      icon={<PhotoFilmSimulationIcon
-          href={pathForFilmSimulation(simulation)}
+        simulation={simulation}
-          icon={<PhotoFilmSimulationIcon
+        className={clsx(contrast === 'frosted' && 'text-black')}
-            simulation={simulation}
+      />}
-            className={clsx(contrast === 'frosted' && 'text-black')}
+      title={`Film Simulation: ${large}`}
-          />}
+      type={type}
-          title={`Film Simulation: ${large}`}
+      badged={badged}
-          type={type}
+      contrast={contrast}
-          badged={badged}
+      prefetch={prefetch}
-          contrast={contrast}
+      hoverEntity={countOnHover}
-          prefetch={prefetch}
+      iconWide
-          hoverEntity={countOnHover}
+    />
-          iconWide
-        />
-        {recipe &&
-          <Tooltip content="Fujifilm Recipe">
-            <button
-              onClick={() => setShouldShowRecipe(!shouldShowRecipe)}
-              className={clsx(
-                'text-medium',
-                'border-medium rounded-md',
-                'px-[4px] py-[2.5px] my-[-2.5px]',
-                'hover:bg-dim active:bg-main',
-              )}>
-              <LuChevronsUpDown size={15} />
-            </button>
-          </Tooltip>} 
-      </div>
-      {recipe && shouldShowRecipe &&
-        <PhotoRecipe {...{ recipe, simulation }} />}
-    </div>
   );
 }