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
2024-08-30 20:32:17 +00:00 · 2023-08-21 11:35:56 +10:00 · 2023-08-21 11:35:56 +10:00 · 01738deb23
commit 01738deb23
parent fbff22c94b
47 changed files with 174 additions and 92 deletions
--- a/invokeai/frontend/web/.eslintrc.js
+++ b/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',
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/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]
--- a/invokeai/frontend/web/src/common/components/ImageUploader.tsx
+++ b/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()} />
--- a/invokeai/frontend/web/src/common/hooks/useResolution.ts
+++ b/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 (tabletResolutions.includes(breakpointValue)) return 'tablet';
-  if (desktopResolutions.includes(breakpointValue)) return 'desktop';
+  if (mobileResolutions.includes(breakpointValue)) {
+    return 'mobile';
+  }
+  if (tabletResolutions.includes(breakpointValue)) {
+    return 'tablet';
+  }
+  if (desktopResolutions.includes(breakpointValue)) {
+    return 'desktop';
+  }
  return 'unknown';
 }
--- a/invokeai/frontend/web/src/common/util/dateComparator.ts
+++ b/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) return -1;
+  if (dateA > dateB) {
+    return 1;
+  }
+  if (dateA < dateB) {
+    return -1;
+  }
  return 0;
 };
--- a/invokeai/frontend/web/src/common/util/openBase64ImageInTab.ts
+++ b/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();
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx
+++ b/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
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx
+++ b/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}>
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasResizer.tsx
+++ b/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;

--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/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
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx
+++ b/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}>
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
+++ b/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;

--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/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,
    });
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasDragMove.ts
+++ b/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]),
  };
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
+++ b/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();

--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts
+++ b/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();

--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts
+++ b/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(
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts
+++ b/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.
--- a/invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts
+++ b/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,
--- a/invokeai/frontend/web/src/features/canvas/hooks/useColorUnderCursor.ts
+++ b/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;

--- a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
+++ b/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));

--- a/invokeai/frontend/web/src/features/canvas/util/getScaledCursorPosition.ts
+++ b/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);

--- a/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
+++ b/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'}
-          aria-label={'Toggle this ControlNet'}
+          tooltip="Toggle this ControlNet"
+          aria-label="Toggle this ControlNet"
          isChecked={isEnabled}
          onChange={handleToggleIsEnabled}
        />
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx
+++ b/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"
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx
+++ b/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"
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
+++ b/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,
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/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 (
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/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 && isHovered) return <MdStarBorder size="20" />;
+    if (imageDTO?.starred) {
+      return <MdStar size="20" />;
+    }
+    if (!imageDTO?.starred && isHovered) {
+      return <MdStarBorder size="20" />;
+    }
  }, [imageDTO?.starred, isHovered]);

  if (!imageDTO) {
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/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',
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
+++ b/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',
--- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/addSDXLRefinerToGraph.ts
+++ b/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
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
+++ b/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>
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskBlurMethod.tsx
+++ b/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));
  };

--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx
+++ b/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'}
-          aria-label={'Upload Initial Image'}
+          tooltip="Upload Initial Image"
+          aria-label="Upload Initial Image"
          icon={<FaUpload />}
          {...getUploadButtonProps()}
        />
        <IAIIconButton
-          tooltip={'Reset Initial Image'}
-          aria-label={'Reset Initial Image'}
+          tooltip="Reset Initial Image"
+          aria-label="Reset Initial Image"
          icon={<FaUndo />}
          onClick={handleReset}
          isDisabled={isResetButtonDisabled}
--- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
+++ b/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;
+      }
    });
  },
 });
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx
@ -32,11 +32,7 @@ const SDXLImageToImageTabCoreParameters = () => {
  const { shouldUseSliders, activeLabel } = useAppSelector(selector);

  return (
-    <IAICollapse
-      label={'General'}
-      activeLabel={activeLabel}
-      defaultIsOpen={true}
-    >
+    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
      <Flex
        sx={{
          flexDirection: 'column',
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx
@ -30,11 +30,7 @@ const SDXLUnifiedCanvasTabCoreParameters = () => {
  const { shouldUseSliders, activeLabel } = useAppSelector(selector);

  return (
-    <IAICollapse
-      label={'General'}
-      activeLabel={activeLabel}
-      defaultIsOpen={true}
-    >
+    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
      <Flex
        sx={{
          flexDirection: 'column',
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx
@ -32,11 +32,7 @@ const ImageToImageTabCoreParameters = () => {
  const { shouldUseSliders, activeLabel } = useAppSelector(selector);

  return (
-    <IAICollapse
-      label={'General'}
-      activeLabel={activeLabel}
-      defaultIsOpen={true}
-    >
+    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
      <Flex
        sx={{
          flexDirection: 'column',
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
+++ b/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);
        }}
      />
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
+++ b/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);
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelConvert.tsx
+++ b/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}
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx
@ -29,11 +29,7 @@ const TextToImageTabCoreParameters = () => {
  const { shouldUseSliders, activeLabel } = useAppSelector(selector);

  return (
-    <IAICollapse
-      label={'General'}
-      activeLabel={activeLabel}
-      defaultIsOpen={true}
-    >
+    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
      <Flex
        sx={{
          flexDirection: 'column',
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx
+++ b/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%',
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx
+++ b/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(
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasResetView.tsx
+++ b/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,
    });
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx
@ -30,11 +30,7 @@ const UnifiedCanvasCoreParameters = () => {
  const { shouldUseSliders, activeLabel } = useAppSelector(selector);

  return (
-    <IAICollapse
-      label={'General'}
-      activeLabel={activeLabel}
-      defaultIsOpen={true}
-    >
+    <IAICollapse label="General" activeLabel={activeLabel} defaultIsOpen={true}>
      <Flex
        sx={{
          flexDirection: 'column',