Refine admin recipe detail page

app/admin/recipes/[recipe]/edit/page.tsx

@@ -6,6 +6,8 @@ import PhotoLightbox from '@/photo/PhotoLightbox';
 import { getPhotosMeta } from '@/photo/db/query';
 import AdminRecipeBadge from '@/admin/AdminRecipeBadge';
 import AdminRecipeForm from '@/admin/AdminRecipeForm';
+import { getPhotoWithRecipeFromPhotos } from '@/recipe';
+import AdminShowRecipeButton from '@/admin/AdminShowRecipeButton';
 
 const MAX_PHOTO_TO_SHOW = 6;
 
@@ -28,6 +30,11 @@ export default async function RecipePageEdit({
     getPhotosCached({ recipe, limit: MAX_PHOTO_TO_SHOW }),
   ]);
 
+  const {
+    recipeData,
+    filmSimulation,
+  } = getPhotoWithRecipeFromPhotos(photos) ?? {};
+
   if (count === 0) { redirect(PATH_ADMIN); }
 
   return (
@@ -35,6 +42,13 @@ export default async function RecipePageEdit({
       backPath={PATH_ADMIN_TAGS}
       backLabel="Tags"
       breadcrumb={<AdminRecipeBadge {...{ recipe, count, hideBadge: true }} />}
+      accessory={recipeData && filmSimulation &&
+        <AdminShowRecipeButton
+          title={recipe}
+          recipe={recipeData}
+          simulation={filmSimulation}
+        />
+      }
     >
       <AdminRecipeForm {...{ recipe, photos }}>
         <PhotoLightbox

src/admin/AdminRecipeBadge.tsx

@@ -15,7 +15,7 @@ export default function AdminRecipeBadge({
   const renderBadgeContent = () =>
     <div className={clsx(
       'inline-flex items-center gap-2',
-      'translate-y-[1px]',
+      'translate-y-[1.5px]',
     )}>
       <PhotoRecipe {...{ recipe }} />
       <div className="text-dim uppercase">

src/admin/AdminShowRecipeButton.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import LoaderButton from '@/components/primitives/LoaderButton';
+import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
+import { FujifilmSimulation } from '@/platforms/fujifilm/simulation';
+import { useAppState } from '@/state/AppState';
+import { TbChecklist } from 'react-icons/tb';
+
+export default function AdminShowRecipeButton({
+  title,
+  recipe,
+  simulation,
+}: {
+  title: string
+  recipe: FujifilmRecipe
+  simulation: FujifilmSimulation
+}) {
+  const { setRecipeModalProps } = useAppState();
+
+  return (
+    <LoaderButton
+      icon={<TbChecklist
+        size={17}
+        className="translate-y-[1px]"
+      />}
+      onClick={() => setRecipeModalProps?.({
+        title,
+        recipe,
+        simulation,
+      })}
+    >
+        Preview
+    </LoaderButton>
+  );
+}

src/components/Badge.tsx

@@ -23,8 +23,8 @@ export default function Badge({
       return clsx(
         'px-1.5 h-[26px]',
         'rounded-md',
-        'bg-gray-100/80 dark:bg-gray-900/80',
+        'bg-gray-100/40 dark:bg-gray-900/60',
-        'border border-gray-200/60 dark:border-gray-800/75',
+        'border border-medium',
       );
     case 'small':
       return clsx(

src/image-response/RecipeImageResponse.tsx

@@ -25,13 +25,15 @@ export default function RecipeImageResponse({
   fontFamily: string
   smallText?: boolean
 }) {
-  const photo = getPhotoWithRecipeFromPhotos(photos);
+  const {
+    recipeData,
+    filmSimulation,
+  } = getPhotoWithRecipeFromPhotos(photos) ?? {};
 
-  let recipeLines = photo?.recipeData && photo.filmSimulation
+  let recipeLines = recipeData && filmSimulation
     ? generateRecipeText({
-      recipe: photo.recipeData,
+      recipe: recipeData,
-      simulation: photo.filmSimulation!,
+      simulation: filmSimulation,
-      iso: photo.iso!.toString(),
     }, true)
     : [];
 
@@ -72,7 +74,7 @@ export default function RecipeImageResponse({
         />,
         title: formatTag(recipe).toLocaleUpperCase(),
       }}>
-        {photo?.recipeData &&
+        {recipeData &&
           <div
             // tw="opacity-70"
             style={{
@@ -108,10 +110,10 @@ export default function RecipeImageResponse({
                   flexGrow: 1,
                 }}>
                   {text}
-                  {isStringFilmSimulation(text) &&
+                  {isStringFilmSimulation(text) && filmSimulation &&
                     <div tw="flex">
                       <PhotoFilmSimulationIcon
-                        simulation={photo.filmSimulation}
+                        simulation={filmSimulation}
                         height={height * .06}
                         style={{ transform: `translateY(${-height * .001}px)`}}
                       />