feat(ui): add eslint rules

- `curly` requires conditionals to use curly braces
- `react/jsx-curly-brace-presence` requires string props to *not* have curly braces

invokeai/frontend/web/.eslintrc.js

@@ -23,6 +23,11 @@ module.exports = {
   plugins: ['react', '@typescript-eslint', 'eslint-plugin-react-hooks'],
   root: true,
   rules: {
+    curly: 'error',
+    'react/jsx-curly-brace-presence': [
+      'error',
+      { props: 'never', children: 'never' },
+    ],
     'react-hooks/exhaustive-deps': 'error',
     'no-var': 'error',
     'brace-style': 'error',

invokeai/frontend/web/src/common/components/IAIDndImage.tsx

@@ -100,14 +100,18 @@ const IAIDndImage = (props: IAIDndImageProps) => {
   const [isHovered, setIsHovered] = useState(false);
   const handleMouseOver = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
-      if (onMouseOver) onMouseOver(e);
+      if (onMouseOver) {
+        onMouseOver(e);
+      }
       setIsHovered(true);
     },
     [onMouseOver]
   );
   const handleMouseOut = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
-      if (onMouseOut) onMouseOut(e);
+      if (onMouseOut) {
+        onMouseOut(e);
+      }
       setIsHovered(false);
     },
     [onMouseOut]

invokeai/frontend/web/src/common/components/ImageUploader.tsx

@@ -150,7 +150,9 @@ const ImageUploader = (props: ImageUploaderProps) => {
       {...getRootProps({ style: {} })}
       onKeyDown={(e: KeyboardEvent) => {
         // Bail out if user hits spacebar - do not open the uploader
-        if (e.key === ' ') return;
+        if (e.key === ' ') {
+          return;
+        }
       }}
     >
       <input {...getInputProps()} />

invokeai/frontend/web/src/common/hooks/useResolution.ts

@@ -11,8 +11,14 @@ export default function useResolution():
   const tabletResolutions = ['md', 'lg'];
   const desktopResolutions = ['xl', '2xl'];
 
-  if (mobileResolutions.includes(breakpointValue)) return 'mobile';
+  if (mobileResolutions.includes(breakpointValue)) {
-  if (tabletResolutions.includes(breakpointValue)) return 'tablet';
+    return 'mobile';
-  if (desktopResolutions.includes(breakpointValue)) return 'desktop';
+  }
+  if (tabletResolutions.includes(breakpointValue)) {
+    return 'tablet';
+  }
+  if (desktopResolutions.includes(breakpointValue)) {
+    return 'desktop';
+  }
   return 'unknown';
 }

invokeai/frontend/web/src/common/util/dateComparator.ts

@@ -6,7 +6,11 @@ export const dateComparator = (a: string, b: string) => {
   const dateB = new Date(b);
 
   // sort in ascending order
-  if (dateA > dateB) return 1;
+  if (dateA > dateB) {
-  if (dateA < dateB) return -1;
+    return 1;
+  }
+  if (dateA < dateB) {
+    return -1;
+  }
   return 0;
 };

invokeai/frontend/web/src/common/util/openBase64ImageInTab.ts

