Auto-format frontend (#2009)

* Auto-format frontend

* Update lint-frontend GA workflow node and checkout

* Fix linter error in ThemeChanger

* Add a `on: pull_request` to lint-frontend workflow

Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>

frontend/src/features/canvas/components/IAICanvasIntermediateImage.tsx

@@ -43,7 +43,7 @@ const IAICanvasIntermediateImage = (props: Props) => {
   const {
     boundingBox: { x, y, width, height },
   } = intermediateImage;
-  
+
   return loadedImageElement ? (
     <KonvaImage
       x={x}

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

@@ -4,7 +4,10 @@ import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 import Konva from 'konva';
 import _ from 'lodash';
 import { MutableRefObject, useCallback } from 'react';
-import { canvasSelector, isStagingSelector } from 'features/canvas/store/canvasSelectors';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
 import {
   // addPointToCurrentEraserLine,
   addPointToCurrentLine,

frontend/src/features/gallery/store/thunks/uploadImage.ts

@@ -38,7 +38,7 @@ export const uploadImage =
     });
 
     const image = (await response.json()) as InvokeAI.ImageUploadResponse;
-    console.log(image)
+    console.log(image);
     const newImage: InvokeAI.Image = {
       uuid: uuidv4(),
       category: 'user',

frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx

@@ -9,7 +9,8 @@ import _ from 'lodash';
 const selector = createSelector(
   canvasSelector,
   (canvas) => {
-    const { boundingBoxDimensions, boundingBoxScaleMethod: boundingBoxScale } = canvas;
+    const { boundingBoxDimensions, boundingBoxScaleMethod: boundingBoxScale } =
+      canvas;
     return {
       boundingBoxDimensions,
       boundingBoxScale,

frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleOptions.tsx

@@ -60,7 +60,7 @@ const UpscaleOptions = () => {
   const handleChangeStrength = (v: number) => dispatch(setUpscalingStrength(v));
 
   return (
-    <div className='upscale-options'>
+    <div className="upscale-options">
       <IAISelect
         isDisabled={!isESRGANAvailable}
         label="Scale"

frontend/src/features/options/components/ProcessButtons/Loopback.tsx

@@ -3,7 +3,10 @@ import { FaRecycle } from 'react-icons/fa';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
-import { OptionsState, setShouldLoopback } from 'features/options/store/optionsSlice';
+import {
+  OptionsState,
+  setShouldLoopback,
+} from 'features/options/store/optionsSlice';
 
 const loopbackSelector = createSelector(
   (state: RootState) => state.options,

frontend/src/features/system/components/Console.tsx

@@ -1,7 +1,11 @@
 import { IconButton, Tooltip } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { RootState } from 'app/store';
-import { errorSeen, setShouldShowLogViewer, SystemState } from 'features/system/store/systemSlice';
+import {
+  errorSeen,
+  setShouldShowLogViewer,
+  SystemState,
+} from 'features/system/store/systemSlice';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { FaAngleDoubleDown, FaCode, FaMinus } from 'react-icons/fa';
 import { createSelector } from '@reduxjs/toolkit';

frontend/src/features/system/components/ThemeChanger.tsx

@@ -23,7 +23,7 @@ export default function ThemeChanger() {
     if (colorMode !== currentTheme) {
       setColorMode(currentTheme);
     }
-  }, [colorMode, currentTheme]);
+  }, [setColorMode, colorMode, currentTheme]);
 
   const handleChangeTheme = (theme: string) => {
     dispatch(setCurrentTheme(theme));

frontend/src/features/tabs/components/ImageToImage/InitImagePreview.tsx

@@ -31,7 +31,7 @@ export default function InitImagePreview() {
   return (
     <>
       <div className="init-image-preview-header">
-      {/* <div className="init-image-preview-header"> */}
+        {/* <div className="init-image-preview-header"> */}
         <h2>Initial Image</h2>
         {/* <IconButton
           isDisabled={!initialImage}