Reworked Invoke Icon Layout when unpinned

frontend/src/features/options/ProcessButtons/InvokeButton.tsx

@@ -1,14 +1,20 @@
 import { useHotkeys } from 'react-hotkeys-hook';
+import { BsImageFill } from 'react-icons/bs';
 import { generateImage } from '../../../app/socketio/actions';
 import { useAppDispatch, useAppSelector } from '../../../app/store';
 import IAIButton, {
   IAIButtonProps,
 } from '../../../common/components/IAIButton';
+import IAIIconButton from '../../../common/components/IAIIconButton';
 import useCheckParameters from '../../../common/hooks/useCheckParameters';
 import { activeTabNameSelector } from '../optionsSelectors';
 
-export default function InvokeButton(props: Omit<IAIButtonProps, 'label'>) {
+interface InvokeButton extends Omit<IAIButtonProps, 'label'> {
-  const { ...rest } = props;
+  iconButton?: boolean;
+}
+
+export default function InvokeButton(props: InvokeButton) {
+  const { iconButton = false, ...rest } = props;
   const dispatch = useAppDispatch();
   const isReady = useCheckParameters();
 
@@ -28,7 +34,19 @@ export default function InvokeButton(props: Omit<IAIButtonProps, 'label'>) {
     [isReady, activeTabName]
   );
 
-  return (
+  return iconButton ? (
+    <IAIIconButton
+      aria-label="Invoke"
+      type="submit"
+      icon={<BsImageFill />}
+      isDisabled={!isReady}
+      onClick={handleClickGenerate}
+      className="invoke-btn"
+      tooltip="Invoke"
+      tooltipPlacement="bottom"
+      {...rest}
+    />
+  ) : (
     <IAIButton
       label="Invoke"
       aria-label="Invoke"

frontend/src/features/system/SiteHeader.tsx

@@ -1,37 +1,21 @@
 import { IconButton, Link, Tooltip, useColorMode } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
+
-import _ from 'lodash';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { FaSun, FaMoon, FaGithub, FaDiscord } from 'react-icons/fa';
 import { MdHelp, MdKeyboard, MdSettings } from 'react-icons/md';
-import { RootState, useAppSelector } from '../../app/store';
 
 import InvokeAILogo from '../../assets/images/logo.png';
-import { OptionsState } from '../options/optionsSlice';
+
-import CancelButton from '../options/ProcessButtons/CancelButton';
-import InvokeButton from '../options/ProcessButtons/InvokeButton';
-import ProcessButtons from '../options/ProcessButtons/ProcessButtons';
 import HotkeysModal from './HotkeysModal/HotkeysModal';
 
 import SettingsModal from './SettingsModal/SettingsModal';
 import StatusIndicator from './StatusIndicator';
 
-const siteHeaderSelector = createSelector(
-  (state: RootState) => state.options,
-
-  (options: OptionsState) => {
-    const { shouldPinOptionsPanel } = options;
-    return { shouldShowProcessButtons: !shouldPinOptionsPanel };
-  },
-  { memoizeOptions: { resultEqualityCheck: _.isEqual } }
-);
-
 /**
  * Header, includes color mode toggle, settings button, status message.
  */
 const SiteHeader = () => {
-  const { shouldShowProcessButtons } = useAppSelector(siteHeaderSelector);
   const { colorMode, toggleColorMode } = useColorMode();
 
   useHotkeys(
@@ -54,12 +38,6 @@ const SiteHeader = () => {
         <h1>
           invoke <strong>ai</strong>
         </h1>
-        {shouldShowProcessButtons && (
-          <div className="process-buttons process-buttons">
-            <InvokeButton size={'sm'} />
-            <CancelButton size={'sm'} />
-          </div>
-        )}
       </div>
 
       <div className="site-header-right-side">

frontend/src/features/tabs/FloatingShowHideButton.scss

@@ -12,11 +12,6 @@
     border-radius: 0 0.5rem 0.5rem 0 !important;
   }
 
-  &.btn-options {
-    left: 73px;
-    border-radius: 0 0.5rem 0.5rem 0 !important;
-  }
-
   &.right {
     right: 0;
     border-radius: 0.5rem 0 0 0.5rem !important;
@@ -30,3 +25,28 @@
     $btn-color-hover: var(--btn-grey-hover)
   );
 }
+
+.show-hide-button-options {
+  position: absolute !important;
+  transform: translate(0, -50%);
+  z-index: 20;
+  min-width: 2rem !important;
+
+  top: 50%;
+  left: 73px;
+
+  border-radius: 0 0.5rem 0.5rem 0 !important;
+
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+
+  button {
+    border-radius: 0 0.3rem 0.3rem 0;
+    background-color: var(--btn-grey);
+
+    svg {
+      width: 18px;
+    }
+  }
+}

frontend/src/features/tabs/ShowHideOptionsPanelButton.tsx

@@ -1,25 +1,55 @@
+import { createSelector } from '@reduxjs/toolkit';
 import { IoMdOptions } from 'react-icons/io';
-import { useAppDispatch } from '../../app/store';
+import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
 import IAIIconButton from '../../common/components/IAIIconButton';
-import { setShouldShowOptionsPanel } from '../options/optionsSlice';
+import {
+  OptionsState,
+  setShouldShowOptionsPanel,
+} from '../options/optionsSlice';
+import CancelButton from '../options/ProcessButtons/CancelButton';
+import InvokeButton from '../options/ProcessButtons/InvokeButton';
+import _ from 'lodash';
+import LoopbackButton from '../options/ProcessButtons/Loopback';
+
+const canInvokeSelector = createSelector(
+  (state: RootState) => state.options,
+
+  (options: OptionsState) => {
+    const { shouldPinOptionsPanel, shouldShowOptionsPanel } = options;
+    return {
+      shouldShowProcessButtons:
+        !shouldPinOptionsPanel || !shouldShowOptionsPanel,
+    };
+  },
+  { memoizeOptions: { resultEqualityCheck: _.isEqual } }
+);
 
 const ShowHideOptionsPanelButton = () => {
   const dispatch = useAppDispatch();
+  const { shouldShowProcessButtons } = useAppSelector(canInvokeSelector);
 
   const handleShowOptionsPanel = () => {
     dispatch(setShouldShowOptionsPanel(true));
   };
 
   return (
+    <div className="show-hide-button-options">
       <IAIIconButton
-      tooltip="Show Options Panel (G)"
+        tooltip="Show Options Panel (O)"
         tooltipPlacement="top"
         aria-label="Show Options Panel"
-      styleClass="floating-show-hide-button btn-options"
+        onClick={handleShowOptionsPanel}
-      onMouseOver={handleShowOptionsPanel}
       >
         <IoMdOptions />
       </IAIIconButton>
+      {shouldShowProcessButtons && (
+        <>
+          <InvokeButton iconButton />
+          <LoopbackButton />
+          <CancelButton />
+        </>
+      )}
+    </div>
   );
 };