From c1b10b22224ab353bfa10109cab063a22523de90 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 24 Apr 2023 22:11:37 +1000
Subject: [PATCH] feat(ui): open in new tab @ hoverable image

---
 invokeai/frontend/web/public/locales/en.json               | 3 ++-
 .../web/src/features/gallery/components/HoverableImage.tsx | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 68978baf3b..72f369ef82 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -99,7 +99,8 @@
         "loading": "Loading",
         "loadingInvokeAI": "Loading Invoke AI",
         "random": "Random",
-        "generate": "Generate"
+        "generate": "Generate",
+        "openInNewTab": "Open in New Tab"
     },
     "gallery": {
         "generations": "Generations",
diff --git a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx
index 2a29737739..c703fea0b0 100644
--- a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx
@@ -169,11 +169,18 @@ const HoverableImage = memo((props: HoverableImageProps) => {
     // dispatch(setIsLightboxOpen(true));
   };
 
+  const handleOpenInNewTab = () => {
+    window.open(getUrl(image.url), '_blank');
+  };
+
   return (
     <ContextMenu<HTMLDivElement>
       menuProps={{ size: 'sm', isLazy: true }}
       renderMenu={() => (
         <MenuList>
+          <MenuItem onClickCapture={handleOpenInNewTab}>
+            {t('common.openInNewTab')}
+          </MenuItem>
           {!disabledFeatures.includes('lightbox') && (
             <MenuItem onClickCapture={handleLightBox}>
               {t('parameters.openInViewer')}