From 2b93dd750ffd47945b526abebf039c5feff53ac2 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 2 Mar 2025 21:41:58 -0600
Subject: [PATCH] Add core recipe page components

---
 app/admin/recipe/[photoId]/page.tsx           |   2 +-
 app/admin/recipe/page.tsx                     |   2 +-
 app/layout.tsx                                |   2 +
 app/recipe/[recipe]/page.tsx                  |  87 ++++++++++
 src/app/paths.ts                              |  17 +-
 src/camera/PhotoCamera.tsx                    |   2 +
 src/components/Modal.tsx                      |  10 +-
 src/components/primitives/EntityLink.tsx      |  11 +-
 src/focal/PhotoFocalLength.tsx                |   2 +
 src/photo/PhotoGrid.tsx                       |   2 +
 src/photo/PhotoGridContainer.tsx              |   3 +
 src/photo/PhotoLarge.tsx                      |   6 +-
 src/photo/PhotoLink.tsx                       |   3 +-
 src/photo/PhotoMedium.tsx                     |   5 +-
 src/photo/index.ts                            |   1 +
 src/recipe/PhotoRecipe.tsx                    |  48 ++++++
 .../PhotoRecipeGrid.tsx}                      |  11 +-
 src/recipe/PhotoRecipeOGTile.tsx              | 150 ++++++++++++++++++
 src/{photo => recipe}/PhotoRecipeOverlay.tsx  |   6 +-
 src/recipe/RecipeHeader.tsx                   |  54 +++++++
 src/recipe/RecipeModal.tsx                    |  21 +++
 src/recipe/RecipeOverview.tsx                 |  33 ++++
 src/recipe/index.ts                           |  66 ++++++++
 src/{photo => recipe}/useRecipeState.ts       |   0
 src/simulation/PhotoFilmSimulation.tsx        |   3 +-
 src/state/AppState.ts                         |   3 +
 src/state/AppStateProvider.tsx                |   5 +
 src/tag/FavsTag.tsx                           |   2 +
 src/tag/HiddenTag.tsx                         |   2 +
 src/tag/PhotoTag.tsx                          |   2 +
 30 files changed, 531 insertions(+), 30 deletions(-)
 create mode 100644 app/recipe/[recipe]/page.tsx
 create mode 100644 src/recipe/PhotoRecipe.tsx
 rename src/{photo/PhotoRecipe.tsx => recipe/PhotoRecipeGrid.tsx} (94%)
 create mode 100644 src/recipe/PhotoRecipeOGTile.tsx
 rename src/{photo => recipe}/PhotoRecipeOverlay.tsx (91%)
 create mode 100644 src/recipe/RecipeHeader.tsx
 create mode 100644 src/recipe/RecipeModal.tsx
 create mode 100644 src/recipe/RecipeOverview.tsx
 create mode 100644 src/recipe/index.ts
 rename src/{photo => recipe}/useRecipeState.ts (100%)

diff --git a/app/admin/recipe/[photoId]/page.tsx b/app/admin/recipe/[photoId]/page.tsx
index 322a140a..f8129146 100644
--- a/app/admin/recipe/[photoId]/page.tsx
+++ b/app/admin/recipe/[photoId]/page.tsx
@@ -1,6 +1,6 @@
 import SiteGrid from '@/components/SiteGrid';
 import { getPhoto, getPhotos } from '@/photo/db/query';
