From 8f9e9e639eb1d182bbd096314a6df37e198f8b4b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 4 Jan 2024 16:24:31 +1100
Subject: [PATCH] fix(ui): fix hotkey key & untranslated string

---
 invokeai/frontend/web/public/locales/en.json          |  1 +
 .../system/components/HotkeysModal/HotkeyListItem.tsx | 11 ++++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 8f0560e3e9..4ef86e94b6 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -86,6 +86,7 @@
         "copyError": "$t(gallery.copy) Error",
         "close": "Close",
         "on": "On",
+        "or": "or",
         "checkpoint": "Checkpoint",
         "communityLabel": "Community",
         "controlNet": "ControlNet",
diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
index 8fd99bec80..08a8a228e0 100644
--- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
+++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
@@ -1,7 +1,7 @@
-/* eslint-disable i18next/no-literal-string */
 import { Flex, Kbd, Spacer } from '@chakra-ui/react';
 import { InvText } from 'common/components/InvText/wrapper';
-import { memo } from 'react';
+import { Fragment, memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface HotkeysModalProps {
   hotkeys: string[][];
@@ -10,6 +10,7 @@ interface HotkeysModalProps {
 }
 
 const HotkeyListItem = (props: HotkeysModalProps) => {
+  const { t } = useTranslation();
   const { title, hotkeys, description } = props;
   return (
     <Flex flexDir="column" gap={2} px={2}>
@@ -18,7 +19,7 @@ const HotkeyListItem = (props: HotkeysModalProps) => {
         <Spacer />
         {hotkeys.map((hotkey, index) => {
           return (
-            <>
+            <Fragment key={`${hotkey}-${index}`}>
               {hotkey.map((key, index) => (
                 <>
                   <Kbd
@@ -41,10 +42,10 @@ const HotkeyListItem = (props: HotkeysModalProps) => {
                   variant="subtext"
                   fontWeight="semibold"
                 >
-                  or
+                  {t('common.or')}
                 </InvText>
               )}
-            </>
+            </Fragment>
           );
         })}
       </Flex>