@@ -5,7 +5,9 @@ type Base64AndCaption = {
 
 const openBase64ImageInTab = (images: Base64AndCaption[]) => {
   const w = window.open('');
-  if (!w) return;
+  if (!w) {
+    return;
+  }
 
   images.forEach((i) => {
     const image = new Image();

invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx

@@ -125,7 +125,9 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
   }, [offset]);
 
   useEffect(() => {
-    if (fillPatternImage) return;
+    if (fillPatternImage) {
+      return;
+    }
     const image = new Image();
 
     image.onload = () => {
@@ -135,7 +137,9 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
   }, [fillPatternImage, maskColorString]);
 
   useEffect(() => {
-    if (!fillPatternImage) return;
+    if (!fillPatternImage) {
+      return;
+    }
     fillPatternImage.src = getColoredSVG(maskColorString);
   }, [fillPatternImage, maskColorString]);
 
@@ -151,8 +155,9 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
     !isNumber(stageScale) ||
     !isNumber(stageDimensions.width) ||
     !isNumber(stageDimensions.height)
-  )
+  ) {
     return null;
+  }
 
   return (
     <Rect

invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx

@@ -34,7 +34,9 @@ const selector = createSelector(
 const IAICanvasObjectRenderer = () => {
   const { objects } = useAppSelector(selector);
 
-  if (!objects) return null;
+  if (!objects) {
+    return null;
+  }
 
   return (
     <Group name="outpainting-objects" listening={false}>

invokeai/frontend/web/src/features/canvas/components/IAICanvasResizer.tsx

@@ -42,7 +42,9 @@ const IAICanvasResizer = () => {
 
   useLayoutEffect(() => {
     window.setTimeout(() => {
-      if (!ref.current) return;
+      if (!ref.current) {
+        return;
+      }
 
       const { clientWidth, clientHeight } = ref.current;
 

invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx

@@ -129,7 +129,9 @@ const IAICanvasStagingAreaToolbar = () => {
     currentStagingAreaImage?.imageName ?? skipToken
   );
 
-  if (!currentStagingAreaImage) return null;
+  if (!currentStagingAreaImage) {
+    return null;
+  }
 
   return (
     <Flex

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx

@@ -135,7 +135,9 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
     clip,
   } = useAppSelector(canvasBrushPreviewSelector);
 
-  if (!shouldDrawBrushPreview) return null;
+  if (!shouldDrawBrushPreview) {
+    return null;
+  }
 
   return (
     <Group listening={false} {...clip} {...rest}>

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -85,7 +85,9 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
     useState(false);
 
   useEffect(() => {
-    if (!transformerRef.current || !shapeRef.current) return;
+    if (!transformerRef.current || !shapeRef.current) {
+      return;
+    }
     transformerRef.current.nodes([shapeRef.current]);
     transformerRef.current.getLayer()?.batchDraw();
   }, []);
@@ -133,7 +135,9 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
      * not its width and height. We need to un-scale the width and height before
      * setting the values.
      */
-    if (!shapeRef.current) return;
+    if (!shapeRef.current) {
+      return;
+    }
 
     const rect = shapeRef.current;
 

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -167,7 +167,9 @@ const IAICanvasToolbar = () => {
 
   const handleResetCanvasView = (shouldScaleTo1 = false) => {
     const canvasBaseLayer = getCanvasBaseLayer();
-    if (!canvasBaseLayer) return;
+    if (!canvasBaseLayer) {
+      return;
+    }
     const clientRect = canvasBaseLayer.getClientRect({
       skipTransform: true,
     });

invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts

@@ -32,13 +32,17 @@ const useCanvasDrag = () => {
 
   return {
     handleDragStart: useCallback(() => {
-      if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) return;
+      if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) {
+        return;
+      }
       dispatch(setIsMovingStage(true));
     }, [dispatch, isMovingBoundingBox, isStaging, tool]),
 
     handleDragMove: useCallback(
       (e: KonvaEventObject<MouseEvent>) => {
-        if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) return;
+        if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) {
+          return;
+        }
 
         const newCoordinates = { x: e.target.x(), y: e.target.y() };
 
@@ -48,7 +52,9 @@ const useCanvasDrag = () => {
     ),
 
     handleDragEnd: useCallback(() => {
-      if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) return;
+      if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) {
+        return;
+      }
       dispatch(setIsMovingStage(false));
     }, [dispatch, isMovingBoundingBox, isStaging, tool]),
   };

invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts

@@ -134,7 +134,9 @@ const useInpaintingCanvasHotkeys = () => {
   useHotkeys(
     ['space'],
     (e: KeyboardEvent) => {
-      if (e.repeat) return;
+      if (e.repeat) {
+        return;
+      }
 
       canvasStage?.container().focus();
 

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts

@@ -38,7 +38,9 @@ const useCanvasMouseDown = (stageRef: MutableRefObject<Konva.Stage | null>) => {
 
   return useCallback(
     (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
-      if (!stageRef.current) return;
+      if (!stageRef.current) {
+        return;
+      }
 
       stageRef.current.container().focus();
 
@@ -54,7 +56,9 @@ const useCanvasMouseDown = (stageRef: MutableRefObject<Konva.Stage | null>) => {
 
       const scaledCursorPosition = getScaledCursorPosition(stageRef.current);
 
-      if (!scaledCursorPosition) return;
+      if (!scaledCursorPosition) {
+        return;
+      }
 
       e.evt.preventDefault();
 

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts

@@ -41,11 +41,15 @@ const useCanvasMouseMove = (
   const { updateColorUnderCursor } = useColorPicker();
 
   return useCallback(() => {
-    if (!stageRef.current) return;
+    if (!stageRef.current) {
+      return;
+    }
 
     const scaledCursorPosition = getScaledCursorPosition(stageRef.current);
 
-    if (!scaledCursorPosition) return;
+    if (!scaledCursorPosition) {
+      return;
+    }
 
     dispatch(setCursorPosition(scaledCursorPosition));
 
@@ -56,7 +60,9 @@ const useCanvasMouseMove = (
       return;
     }
 
-    if (!isDrawing || tool === 'move' || isStaging) return;
+    if (!isDrawing || tool === 'move' || isStaging) {
+      return;
+    }
 
     didMouseMoveRef.current = true;
     dispatch(

invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts

@@ -47,7 +47,9 @@ const useCanvasMouseUp = (
     if (!didMouseMoveRef.current && isDrawing && stageRef.current) {
       const scaledCursorPosition = getScaledCursorPosition(stageRef.current);
 
-      if (!scaledCursorPosition) return;
+      if (!scaledCursorPosition) {
+        return;
+      }
 
       /**
        * Extend the current line.

invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts

@@ -35,13 +35,17 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
   return useCallback(
     (e: KonvaEventObject<WheelEvent>) => {
       // stop default scrolling
-      if (!stageRef.current || isMoveStageKeyHeld) return;
+      if (!stageRef.current || isMoveStageKeyHeld) {
+        return;
+      }
 
       e.evt.preventDefault();
 
       const cursorPos = stageRef.current.getPointerPosition();
 
-      if (!cursorPos) return;
+      if (!cursorPos) {
+        return;
+      }
 
       const mousePointTo = {
         x: (cursorPos.x - stageRef.current.x()) / stageScale,

invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts

@@ -16,11 +16,15 @@ const useColorPicker = () => {
 
   return {
     updateColorUnderCursor: () => {
-      if (!stage || !canvasBaseLayer) return;
+      if (!stage || !canvasBaseLayer) {
+        return;
+      }
 
       const position = stage.getPointerPosition();
 
-      if (!position) return;
+      if (!position) {
+        return;
+      }
 
       const pixelRatio = Konva.pixelRatio;
 

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -397,7 +397,9 @@ export const canvasSlice = createSlice({
       const { tool, layer, brushColor, brushSize, shouldRestrictStrokesToBox } =
         state;
 
-      if (tool === 'move' || tool === 'colorPicker') return;
+      if (tool === 'move' || tool === 'colorPicker') {
+        return;
+      }
 
       const newStrokeWidth = brushSize / 2;
 
@@ -434,14 +436,18 @@ export const canvasSlice = createSlice({
     addPointToCurrentLine: (state, action: PayloadAction<number[]>) => {
       const lastLine = state.layerState.objects.findLast(isCanvasAnyLine);
 
-      if (!lastLine) return;
+      if (!lastLine) {
+        return;
+      }
 
       lastLine.points.push(...action.payload);
     },
     undo: (state) => {
       const targetState = state.pastLayerStates.pop();
 
-      if (!targetState) return;
+      if (!targetState) {
+        return;
+      }
 
       state.futureLayerStates.unshift(cloneDeep(state.layerState));
 
@@ -454,7 +460,9 @@ export const canvasSlice = createSlice({
     redo: (state) => {
       const targetState = state.futureLayerStates.shift();
 
-      if (!targetState) return;
+      if (!targetState) {
+        return;
+      }
 
       state.pastLayerStates.push(cloneDeep(state.layerState));
 

invokeai/frontend/web/src/features/canvas/util/getScaledCursorPosition.ts

@@ -5,7 +5,9 @@ const getScaledCursorPosition = (stage: Stage) => {
 
   const stageTransform = stage.getAbsoluteTransform().copy();
 
-  if (!pointerPosition || !stageTransform) return;
+  if (!pointerPosition || !stageTransform) {
+    return;
+  }
 
   const scaledCursorPosition = stageTransform.invert().point(pointerPosition);
 

invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx

@@ -91,8 +91,8 @@ const ControlNet = (props: ControlNetProps) => {
     >
       <Flex sx={{ gap: 2, alignItems: 'center' }}>
         <IAISwitch
-          tooltip={'Toggle this ControlNet'}
+          tooltip="Toggle this ControlNet"
-          aria-label={'Toggle this ControlNet'}
+          aria-label="Toggle this ControlNet"
           isChecked={isEnabled}
           onChange={handleToggleIsEnabled}
         />

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx

@@ -23,7 +23,7 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
   return (
     <IAISlider
       isDisabled={!isEnabled}
-      label={'Weight'}
+      label="Weight"
       value={weight}
       onChange={handleWeightChanged}
       min={0}

invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx

@@ -118,7 +118,7 @@ const ParamEmbeddingPopover = (props: Props) => {
             <IAIMantineSearchableSelect
               inputRef={inputRef}
               autoFocus
-              placeholder={'Add Embedding'}
+              placeholder="Add Embedding"
               value={null}
               data={data}
               nothingFound="No matching Embeddings"

invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx

@@ -66,7 +66,7 @@ const BoardAutoAddSelect = () => {
       label="Auto-Add Board"
       inputRef={inputRef}
       autoFocus
-      placeholder={'Select a Board'}
+      placeholder="Select a Board"
       value={autoAddBoardId}
       data={boards}
       nothingFound="No matching Boards"

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx

@@ -41,7 +41,7 @@ const BoardsList = (props: Props) => {
     <>
       <Collapse in={isOpen} animateOpacity>
         <Flex
-          layerStyle={'first'}
+          layerStyle="first"
           sx={{
             flexDir: 'column',
             gap: 2,

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx

@@ -136,11 +136,15 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
   }, [copyImageToClipboard, imageDTO.image_url]);
 
   const handleStarImage = useCallback(() => {
-    if (imageDTO) starImages({ imageDTOs: [imageDTO] });
+    if (imageDTO) {
+      starImages({ imageDTOs: [imageDTO] });
+    }
   }, [starImages, imageDTO]);
 
   const handleUnstarImage = useCallback(() => {
-    if (imageDTO) unstarImages({ imageDTOs: [imageDTO] });
+    if (imageDTO) {
+      unstarImages({ imageDTOs: [imageDTO] });
+    }
   }, [unstarImages, imageDTO]);
 
   return (

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx

@@ -88,8 +88,12 @@ const GalleryImage = (props: HoverableImageProps) => {
   }, []);
 
   const starIcon = useMemo(() => {
-    if (imageDTO?.starred) return <MdStar size="20" />;
+    if (imageDTO?.starred) {
-    if (!imageDTO?.starred && isHovered) return <MdStarBorder size="20" />;
+      return <MdStar size="20" />;
+    }
+    if (!imageDTO?.starred && isHovered) {
+      return <MdStarBorder size="20" />;
+    }
   }, [imageDTO?.starred, isHovered]);
 
   if (!imageDTO) {

invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx

@@ -34,7 +34,7 @@ const NodeEditor = () => {
       />
       <Panel id="node-editor-content">
         <Flex
-          layerStyle={'first'}
+          layerStyle="first"
           sx={{
             position: 'relative',
             width: 'full',
@@ -82,7 +82,7 @@ const NodeEditor = () => {
                 style={{ position: 'absolute', width: '100%', height: '100%' }}
               >
                 <Flex
-                  layerStyle={'first'}
+                  layerStyle="first"
                   sx={{
                     position: 'relative',
                     width: 'full',

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx

@@ -40,7 +40,7 @@ const NotesNode = (props: NodeProps<NotesNodeData>) => {
         <>
           <Flex
             layerStyle="nodeBody"
-            className={'nopan'}
+            className="nopan"
             sx={{
               cursor: 'auto',
               flexDirection: 'column',

invokeai/frontend/web/src/features/nodes/util/graphBuilders/addSDXLRefinerToGraph.ts

@@ -33,7 +33,9 @@ export const addSDXLRefinerToGraph = (
     refinerStart,
   } = state.sdxl;
 
-  if (!refinerModel) return;
+  if (!refinerModel) {
+    return;
+  }
 
   const metadataAccumulator = graph.nodes[METADATA_ACCUMULATOR] as
     | MetadataAccumulatorInvocation

invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx

@@ -28,7 +28,7 @@ export default function ParamAdvancedCollapse() {
   }
 
   return (
-    <IAICollapse label={'Advanced'} activeLabel={activeLabel}>
+    <IAICollapse label="Advanced" activeLabel={activeLabel}>
       <Flex sx={{ flexDir: 'column', gap: 2 }}>
         <ParamClipSkip />
       </Flex>

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskBlurMethod.tsx

@@ -21,7 +21,9 @@ export default function ParamMaskBlurMethod() {
   const { t } = useTranslation();
 
   const handleMaskBlurMethodChange = (v: string | null) => {
-    if (!v) return;
+    if (!v) {
+      return;
+    }
     dispatch(setMaskBlurMethod(v as MaskBlurMethods));
   };
 

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx

@@ -40,7 +40,7 @@ const InitialImageDisplay = () => {
 
   return (
     <Flex
-      layerStyle={'first'}
+      layerStyle="first"
       sx={{
         position: 'relative',
         flexDirection: 'column',
@@ -76,14 +76,14 @@ const InitialImageDisplay = () => {
         </Text>
         <Spacer />
         <IAIIconButton
-          tooltip={'Upload Initial Image'}
+          tooltip="Upload Initial Image"
-          aria-label={'Upload Initial Image'}
+          aria-label="Upload Initial Image"
           icon={<FaUpload />}
           {...getUploadButtonProps()}
         />
         <IAIIconButton
-          tooltip={'Reset Initial Image'}
+          tooltip="Reset Initial Image"
-          aria-label={'Reset Initial Image'}
+          aria-label="Reset Initial Image"
           icon={<FaUndo />}
           onClick={handleReset}
           isDisabled={isResetButtonDisabled}

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -313,7 +313,9 @@ export const generationSlice = createSlice({
     });
     builder.addCase(setShouldShowAdvancedOptions, (state, action) => {
       const advancedOptionsStatus = action.payload;
-      if (!advancedOptionsStatus) state.clipSkip = 0;
+      if (!advancedOptionsStatus) {
+        state.clipSkip = 0;
+      }
     });
   },
 });

invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx

@@ -32,11 +32,7 @@ const SDXLImageToImageTabCoreParameters = () => {
   const { shouldUseSliders, activeLabel } = useAppSelector(selector);
 
   return (
-    <IAICollapse
+    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
-      label={'General'}
-      activeLabel={activeLabel}
-      defaultIsOpen={true}
-    >
       <Flex
         sx={{
           flexDirection: 'column',

invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx

@@ -30,11 +30,7 @@ const SDXLUnifiedCanvasTabCoreParameters = () => {
   const { shouldUseSliders, activeLabel } = useAppSelector(selector);
 
   return (
-    <IAICollapse
+    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
-      label={'General'}
-      activeLabel={activeLabel}
-      defaultIsOpen={true}
-    >
       <Flex
         sx={{
           flexDirection: 'column',

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

@@ -32,11 +32,7 @@ const ImageToImageTabCoreParameters = () => {
   const { shouldUseSliders, activeLabel } = useAppSelector(selector);
 
   return (
-    <IAICollapse
+    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
-      label={'General'}
-      activeLabel={activeLabel}
-      defaultIsOpen={true}
-    >
       <Flex
         sx={{
           flexDirection: 'column',

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx

@@ -23,7 +23,9 @@ export default function AdvancedAddModels() {
         value={advancedAddMode}
         data={advancedAddModeData}
         onChange={(v) => {
-          if (!v) return;
+          if (!v) {
+            return;
+          }
           setAdvancedAddMode(v as ManualAddMode);
         }}
       />

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx

@@ -74,7 +74,9 @@ export default function ScanAdvancedAddModels() {
         value={advancedAddMode}
         data={advancedAddModeData}
         onChange={(v) => {
-          if (!v) return;
+          if (!v) {
+            return;
+          }
           setAdvancedAddMode(v as ManualAddMode);
           if (v === 'checkpoint') {
             setIsCheckpoint(true);

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelConvert.tsx

@@ -111,7 +111,7 @@ export default function ModelConvert(props: ModelConvertProps) {
       acceptButtonText={`${t('modelManager.convert')}`}
       triggerComponent={
         <IAIButton
-          size={'sm'}
+          size="sm"
           aria-label={t('modelManager.convertToDiffusers')}
           className=" modal-close-btn"
           isLoading={isLoading}

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx

@@ -29,11 +29,7 @@ const TextToImageTabCoreParameters = () => {
   const { shouldUseSliders, activeLabel } = useAppSelector(selector);
 
   return (
-    <IAICollapse
+    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
-      label={'General'}
-      activeLabel={activeLabel}
-      defaultIsOpen={true}
-    >
       <Flex
         sx={{
           flexDirection: 'column',

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx

@@ -5,7 +5,7 @@ import { memo } from 'react';
 const TextToImageTabMain = () => {
   return (
     <Box
-      layerStyle={'first'}
+      layerStyle="first"
       sx={{
         position: 'relative',
         width: '100%',

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx

@@ -35,10 +35,12 @@ export default function UnifiedCanvasColorPicker() {
   const { brushColor, maskColor, layer, isStaging } = useAppSelector(selector);
 
   const currentColorDisplay = () => {
-    if (layer === 'base')
+    if (layer === 'base') {
       return `rgba(${brushColor.r},${brushColor.g},${brushColor.b},${brushColor.a})`;
-    if (layer === 'mask')
+    }
+    if (layer === 'mask') {
       return `rgba(${maskColor.r},${maskColor.g},${maskColor.b},${maskColor.a})`;
+    }
   };
 
   useHotkeys(

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasResetView.tsx

@@ -31,7 +31,9 @@ export default function UnifiedCanvasResetView() {
 
   const handleResetCanvasView = (shouldScaleTo1 = false) => {
     const canvasBaseLayer = getCanvasBaseLayer();
-    if (!canvasBaseLayer) return;
+    if (!canvasBaseLayer) {
+      return;
+    }
     const clientRect = canvasBaseLayer.getClientRect({
       skipTransform: true,
     });

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx

@@ -30,11 +30,7 @@ const UnifiedCanvasCoreParameters = () => {
   const { shouldUseSliders, activeLabel } = useAppSelector(selector);
 
   return (
-    <IAICollapse
+    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
-      label={'General'}
-      activeLabel={activeLabel}
-      defaultIsOpen={true}
-    >
       <Flex
         sx={{
           flexDirection: 'column',