Add icon to favorite/hidden checkboxes

src/admin/AdminBatchUploadActions.tsx

@@ -21,6 +21,8 @@ import PhotoTagFieldset from './PhotoTagFieldset';
 import DeleteUploadButton from './DeleteUploadButton';
 import { useAppState } from '@/state/AppState';
 import { pluralize } from '@/utility/string';
+import { FaRegStar } from 'react-icons/fa6';
+import { AiOutlineEyeInvisible } from 'react-icons/ai';
 
 const UPLOAD_BATCH_SIZE = 4;
 
@@ -145,6 +147,7 @@ export default function AdminBatchUploadActions({
               <div className="flex gap-8">
                 <FieldSetWithStatus
                   label="Favorite"
+                  icon={<FaRegStar size={14} />}
                   type="checkbox"
                   value={favorite}
                   onChange={setFavorite}
@@ -152,6 +155,7 @@ export default function AdminBatchUploadActions({
                 />
                 <FieldSetWithStatus
                   label="Hidden"
+                  icon={<AiOutlineEyeInvisible size={16} />}
                   type="checkbox"
                   value={hidden}
                   onChange={setHidden}

src/components/FieldSetWithStatus.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { InputHTMLAttributes, useRef, RefObject } from 'react';
+import { InputHTMLAttributes, useRef, RefObject, ReactNode } from 'react';
 import { useFormStatus } from 'react-dom';
 import Spinner from './Spinner';
 import { clsx } from 'clsx/lite';
@@ -13,6 +13,7 @@ import Checkbox from './Checkbox';
 export default function FieldSetWithStatus({
   id: _id,
   label,
+  icon,
   note,
   error,
   value,
@@ -37,6 +38,7 @@ export default function FieldSetWithStatus({
 }: {
   id?: string
   label: string
+  icon?: ReactNode
   note?: string
   error?: string
   value: string
@@ -117,7 +119,14 @@ export default function FieldSetWithStatus({
               type === 'checkbox' && 'order-2 m-0',
             )}
           >
-            {label}
+            <span className="inline-flex items-center gap-x-1.5">
+              {icon && <span
+                className="inline-flex items-center justify-center w-4"
+              >
+                {icon}
+              </span>}
+              {label}
+            </span>
             {note && !error &&
               <span className="text-gray-400 dark:text-gray-600">
                 ({note})

src/photo/form/PhotoForm.tsx

@@ -42,9 +42,20 @@ import { convertRecipesForForm, Recipes } from '@/recipe';
 import deepEqual from 'fast-deep-equal/es6/react';
 import ApplyRecipeTitleGloballyCheckbox from './ApplyRecipesGloballyCheckbox';
 import { FilmSimulation } from '@/simulation';
+import { FaRegStar } from 'react-icons/fa6';
+import { AiOutlineEyeInvisible } from 'react-icons/ai';
 
 const THUMBNAIL_SIZE = 300;
 
+const iconForKey = (key: keyof PhotoFormData) => {
+  switch (key) {
+  case 'favorite':
+    return <FaRegStar size={14} />;
+  case 'hidden':
+    return <AiOutlineEyeInvisible size={16} />;
+  }
+};
+
 export default function PhotoForm({
   type = 'create',
   initialPhotoForm,
@@ -419,6 +430,7 @@ export default function PhotoForm({
                 default:
                   return <FieldSetWithStatus
                     key={key}
+                    icon={iconForKey(key)}
                     {...fieldProps}
                   />;
                 }