From b114bca43e259d283ca1a8bd56a2902cc7c59256 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 5 Mar 2025 22:00:42 -0800
Subject: [PATCH] Create recipe auto-chooser in photo form

---
 app/admin/photos/[photoId]/edit/page.tsx | 12 ++++-
 src/components/FieldSetWithStatus.tsx    |  6 +++
 src/components/TagInput.tsx              | 61 ++++++++++++++++++------
 src/photo/PhotoEditPageClient.tsx        |  4 ++
 src/photo/PhotoGridSidebar.tsx           |  3 +-
 src/photo/cache.ts                       | 10 +++-
 src/photo/form/PhotoForm.tsx             |  9 ++++
 src/photo/form/index.ts                  |  6 +++
 src/recipe/index.ts                      | 21 +++++---
 9 files changed, 107 insertions(+), 25 deletions(-)

diff --git a/app/admin/photos/[photoId]/edit/page.tsx b/app/admin/photos/[photoId]/edit/page.tsx
index a0b1419a..e81de2c7 100644
--- a/app/admin/photos/[photoId]/edit/page.tsx
+++ b/app/admin/photos/[photoId]/edit/page.tsx
@@ -1,11 +1,16 @@
 import { redirect } from 'next/navigation';
-import { getPhotoNoStore, getUniqueTagsCached } from '@/photo/cache';
+import {
+  getPhotoNoStore,
+  getUniqueRecipesCached,
+  getUniqueTagsCached,
+} from '@/photo/cache';
 import { PATH_ADMIN } from '@/app/paths';
 import PhotoEditPageClient from '@/photo/PhotoEditPageClient';
 import {
   AI_TEXT_GENERATION_ENABLED,
   BLUR_ENABLED,
   IS_PREVIEW,
+  SHOW_RECIPES,
 } from '@/app/config';
 import { blurImageFromUrl, resizeImageFromUrl } from '@/photo/server';
 import { getNextImageUrlForManipulation } from '@/platforms/next-image';
