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

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

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();