Add lenses to visibility configuration

src/app/config.ts

@@ -210,6 +210,8 @@ export const MATTE_PHOTOS =
 
 export const CATEGORY_VISIBILITY = getOrderedCategoriesFromString(
   process.env.NEXT_PUBLIC_CATEGORY_VISIBILITY);
+export const SHOW_LENSES =
+  CATEGORY_VISIBILITY.includes('lenses');
 export const SHOW_RECIPES =
   CATEGORY_VISIBILITY.includes('recipes');
 export const SHOW_FILM_SIMULATIONS =

src/lens/PhotoLens.tsx

@@ -23,7 +23,7 @@ export default function PhotoLens({
       label={formatLensText(lens)}
       href={pathForLens(lens)}
       icon={<TbCone
-        className="rotate-[270deg] translate-x-[-0.5px]"
+        className="rotate-[270deg] translate-x-[-1px] translate-y-[-0.5px]"
       />}
       type={type}
       className={className}

src/photo/PhotoLarge.tsx

@@ -7,6 +7,7 @@ import {
   shouldShowCameraDataForPhoto,
   shouldShowExifDataForPhoto,
   shouldShowLensDataForPhoto,
+  shouldShowRecipeDataForPhoto,
   titleForPhoto,
 } from '.';
 import SiteGrid from '@/components/SiteGrid';
@@ -27,8 +28,6 @@ import {
   SHOULD_PREFETCH_ALL_LINKS,
   ALLOW_PUBLIC_DOWNLOADS,
   SHOW_TAKEN_AT_TIME,
-  SHOW_RECIPES,
-  SHOW_FILM_SIMULATIONS,
 } from '@/app/config';
 import AdminPhotoMenuClient from '@/admin/AdminPhotoMenuClient';
 import { RevalidatePhoto } from './InfinitePhotoScroll';
@@ -127,13 +126,15 @@ export default function PhotoLarge({
 
   const camera = cameraFromPhoto(photo);
   const lens = lensFromPhoto(photo);
-  const { recipeTitle: recipe } = photo;
+  const { recipeTitle } = photo;
+
+  const showExifContent = shouldShowExifDataForPhoto(photo);
 
   const showCameraContent = showCamera && shouldShowCameraDataForPhoto(photo);
   const showLensContent = showLens && shouldShowLensDataForPhoto(photo);
-  const showRecipeContent = showRecipe && recipe;
+  const showRecipeContent = showRecipe && shouldShowRecipeDataForPhoto(photo);
+  const showRecipeButton = shouldShowRecipeDataForPhoto(photo);
   const showTagsContent = tags.length > 0;
-  const showExifContent = shouldShowExifDataForPhoto(photo);
 
   useVisible({ ref, onVisible });
 
@@ -147,6 +148,7 @@ export default function PhotoLarge({
 
   const hasMetaContent =
     showCameraContent ||
+    showLensContent ||
     showTagsContent ||
     showRecipeContent ||
     showExifContent;
@@ -224,17 +226,6 @@ export default function PhotoLarge({
     'flex items-center justify-center aspect-3/2 bg-gray-100',
   );
 
-  const shouldRenderSimulation = (
-    SHOW_FILM_SIMULATIONS &&
-    showSimulation &&
-    photo.filmSimulation
-  );
-
-  const shouldRenderRecipe = (
-    SHOW_RECIPES &&
-    photo.recipeData
-  );
-
   return (
     <SiteGrid
       containerRef={ref}
@@ -282,7 +273,12 @@ export default function PhotoLarge({
                 )}>
                   {photo.caption}
                 </div>}
-              {(showCameraContent || showRecipeContent || showTagsContent) &&
+              {(
+                showCameraContent ||
+                showLensContent ||
+                showRecipeContent ||
+                showTagsContent
+              ) &&
                 <div>
                   {showCameraContent &&
                     <PhotoCamera
@@ -291,17 +287,17 @@ export default function PhotoLarge({
                       prefetch={prefetchRelatedLinks}
                     />}
                   {showLensContent &&
-                  <>
-                    <br />
-                    <PhotoLens
-                      lens={lens}
-                      contrast="medium"
-                      prefetch={prefetchRelatedLinks}
-                    />
-                  </>}
-                  {showRecipeContent &&
+                    <>
+                      <br />
+                      <PhotoLens
+                        lens={lens}
+                        contrast="medium"
+                        prefetch={prefetchRelatedLinks}
+                      />
+                    </>}
+                  {showRecipeContent && recipeTitle &&
                     <PhotoRecipe
-                      recipe={recipe}
+                      recipe={recipeTitle}
                       contrast="medium"
                       prefetch={prefetchRelatedLinks}
                     />}
@@ -359,14 +355,14 @@ export default function PhotoLarge({
                   <li>{photo.isoFormatted}</li>
                   <li>{photo.exposureCompensationFormatted ?? '0ev'}</li>
                 </ul>
-                {(shouldRenderSimulation || shouldRenderRecipe) &&
+                {(showSimulation || showRecipeButton) &&
                   <div className="flex items-center gap-2 *:w-auto">
-                    {shouldRenderSimulation && photo.filmSimulation &&
+                    {showSimulation && photo.filmSimulation &&
                       <PhotoFilmSimulation
                         simulation={photo.filmSimulation}
                         prefetch={prefetchRelatedLinks}
                       />}
-                    {shouldRenderRecipe &&
+                    {showRecipeButton &&
                       <Tooltip content="Fujifilm Recipe">
                         <button
                           ref={refRecipeButton}
@@ -382,7 +378,7 @@ export default function PhotoLarge({
                             'px-[4px] py-[2.5px] my-[-3px]',
                             'translate-y-[2px]',
                             'hover:bg-dim active:bg-main',
-                            !shouldRenderSimulation && 'translate-x-[-2px]',
+                            !showSimulation && 'translate-x-[-2px]',
                           )}>
                           {shouldShowRecipeOverlay
                             ? <IoCloseSharp size={15} />
@@ -434,7 +430,7 @@ export default function PhotoLarge({
                       ? photo.filmSimulation
                       : undefined}
                     recipe={shouldShareRecipe
-                      ? recipe
+                      ? recipeTitle
                       : undefined}
                     focal={shouldShareFocalLength
                       ? photo.focalLength

src/photo/index.ts

@@ -5,6 +5,8 @@ import {
   HIGH_DENSITY_GRID,
   IS_PREVIEW,
   SHOW_EXIF_DATA,
+  SHOW_LENSES,
+  SHOW_RECIPES,
 } from '@/app/config';
 import { ABSOLUTE_PATH_FOR_HOME_IMAGE } from '@/app/paths';
 import { formatDate, formatDateFromPostgresString } from '@/utility/date';
@@ -302,6 +304,9 @@ const photoHasLensData = (photo: Photo) =>
   Boolean(photo.lensMake) &&
   Boolean(photo.lensModel);
 
+const photoHasRecipeData = (photo: Photo) =>
+  Boolean(photo.recipeData);
+
 const photoHasExifData = (photo: Photo) =>
   Boolean(photo.focalLength) ||
   Boolean(photo.focalLengthIn35MmFormat) ||
@@ -311,10 +316,18 @@ const photoHasExifData = (photo: Photo) =>
   Boolean(photo.exposureCompensationFormatted);
 
 export const shouldShowCameraDataForPhoto = (photo: Photo) =>
-  SHOW_EXIF_DATA && photoHasCameraData(photo);
+  SHOW_EXIF_DATA &&
+  photoHasCameraData(photo);
 
 export const shouldShowLensDataForPhoto = (photo: Photo) =>
-  SHOW_EXIF_DATA && photoHasLensData(photo);
+  SHOW_EXIF_DATA &&
+  SHOW_LENSES &&
+  photoHasLensData(photo);
+
+export const shouldShowRecipeDataForPhoto = (photo: Photo) =>
+  SHOW_EXIF_DATA &&
+  SHOW_RECIPES &&
+  photoHasRecipeData(photo);
 
 export const shouldShowExifDataForPhoto = (photo: Photo) =>
   SHOW_EXIF_DATA && photoHasExifData(photo);

src/photo/set.ts

@@ -23,7 +23,6 @@ type CategoryKeys = CategoryKey[];
 export const DEFAULT_CATEGORY_KEYS: CategoryKeys = [
   'tags',
   'cameras',
-  'lenses',
   'recipes',
   'films',
 ];