feat(ui): add multi-select and batch capabilities

This introduces the core functionality for batch operations on images and multiple selection in the gallery/batch manager.

A number of other substantial changes are included:
- `imagesSlice` is consolidated into `gallerySlice`, allowing for simpler selection of filtered images
- `batchSlice` is added to manage the batch
- The wonky context pattern for image deletion has been changed, much simpler now using a `imageDeletionSlice` and redux listeners; this needs to be implemented still for the other image modals
- Minimum gallery size in px implemented as a hook
- Many style fixes & several bug fixes

TODO:
- The UI and UX need to be figured out, especially for controlnet
- Batch processing is not hooked up; generation does not do anything with batch
- Routes to support batch image operations, specifically delete and add/remove to/from boards

invokeai/frontend/web/src/theme/components/button.ts

@@ -7,10 +7,10 @@ const invokeAI = defineStyle((props) => {
 
   if (c === 'base') {
     const _disabled = {
-      bg: mode('base.200', 'base.700')(props),
-      color: mode('base.500', 'base.150')(props),
+      bg: mode('base.150', 'base.700')(props),
+      color: mode('base.500', 'base.500')(props),
       svg: {
-        fill: mode('base.500', 'base.150')(props),
+        fill: mode('base.500', 'base.500')(props),
       },
       opacity: 1,
     };
@@ -30,7 +30,6 @@ const invokeAI = defineStyle((props) => {
           'drop-shadow(0px 0px 0.3rem var(--invokeai-colors-base-800))'
         )(props),
       },
-      _disabled,
       _hover: {
         bg: mode('base.300', 'base.500')(props),
         color: mode('base.900', 'base.50')(props),
@@ -39,34 +38,16 @@ const invokeAI = defineStyle((props) => {
         },
         _disabled,
       },
-      _checked: {
-        bg: mode('accent.400', 'accent.600')(props),
-        color: mode('base.50', 'base.100')(props),
-        svg: {
-          fill: mode(`${c}.50`, `${c}.100`)(props),
-          filter: mode(
-            `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
-            `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
-          )(props),
-        },
-        _disabled,
-        _hover: {
-          bg: mode('accent.500', 'accent.500')(props),
-          color: mode('white', 'base.50')(props),
-          svg: {
-            fill: mode('white', 'base.50')(props),
-          },
-          _disabled,
-        },
-      },
+      _disabled,
     };
   }
 
   const _disabled = {
-    bg: mode(`${c}.200`, `${c}.700`)(props),
-    color: mode(`${c}.100`, `${c}.150`)(props),
+    bg: mode(`${c}.250`, `${c}.700`)(props),
+    color: mode(`${c}.50`, `${c}.500`)(props),
     svg: {
-      fill: mode(`${c}.100`, `${c}.150`)(props),
+      fill: mode(`${c}.50`, `${c}.500`)(props),
+      filter: 'unset',
     },
     opacity: 1,
     filter: mode(undefined, 'saturate(65%)')(props),
@@ -78,7 +59,7 @@ const invokeAI = defineStyle((props) => {
     borderRadius: 'base',
     textShadow: mode(
       `0 0 0.3rem var(--invokeai-colors-${c}-600)`,
-      `0 0 0.3rem var(--invokeai-colors-${c}-900)`
+      `0 0 0.3rem var(--invokeai-colors-${c}-800)`
     )(props),
     svg: {
       fill: mode(`base.50`, `base.100`)(props),
@@ -96,26 +77,6 @@ const invokeAI = defineStyle((props) => {
       },
       _disabled,
     },
-    _checked: {
-      bg: mode('accent.400', 'accent.600')(props),
-      color: mode('base.50', 'base.100')(props),
-      svg: {
-        fill: mode(`base.50`, `base.100`)(props),
-        filter: mode(
-          `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-600))`,
-          `drop-shadow(0px 0px 0.3rem var(--invokeai-colors-${c}-800))`
-        )(props),
-      },
-      _disabled,
-      _hover: {
-        bg: mode('accent.500', 'accent.500')(props),
-        color: mode('white', 'base.50')(props),
-        svg: {
-          fill: mode('white', 'base.50')(props),
-        },
-        _disabled,
-      },
-    },
   };
 });
 

invokeai/frontend/web/src/theme/components/menu.ts

@@ -22,6 +22,8 @@ const invokeAI = definePartsStyle((props) => ({
   list: {
     zIndex: 9999,
     bg: mode('base.200', 'base.800')(props),
+    shadow: 'dark-lg',
+    border: 'none',
   },
   item: {
     // this will style the MenuItem and MenuItemOption components

invokeai/frontend/web/src/theme/components/progress.ts

@@ -9,14 +9,7 @@ const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
 const invokeAIFilledTrack = defineStyle((_props) => ({
-  bg: 'accent.500',
-  // TODO: the animation is nice but looks weird bc it is substantially longer than each step
-  // so we get to 100% long before it finishes
-  // transition: 'width 0.2s ease-in-out',
-  _indeterminate: {
-    bgGradient:
-      'linear(to-r, transparent 0%, accent.500 50%, transparent 100%);',
-  },
+  bg: 'accentAlpha.500',
 }));
 
 const invokeAITrack = defineStyle((_props) => {

invokeai/frontend/web/src/theme/components/skeleton.ts

@@ -0,0 +1,25 @@
+import { defineStyle, defineStyleConfig, cssVar } from '@chakra-ui/react';
+
+const $startColor = cssVar('skeleton-start-color');
+const $endColor = cssVar('skeleton-end-color');
+
+const invokeAI = defineStyle({
+  borderRadius: 'base',
+  maxW: 'full',
+  maxH: 'full',
+  _light: {
+    [$startColor.variable]: 'colors.base.250',
+    [$endColor.variable]: 'colors.base.450',
+  },
+  _dark: {
+    [$startColor.variable]: 'colors.base.700',
+    [$endColor.variable]: 'colors.base.500',
+  },
+});
+
+export const skeletonTheme = defineStyleConfig({
+  variants: { invokeAI },
+  defaultProps: {
+    variant: 'invokeAI',
+  },
+});