rename hidden variable to something more descriptive

invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx

@@ -82,7 +82,7 @@ const currentImageButtonsSelector = createSelector(
 
     const { shouldShowImageDetails } = ui;
 
-    const { intermediateImage, currentImage, hidden } = gallery;
+    const { intermediateImage, currentImage, shouldHidePreview } = gallery;
 
     return {
       isProcessing,
@@ -96,7 +96,7 @@ const currentImageButtonsSelector = createSelector(
       shouldShowImageDetails,
       activeTabName,
       isLightboxOpen,
-      hidden,
+      shouldHidePreview,
     };
   },
   {
@@ -126,7 +126,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
     currentImage,
     isLightboxOpen,
     activeTabName,
-    hidden,
+    shouldHidePreview,
   } = useAppSelector(currentImageButtonsSelector);
 
   const toast = useToast();
@@ -196,7 +196,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   );
 
   const handleHiddenChange = () => {
-    dispatch(setHiddenState(!hidden));
+    dispatch(setHiddenState(!shouldHidePreview));
   };
 
   const handleClickUseAllParameters = () => {
@@ -467,14 +467,18 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
           </Flex>
         </IAIPopover>
         <IAIIconButton
-          icon={hidden ? <FaEyeSlash /> : <FaEye />}
+          icon={shouldHidePreview ? <FaEyeSlash /> : <FaEye />}
           tooltip={
-            !hidden ? t('parameters.hidePreview') : t('parameters.showPreview')
+            !shouldHidePreview
+              ? t('parameters.hidePreview')
+              : t('parameters.showPreview')
           }
           aria-label={
-            !hidden ? t('parameters.hidePreview') : t('parameters.showPreview')
+            !shouldHidePreview
+              ? t('parameters.hidePreview')
+              : t('parameters.showPreview')
           }
-          isChecked={hidden}
+          isChecked={shouldHidePreview}
           onClick={handleHiddenChange}
         />
         <IAIIconButton

invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx

@@ -15,14 +15,14 @@ import CurrentImageHidden from './CurrentImageHidden';
 export const imagesSelector = createSelector(
   [gallerySelector, uiSelector],
   (gallery: GalleryState, ui) => {
-    const { currentImage, intermediateImage, hidden } = gallery;
+    const { currentImage, intermediateImage, shouldHidePreview } = gallery;
     const { shouldShowImageDetails } = ui;
 
     return {
       imageToDisplay: intermediateImage ? intermediateImage : currentImage,
       isIntermediate: Boolean(intermediateImage),
       shouldShowImageDetails,
-      hidden,
+      shouldHidePreview,
     };
   },
   {
@@ -33,8 +33,12 @@ export const imagesSelector = createSelector(
 );
 
 export default function CurrentImagePreview() {
-  const { shouldShowImageDetails, imageToDisplay, isIntermediate, hidden } =
+  const {
-    useAppSelector(imagesSelector);
+    shouldShowImageDetails,
+    imageToDisplay,
+    isIntermediate,
+    shouldHidePreview,
+  } = useAppSelector(imagesSelector);
 
   return (
     <Flex
@@ -48,11 +52,11 @@ export default function CurrentImagePreview() {
     >
       {imageToDisplay && (
         <Image
-          src={hidden ? undefined : imageToDisplay.url}
+          src={shouldHidePreview ? undefined : imageToDisplay.url}
           width={imageToDisplay.width}
           height={imageToDisplay.height}
           fallback={
-            hidden ? (
+            shouldHidePreview ? (
               <CurrentImageHidden />
             ) : !isIntermediate ? (
               <CurrentImageFallback />

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -39,7 +39,7 @@ export interface GalleryState {
   currentCategory: GalleryCategory;
   galleryWidth: number;
   shouldUseSingleGalleryColumn: boolean;
-  hidden: boolean;
+  shouldHidePreview: boolean;
 }
 
 const initialState: GalleryState = {
@@ -64,7 +64,7 @@ const initialState: GalleryState = {
   },
   galleryWidth: 300,
   shouldUseSingleGalleryColumn: false,
-  hidden: false,
+  shouldHidePreview: false,
 };
 
 export const gallerySlice = createSlice({
@@ -254,7 +254,7 @@ export const gallerySlice = createSlice({
       state.shouldUseSingleGalleryColumn = action.payload;
     },
     setHiddenState: (state, action: PayloadAction<boolean>) => {
-      state.hidden = action.payload;
+      state.shouldHidePreview = action.payload;
     },
   },
 });

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/InitImagePreview.tsx

@@ -11,7 +11,9 @@ export default function InitImagePreview() {
     (state: RootState) => state.generation.initialImage
   );
 
-  const { hidden } = useAppSelector((state: RootState) => state.gallery);
+  const { shouldHidePreview } = useAppSelector(
+    (state: RootState) => state.gallery
+  );
 
   const { t } = useTranslation();
 
@@ -69,7 +71,7 @@ export default function InitImagePreview() {
               position: 'absolute',
             }}
             src={
-              hidden
+              shouldHidePreview
                 ? undefined
                 : typeof initialImage === 'string'
                 ? initialImage