Add toggle-able recipes to simulations

src/photo/PhotoLarge.tsx

@@ -40,7 +40,6 @@ import { LuExpand } from 'react-icons/lu';
 import LoaderButton from '@/components/primitives/LoaderButton';
 import Tooltip from '@/components/Tooltip';
 import ZoomControls, { ZoomControlsRef } from '@/components/image/ZoomControls';
-import PhotoRecipe from './PhotoRecipe';
 
 export default function PhotoLarge({
   photo,
@@ -276,15 +275,11 @@ export default function PhotoLarge({
                   <li>{photo.exposureCompensationFormatted ?? '0ev'}</li>
                 </ul>
                 {showSimulation && photo.filmSimulation &&
-                  <Tooltip content={photo.fujifilmRecipe
-                    ? <PhotoRecipe recipe={photo.fujifilmRecipe} />
-                    : undefined
-                  }>
-                    <PhotoFilmSimulation
-                      simulation={photo.filmSimulation}
-                      prefetch={prefetchRelatedLinks}
-                    />
-                  </Tooltip>}
+                  <PhotoFilmSimulation
+                    simulation={photo.filmSimulation}
+                    prefetch={prefetchRelatedLinks}
+                    recipe={photo.fujifilmRecipe}
+                  />}
               </>}
             <div className={clsx(
               'flex gap-x-3 gap-y-baseline',

src/photo/PhotoRecipe.tsx

@@ -18,13 +18,13 @@ export default function PhotoRecipe({ recipe: {
   whiteBalance,
   bwAdjustment,
   bwMagentaGreen,
-} }: { recipe: FujifilmRecipe }) {  
-  return <div className="text-left space-y-4">
-    <div className="font-bold">
-      Fujifilm Recipe
-    </div>
+} }: { recipe: FujifilmRecipe }) {
+  return <div className="">
     <div className={clsx(
-      'grid grid-cols-2 gap-2',
+      'px-3 py-2 max-w-[16rem]',
+      'text-left text-xs',
+      'border-medium rounded-md',
+      'grid grid-cols-2 gap-1',
       '*:odd:text-dim *:even:uppercase',
     )}>
       {dynamicRange !== undefined && <>

src/simulation/PhotoFilmSimulation.tsx

@@ -1,11 +1,18 @@
+'use client';
+
 import { labelForFilmSimulation } from '@/platforms/fujifilm/simulation';
 import PhotoFilmSimulationIcon from './PhotoFilmSimulationIcon';
 import { pathForFilmSimulation } from '@/app/paths';
 import { FilmSimulation } from '.';
+import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
 import EntityLink, {
   EntityLinkExternalProps,
 } from '@/components/primitives/EntityLink';
-
+import { LuChevronsUpDown } from 'react-icons/lu';
+import clsx from 'clsx';
+import { useState } from 'react';
+import PhotoRecipe from '@/photo/PhotoRecipe';
+import Tooltip from '@/components/Tooltip';
 export default function PhotoFilmSimulation({
   simulation,
   type = 'icon-last',
@@ -13,25 +20,48 @@ export default function PhotoFilmSimulation({
   contrast = 'low',
   prefetch,
   countOnHover,
+  recipe,
 }: {
   simulation: FilmSimulation
   countOnHover?: number
+  recipe?: FujifilmRecipe
 } & EntityLinkExternalProps) {
   const { small, medium, large } = labelForFilmSimulation(simulation);
 
+  const [shouldShowRecipe, setShouldShowRecipe] = useState(false);
+
   return (
-    <EntityLink
-      label={medium}
-      labelSmall={small}
-      href={pathForFilmSimulation(simulation)}
-      icon={<PhotoFilmSimulationIcon simulation={simulation} />}
-      title={`Film Simulation: ${large}`}
-      type={type}
-      badged={badged}
-      contrast={contrast}
-      prefetch={prefetch}
-      hoverEntity={countOnHover}
-      iconWide
-    />
+    <div className="space-y-baseline">
+      <div className="flex items-center gap-2 *:w-auto">
+        <EntityLink
+          label={medium}
+          labelSmall={small}
+          href={pathForFilmSimulation(simulation)}
+          icon={<PhotoFilmSimulationIcon simulation={simulation} />}
+          title={`Film Simulation: ${large}`}
+          type={type}
+          badged={badged}
+          contrast={contrast}
+          prefetch={prefetch}
+          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={recipe} />}
+    </div>
   );
 }