feat(ui): restore floating panel buttons

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/CanvasLaunchpadPanel.tsx

@@ -10,7 +10,7 @@ import { LaunchpadUseALayoutImageButton } from './LaunchpadUseALayoutImageButton
 export const CanvasLaunchpadPanel = memo(() => {
   return (
     <Flex flexDir="column" h="full" w="full" alignItems="center" gap={2}>
-      <Flex flexDir="column" w="full" h="full" gap={4} px={12} maxW={768} pt="20%">
+      <Flex flexDir="column" w="full" h="full" gap={4} px={14} maxW={768} pt="20%">
         <Heading mb={4}>Edit and refine on Canvas.</Heading>
         <Flex flexDir="column" gap={8}>
           <Grid gridTemplateColumns="1fr 1fr" gap={8}>

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/GenerateLaunchpadPanel.tsx

@@ -15,7 +15,7 @@ export const GenerateLaunchpadPanel = memo(() => {
 
   return (
     <Flex flexDir="column" h="full" w="full" alignItems="center" justifyContent="center" gap={2}>
-      <Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} px={12} maxW={768}>
+      <Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} px={14} maxW={768}>
         <Heading mb={4}>Generate images from text prompts.</Heading>
         <Flex flexDir="column" gap={8}>
           <Grid gridTemplateColumns="1fr 1fr" gap={8}>

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/UpscalingLaunchpadPanel.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 export const UpscalingLaunchpadPanel = memo(() => {
   return (
     <Flex flexDir="column" h="full" w="full" alignItems="center" justifyContent="center" gap={2}>
-      <Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} px={12} maxW={768}>
+      <Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} px={14} maxW={768}>
         <Heading mb={4}>Upscale and add detail.</Heading>
       </Flex>
     </Flex>

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/WorkflowsLaunchpadPanel.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 export const WorkflowsLaunchpadPanel = memo(() => {
   return (
     <Flex flexDir="column" h="full" w="full" alignItems="center" justifyContent="center" gap={2}>
-      <Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} px={12} maxW={768}>
+      <Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} px={14} maxW={768}>
         <Heading mb={4}>Go deep with Workflows.</Heading>
       </Flex>
     </Flex>

invokeai/frontend/web/src/features/gallery/components/GalleryTopBar.tsx

@@ -17,7 +17,7 @@ export const GalleryTopBar = memo(() => {
   const dispatch = useAppDispatch();
   const boardSearchText = useAppSelector(selectBoardSearchText);
   const boardSearchDisclosure = useBoardSearchDisclosure();
-  const $api = useAutoLayoutContext();
+  const { $api } = useAutoLayoutContext();
   const api = useStore($api);
   const boardsPanel = useCollapsibleGridviewPanel(api, 'Boards', 'vertical', 256);
   const isBoardsPanelCollapsed = useStore(boardsPanel.$isCollapsed);

invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx

@@ -1,12 +1,12 @@
 import { ButtonGroup, Flex, Icon, IconButton, spinAnimation, Tooltip, useShiftModifier } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useDeleteAllExceptCurrentQueueItemDialog } from 'features/queue/components/DeleteAllExceptCurrentQueueItemConfirmationAlertDialog';
 import { InvokeButtonTooltip } from 'features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip';
 import { useDeleteCurrentQueueItem } from 'features/queue/hooks/useDeleteCurrentQueueItem';
 import { useInvoke } from 'features/queue/hooks/useInvoke';
-import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
+import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -19,18 +19,11 @@ import {
 } from 'react-icons/pi';
 import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 
-export const FloatingLeftPanelButtons = memo((props: { onToggle: () => void }) => {
-  const tab = useAppSelector(selectActiveTab);
-
+export const FloatingLeftPanelButtons = memo(() => {
   return (
     <Flex pos="absolute" transform="translate(0, -50%)" top="50%" insetInlineStart={2} direction="column" gap={2}>
-      {tab === 'canvas' && (
-        <CanvasManagerProviderGate>
-          <ToolChooser />
-        </CanvasManagerProviderGate>
-      )}
       <ButtonGroup orientation="vertical" h={48}>
-        <ToggleLeftPanelButton onToggle={props.onToggle} />
+        <ToggleLeftPanelButton />
         <InvokeIconButton />
         <DeleteCurrentIconButton />
         <DeleteAllExceptCurrentIconButton />
@@ -41,13 +34,37 @@ export const FloatingLeftPanelButtons = memo((props: { onToggle: () => void }) =
 
 FloatingLeftPanelButtons.displayName = 'FloatingLeftPanelButtons';
 
-const ToggleLeftPanelButton = memo((props: { onToggle: () => void }) => {
+export const FloatingCanvasLeftPanelButtons = memo(() => {
+  return (
+    <Flex pos="absolute" transform="translate(0, -50%)" top="50%" insetInlineStart={2} direction="column" gap={2}>
+      <CanvasManagerProviderGate>
+        <ToolChooser />
+      </CanvasManagerProviderGate>
+      <ButtonGroup orientation="vertical" h={48}>
+        <ToggleLeftPanelButton />
+        <InvokeIconButton />
+        <DeleteCurrentIconButton />
+        <DeleteAllExceptCurrentIconButton />
+      </ButtonGroup>
+    </Flex>
+  );
+});
+
+FloatingCanvasLeftPanelButtons.displayName = 'FloatingCanvasLeftPanelButtons';
+
+const ToggleLeftPanelButton = memo(() => {
+  const { toggleLeftPanel } = useAutoLayoutContext();
+  useRegisteredHotkeys({
+    category: 'app',
+    id: 'toggleLeftPanel',
+    callback: toggleLeftPanel,
+  });
   const { t } = useTranslation();
   return (
     <Tooltip label={t('accessibility.toggleLeftPanel')} placement="end">
       <IconButton
         aria-label={t('accessibility.toggleLeftPanel')}
-        onClick={props.onToggle}
+        onClick={toggleLeftPanel}
         icon={<PiSlidersHorizontalBold />}
         flexGrow={1}
       />

invokeai/frontend/web/src/features/ui/components/FloatingRightPanelButtons.tsx

@@ -1,24 +1,33 @@
 import { Flex, IconButton, Tooltip } from '@invoke-ai/ui-library';
+import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
+import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiImagesSquareBold } from 'react-icons/pi';
 
-export const FloatingRightPanelButtons = memo((props: { onToggle: () => void }) => {
+export const FloatingRightPanelButtons = memo(() => {
   return (
     <Flex pos="absolute" transform="translate(0, -50%)" minW={8} top="50%" insetInlineEnd={2}>
-      <ToggleRightPanelButton onToggle={props.onToggle} />
+      <ToggleRightPanelButton />
     </Flex>
   );
 });
 FloatingRightPanelButtons.displayName = 'FloatingRightPanelButtons';
 
-const ToggleRightPanelButton = memo((props: { onToggle: () => void }) => {
+const ToggleRightPanelButton = memo(() => {
   const { t } = useTranslation();
+  const { toggleRightPanel } = useAutoLayoutContext();
+  useRegisteredHotkeys({
+    category: 'app',
+    id: 'toggleRightPanel',
+    callback: toggleRightPanel,
+  });
+
   return (
     <Tooltip label={t('accessibility.toggleRightPanel')} placement="start">
       <IconButton
         aria-label={t('accessibility.toggleRightPanel')}
-        onClick={props.onToggle}
+        onClick={toggleRightPanel}
         icon={<PiImagesSquareBold />}
         h={48}
       />

invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx

@@ -1,18 +1,32 @@
 import type { GridviewApi } from 'dockview';
 import type { Atom } from 'nanostores';
 import type { PropsWithChildren } from 'react';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 
-const AutoLayoutContext = createContext<Atom<GridviewApi | null> | null>(null);
+type AutoLayoutContextValue = {
+  $api: Atom<GridviewApi | null>;
+  toggleLeftPanel: () => void;
+  toggleRightPanel: () => void;
+};
+
+const AutoLayoutContext = createContext<AutoLayoutContextValue | null>(null);
 
-export const AutoLayoutProvider = (props: PropsWithChildren<{ $api: Atom<GridviewApi | null> }>) => {
-  return <AutoLayoutContext.Provider value={props.$api}>{props.children}</AutoLayoutContext.Provider>;
+export const AutoLayoutProvider = (props: PropsWithChildren<AutoLayoutContextValue>) => {
+  const value = useMemo<AutoLayoutContextValue>(
+    () => ({
+      $api: props.$api,
+      toggleLeftPanel: props.toggleLeftPanel,
+      toggleRightPanel: props.toggleRightPanel,
+    }),
+    [props.$api, props.toggleLeftPanel, props.toggleRightPanel]
+  );
+  return <AutoLayoutContext.Provider value={value}>{props.children}</AutoLayoutContext.Provider>;
 };
 
 export const useAutoLayoutContext = () => {
-  const api = useContext(AutoLayoutContext);
-  if (!api) {
+  const value = useContext(AutoLayoutContext);
+  if (!value) {
     throw new Error('useAutoLayoutContext must be used within an AutoLayoutProvider');
   }
-  return api;
+  return value;
 };