From bac0c51f75cced3f99f9e6587a6bb25f005e8599 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 15 Mar 2025 13:48:19 -0500
Subject: [PATCH] Add icon to favorite/hidden checkboxes

---
 src/admin/AdminBatchUploadActions.tsx |  4 ++++
 src/components/FieldSetWithStatus.tsx | 13 +++++++++++--
 src/photo/form/PhotoForm.tsx          | 12 ++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/admin/AdminBatchUploadActions.tsx b/src/admin/AdminBatchUploadActions.tsx
index a081e068..df473294 100644
--- a/src/admin/AdminBatchUploadActions.tsx
+++ b/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}
diff --git a/src/components/FieldSetWithStatus.tsx b/src/components/FieldSetWithStatus.tsx
index a768bef5..d399f8a0 100644
--- a/src/components/FieldSetWithStatus.tsx
+++ b/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})
diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx
index 88c7bbbc..a9027b41 100644
--- a/src/photo/form/PhotoForm.tsx
+++ b/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}
                   />;
                 }