Unify favs/hidden checkboxes

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}

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} />;
 }

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'} />}
+    />
+  );
+}

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'} />}
+    />
+  );
+}

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: