feat(ui): show alert on viewer when staging on canvas

Also update the verbiage for the alerts:
- "Sending to Canvas" -> "Staging Generations on Canvas"
- "Sending to Gallery" -> "Sending Generations to Gallery"

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

@@ -1727,8 +1727,8 @@
         "referenceImage": "Reference Image",
         "regionalReferenceImage": "Regional Reference Image",
         "globalReferenceImage": "Global Reference Image",
-        "sendingToCanvas": "Sending to Canvas",
-        "sendingToGallery": "Sending to Gallery",
+        "sendingToCanvas": "Staging Generations on Canvas",
+        "sendingToGallery": "Sending Generations to Gallery",
         "sendToGallery": "Send To Gallery",
         "sendToGalleryDesc": "Pressing Invoke generates and saves a unique image to your gallery.",
         "sendToCanvas": "Send To Canvas",

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx

@@ -11,6 +11,7 @@ import {
 } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useBoolean } from 'common/hooks/useBoolean';
+import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   selectCanvasRightPanelGalleryTab,
   selectCanvasRightPanelLayersTab,
@@ -82,7 +83,11 @@ const ActivateCanvasButton = (props: PropsWithChildren) => {
 export const CanvasAlertsSendingToCanvas = () => {
   const { t } = useTranslation();
   const destination = useCurrentDestination();
+  const isStaging = useAppSelector(selectIsStaging);
   const isVisible = useMemo(() => {
+    if (isStaging) {
+      return true;
+    }
     if (!destination) {
       return false;
     }
@@ -92,7 +97,7 @@ export const CanvasAlertsSendingToCanvas = () => {
     }
 
     return true;
-  }, [destination]);
+  }, [destination, isStaging]);
 
   return (
     <AlertWrapper

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsStagingButOnViewer.tsx

@@ -0,0 +1,23 @@
+import { Alert, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectPreserveMask } from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasAlertsPreserveMask = memo(() => {
+  const { t } = useTranslation();
+  const preserveMask = useAppSelector(selectPreserveMask);
+
+  if (!preserveMask) {
+    return null;
+  }
+
+  return (
+    <Alert status="warning" borderRadius="base" fontSize="sm" shadow="md" w="fit-content" alignSelf="flex-end">
+      <AlertIcon />
+      <AlertTitle>{t('controlLayers.settings.preserveMask.alert')}</AlertTitle>
+    </Alert>
+  );
+});
+
+CanvasAlertsPreserveMask.displayName = 'CanvasAlertsPreserveMask';