@@ -23,6 +28,10 @@ export default async function PhotoEditPage({
 
   const uniqueTags = await getUniqueTagsCached();
 
+  const uniqueRecipes = SHOW_RECIPES
+    ? await getUniqueRecipesCached()
+    : [];
+
   const hasAiTextGeneration = AI_TEXT_GENERATION_ENABLED;
   
   // Only generate image thumbnails when AI generation is enabled
@@ -42,6 +51,7 @@ export default async function PhotoEditPage({
     <PhotoEditPageClient {...{
       photo,
       uniqueTags,
+      uniqueRecipes,
       hasAiTextGeneration,
       imageThumbnailBase64,
       blurData,
diff --git a/src/components/FieldSetWithStatus.tsx b/src/components/FieldSetWithStatus.tsx
index b931dcd6..b6413c25 100644
--- a/src/components/FieldSetWithStatus.tsx
+++ b/src/components/FieldSetWithStatus.tsx
@@ -19,6 +19,8 @@ export default function FieldSetWithStatus({
   selectOptions,
   selectOptionsDefaultLabel,
   tagOptions,
+  tagOptionsLimit,
+  tagOptionsLimitValidationMessage,
   placeholder,
   loading,
   required,
@@ -40,6 +42,8 @@ export default function FieldSetWithStatus({
   selectOptions?: { value: string, label: string }[]
   selectOptionsDefaultLabel?: string
   tagOptions?: AnnotatedTag[]
+  tagOptionsLimit?: number
+  tagOptionsLimitValidationMessage?: string
   placeholder?: string
   loading?: boolean
   required?: boolean
@@ -133,6 +137,8 @@ export default function FieldSetWithStatus({
               className={clsx(Boolean(error) && 'error')}
               readOnly={readOnly || pending || loading}
               placeholder={placeholder}
+              limit={tagOptionsLimit}
+              limitValidationMessage={tagOptionsLimitValidationMessage}
             />
             : type === 'textarea'
               ? <textarea
diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx
index 63e535c1..c8ad299a 100644
--- a/src/components/TagInput.tsx
+++ b/src/components/TagInput.tsx
@@ -18,6 +18,8 @@ export default function TagInput({
   className,
   readOnly,
   placeholder,
+  limit,
+  limitValidationMessage,
 }: {
   id?: string
   name: string
@@ -27,6 +29,8 @@ export default function TagInput({
   className?: string
   readOnly?: boolean
   placeholder?: string
+  limit?: number
+  limitValidationMessage?: string
 }) {
   const containerRef = useRef<HTMLInputElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -44,14 +48,19 @@ export default function TagInput({
     convertStringToArray(value) ?? []
   , [value]);
 
+  const hasReachedLimit = useMemo(() =>
+    limit !== undefined && selectedOptions.length >= limit
+  , [limit, selectedOptions]);
+
   const inputTextFormatted = parameterize(inputText);
   const isInputTextUnique =
     inputTextFormatted &&
     !optionValues.includes(inputTextFormatted) &&
     !selectedOptions.includes(inputTextFormatted);
 
-  const optionsFiltered = useMemo<AnnotatedTag[]>(() =>
-    (isInputTextUnique
+  const optionsFiltered = useMemo<AnnotatedTag[]>(() => hasReachedLimit
+    ? [{ value: limitValidationMessage ?? `Tag limit reached (${limit})` }]
+    : (isInputTextUnique
       ? [{ value: `${CREATE_LABEL} "${inputTextFormatted}"` }]
       : []
     ).concat(options
@@ -61,7 +70,15 @@ export default function TagInput({
           !inputTextFormatted ||
           value.includes(inputTextFormatted)
         )))
-  , [inputTextFormatted, isInputTextUnique, options, selectedOptions]);
+  , [
+    hasReachedLimit,
+    inputTextFormatted,
+    isInputTextUnique,
+    limit,
+    limitValidationMessage,
+    options,
+    selectedOptions,
+  ]);
 
   const hideMenu = useCallback((shouldBlurInput?: boolean) => {
     setShouldShowMenu(false);
@@ -88,8 +105,14 @@ export default function TagInput({
     }
 
     setSelectedOptionIndex(undefined);
-    inputRef.current?.focus();
-  }, [onChange, selectedOptions]);
+    setInputText('');
+
+    if (limit !== undefined && limit - 1 >= selectedOptions.length) {
+      hideMenu(true);
+    } else {
+      inputRef.current?.focus();
+    }
+  }, [limit, selectedOptions, onChange, hideMenu]);
 
   const removeOption = useCallback((option: string) => {
     onChange?.(selectedOptions.filter(o =>
@@ -103,7 +126,6 @@ export default function TagInput({
     if (inputText) {
       if (inputText.includes(',')) {
         addOptions(inputText.split(','));
-        setInputText('');
       } else {
         setShouldShowMenu(true);
       }
@@ -136,11 +158,15 @@ export default function TagInput({
       case 'Enter':
         // Only trap focus if there are options to select
         // otherwise allow form to submit
-        if (shouldShowMenu && optionsFiltered.length > 0) {
+        if (
+          shouldShowMenu &&
+          optionsFiltered.length > 0
+        ) {
           e.stopImmediatePropagation();
           e.preventDefault();
-          addOptions([optionsFiltered[selectedOptionIndex ?? 0].value]);
-          setInputText('');
+          if (!hasReachedLimit) {
+            addOptions([optionsFiltered[selectedOptionIndex ?? 0].value]);
+          }
         }
         break;
       case 'ArrowDown':
@@ -197,6 +223,8 @@ export default function TagInput({
     optionsFiltered,
     addOptions,
     shouldShowMenu,
+    hasReachedLimit,
+    limit,
   ]);
 
   return (
@@ -205,6 +233,7 @@ export default function TagInput({
       className="flex flex-col w-full group"
       onFocus={() => setShouldShowMenu(true)}
       onBlur={e => {
+        setInputText('');
         if (!e.currentTarget.contains(e.relatedTarget)) {
           hideMenu();
         }
@@ -258,7 +287,7 @@ export default function TagInput({
           ref={inputRef}
           type="text"
           className={clsx(
-            'grow min-w-0! p-0! -my-2 text-xl',
+            'grow min-w-0! p-0! -my-2',
             'outline-hidden border-none',
             'placeholder:text-dim placeholder:text-[14px]',
             'placeholder:translate-x-[2px]',
@@ -307,20 +336,22 @@ export default function TagInput({
                 }
                 tabIndex={0}
                 className={clsx(
-                  'text-base',
                   'group flex items-center gap-1',
-                  'cursor-pointer select-none',
                   'px-1.5 py-1 rounded-xs',
+                  'text-base select-none',
+                  hasReachedLimit ? 'cursor-not-allowed' : 'cursor-pointer',
                   'hover:bg-gray-100 dark:hover:bg-gray-800',
-                  'active:bg-gray-50 dark:active:bg-gray-900',
+                  !hasReachedLimit &&
+                    'active:bg-gray-50 dark:active:bg-gray-900',
                   'focus:bg-gray-100 dark:focus:bg-gray-800',
                   index === 0 && selectedOptionIndex === undefined &&
                     'bg-gray-100 dark:bg-gray-800',
                   'outline-hidden',
                 )}
                 onClick={() => {
-                  addOptions([value]);
-                  setInputText('');
+                  if (!hasReachedLimit) {
+                    addOptions([value]);
+                  }
                 }}
                 onFocus={() => setSelectedOptionIndex(index)}
               >
diff --git a/src/photo/PhotoEditPageClient.tsx b/src/photo/PhotoEditPageClient.tsx
index 69fc8ede..b82e78ef 100644
--- a/src/photo/PhotoEditPageClient.tsx
+++ b/src/photo/PhotoEditPageClient.tsx
@@ -10,16 +10,19 @@ import AiButton from './ai/AiButton';
 import usePhotoFormParent from './form/usePhotoFormParent';
 import ExifSyncButton from '@/admin/ExifSyncButton';
 import { useState } from 'react';
+import { Recipes } from '@/recipe';
 
 export default function PhotoEditPageClient({
   photo,
   uniqueTags,
+  uniqueRecipes,
   hasAiTextGeneration,
   imageThumbnailBase64,
   blurData,
 }: {
   photo: Photo
   uniqueTags: Tags
+  uniqueRecipes: Recipes
   hasAiTextGeneration: boolean
   imageThumbnailBase64: string
   blurData: string
@@ -67,6 +70,7 @@ export default function PhotoEditPageClient({
         updatedExifData={updatedExifData}
         updatedBlurData={blurData}
         uniqueTags={uniqueTags}
+        uniqueRecipes={uniqueRecipes}
         aiContent={hasAiTextGeneration ? aiContent : undefined}
         onTitleChange={setUpdatedTitle}
         onTextContentChange={setHasTextContent}
diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx
index 6b4674c3..f7668b2e 100644
--- a/src/photo/PhotoGridSidebar.tsx
+++ b/src/photo/PhotoGridSidebar.tsx
@@ -120,8 +120,7 @@ export default function PhotoGridSidebar({
         size={16}
         className="translate-x-[-1px]"
       />}
-      items={recipes
-        .sort(sortRecipesWithCount)
+      items={sortRecipesWithCount(recipes)
         .map(({ recipe, count }) =>
           <PhotoRecipe
             key={recipe}
diff --git a/src/photo/cache.ts b/src/photo/cache.ts
index db0348cc..c9e4c03f 100644
--- a/src/photo/cache.ts
+++ b/src/photo/cache.ts
@@ -16,6 +16,7 @@ import {
   getPhotosMeta,
   getUniqueFocalLengths,
   getUniqueLenses,
+  getUniqueRecipes,
 } from '@/photo/db/query';
 import { GetPhotosOptions } from './db';
 import { parseCachedPhotoDates, parseCachedPhotosDates } from '@/photo';
@@ -38,10 +39,11 @@ import { createLensKey } from '@/lens';
 const KEY_PHOTOS            = 'photos';
 const KEY_PHOTO             = 'photo';
 // Field keys
-const KEY_TAGS              = 'tags';
 const KEY_CAMERAS           = 'cameras';
 const KEY_LENSES            = 'lenses';
+const KEY_TAGS              = 'tags';
 const KEY_FILM_SIMULATIONS  = 'film-simulations';
+const KEY_RECIPES           = 'recipes';
 const KEY_FOCAL_LENGTHS     = 'focal-lengths';
 // Type keys
 const KEY_COUNT             = 'count';
@@ -214,6 +216,12 @@ export const getUniqueFilmSimulationsCached =
     [KEY_PHOTOS, KEY_FILM_SIMULATIONS],
   );
 
+export const getUniqueRecipesCached =
+  unstable_cache(
+    getUniqueRecipes,
+    [KEY_PHOTOS, KEY_RECIPES],
+  );
+
 export const getUniqueFocalLengthsCached =
   unstable_cache(
     getUniqueFocalLengths,
diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx
index 46858432..6f201c50 100644
--- a/src/photo/form/PhotoForm.tsx
+++ b/src/photo/form/PhotoForm.tsx
@@ -30,6 +30,7 @@ import { getNextImageUrlForManipulation } from '@/platforms/next-image';
 import { BLUR_ENABLED, IS_PREVIEW } from '@/app/config';
 import { PhotoDbInsert } from '..';
 import ErrorNote from '@/components/ErrorNote';
+import { convertRecipesForForm, Recipes } from '@/recipe';
 
 const THUMBNAIL_SIZE = 300;
 
@@ -39,6 +40,7 @@ export default function PhotoForm({
   updatedExifData,
   updatedBlurData,
   uniqueTags,
+  uniqueRecipes,
   aiContent,
   shouldStripGpsData,
   onTitleChange,
@@ -50,6 +52,7 @@ export default function PhotoForm({
   updatedExifData?: Partial<PhotoFormData>
   updatedBlurData?: string
   uniqueTags?: Tags
+  uniqueRecipes?: Recipes
   aiContent?: AiContent
   shouldStripGpsData?: boolean
   onTitleChange?: (updatedTitle: string) => void
@@ -293,6 +296,7 @@ export default function PhotoForm({
         <div className="space-y-6">
           {FORM_METADATA_ENTRIES(
             convertTagsForForm(uniqueTags),
+            convertRecipesForForm(uniqueRecipes),
             aiContent !== undefined,
           )
             .map(([key, {
@@ -302,6 +306,8 @@ export default function PhotoForm({
               selectOptions,
               selectOptionsDefaultLabel,
               tagOptions,
+              tagOptionsLimit,
+              tagOptionsLimitValidationMessage,
               readOnly,
               validate,
               validateStringMaxLength,
@@ -345,6 +351,9 @@ export default function PhotoForm({
                   selectOptions={selectOptions}
                   selectOptionsDefaultLabel={selectOptionsDefaultLabel}
                   tagOptions={tagOptions}
+                  tagOptionsLimit={tagOptionsLimit}
+                  // eslint-disable-next-line max-len
+                  tagOptionsLimitValidationMessage={tagOptionsLimitValidationMessage}
                   required={required}
                   readOnly={readOnly}
                   spellCheck={spellCheck}
diff --git a/src/photo/form/index.ts b/src/photo/form/index.ts
index 039bc6cc..5b5c2518 100644
--- a/src/photo/form/index.ts
+++ b/src/photo/form/index.ts
@@ -60,6 +60,8 @@ type FormMeta = {
   selectOptions?: { value: string, label: string }[]
   selectOptionsDefaultLabel?: string
   tagOptions?: AnnotatedTag[]
+  tagOptionsLimit?: number
+  tagOptionsLimitValidationMessage?: string
   shouldNotOverwriteWithNullDataOnSync?: boolean
 };
 
@@ -68,6 +70,7 @@ const STRING_MAX_LENGTH_LONG  = 1000;
 
 const FORM_METADATA = (
   tagOptions?: AnnotatedTag[],
+  recipeOptions?: AnnotatedTag[],
   aiTextGeneration?: boolean,
 ): Record<keyof PhotoFormData, FormMeta> => ({
   title: {
@@ -113,6 +116,9 @@ const FORM_METADATA = (
   },
   recipeTitle: {
     label: 'recipe title',
+    tagOptions: recipeOptions,
+    tagOptionsLimit: 1,
+    tagOptionsLimitValidationMessage: 'Photos can only have one recipe',
     spellCheck: false,
     capitalize: false,
     shouldHide: ({ make }) => make !== MAKE_FUJIFILM,
diff --git a/src/recipe/index.ts b/src/recipe/index.ts
index 78b7cf03..5db020e3 100644
--- a/src/recipe/index.ts
+++ b/src/recipe/index.ts
@@ -1,7 +1,11 @@
 import { absolutePathForRecipe, absolutePathForRecipeImage } from '@/app/paths';
 import { descriptionForPhotoSet, Photo, photoQuantityText } from '@/photo';
 import { PhotoDateRange } from '@/photo';
-import { capitalizeWords } from '@/utility/string';
+import {
+  capitalizeWords,
+  formatCount,
+  formatCountDescriptive,
+} from '@/utility/string';
 import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
 import { FilmSimulation } from '@/simulation';
 
@@ -64,8 +68,13 @@ export const generateMetaForRecipe = (
 export const photoHasRecipe = (photo?: Photo) =>
   photo?.filmSimulation && photo?.recipeData;
 
-export const sortRecipesWithCount = (
-  a: RecipeWithCount,
-  b: RecipeWithCount,
-) =>
-  a.recipe.localeCompare(b.recipe);
+export const sortRecipesWithCount = (recipes: Recipes = []) =>
+  recipes.sort((a, b) => a.recipe.localeCompare(b.recipe));
+
+export const convertRecipesForForm = (recipes: Recipes = []) =>
+  sortRecipesWithCount(recipes)
+    .map(({ recipe, count }) => ({
+      value: recipe,
+      annotation: formatCount(count),
+      annotationAria: formatCountDescriptive(count),
+    }));