From 6f8eb85a866402e3f18552ce086ed80b2b1542b7 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 1 Apr 2025 09:29:41 -0500
Subject: [PATCH] Use full film simulation name in form

---
 src/components/TagInput.tsx | 16 +++++++++++++---
 src/film/index.ts           |  5 +++--
 src/photo/form/index.ts     |  3 +++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx
index ce2939ab..ead6c722 100644
--- a/src/components/TagInput.tsx
+++ b/src/components/TagInput.tsx
@@ -2,7 +2,6 @@ import { AnnotatedTag } from '@/photo/form';
 import { convertStringToArray, parameterize } from '@/utility/string';
 import { clsx } from 'clsx/lite';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
 const KEY_KEYDOWN = 'keydown';
 const CREATE_LABEL = 'Create';
 
@@ -244,6 +243,15 @@ export default function TagInput({
     limit,
   ]);
 
+  const formatValue = useCallback((value: string) => {
+    const option = options.find(option => option.value === value);
+    return <>
+      {option?.icon}
+      {option?.label ?? value}
+    </>;
+  },
+  [options]);
+
   return (
     <div
       ref={containerRef}
@@ -284,6 +292,7 @@ export default function TagInput({
           readOnly && 'bg-gray-100 dark:bg-gray-900 dark:text-gray-400',
         )}
       >
+        {/* Selected Options */}
         {selectedOptions
           .filter(Boolean)
           .map(option =>
@@ -302,7 +311,7 @@ export default function TagInput({
               )}
               onClick={() => removeOption(option)}
             >
-              {option}
+              {formatValue(value)}
             </span>)}
         <input
           id={id}
@@ -344,6 +353,7 @@ export default function TagInput({
               'text-xl shadow-lg dark:shadow-xl',
             )}
           >
+            {/* Menu Options */}
             {optionsFiltered.map(({
               value,
               annotation,
@@ -378,7 +388,7 @@ export default function TagInput({
                 onFocus={() => setSelectedOptionIndex(index)}
               >
                 <span className="grow min-w-0 truncate">
-                  {value}
+                  {formatValue(value)}
                 </span>
                 {annotation &&
                   <span
diff --git a/src/film/index.ts b/src/film/index.ts
index c1324fa5..a04a6b10 100644
--- a/src/film/index.ts
+++ b/src/film/index.ts
@@ -92,8 +92,9 @@ export const convertFilmsForForm = (
   includeAllFujifilmSimulations?: boolean,
 ): AnnotatedTag[] => {
   const films = includeAllFujifilmSimulations
-    ? FILM_SIMULATION_FORM_INPUT_OPTIONS.map(film => ({
-      value: film.value,
+    ? FILM_SIMULATION_FORM_INPUT_OPTIONS.map(({ value }) => ({
+      value,
+      label: labelForFilm(value).large,
     } as AnnotatedTag))
     : [];
 
diff --git a/src/photo/form/index.ts b/src/photo/form/index.ts
index 0b8ca42c..fc7ff3af 100644
--- a/src/photo/form/index.ts
+++ b/src/photo/form/index.ts
@@ -21,6 +21,7 @@ import { GEO_PRIVACY_ENABLED } from '@/app/config';
 import { TAG_FAVS, getValidationMessageForTags } from '@/tag';
 import { MAKE_FUJIFILM } from '@/platforms/fujifilm';
 import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
+import { ReactNode } from 'react';
 
 type VirtualFields =
   'favorite' |
@@ -41,6 +42,8 @@ export type FieldSetType =
 
 export type AnnotatedTag = {
   value: string,
+  label?: string,
+  icon?: ReactNode
   annotation?: string,
   annotationAria?: string,
 };