Add Next/Prev Buttons CurrentImageNode.tsx (#4352)

## What type of PR is this? (check all applicable)

- [ ] Refactor
- [X] Feature
- [ ] Bug Fix
- [ ] Optimization
- [ ] Documentation Update
- [ ] Community Node Submission


## Have you discussed this change with the InvokeAI team?
- [X] Yes
- [ ] No, because:

      
## Have you updated all relevant documentation?
- [ ] Yes
- [ ] No


## Description
Adds Next and Prev Buttons to the current image node
As usual you don't have to use 😄 

## Related Tickets & Documents

<!--
For pull requests that relate or close an issue, please include them
below. 

For example having the text: "closes #1234" would connect the current
pull
request to issue 1234.  And when we merge the pull request, Github will
automatically close the issue.
-->

- Related Issue #
- Closes #

## QA Instructions, Screenshots, Recordings

<!-- 
Please provide steps on how to test changes, any hardware or 
software specifications as well as any other pertinent information. 
-->

## Added/updated tests?

- [ ] Yes
- [ ] No : _please replace this line with details on why tests
      have not been included_

## [optional] Are there any post deployment tasks we need to perform?

invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx

@@ -1,13 +1,15 @@
-import { Flex, Image, Text } from '@chakra-ui/react';
+import { useState, PropsWithChildren, memo } from 'react';
+import { useSelector } from 'react-redux';
 import { createSelector } from '@reduxjs/toolkit';
-import { stateSelector } from 'app/store/store';
+import { Flex, Image, Text } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import { NodeProps } from 'reactflow';
+import NodeWrapper from '../common/NodeWrapper';
+import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
 import IAIDndImage from 'common/components/IAIDndImage';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
-import { PropsWithChildren, memo } from 'react';
-import { useSelector } from 'react-redux';
-import { NodeProps } from 'reactflow';
-import NodeWrapper from '../common/NodeWrapper';
+import { stateSelector } from 'app/store/store';
 
 const selector = createSelector(stateSelector, ({ system, gallery }) => {
   const imageDTO = gallery.selection[gallery.selection.length - 1];
@@ -54,44 +56,90 @@ const CurrentImageNode = (props: NodeProps) => {
 
 export default memo(CurrentImageNode);
 
-const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => (
-  <NodeWrapper
-    nodeId={props.nodeProps.data.id}
-    selected={props.nodeProps.selected}
-    width={384}
-  >
-    <Flex
-      className={DRAG_HANDLE_CLASSNAME}
-      sx={{
-        flexDirection: 'column',
-      }}
+const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
+  const [isHovering, setIsHovering] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovering(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovering(false);
+  };
+
+  return (
+    <NodeWrapper
+      nodeId={props.nodeProps.id}
+      selected={props.nodeProps.selected}
+      width={384}
     >
       <Flex
-        layerStyle="nodeHeader"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        className={DRAG_HANDLE_CLASSNAME}
         sx={{
-          borderTopRadius: 'base',
-          alignItems: 'center',
-          justifyContent: 'center',
-          h: 8,
+          position: 'relative',
+          flexDirection: 'column',
         }}
       >
-        <Text
+        <Flex
+          layerStyle="nodeHeader"
           sx={{
-            fontSize: 'sm',
-            fontWeight: 600,
-            color: 'base.700',
-            _dark: { color: 'base.200' },
+            borderTopRadius: 'base',
+            alignItems: 'center',
+            justifyContent: 'center',
+            h: 8,
           }}
         >
-          Current Image
-        </Text>
+          <Text
+            sx={{
+              fontSize: 'sm',
+              fontWeight: 600,
+              color: 'base.700',
+              _dark: { color: 'base.200' },
+            }}
+          >
+            Current Image
+          </Text>
+        </Flex>
+        <Flex
+          layerStyle="nodeBody"
+          sx={{
+            w: 'full',
+            h: 'full',
+            borderBottomRadius: 'base',
+            p: 2,
+          }}
+        >
+          {props.children}
+          {isHovering && (
+            <motion.div
+              key="nextPrevButtons"
+              initial={{
+                opacity: 0,
+              }}
+              animate={{
+                opacity: 1,
+                transition: { duration: 0.1 },
+              }}
+              exit={{
+                opacity: 0,
+                transition: { duration: 0.1 },
+              }}
+              style={{
+                position: 'absolute',
+                top: 40,
+                left: -2,
+                right: -2,
+                bottom: 0,
+                pointerEvents: 'none',
+              }}
+            >
+              <NextPrevImageButtons />
+            </motion.div>
+          )}
+        </Flex>
       </Flex>
-      <Flex
-        layerStyle="nodeBody"
-        sx={{ w: 'full', h: 'full', borderBottomRadius: 'base', p: 2 }}
-      >
-        {props.children}
-      </Flex>
-    </Flex>
-  </NodeWrapper>
-);
+    </NodeWrapper>
+  );
+};