feat(ui): add hotkey to cycle compare modes

Author: psychedelicious

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx

@@ -4,6 +4,7 @@ import {
   comparedImagesSwapped,
   comparisonFitChanged,
   comparisonModeChanged,
+  comparisonModeCycled,
   imageToCompareChanged,
 } from 'features/gallery/store/gallerySlice';
 import { memo, useCallback } from 'react';
@@ -36,6 +37,10 @@ export const CompareToolbar = memo(() => {
     dispatch(imageToCompareChanged(null));
   }, [dispatch]);
   useHotkeys('esc', exitCompare, [exitCompare]);
+  const nextMode = useCallback(() => {
+    dispatch(comparisonModeCycled());
+  }, [dispatch]);
+  useHotkeys('m', nextMode, [nextMode]);
 
   return (
     <Flex w="full" gap={2}>

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -46,6 +46,19 @@ export const gallerySlice = createSlice({
     comparisonModeChanged: (state, action: PayloadAction<ComparisonMode>) => {
       state.comparisonMode = action.payload;
     },
+    comparisonModeCycled: (state) => {
+      switch (state.comparisonMode) {
+        case 'slider':
+          state.comparisonMode = 'side-by-side';
+          break;
+        case 'side-by-side':
+          state.comparisonMode = 'hover';
+          break;
+        case 'hover':
+          state.comparisonMode = 'slider';
+          break;
+      }
+    },
     shouldAutoSwitchChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldAutoSwitch = action.payload;
     },
@@ -143,6 +156,7 @@ export const {
   comparisonModeChanged,
   comparedImagesSwapped,
   comparisonFitChanged,
+  comparisonModeCycled,
 } = gallerySlice.actions;
 
 const isAnyBoardDeleted = isAnyOf(