Refine recipe overlay grid/behavior

src/image-response/RecipeImageResponse.tsx

@@ -32,7 +32,7 @@ export default function RecipeImageResponse({
       recipe: photo.recipeData,
       simulation: photo.filmSimulation!,
       iso: photo.iso!.toString(),
-    })
+    }, true)
     : [];
 
   if (recipeLines && recipeLines.length > MAX_RECIPE_LINES) {

src/photo/PhotoLarge.tsx

@@ -356,7 +356,11 @@ export default function PhotoLarge({
                         <button
                           ref={refRecipeButton}
                           title="Fujifilm Recipe"
-                          onClick={toggleRecipeOverlay}
+                          onClick={() => {
+                            toggleRecipeOverlay();
+                            // Avoid unexpected tooltip trigger
+                            refRecipeButton.current?.blur();
+                          }}
                           className={clsx(
                             'text-medium',
                             'border-medium rounded-md',

src/recipe/PhotoRecipeOverlay.tsx

@@ -8,6 +8,7 @@ import { IoCloseCircle } from 'react-icons/io5';
 import { motion } from 'framer-motion';
 import {
   addSign,
+  formatGrain,
   formatNoiseReduction,
   formatRecipe,
   formatWhiteBalance,
@@ -36,28 +37,24 @@ export default function PhotoRecipeOverlay({
     clarity,
     colorChromeEffect,
     colorChromeFXBlue,
-    grainEffect,
     bwAdjustment,
     bwMagentaGreen,
   } = recipe;
 
   const whiteBalanceTypeFormatted = formatWhiteBalance(recipe);
 
-  const renderRow = (children: ReactNode) =>
-    <div className="flex gap-2 *:w-full *:grow">{children}</div>;
-
   const renderDataSquare = (
     value: ReactNode,
     label?: string,
-    className?: string,
+    colSpan = 'col-span-4',
   ) => (
     <div className={clsx(
-      'flex flex-col items-center justify-center gap-0.5 rounded-md min-w-0',
+      'flex flex-col items-center justify-center gap-0.5 min-w-0',
       'rounded-md border',
       'border-neutral-200/40',
       'bg-neutral-100/30 hover:bg-neutral-100/50',
       label && 'p-1',
-      className,
+      colSpan,
     )}>
       <div className="truncate max-w-full tracking-wide">
         {typeof value === 'number' ? addSign(value) : value}
@@ -109,55 +106,48 @@ export default function PhotoRecipeOverlay({
           )}
         />
       </div>
-      <div className="space-y-2">
+      <div className="grid grid-cols-12 gap-2">
-        {renderRow(<>
+        {/* ROW */}
-          {renderDataSquare(`DR${dynamicRange.development}`)}
+        {renderDataSquare(`DR${dynamicRange.development}`)}
-          {renderDataSquare(iso)}
+        {renderDataSquare(iso)}
-          {renderDataSquare(exposure ?? '0ev')}
+        {renderDataSquare(exposure ?? '0ev')}
-        </>)}
+        {/* ROW */}
-        {renderRow(<>
+        {renderDataSquare(
-          {renderDataSquare(
+          whiteBalanceTypeFormatted.toUpperCase(),
-            whiteBalanceTypeFormatted.toUpperCase(),
+          `R${addSign(whiteBalance?.red)} / B${addSign(whiteBalance?.blue)}`,
-            `R${addSign(whiteBalance?.red)} / B${addSign(whiteBalance?.blue)}`,
+          'col-span-8',
-            'basis-2/3',
+        )}
-          )}
+        {renderDataSquare(
-          {renderDataSquare(
+          formatNoiseReduction(recipe),
-            formatNoiseReduction(recipe),
+          'ISO NR',
-            'ISO NR',
+          'col-span-4',
-            'basis-1/3',
+        )}
-          )}
+        {/* ROW */}
-        </>)}
+        {renderDataSquare(highlight, 'Highlight', 'col-span-6')}
-        {renderRow(<>
+        {renderDataSquare(shadow, 'Shadow', 'col-span-6')}
-          {renderDataSquare(highlight, 'Highlight')}
+        {/* ROW */}
-          {renderDataSquare(shadow, 'Shadow')}
+        {renderDataSquare(color, 'Color')}
-        </>)}
+        {renderDataSquare(sharpness, 'Sharpness')}
-        {renderRow(<>
+        {renderDataSquare(clarity, 'Clarity')}
-          {renderDataSquare(color, 'Color')}
+        {/* ROW */}
-          {renderDataSquare(sharpness, 'Sharpness')}
+        {renderDataSquare(
-          {renderDataSquare(clarity, 'Clarity')}
+          colorChromeEffect?.toLocaleUpperCase() ?? 'N/A',
-        </>)}
+          'Color Chrome',
-        {renderRow(<>
+          'col-span-6',
-          {renderDataSquare(
+        )}
-            colorChromeEffect?.toLocaleUpperCase() ?? 'N/A',
+        {renderDataSquare(
-            'Color Chrome',
+          colorChromeFXBlue?.toLocaleUpperCase() ?? 'N/A',
-          )}
+          'FX Blue',
-          {renderDataSquare(
+          'col-span-6',
-            colorChromeFXBlue?.toLocaleUpperCase() ?? 'N/A',
+        )}
-            'FX Blue',
+        {/* ROW */}
-          )}
+        {renderDataSquare(
-        </>)}
+          formatGrain(recipe),
-        {renderRow(<>
+          'grain',
-          {renderDataSquare(
+          'col-span-6',
-            grainEffect.roughness.toLocaleUpperCase(),
+        )}
-            grainEffect.size === 'large'
+        {renderDataSquare(bwAdjustment ?? 0, 'BW ADJ', 'col-span-3')}
-              ? 'Large Grain'
+        {renderDataSquare(bwMagentaGreen ?? 0, 'BW M/G', 'col-span-3')}
-              : grainEffect.size === 'small'
-                ? 'Small Grain'
-                : 'Grain',
-          )}
-          {renderDataSquare(bwAdjustment ?? 0, 'BW ADJ')}
-          {renderDataSquare(bwMagentaGreen ?? 0, 'BW M/G')}
-        </>)}
       </div>
     </motion.div>
   );

src/recipe/index.ts

@@ -57,7 +57,9 @@ export const descriptionForRecipePhotos = (
 export const generateRecipeText = ({
   recipe,
   simulation,
-}: RecipeProps) => {
+}: RecipeProps,
+abbreviate?: boolean,
+) => {
   const lines = [
     `${labelForFilmSimulation(simulation).small.toLocaleUpperCase()}`,
     // eslint-disable-next-line max-len
@@ -78,7 +80,7 @@ export const generateRecipeText = ({
     lines.push(`FX BLUE ${recipe.colorChromeFXBlue.toLocaleUpperCase()}`);
   }
   if (recipe.grainEffect.roughness !== 'off') {
-    lines.push(`GRAIN ${formatGrain(recipe)}`);
+    lines.push(`GRAIN ${formatGrain(recipe, abbreviate)}`);
   }
   if (recipe.bwAdjustment || recipe.bwMagentaGreen) {
     // eslint-disable-next-line max-len
@@ -139,12 +141,17 @@ export const formatWhiteBalanceColor = ({
     ? `R${addSign(red)}/B${addSign(blue)}`
     : '';
 
-export const formatGrain = ({ grainEffect }: FujifilmRecipe) =>
+export const formatGrain = (
-  grainEffect.roughness === 'off'
+  { grainEffect }: FujifilmRecipe,
+  abbreviate?: boolean,
+) => {
+  const size = abbreviate
+    ? grainEffect.size === 'small' ? 'SM' : 'LG'
+    : grainEffect.size;
+  return grainEffect.roughness === 'off'
     ? 'OFF'
-    : grainEffect.roughness === 'weak'
+    : `${grainEffect.roughness}/${size}`.toLocaleUpperCase();
-      ? `WEAK/${grainEffect.size === 'small' ? 'SM' : 'LG'}`
+};
-      : `STRONG/${grainEffect.size === 'small' ? 'SM' : 'LG'}`;
 
 export const formatNoiseReduction = ({
   highISONoiseReduction,