From 3a8af98235c884ce51d8f681caeab04f6baa9d9a Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 30 Mar 2025 13:57:34 -0500
Subject: [PATCH] Adjust film form text

---
 src/components/FieldSetWithStatus.tsx        | 10 ++++++++--
 src/components/primitives/ResponsiveText.tsx | 14 ++++++++++----
 src/photo/form/PhotoForm.tsx                 |  2 ++
 src/photo/form/index.ts                      |  4 +++-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/FieldSetWithStatus.tsx b/src/components/FieldSetWithStatus.tsx
index d399f8a0..5b023b66 100644
--- a/src/components/FieldSetWithStatus.tsx
+++ b/src/components/FieldSetWithStatus.tsx
@@ -9,12 +9,14 @@ import TagInput from './TagInput';
 import { FiChevronDown } from 'react-icons/fi';
 import { parameterize } from '@/utility/string';
 import Checkbox from './Checkbox';
+import ResponsiveText from './primitives/ResponsiveText';
 
 export default function FieldSetWithStatus({
   id: _id,
   label,
   icon,
   note,
+  noteShort,
   error,
   value,
   isModified,
@@ -40,6 +42,7 @@ export default function FieldSetWithStatus({
   label: string
   icon?: ReactNode
   note?: string
+  noteShort?: string
   error?: string
   value: string
   isModified?: boolean
@@ -128,9 +131,12 @@ export default function FieldSetWithStatus({
               {label}
             </span>
             {note && !error &&
-              <span className="text-gray-400 dark:text-gray-600">
+              <ResponsiveText
+                className="text-gray-400 dark:text-gray-600"
+                shortText={`(${noteShort})`}
+              >
                 ({note})
-              </span>}
+              </ResponsiveText>}
             {isModified && !error &&
               <span className={clsx(
                 'text-main font-medium text-[0.9rem]',
diff --git a/src/components/primitives/ResponsiveText.tsx b/src/components/primitives/ResponsiveText.tsx
index b4892ed8..c4175f23 100644
--- a/src/components/primitives/ResponsiveText.tsx
+++ b/src/components/primitives/ResponsiveText.tsx
@@ -1,20 +1,26 @@
+import clsx from 'clsx/lite';
 import { ReactNode } from 'react';
 
 export default function ResponsiveText({
-  children,
   shortText,
+  className,
+  children,
 }: {
-  children: ReactNode
   shortText?: ReactNode
+  className?: string
+  children: ReactNode
 }) {
   return (
     <>
       {/* Short text */}
-      <span className="inline sm:hidden" aria-hidden>
+      <span
+        className={clsx('inline sm:hidden', className)}
+        aria-hidden
+      >
         {shortText ?? children}
       </span>
       {/* Full text */}
-      <span className="hidden sm:inline">
+      <span className={clsx('hidden sm:inline', className)}>
         {children}
       </span>
     </>
diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx
index d7896942..09448321 100644
--- a/src/photo/form/PhotoForm.tsx
+++ b/src/photo/form/PhotoForm.tsx
@@ -336,6 +336,7 @@ export default function PhotoForm({
             .map(([key, {
               label,
               note,
+              noteShort,
               required,
               selectOptions,
               selectOptionsDefaultLabel,
@@ -363,6 +364,7 @@ export default function PhotoForm({
                       : ''
                   ),
                   note,
+                  noteShort,
                   error: formErrors[key],
                   value: staticValue ?? formData[key] ?? '',
                   isModified: (
diff --git a/src/photo/form/index.ts b/src/photo/form/index.ts
index 627af976..b7fab9b6 100644
--- a/src/photo/form/index.ts
+++ b/src/photo/form/index.ts
@@ -48,6 +48,7 @@ export type AnnotatedTag = {
 export type FormMeta = {
   label: string
   note?: string
+  noteShort?: string
   required?: boolean
   excludeFromInsert?: boolean
   readOnly?: boolean
@@ -118,7 +119,8 @@ const FORM_METADATA = (
   model: { label: 'camera model' },
   film: {
     label: 'film',
-    note: 'Intended for Fujifilm cameras or film scans',
+    note: 'Intended for Fujifilm simulations and analog scans',
+    noteShort: 'Fujifilm simulations / analog scans',
     shouldNotOverwriteWithNullDataOnSync: true,
   },
   recipeTitle: {