-import PhotoRecipeOverlay from '@/photo/PhotoRecipeOverlay';
+import PhotoRecipeOverlay from '@/recipe/PhotoRecipeOverlay';
 
 export default async function AdminRecipePage({
   params,
diff --git a/app/admin/recipe/page.tsx b/app/admin/recipe/page.tsx
index 5329b230..67f01aa4 100644
--- a/app/admin/recipe/page.tsx
+++ b/app/admin/recipe/page.tsx
@@ -1,5 +1,5 @@
 import { getPhoto, getPhotos } from '@/photo/db/query';
-import PhotoRecipeOverlay from '@/photo/PhotoRecipeOverlay';
+import PhotoRecipeOverlay from '@/recipe/PhotoRecipeOverlay';
 
 export default async function AdminRecipePage() {
   const [
diff --git a/app/layout.tsx b/app/layout.tsx
index b4f37c38..60efe2c7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -22,6 +22,7 @@ import AdminBatchEditPanel from '@/admin/AdminBatchEditPanel';
 import ShareModals from '@/share/ShareModals';
 import AdminUploadPanel from '@/admin/upload/AdminUploadPanel';
 import { revalidatePath } from 'next/cache';
+import RecipeModal from '@/recipe/RecipeModal';
 
 import '../tailwind.css';
 
@@ -86,6 +87,7 @@ export default function RootLayout({
               )}>
                 <Nav siteDomainOrTitle={SITE_DOMAIN_OR_TITLE} />
                 <ShareModals />
+                <RecipeModal />
                 <div className={clsx(
                   'min-h-[16rem] sm:min-h-[30rem]',
                   'mb-12',
diff --git a/app/recipe/[recipe]/page.tsx b/app/recipe/[recipe]/page.tsx
new file mode 100644
index 00000000..57283086
--- /dev/null
+++ b/app/recipe/[recipe]/page.tsx
@@ -0,0 +1,87 @@
+import { INFINITE_SCROLL_GRID_INITIAL } from '@/photo';
+import { getUniqueTags } from '@/photo/db/query';
+import { IS_PRODUCTION } from '@/app/config';
+import { STATICALLY_OPTIMIZED_PHOTO_CATEGORIES } from '@/app/config';
+import { PATH_ROOT } from '@/app/paths';
+import { getPhotosTagDataCached } from '@/tag/data';
+import type { Metadata } from 'next';
+import { redirect } from 'next/navigation';
+import { cache } from 'react';
+import { convertRecipeToTag, generateMetaForRecipe } from '@/recipe';
+import RecipeOverview from '@/recipe/RecipeOverview';
+
+const getPhotosTagDataCachedCached = cache((tag: string) =>
+  getPhotosTagDataCached({ tag, limit: INFINITE_SCROLL_GRID_INITIAL}));
+
+export let generateStaticParams:
+  (() => Promise<{ recipe: string }[]>) | undefined = undefined;
+
+if (STATICALLY_OPTIMIZED_PHOTO_CATEGORIES && IS_PRODUCTION) {
+  generateStaticParams = async () => {
+    const tags = await getUniqueTags();
+    return tags
+      .filter(({ tag }) => tag.startsWith('recipe'))
+      .map(({ tag }) => ({ recipe: tag.replace(/^recipe-?/i, '')}));
+  };
+}
+
+interface RecipeProps {
+  params: Promise<{ recipe: string }>
+}
+
+export async function generateMetadata({
+  params,
+}: RecipeProps): Promise<Metadata> {
+  const { recipe: recipeFromParams } = await params;
+
+  const recipe = decodeURIComponent(recipeFromParams);
+
+  const [
+    photos,
+    { count, dateRange },
+  ] = await getPhotosTagDataCachedCached(convertRecipeToTag(recipe));
+
+  if (photos.length === 0) { return {}; }
+
+  const {
+    url,
+    title,
+    description,
+    images,
+  } = generateMetaForRecipe(recipe, photos, count, dateRange);
+
+  return {
+    title,
+    openGraph: {
+      title,
+      description,
+      images,
+      url,
+    },
+    twitter: {
+      images,
+      description,
+      card: 'summary_large_image',
+    },
+    description,
+  };
+}
+
+export default async function RecipePage({
+  params,
+}:RecipeProps) {
+  const { recipe: recipeFromParams } = await params;
+
+  const recipe = decodeURIComponent(recipeFromParams);
+
+  const [
+    photos,
+    { count, dateRange },
+  ] = await getPhotosTagDataCachedCached(convertRecipeToTag(recipe));
+
+  if (photos.length === 0) { redirect(PATH_ROOT); }
+
+  return (
+    <RecipeOverview {...{ recipe, photos, count, dateRange }} />
+  );
+}
diff --git a/src/app/paths.ts b/src/app/paths.ts
index 00ff9b6e..31b60343 100644
--- a/src/app/paths.ts
+++ b/src/app/paths.ts
@@ -24,6 +24,7 @@ export const PREFIX_TAG               = '/tag';
 export const PREFIX_CAMERA            = '/shot-on';
 export const PREFIX_FILM_SIMULATION   = '/film';
 export const PREFIX_FOCAL_LENGTH      = '/focal';
+export const PREFIX_RECIPE            = '/recipe';
 
 // Dynamic paths
 const PATH_PHOTO_DYNAMIC              = `${PREFIX_PHOTO}/[photoId]`;
@@ -32,6 +33,7 @@ const PATH_CAMERA_DYNAMIC             = `${PREFIX_CAMERA}/[make]/[model]`;
 // eslint-disable-next-line max-len
 const PATH_FILM_SIMULATION_DYNAMIC    = `${PREFIX_FILM_SIMULATION}/[simulation]`;
 const PATH_FOCAL_LENGTH_DYNAMIC       = `${PREFIX_FOCAL_LENGTH}/[focal]`;
+const PATH_RECIPE_DYNAMIC             = `${PREFIX_RECIPE}/[recipe]`;
 
 // Search params
 export const SEARCH_PARAM_SHOW        = 'show';
@@ -80,6 +82,7 @@ export const PATHS_TO_CACHE = [
   PATH_CAMERA_DYNAMIC,
   PATH_FILM_SIMULATION_DYNAMIC,
   PATH_FOCAL_LENGTH_DYNAMIC,
+  PATH_RECIPE_DYNAMIC,
   ...PATHS_ADMIN,
 ];
 
@@ -110,6 +113,7 @@ export const pathForPhoto = ({
   camera,
   simulation,
   focal,
+  recipe,
   showRecipe,
 }: PhotoPathParams) => {
   const path = typeof photo !== 'string' && photo.hidden
@@ -122,7 +126,9 @@ export const pathForPhoto = ({
           ? `${pathForFilmSimulation(simulation)}/${getPhotoId(photo)}`
           : focal
             ? `${pathForFocalLength(focal)}/${getPhotoId(photo)}`
-            : `${PREFIX_PHOTO}/${getPhotoId(photo)}`;
+            : recipe
+              ? `${pathForRecipe(recipe)}/${getPhotoId(photo)}`
+              : `${PREFIX_PHOTO}/${getPhotoId(photo)}`;
   return showRecipe
     ? `${path}?${SEARCH_PARAM_SHOW}=${SEARCH_PARAM_SHOW_RECIPE}`
     : path;
@@ -140,6 +146,9 @@ export const pathForFilmSimulation = (simulation: FilmSimulation) =>
 export const pathForFocalLength = (focal: number) =>
   `${PREFIX_FOCAL_LENGTH}/${focal}mm`;
 
+export const pathForRecipe = (recipe: string) =>
+  `${PREFIX_RECIPE}/${recipe}`;
+
 export const absolutePathForPhoto = (params: PhotoPathParams) =>
   `${BASE_URL}${pathForPhoto(params)}`;
 
@@ -152,6 +161,9 @@ export const absolutePathForCamera= (camera: Camera) =>
 export const absolutePathForFilmSimulation = (simulation: FilmSimulation) =>
   `${BASE_URL}${pathForFilmSimulation(simulation)}`;
 
+export const absolutePathForRecipe = (recipe: string) =>
+  `${BASE_URL}${pathForRecipe(recipe)}`;
+
 export const absolutePathForFocalLength = (focal: number) =>
   `${BASE_URL}${pathForFocalLength(focal)}`;
 
@@ -168,6 +180,9 @@ export const absolutePathForFilmSimulationImage =
   (simulation: FilmSimulation) =>
     `${absolutePathForFilmSimulation(simulation)}/image`;
 
+export const absolutePathForRecipeImage = (recipe: string) =>
+  `${absolutePathForRecipe(recipe)}/image`;
+
 export const absolutePathForFocalLengthImage =
   (focal: number) =>
     `${absolutePathForFocalLength(focal)}/image`;
diff --git a/src/camera/PhotoCamera.tsx b/src/camera/PhotoCamera.tsx
index 1943db11..c0f1a670 100644
--- a/src/camera/PhotoCamera.tsx
+++ b/src/camera/PhotoCamera.tsx
@@ -14,6 +14,7 @@ export default function PhotoCamera({
   contrast,
   prefetch,
   countOnHover,
+  className,
 }: {
   camera: Camera
   hideAppleIcon?: boolean
@@ -37,6 +38,7 @@ export default function PhotoCamera({
           className="translate-x-[-0.5px]"
         />}
       type={type}
+      className={className}
       badged={badged}
       contrast={contrast}
       prefetch={prefetch}
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index d1ef5f87..a3a7f8f2 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -16,6 +16,7 @@ export default function Modal({
   onClose,
   className,
   anchor = 'center',
+  container = true,
   children,
   fast,
 }: {
@@ -23,6 +24,7 @@ export default function Modal({
   onClose?: () => void
   className?: string
   anchor?: 'top' | 'center'
+  container?: boolean
   children: ReactNode
   fast?: boolean
 }) {
@@ -80,11 +82,11 @@ export default function Modal({
           ref={contentRef}
           key="modalContent"
           className={clsx(
-            'w-[calc(100vw-1.5rem)] sm:w-[min(540px,90vw)]',
-            'p-3 rounded-lg',
-            'md:p-4 md:rounded-xl',
+            container && 'w-[calc(100vw-1.5rem)] sm:w-[min(540px,90vw)]',
+            container && 'p-3 rounded-lg',
+            container && 'md:p-4 md:rounded-xl',
+            container && 'dark:border dark:border-gray-800',
             'bg-white dark:bg-black',
-            'dark:border dark:border-gray-800',
             className,
           )}
         >
diff --git a/src/components/primitives/EntityLink.tsx b/src/components/primitives/EntityLink.tsx
index c77ac81b..9e4eef16 100644
--- a/src/components/primitives/EntityLink.tsx
+++ b/src/components/primitives/EntityLink.tsx
@@ -12,6 +12,7 @@ export interface EntityLinkExternalProps {
   badged?: boolean
   contrast?: ComponentProps<typeof Badge>['contrast']
   prefetch?: boolean
+  className?: string
 }
 
 export default function EntityLink({
@@ -65,13 +66,13 @@ export default function EntityLink({
   </>;
 
   return (
-    <span className="group inline-flex w-full">
+    <span className={clsx(
+      'group inline-flex max-w-full overflow-hidden',
+      className,
+    )}>
       <LinkWithStatus
         href={href}
-        className={clsx(
-          'inline-flex items-center gap-2', 
-          className,
-        )}
+        className="inline-flex items-center gap-2 max-w-full"
       >
         {({ isLoading }) => <>
           <LabeledIcon {...{
diff --git a/src/focal/PhotoFocalLength.tsx b/src/focal/PhotoFocalLength.tsx
index 5b4c9cf4..aedebcac 100644
--- a/src/focal/PhotoFocalLength.tsx
+++ b/src/focal/PhotoFocalLength.tsx
@@ -12,6 +12,7 @@ export default function PhotoFocalLength({
   contrast,
   prefetch,
   countOnHover,
+  className,
 }: {
   focal: number
   countOnHover?: number
@@ -22,6 +23,7 @@ export default function PhotoFocalLength({
       href={pathForFocalLength(focal)}
       icon={<TbCone className="rotate-[270deg]" />}
       type={type}
+      className={className}
       badged={badged}
       contrast={contrast}
       prefetch={prefetch}
diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index fc153f67..b65a2eb9 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -16,6 +16,7 @@ export default function PhotoGrid({
   camera,
   simulation,
   focal,
+  recipe,
   photoPriority,
   fast,
   animate = true,
@@ -94,6 +95,7 @@ export default function PhotoGrid({
               camera,
               simulation,
               focal,
+              recipe,
               selected: photo.id === selectedPhoto?.id,
               priority: photoPriority,
               onVisible: index === photos.length - 1
diff --git a/src/photo/PhotoGridContainer.tsx b/src/photo/PhotoGridContainer.tsx
index ba3fe255..e6bd0092 100644
--- a/src/photo/PhotoGridContainer.tsx
+++ b/src/photo/PhotoGridContainer.tsx
@@ -15,6 +15,7 @@ export default function PhotoGridContainer({
   camera,
   simulation,
   focal,
+  recipe,
   animateOnFirstLoadOnly,
   header,
   sidebar,
@@ -53,6 +54,7 @@ export default function PhotoGridContainer({
             camera,
             simulation,
             focal,
+            recipe,
             animateOnFirstLoadOnly,
             onAnimationComplete,
             canSelect,
@@ -66,6 +68,7 @@ export default function PhotoGridContainer({
               camera,
               simulation,
               focal,
+              recipe,
               animateOnFirstLoadOnly,
               canSelect,
             }} />}
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index dacad417..f5450b54 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -38,11 +38,11 @@ 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';
 import { TbChecklist } from 'react-icons/tb';
 import { IoCloseSharp } from 'react-icons/io5';
 import { AnimatePresence } from 'framer-motion';
-import useRecipeState from './useRecipeState';
+import useRecipeState from '../recipe/useRecipeState';
+import PhotoRecipeGrid from '@/recipe/PhotoRecipeGrid';
 
 export default function PhotoLarge({
   photo,
@@ -187,7 +187,7 @@ export default function PhotoLarge({
           {(shouldShowRecipe || shouldDebugRecipeOverlays) &&
           photo.fujifilmRecipe &&
           photo.filmSimulation &&
-            <PhotoRecipe
+            <PhotoRecipeGrid
               ref={refRecipe}
               recipe={photo.fujifilmRecipe}
               simulation={photo.filmSimulation}
diff --git a/src/photo/PhotoLink.tsx b/src/photo/PhotoLink.tsx
index c8f1b7c3..13954883 100644
--- a/src/photo/PhotoLink.tsx
+++ b/src/photo/PhotoLink.tsx
@@ -14,6 +14,7 @@ export default function PhotoLink({
   camera,
   simulation,
   focal,
+  recipe,
   scroll,
   prefetch,
   nextPhotoAnimation,
@@ -32,7 +33,7 @@ export default function PhotoLink({
   return (
     photo
       ? <Link
-        href={pathForPhoto({ photo, tag, camera, simulation, focal })}
+        href={pathForPhoto({ photo, tag, camera, simulation, focal, recipe })}
         prefetch={prefetch}
         onClick={() => {
           if (nextPhotoAnimation) {
diff --git a/src/photo/PhotoMedium.tsx b/src/photo/PhotoMedium.tsx
index 634b126d..c15304da 100644
--- a/src/photo/PhotoMedium.tsx
+++ b/src/photo/PhotoMedium.tsx
@@ -21,6 +21,7 @@ export default function PhotoMedium({
   camera,
   simulation,
   focal,
+  recipe,
   selected,
   priority,
   prefetch = SHOULD_PREFETCH_ALL_LINKS,
@@ -41,7 +42,7 @@ export default function PhotoMedium({
   return (
     <LinkWithStatus
       ref={ref}
-      href={pathForPhoto({ photo, tag, camera, simulation, focal })}
+      href={pathForPhoto({ photo, tag, camera, simulation, focal, recipe })}
       className={clsx(
         'active:brightness-75',
         selected && 'brightness-50',
@@ -65,7 +66,7 @@ export default function PhotoMedium({
             aspectRatio={photo.aspectRatio}
             blurDataURL={photo.blurData}
             blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
-            className="flex object-cover w-full h-full "
+            className="flex object-cover w-full h-full"
             imgClassName="object-cover w-full h-full"
             alt={altTextForPhoto(photo)}
             priority={priority}
diff --git a/src/photo/index.ts b/src/photo/index.ts
index b6f93c5a..578b3d5f 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -113,6 +113,7 @@ export interface PhotoSetCategory {
   camera?: Camera
   simulation?: FilmSimulation
   focal?: number
+  recipe?: string
   lens?: Lens // Unimplemented as a set
 }
 
diff --git a/src/recipe/PhotoRecipe.tsx b/src/recipe/PhotoRecipe.tsx
new file mode 100644
index 00000000..81b9a4d5
--- /dev/null
+++ b/src/recipe/PhotoRecipe.tsx
@@ -0,0 +1,48 @@
+import { pathForTag } from '@/app/paths';
+import EntityLink, {
+  EntityLinkExternalProps,
+} from '@/components/primitives/EntityLink';
+import { TbChecklist } from 'react-icons/tb';
+import { formatRecipe } from '.';
+import clsx from 'clsx';
+
+export default function PhotoRecipe({
+  recipe,
+  type,
+  badged,
+  contrast,
+  prefetch,
+  countOnHover,
+  className,
+  recipeOnClick,
+}: {
+  recipe: string
+  recipeOnClick?: () => void
+  countOnHover?: number
+} & EntityLinkExternalProps) {
+  return (
+    <div className="flex w-full gap-2 h-[20.5px]">
+      <EntityLink
+        title="Recipe"
+        label={formatRecipe(recipe)}
+        href={pathForTag(recipe)}
+        icon={<TbChecklist size={16} />}
+        className={className}
+        type={type}
+        badged={badged}
+        contrast={contrast}
+        prefetch={prefetch}
+        hoverEntity={countOnHover}
+      />
+      <button
+        onClick={recipeOnClick}
+        className={clsx(
+          'px-1! py-0!',
+          'text-[11px] text-medium tracking-wider',
+        )}
+      >
+        OPEN
+      </button>
+    </div>
+  );
+}
diff --git a/src/photo/PhotoRecipe.tsx b/src/recipe/PhotoRecipeGrid.tsx
similarity index 94%
rename from src/photo/PhotoRecipe.tsx
rename to src/recipe/PhotoRecipeGrid.tsx
index 27a722e1..5d4e677b 100644
--- a/src/photo/PhotoRecipe.tsx
+++ b/src/recipe/PhotoRecipeGrid.tsx
@@ -1,17 +1,16 @@
 'use client';
 
 import LoaderButton from '@/components/primitives/LoaderButton';
-import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
-import { FilmSimulation } from '@/simulation';
 import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation';
 import clsx from 'clsx/lite';
 import { ReactNode, RefObject } from 'react';
 import { IoCloseCircle } from 'react-icons/io5';
 import { motion } from 'framer-motion';
+import { RecipeProps } from '.';
 
 const addSign = (value = 0) => value < 0 ? value : `+${value}`;
 
-export default function PhotoRecipe({
+export default function PhotoRecipeGrid({
   ref,
   recipe: {
     dynamicRange,
@@ -33,12 +32,8 @@ export default function PhotoRecipe({
   iso,
   exposure,
   onClose,
-}: {
+}: RecipeProps & {
   ref?: RefObject<HTMLDivElement | null>
-  recipe: FujifilmRecipe
-  simulation: FilmSimulation
-  iso?: string
-  exposure?: string
   onClose?: () => void
 }) {
   const whiteBalanceTypeFormatted =
diff --git a/src/recipe/PhotoRecipeOGTile.tsx b/src/recipe/PhotoRecipeOGTile.tsx
new file mode 100644
index 00000000..41e70690
--- /dev/null
+++ b/src/recipe/PhotoRecipeOGTile.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
+import { FilmSimulation } from '@/simulation';
+import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation';
+import clsx from 'clsx/lite';
+import { ReactNode, RefObject } from 'react';
+
+const addSign = (value = 0) => value < 0 ? value : `+${value}`;
+
+export default function PhotoRecipeOGTile({
+  recipe: {
+    dynamicRange,
+    whiteBalance,
+    highISONoiseReduction,
+    noiseReductionBasic,
+    highlight,
+    shadow,
+    color,
+    sharpness,
+    clarity,
+    colorChromeEffect,
+    colorChromeFXBlue,
+    grainEffect,
+    bwAdjustment,
+    bwMagentaGreen,
+  },
+  simulation,
+  iso,
+  exposure,
+}: {
+  ref?: RefObject<HTMLDivElement | null>
+  recipe: FujifilmRecipe
+  simulation: FilmSimulation
+  iso?: string
+  exposure?: string
+  onClose?: () => void
+}) {
+  const whiteBalanceTypeFormatted =
+    whiteBalance.type === 'kelvin' && whiteBalance.colorTemperature
+      ? `${whiteBalance.colorTemperature}K`
+      : whiteBalance.type
+        .replace(/auto./i, '')
+        .replaceAll('-', ' ');
+
+  const renderRow = (children: ReactNode, className?: string) =>
+    <div className={clsx(
+      'flex gap-2 *:w-full *:grow',
+      className,
+    )}>
+      {children}
+    </div>;
+
+  const renderDataSquare = (
+    value: ReactNode,
+    label?: string,
+    className?: string,
+  ) => (
+    <div className={clsx(
+      'flex flex-col items-center justify-center gap-0.5 rounded-md min-w-0',
+      'rounded-md border',
+      'border-transparent',
+      'bg-neutral-100/60',
+      label && 'p-1',
+      className,
+    )}>
+      <div className="truncate max-w-full tracking-wide text-lg">
+        {typeof value === 'number' ? addSign(value) : value}
+      </div>
+      {label && <div className={clsx(
+        'text-[11px] leading-none tracking-wide font-medium text-black/50',
+        'uppercase',
+      )}>
+        {label}
+      </div>}
+    </div>
+  );
+
+  return (
+    <div
+      className={clsx(
+        'flex z-10',
+        'w-[37rem] p-10 aspect-video',
+        'text-[13.5px] text-black',
+        'bg-white/50',
+        'backdrop-blur-xl saturate-[300%]',
+      )}
+    >
+      <div className="flex flex-col gap-2 w-full">
+        {renderRow(<>
+          <div className={clsx(
+            'flex',
+            'text-lg leading-none text-black truncate',
+          )}>
+            KODAK PORTRA 500
+          </div>
+          <PhotoFilmSimulation
+            contrast="frosted"
+            simulation={simulation}
+            className="w-auto! grow-0!"
+          />
+        </>, 'flex items-center gap-4')}
+        {renderRow(<>
+          {renderDataSquare(`DR${dynamicRange.development}`)}
+          {renderDataSquare(iso)}
+          {renderDataSquare(exposure ?? '0ev')}
+        </>)}
+        {renderRow(<>
+          {renderDataSquare(
+            whiteBalanceTypeFormatted.toUpperCase(),
+            `R${addSign(whiteBalance?.red)} / B${addSign(whiteBalance?.blue)}`,
+          )}
+          {renderDataSquare(
+            highISONoiseReduction ?? noiseReductionBasic ?? 'OFF',
+            'ISO NR',
+          )}
+          {renderDataSquare(highlight, 'Highlight')}
+          {renderDataSquare(shadow, 'Shadow')}
+        </>)}
+        {renderRow(<>
+          {renderDataSquare(color, 'Color')}
+          {renderDataSquare(sharpness, 'Sharpness')}
+          {renderDataSquare(clarity, 'Clarity')}
+        </>)}
+        {renderRow(<>
+          {renderDataSquare(
+            colorChromeEffect?.toLocaleUpperCase() ?? 'N/A',
+            'Color Chrome',
+          )}
+          {renderDataSquare(
+            colorChromeFXBlue?.toLocaleUpperCase() ?? 'N/A',
+            'FX Blue',
+          )}
+        </>)}
+        {renderRow(<>
+          {renderDataSquare(
+            grainEffect.roughness.toLocaleUpperCase(),
+            grainEffect.size === 'large'
+              ? 'Large Grain'
+              : grainEffect.size === 'small'
+                ? 'Small Grain'
+                : 'Grain',
+          )}
+          {renderDataSquare(bwAdjustment ?? 0, 'BW ADJ')}
+          {renderDataSquare(bwMagentaGreen ?? 0, 'BW M/G')}
+        </>)}
+      </div>
+    </div>
+  );
+}
diff --git a/src/photo/PhotoRecipeOverlay.tsx b/src/recipe/PhotoRecipeOverlay.tsx
similarity index 91%
rename from src/photo/PhotoRecipeOverlay.tsx
rename to src/recipe/PhotoRecipeOverlay.tsx
index cfcac450..ec02723a 100644
--- a/src/photo/PhotoRecipeOverlay.tsx
+++ b/src/recipe/PhotoRecipeOverlay.tsx
@@ -3,8 +3,8 @@
 import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
 import clsx from 'clsx/lite';
 import ImageLarge from '@/components/image/ImageLarge';
-import PhotoRecipe from './PhotoRecipe';
-import { Photo } from '.';
+import PhotoRecipeGrid from './PhotoRecipeGrid';
+import { Photo } from '../photo';
 import { useEffect, useState } from 'react';
 export default function PhotoRecipeOverlay({
   photos,
@@ -40,7 +40,7 @@ export default function PhotoRecipeOverlay({
         'absolute inset-0 w-full h-full',
         'flex items-center justify-center',
       )}>
-        <PhotoRecipe {...{
+        <PhotoRecipeGrid {...{
           recipe,
           simulation: photo.filmSimulation ?? 'provia',
           exposure: photo.exposureCompensationFormatted ?? '+0ev',
diff --git a/src/recipe/RecipeHeader.tsx b/src/recipe/RecipeHeader.tsx
new file mode 100644
index 00000000..0d4dd68b
--- /dev/null
+++ b/src/recipe/RecipeHeader.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { Photo, PhotoDateRange } from '@/photo';
+import { descriptionForTaggedPhotos } from '../tag';
+import PhotoHeader from '@/photo/PhotoHeader';
+import PhotoRecipe from './PhotoRecipe';
+import { useAppState } from '@/state/AppState';
+export default function RecipeHeader({
+  recipe,
+  photos,
+  selectedPhoto,
+  indexNumber,
+  count,
+  dateRange,
+}: {
+  recipe: string
+  photos: Photo[]
+  selectedPhoto?: Photo
+  indexNumber?: number
+  count?: number
+  dateRange?: PhotoDateRange
+}) {
+  const { setRecipeModalProps } = useAppState();
+
+  const photo = photos.find(({ filmSimulation, fujifilmRecipe }) =>
+    fujifilmRecipe && filmSimulation);
+
+  return (
+    <PhotoHeader
+      tag={recipe}
+      entity={<PhotoRecipe
+        recipe={recipe}
+        contrast="high"
+        recipeOnClick={() => (
+          photo?.fujifilmRecipe &&
+          photo?.filmSimulation
+        ) ? setRecipeModalProps?.({
+            simulation: photo.filmSimulation,
+            recipe: photo.fujifilmRecipe,
+            iso: photo.isoFormatted,
+            exposure: photo.exposureTimeFormatted,
+          })
+          : undefined}
+      />}
+      entityDescription={descriptionForTaggedPhotos(photos, undefined, count)}
+      photos={photos}
+      selectedPhoto={selectedPhoto}
+      indexNumber={indexNumber}
+      count={count}
+      dateRange={dateRange}
+      includeShareButton
+    />
+  );
+}
diff --git a/src/recipe/RecipeModal.tsx b/src/recipe/RecipeModal.tsx
new file mode 100644
index 00000000..78b0a452
--- /dev/null
+++ b/src/recipe/RecipeModal.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import Modal from '@/components/Modal';
+import { useAppState } from '@/state/AppState';
+import PhotoRecipeOGTile from './PhotoRecipeOGTile';
+
+export default function ShareModals() {
+  const {
+    recipeModalProps,
+    setRecipeModalProps,
+  } = useAppState();
+
+  if (recipeModalProps) {
+    return <Modal
+      onClose={() => setRecipeModalProps?.(undefined)}
+      container={false}
+    >
+      <PhotoRecipeOGTile {...recipeModalProps}/>
+    </Modal>;
+  }
+}
diff --git a/src/recipe/RecipeOverview.tsx b/src/recipe/RecipeOverview.tsx
new file mode 100644
index 00000000..747c18d1
--- /dev/null
+++ b/src/recipe/RecipeOverview.tsx
@@ -0,0 +1,33 @@
+import { Photo, PhotoDateRange } from '@/photo';
+import PhotoGridContainer from '@/photo/PhotoGridContainer';
+import RecipeHeader from './RecipeHeader';
+
+export default function RecipeOverview({
+  recipe,
+  photos,
+  count,
+  dateRange,
+  animateOnFirstLoadOnly,
+}: {
+  recipe: string,
+  photos: Photo[],
+  count: number,
+  dateRange?: PhotoDateRange,
+  animateOnFirstLoadOnly?: boolean,
+}) {
+  return (
+    <PhotoGridContainer {...{
+      cacheKey: `recipe-${recipe}`,
+      photos,
+      count,
+      recipe,
+      header: <RecipeHeader {...{
+        recipe,
+        photos,
+        count,
+        dateRange,
+      }} />,
+      animateOnFirstLoadOnly,
+    }} />
+  );
+}
diff --git a/src/recipe/index.ts b/src/recipe/index.ts
new file mode 100644
index 00000000..7fbc7f1c
--- /dev/null
+++ b/src/recipe/index.ts
@@ -0,0 +1,66 @@
+import { absolutePathForRecipe, absolutePathForRecipeImage } from '@/app/paths';
+import { Photo, photoQuantityText } from '@/photo';
+import { PhotoDateRange } from '@/photo';
+import {
+  descriptionForTaggedPhotos,
+  isTagFavs,
+  isTagHidden,
+  Tags,
+} from '../tag';
+import { convertStringToArray, parameterize } from '@/utility/string';
+import { capitalizeWords } from '@/utility/string';
+import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
+import { FilmSimulation } from '@/simulation';
+
+const KEY_RECIPE = 'recipe';
+
+export interface RecipeProps {
+  recipe: FujifilmRecipe
+  simulation: FilmSimulation
+  iso?: string
+  exposure?: string   
+}
+
+export const convertTagsToRecipes = (tags: Tags) =>
+  tags.filter(({ tag }) => tag.startsWith(KEY_RECIPE))
+    .map(({ tag }) => convertTagToRecipe(tag));
+
+export const convertRecipeToTag = (recipe: string) =>
+  `${KEY_RECIPE}-${parameterize(recipe)}`;
+
+export const convertTagToRecipe = (tag: string) =>
+  tag.replace(new RegExp(`^${KEY_RECIPE}-?`), '');
+
+export const formatRecipe = (recipe?: string) =>
+  capitalizeWords(recipe?.replaceAll('-', ' '));
+
+export const getValidationMessageForTags = (tags?: string) => {
+  const reservedTags = (convertStringToArray(tags) ?? [])
+    .filter(tag => isTagFavs(tag) || isTagHidden(tag))
+    .map(tag => tag.toLocaleUpperCase());
+  return reservedTags.length
+    ? `Reserved tags: ${reservedTags.join(', ').toLocaleLowerCase()}`
+    : undefined;
+};
+
+export const titleForRecipe = (
+  recipe: string,
+  photos:Photo[] = [],
+  explicitCount?: number,
+) => [
+  `Recipe: ${formatRecipe(recipe)}`,
+  photoQuantityText(explicitCount ?? photos.length),
+].join(' ');
+
+export const generateMetaForRecipe = (
+  recipe: string,
+  photos: Photo[],
+  explicitCount?: number,
+  explicitDateRange?: PhotoDateRange,
+) => ({
+  url: absolutePathForRecipe(recipe),
+  title: titleForRecipe(recipe, photos, explicitCount),
+  description:
+    descriptionForTaggedPhotos(photos, true, explicitCount, explicitDateRange),
+  images: absolutePathForRecipeImage(recipe),
+});
diff --git a/src/photo/useRecipeState.ts b/src/recipe/useRecipeState.ts
similarity index 100%
rename from src/photo/useRecipeState.ts
rename to src/recipe/useRecipeState.ts
diff --git a/src/simulation/PhotoFilmSimulation.tsx b/src/simulation/PhotoFilmSimulation.tsx
index e3019fe1..19bf2466 100644
--- a/src/simulation/PhotoFilmSimulation.tsx
+++ b/src/simulation/PhotoFilmSimulation.tsx
@@ -15,11 +15,11 @@ export default function PhotoFilmSimulation({
   contrast = 'low',
   prefetch,
   countOnHover,
+  className,
 }: {
   simulation: FilmSimulation
   countOnHover?: number
   recipe?: FujifilmRecipe
-  className?: string
 } & EntityLinkExternalProps) {
   const { small, medium, large } = labelForFilmSimulation(simulation);
 
@@ -34,6 +34,7 @@ export default function PhotoFilmSimulation({
       />}
       title={`Film Simulation: ${large}`}
       type={type}
+      className={className}
       badged={badged}
       contrast={contrast}
       prefetch={prefetch}
diff --git a/src/state/AppState.ts b/src/state/AppState.ts
index 174b7c95..65ecb848 100644
--- a/src/state/AppState.ts
+++ b/src/state/AppState.ts
@@ -10,6 +10,7 @@ import { ShareModalProps } from '@/share';
 import { InsightsIndicatorStatus } from '@/admin/insights';
 import { INITIAL_UPLOAD_STATE, UploadState } from '@/admin/upload';
 import { AdminData } from '@/admin/actions';
+import { RecipeProps } from '@/recipe';
 
 export type AppStateContext = {
   // CORE
@@ -34,6 +35,8 @@ export type AppStateContext = {
   setIsCommandKOpen?: Dispatch<SetStateAction<boolean>>
   shareModalProps?: ShareModalProps
   setShareModalProps?: Dispatch<SetStateAction<ShareModalProps | undefined>>
+  recipeModalProps?: RecipeProps
+  setRecipeModalProps?: Dispatch<SetStateAction<RecipeProps | undefined>>
   // AUTH
   userEmail?: string
   setUserEmail?: Dispatch<SetStateAction<string | undefined>>
diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx
index b4be8d11..f17b7b16 100644
--- a/src/state/AppStateProvider.tsx
+++ b/src/state/AppStateProvider.tsx
@@ -23,6 +23,7 @@ import {
 import { useRouter, usePathname } from 'next/navigation';
 import { isPathAdmin, PATH_SIGN_IN } from '@/app/paths';
 import { INITIAL_UPLOAD_STATE, UploadState } from '@/admin/upload';
+import { RecipeProps } from '@/recipe';
 
 export default function AppStateProvider({
   children,
@@ -53,6 +54,8 @@ export default function AppStateProvider({
     useState(false);
   const [shareModalProps, setShareModalProps] =
     useState<ShareModalProps>();
+  const [recipeModalProps, setRecipeModalProps] =
+    useState<RecipeProps>();
   // AUTH
   const [userEmail, setUserEmail] =
     useState<string>();
@@ -170,6 +173,8 @@ export default function AppStateProvider({
         setIsCommandKOpen,
         shareModalProps,
         setShareModalProps,
+        recipeModalProps,
+        setRecipeModalProps,
         // AUTH
         userEmail,
         setUserEmail,
diff --git a/src/tag/FavsTag.tsx b/src/tag/FavsTag.tsx
index 97f3ac7a..36bf0d0e 100644
--- a/src/tag/FavsTag.tsx
+++ b/src/tag/FavsTag.tsx
@@ -12,6 +12,7 @@ export default function FavsTag({
   contrast,
   prefetch,
   countOnHover,
+  className,
 }: {
   countOnHover?: number
 } & EntityLinkExternalProps) {
@@ -36,6 +37,7 @@ export default function FavsTag({
           )}
         />}
       type={type}
+      className={className}
       hoverEntity={countOnHover}
       badged={badged}
       contrast={contrast}
diff --git a/src/tag/HiddenTag.tsx b/src/tag/HiddenTag.tsx
index 635dac93..f82619fb 100644
--- a/src/tag/HiddenTag.tsx
+++ b/src/tag/HiddenTag.tsx
@@ -11,6 +11,7 @@ export default function HiddenTag({
   contrast,
   prefetch,
   countOnHover,
+  className,
 }: {
   countOnHover?: number
 } & EntityLinkExternalProps) {
@@ -28,6 +29,7 @@ export default function HiddenTag({
       href={pathForTag(TAG_HIDDEN)}
       icon={!badged && <AiOutlineEyeInvisible size={16} />}
       type={type}
+      className={className}
       hoverEntity={countOnHover}
       badged={badged}
       contrast={contrast}
diff --git a/src/tag/PhotoTag.tsx b/src/tag/PhotoTag.tsx
index 629c3c71..0d4ae34e 100644
--- a/src/tag/PhotoTag.tsx
+++ b/src/tag/PhotoTag.tsx
@@ -12,6 +12,7 @@ export default function PhotoTag({
   contrast,
   prefetch,
   countOnHover,
+  className,
 }: {
   tag: string
   countOnHover?: number
@@ -25,6 +26,7 @@ export default function PhotoTag({
         className="translate-y-[0.5px]"
       />}
       type={type}
+      className={className}
       badged={badged}
       contrast={contrast}
       prefetch={prefetch}