feat(ui): rp ui styling/layout

invokeai/frontend/web/public/locales/en.json

@@ -1516,11 +1516,12 @@
         "moveForward": "Move Forward",
         "moveBackward": "Move Backward",
         "brushSize": "Brush Size",
-        "regionalPrompts": "Regional Prompts",
+        "regionalPrompts": "Regional Prompts BETA",
         "enableRegionalPrompts": "Enable $t(regionalPrompts.regionalPrompts)",
         "layerOpacity": "Layer Opacity",
         "autoNegative": "Auto Negative",
         "toggleVisibility": "Toggle Layer Visibility",
-        "resetRegion": "Reset Region"
+        "resetRegion": "Reset Region",
+        "debugLayers": "Debug Layers"
     }
 }

invokeai/frontend/web/src/features/regionalPrompts/components/DebugLayersButton.tsx

@@ -0,0 +1,23 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { getRegionalPromptLayerBlobs } from 'features/regionalPrompts/util/getLayerBlobs';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiBugBold } from 'react-icons/pi';
+
+const debugBlobs = () => {
+  getRegionalPromptLayerBlobs(undefined, true);
+};
+export const DebugLayersButton = memo(() => {
+  const { t } = useTranslation();
+  return (
+    <IconButton
+      colorScheme="warning"
+      aria-label={t('regionalPrompts.debugLayers')}
+      tooltip={t('regionalPrompts.debugLayers')}
+      icon={<PiBugBold />}
+      onClick={debugBlobs}
+    />
+  );
+});
+
+DebugLayersButton.displayName = 'DebugLayersButton';

invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable i18next/no-literal-string */
-import { Button, ButtonGroup, Flex } from '@invoke-ai/ui-library';
+import { Flex, Spacer } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { AddLayerButton } from 'features/regionalPrompts/components/AddLayerButton';
 import { BrushSize } from 'features/regionalPrompts/components/BrushSize';
+import { DebugLayersButton } from 'features/regionalPrompts/components/DebugLayersButton';
 import { DeleteAllLayersButton } from 'features/regionalPrompts/components/DeleteAllLayersButton';
 import { PromptLayerOpacity } from 'features/regionalPrompts/components/PromptLayerOpacity';
 import { RPEnabledSwitch } from 'features/regionalPrompts/components/RPEnabledSwitch';
@@ -13,7 +14,6 @@ import { StageComponent } from 'features/regionalPrompts/components/StageCompone
 import { ToolChooser } from 'features/regionalPrompts/components/ToolChooser';
 import { UndoRedoButtonGroup } from 'features/regionalPrompts/components/UndoRedoButtonGroup';
 import { isRPLayer, selectRegionalPromptsSlice } from 'features/regionalPrompts/store/regionalPromptsSlice';
-import { getRegionalPromptLayerBlobs } from 'features/regionalPrompts/util/getLayerBlobs';
 import { memo } from 'react';
 
 const selectRPLayerIdsReversed = createMemoizedSelector(selectRegionalPromptsSlice, (regionalPrompts) =>
@@ -23,21 +23,16 @@ const selectRPLayerIdsReversed = createMemoizedSelector(selectRegionalPromptsSli
     .reverse()
 );
 
-const debugBlobs = () => {
-  getRegionalPromptLayerBlobs(undefined, true);
-};
-
 export const RegionalPromptsEditor = memo(() => {
   const rpLayerIdsReversed = useAppSelector(selectRPLayerIdsReversed);
   return (
     <Flex gap={4} w="full" h="full">
       <Flex flexDir="column" gap={4} minW={430}>
-        <Flex gap={3}>
-          <ButtonGroup isAttached={false}>
-            <Button onClick={debugBlobs}>🐛</Button>
-            <AddLayerButton />
-            <DeleteAllLayersButton />
-          </ButtonGroup>
+        <Flex gap={3} w="full" justifyContent="space-between">
+          <DebugLayersButton />
+          <AddLayerButton />
+          <DeleteAllLayersButton />
+          <Spacer />
           <UndoRedoButtonGroup />
           <ToolChooser />
         </Flex>

invokeai/frontend/web/src/features/regionalPrompts/components/ToolChooser.tsx

@@ -2,9 +2,11 @@ import { ButtonGroup, IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $tool } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PiArrowsOutCardinalBold, PiEraserBold, PiPaintBrushBold } from 'react-icons/pi';
 
 export const ToolChooser: React.FC = () => {
+  const { t } = useTranslation();
   const tool = useStore($tool);
   const setToolToBrush = useCallback(() => {
     $tool.set('brush');
@@ -19,19 +21,22 @@ export const ToolChooser: React.FC = () => {
   return (
     <ButtonGroup isAttached>
       <IconButton
-        aria-label="Brush tool"
+        aria-label={t('unifiedCanvas.brush')}
+        tooltip={t('unifiedCanvas.brush')}
         icon={<PiPaintBrushBold />}
         variant={tool === 'brush' ? 'solid' : 'outline'}
         onClick={setToolToBrush}
       />
       <IconButton
-        aria-label="Eraser tool"
+        aria-label={t('unifiedCanvas.eraser')}
+        tooltip={t('unifiedCanvas.eraser')}
         icon={<PiEraserBold />}
         variant={tool === 'eraser' ? 'solid' : 'outline'}
         onClick={setToolToEraser}
       />
       <IconButton
-        aria-label="Move tool"
+        aria-label={t('unifiedCanvas.move')}
+        tooltip={t('unifiedCanvas.move')}
         icon={<PiArrowsOutCardinalBold />}
         variant={tool === 'move' ? 'solid' : 'outline'}
         onClick={setToolToMove}

invokeai/frontend/web/src/features/regionalPrompts/components/UndoRedoButtonGroup.tsx

@@ -4,9 +4,11 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { redoRegionalPrompts, undoRegionalPrompts } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
 import { PiArrowClockwiseBold, PiArrowCounterClockwiseBold } from 'react-icons/pi';
 
 export const UndoRedoButtonGroup = memo(() => {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
   const mayUndo = useAppSelector((s) => s.regionalPrompts.past.length > 0);
@@ -23,8 +25,20 @@ export const UndoRedoButtonGroup = memo(() => {
 
   return (
     <ButtonGroup>
-      <IconButton aria-label="undo" onClick={undo} icon={<PiArrowCounterClockwiseBold />} isDisabled={!mayUndo} />
-      <IconButton aria-label="redo" onClick={redo} icon={<PiArrowClockwiseBold />} isDisabled={!mayRedo} />
+      <IconButton
+        aria-label={t('unifiedCanvas.undo')}
+        tooltip={t('unifiedCanvas.undo')}
+        onClick={undo}
+        icon={<PiArrowCounterClockwiseBold />}
+        isDisabled={!mayUndo}
+      />
+      <IconButton
+        aria-label={t('unifiedCanvas.redo')}
+        tooltip={t('unifiedCanvas.redo')}
+        onClick={redo}
+        icon={<PiArrowClockwiseBold />}
+        isDisabled={!mayRedo}
+      />
     </ButtonGroup>
   );
 });