From c7e1a6b617d77c714631e73c721c0322a0064588 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 3 Apr 2025 21:39:31 -0500
Subject: [PATCH] Unify favs/hidden checkboxes

---
 src/admin/AdminBatchUploadActions.tsx | 14 ++++----------
 src/components/icons/IconHidden.tsx   | 13 ++++++++++---
 src/photo/form/FieldsetFavs.tsx       | 17 +++++++++++++++++
 src/photo/form/FieldsetHidden.tsx     | 17 +++++++++++++++++
 src/photo/form/PhotoForm.tsx          | 13 ++++---------
 5 files changed, 52 insertions(+), 22 deletions(-)
 create mode 100644 src/photo/form/FieldsetFavs.tsx
 create mode 100644 src/photo/form/FieldsetHidden.tsx

diff --git a/src/admin/AdminBatchUploadActions.tsx b/src/admin/AdminBatchUploadActions.tsx
index 91fe6a30..ffc0f7cf 100644
--- a/src/admin/AdminBatchUploadActions.tsx
+++ b/src/admin/AdminBatchUploadActions.tsx
@@ -21,8 +21,8 @@ import PhotoTagFieldset from './PhotoTagFieldset';
 import DeleteUploadButton from './DeleteUploadButton';
 import { useAppState } from '@/state/AppState';
 import { pluralize } from '@/utility/string';
-import IconFavs from '@/components/icons/IconFavs';
-import IconHidden from '@/components/icons/IconHidden';
+import FieldsetFavs from '@/photo/form/FieldsetFavs';
+import FieldsetHidden from '@/photo/form/FieldsetHidden';
 
 const UPLOAD_BATCH_SIZE = 4;
 
@@ -145,18 +145,12 @@ export default function AdminBatchUploadActions({
                 readOnly={isAdding}
               />
               <div className="flex gap-8">
-                <FieldSetWithStatus
-                  label="Favorite"
-                  icon={<IconFavs size={14} highlight={favorite === 'true'} />}
-                  type="checkbox"
+                <FieldsetFavs
                   value={favorite}
                   onChange={setFavorite}
                   readOnly={isAdding}
                 />
-                <FieldSetWithStatus
-                  label="Hidden"
-                  icon={<IconHidden size={16} />}
-                  type="checkbox"
+                <FieldsetHidden
                   value={hidden}
                   onChange={setHidden}
                   readOnly={isAdding}
diff --git a/src/components/icons/IconHidden.tsx b/src/components/icons/IconHidden.tsx
index 7b886c7c..3ecebe07 100644
--- a/src/components/icons/IconHidden.tsx
+++ b/src/components/icons/IconHidden.tsx
@@ -1,6 +1,13 @@
 import { IconBaseProps } from 'react-icons';
-import { AiOutlineEyeInvisible } from 'react-icons/ai';
+import { AiOutlineEyeInvisible, AiOutlineEye } from 'react-icons/ai';
 
-export default function IconHidden(props: IconBaseProps) {
-  return <AiOutlineEyeInvisible {...props} />;
+export default function IconHidden({
+  visible,
+  ...props
+}: IconBaseProps & {
+  visible?: boolean
+}) {
+  return visible
+    ? <AiOutlineEye {...props} />
+    : <AiOutlineEyeInvisible {...props} />;
 }
diff --git a/src/photo/form/FieldsetFavs.tsx b/src/photo/form/FieldsetFavs.tsx
new file mode 100644
index 00000000..122e273d
--- /dev/null
+++ b/src/photo/form/FieldsetFavs.tsx
@@ -0,0 +1,17 @@
+import { ComponentProps } from 'react';
+import FieldSetWithStatus from '@/components/FieldSetWithStatus';
+import IconFavs from '@/components/icons/IconFavs';
+
+export default function FieldsetFavs(props: Omit<
+  ComponentProps<typeof FieldSetWithStatus>,
+  'label' | 'icon' | 'type'
+>) {
+  return (
+    <FieldSetWithStatus
+      {...props}
+      label="Favorite"
+      type="checkbox"
+      icon={<IconFavs size={14} highlight={props.value === 'true'} />}
+    />
+  );
+}
diff --git a/src/photo/form/FieldsetHidden.tsx b/src/photo/form/FieldsetHidden.tsx
new file mode 100644
index 00000000..226a7c27
--- /dev/null
+++ b/src/photo/form/FieldsetHidden.tsx
@@ -0,0 +1,17 @@
+import { ComponentProps } from 'react';
+import FieldSetWithStatus from '@/components/FieldSetWithStatus';
+import IconHidden from '@/components/icons/IconHidden';
+
+export default function FieldsetHidden(props: Omit<
+  ComponentProps<typeof FieldSetWithStatus>,
+  'label' | 'icon' | 'type'
+>) {
+  return (
+    <FieldSetWithStatus
+      {...props}
+      label="Hidden"
+      type="checkbox"
+      icon={<IconHidden size={17} visible={props.value !== 'true'} />}
+    />
+  );
+}
diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx
index 75ce5d8c..c418133d 100644
--- a/src/photo/form/PhotoForm.tsx
+++ b/src/photo/form/PhotoForm.tsx
@@ -42,10 +42,10 @@ import { convertRecipesForForm, Recipes } from '@/recipe';
 import deepEqual from 'fast-deep-equal/es6/react';
 import ApplyRecipeTitleGloballyCheckbox from './ApplyRecipesGloballyCheckbox';
 import { convertFilmsForForm, Films } from '@/film';
-import IconFavs from '@/components/icons/IconFavs';
-import IconHidden from '@/components/icons/IconHidden';
 import { isMakeFujifilm } from '@/platforms/fujifilm';
 import PhotoFilmIcon from '@/film/PhotoFilmIcon';
+import FieldsetFavs from './FieldsetFavs';
+import FieldsetHidden from './FieldsetHidden';
 
 const THUMBNAIL_SIZE = 300;
 
@@ -436,18 +436,13 @@ export default function PhotoForm({
                     {...fieldProps}
                   />;
                 case 'favorite':
-                  return <FieldSetWithStatus
+                  return <FieldsetFavs
                     key={key}
-                    icon={<IconFavs
-                      size={14}
-                      highlight={formData[key] === 'true'}
-                    />}
                     {...fieldProps}
                   />;
                 case 'hidden':
-                  return <FieldSetWithStatus
+                  return <FieldsetHidden
                     key={key}
-                    icon={<IconHidden size={16} />}
                     {...fieldProps}
                   />;
                 default: