Restore hovers in recipe overlay

src/category/useCategoryCounts.ts

@@ -1,7 +1,6 @@
 import { createCameraKey, Camera } from '@/camera';
 import { createLensKey, Lens } from '@/lens';
 import { useCallback } from 'react';
-import { FujifilmSimulation } from '@/platforms/fujifilm/simulation';
 import { useAppState } from '@/app/AppState';
 
 export default function useCategoryCounts() {
@@ -27,7 +26,7 @@ export default function useCategoryCounts() {
     return recipeCounts[recipe];
   }, [categoriesWithCounts]);
 
-  const getFilmCount = useCallback((film: FujifilmSimulation) => {
+  const getFilmCount = useCallback((film: string) => {
     const filmCounts = categoriesWithCounts?.films ?? {};
     return filmCounts[film];
   }, [categoriesWithCounts]);

src/photo/index.ts

@@ -19,7 +19,6 @@ import camelcaseKeys from 'camelcase-keys';
 import { isBefore } from 'date-fns';
 import type { Metadata } from 'next';
 import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
-import { FujifilmSimulation } from '@/platforms/fujifilm/simulation';
 import { PhotoUpdateStatus, generatePhotoUpdateStatus } from './update';
 import { AppTextState } from '@/i18n/state';
 import { PhotoColorData } from './color/client';
@@ -64,7 +63,7 @@ export interface PhotoExif {
   exposureCompensation?: number
   latitude?: number
   longitude?: number
-  film?: FujifilmSimulation
+  film?: string
   recipeData?: string
   takenAt?: string
   takenAtNaive?: string

src/recipe/PhotoRecipeOverlay.tsx

@@ -19,6 +19,7 @@ import { TbChecklist } from 'react-icons/tb';
 import CopyButton from '@/components/CopyButton';
 import PhotoRecipe from './PhotoRecipe';
 import { useAppText } from '@/i18n/state/client';
+import useCategoryCounts from '@/category/useCategoryCounts';
 
 export default function PhotoRecipeOverlay({
   ref,
@@ -48,6 +49,11 @@ export default function PhotoRecipeOverlay({
 
   const appText = useAppText();
 
+  const {
+    getRecipeCount,
+    getFilmCount,
+  } = useCategoryCounts();
+
   const whiteBalanceTypeFormatted = formatWhiteBalance(data);
 
   const renderDataSquare = (
@@ -128,6 +134,7 @@ export default function PhotoRecipeOverlay({
                 '[&>*>*>*>*]:text-black',
                 'tracking-wide',
               )}
+              countOnHover={getRecipeCount(title)}
             />
             : renderRecipeTitle}
         </div>
@@ -170,6 +177,7 @@ export default function PhotoRecipeOverlay({
                   'opacity-80 hover:opacity-60 active:opacity-80',
                 )}
                 badged={false}
+                countOnHover={getFilmCount(film)}
               />
             </div>,
             undefined,