Fix recipe/simulation spacing

src/photo/PhotoLarge.tsx

@@ -6,6 +6,7 @@ import {
   doesPhotoNeedBlurCompatibility,
   shouldShowCameraDataForPhoto,
   shouldShowExifDataForPhoto,
+  shouldShowFilmSimulationDataForPhoto,
   shouldShowLensDataForPhoto,
   shouldShowRecipeDataForPhoto,
   titleForPhoto,
@@ -134,9 +135,11 @@ export default function PhotoLarge({
 
   const showCameraContent = showCamera && shouldShowCameraDataForPhoto(photo);
   const showLensContent = showLens && shouldShowLensDataForPhoto(photo);
+  const showTagsContent = tags.length > 0;
   const showRecipeContent = showRecipe && shouldShowRecipeDataForPhoto(photo);
   const showRecipeButton = shouldShowRecipeDataForPhoto(photo);
-  const showTagsContent = tags.length > 0;
+  const showSimulationContent = showSimulation &&
+    shouldShowFilmSimulationDataForPhoto(photo);
 
   useVisible({ ref, onVisible });
 
@@ -153,6 +156,7 @@ export default function PhotoLarge({
     showLensContent ||
     showTagsContent ||
     showRecipeContent ||
+    showSimulationContent ||
     showExifContent;
 
   const hasNonDateContent =
@@ -358,9 +362,9 @@ export default function PhotoLarge({
                   <li>{photo.isoFormatted}</li>
                   <li>{photo.exposureCompensationFormatted ?? '0ev'}</li>
                 </ul>
-                {(showSimulation || showRecipeButton) &&
+                {(showRecipeButton || showSimulationContent) &&
                   <div className="flex items-center gap-2 *:w-auto">
-                    {showSimulation && photo.filmSimulation &&
+                    {showSimulationContent && photo.filmSimulation &&
                       <PhotoFilmSimulation
                         simulation={photo.filmSimulation}
                         prefetch={prefetchRelatedLinks}

src/photo/index.ts

@@ -1,10 +1,11 @@
 import { formatFocalLength } from '@/focal';
 import { getNextImageUrlForRequest } from '@/platforms/next-image';
-import { FilmSimulation } from '@/simulation';
+import { FilmSimulation, photoHasFilmSimulationData } from '@/simulation';
 import {
   HIGH_DENSITY_GRID,
   IS_PREVIEW,
   SHOW_EXIF_DATA,
+  SHOW_FILM_SIMULATIONS,
   SHOW_LENSES,
   SHOW_RECIPES,
 } from '@/app/config';
@@ -258,7 +259,7 @@ export const descriptionForPhotoSet = (
       photoLabelForCount(explicitCount ?? photos.length, false),
     ].join(' ');
 
-const sortPhotosByDate = (
+const sortPhotosByDateNonDestructively = (
   photos: Photo[],
   order: 'ASC' | 'DESC' = 'DESC',
 ) =>
@@ -276,7 +277,7 @@ export const dateRangeForPhotos = (
   let descriptionWithSpaces = '';
 
   if (explicitDateRange || photos.length > 0) {
-    const photosSorted = sortPhotosByDate(photos);
+    const photosSorted = sortPhotosByDateNonDestructively(photos);
     start = formatDateFromPostgresString(
       explicitDateRange?.start ?? photosSorted[photos.length - 1].takenAtNaive,
       'short',
@@ -328,6 +329,11 @@ export const shouldShowRecipeDataForPhoto = (photo: Photo) =>
   SHOW_RECIPES &&
   photoHasRecipeData(photo);
 
+export const shouldShowFilmSimulationDataForPhoto = (photo: Photo) =>
+  SHOW_EXIF_DATA &&
+  SHOW_FILM_SIMULATIONS &&
+  photoHasFilmSimulationData(photo);
+
 export const shouldShowExifDataForPhoto = (photo: Photo) =>
   SHOW_EXIF_DATA && photoHasExifData(photo);
 

src/simulation/index.ts

@@ -79,3 +79,6 @@ export const generateMetaForFilmSimulation = (
   ),
   images: absolutePathForFilmSimulationImage(simulation),
 });
+
+export const photoHasFilmSimulationData = (photo: Photo) =>
+  Boolean(photo.filmSimulation);

src/utility/useScrollDirection.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 export default function useScrollDirection() {
   const [lastScrollY, setLastScrollY] = useState(0);
-  const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('up');
+  const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
 
   useEffect(() => {
     const handleScroll = () => {