fix(ui): fix tab translations

model manager was using the wrong key due to the tabs render func subbing values in. made translation key a prop of a tab item.

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

@@ -41,6 +41,7 @@ import UnifiedCanvasTab from './tabs/UnifiedCanvas/UnifiedCanvasTab';
 
 export interface InvokeTabInfo {
   id: InvokeTabName;
+  translationKey: string;
   icon: ReactNode;
   content: ReactNode;
 }
@@ -48,26 +49,31 @@ export interface InvokeTabInfo {
 const tabs: InvokeTabInfo[] = [
   {
     id: 'txt2img',
+    translationKey: 'common.txt2img',
     icon: <Icon as={FaFont} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <TextToImageTab />,
   },
   {
     id: 'img2img',
+    translationKey: 'common.img2img',
     icon: <Icon as={FaImage} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <ImageTab />,
   },
   {
     id: 'unifiedCanvas',
+    translationKey: 'common.unifiedCanvas',
     icon: <Icon as={MdGridOn} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <UnifiedCanvasTab />,
   },
   {
     id: 'nodes',
+    translationKey: 'common.nodes',
     icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <NodesTab />,
   },
   {
     id: 'modelManager',
+    translationKey: 'modelManager.modelManager',
     icon: <Icon as={FaCube} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <ModelManagerTab />,
   },
@@ -146,12 +152,12 @@ const InvokeTabs = () => {
         <Tooltip
           key={tab.id}
           hasArrow
-          label={String(t(`common.${tab.id}` as ResourceKey))}
+          label={String(t(tab.translationKey as ResourceKey))}
           placement="end"
         >
           <Tab onClick={handleClickTab}>
             <VisuallyHidden>
-              {String(t(`common.${tab.id}` as ResourceKey))}
+              {String(t(tab.translationKey as ResourceKey))}
             </VisuallyHidden>
             {tab.icon}
           </Tab>