feat(ui): updated whats new handling and v5.4.1 items

Author: psychedelicious

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

@@ -2102,8 +2102,10 @@
     },
     "whatsNew": {
         "whatsNewInInvoke": "What's New in Invoke",
-        "line1": "<StrongComponent>Layer Merging</StrongComponent>: New <StrongComponent>Merge Down</StrongComponent> and improved <StrongComponent>Merge Visible</StrongComponent> for all layers, with special handling for Regional Guidance and Control Layers.",
-        "line2": "<StrongComponent>HF Token Support</StrongComponent>: Upload models that require Hugging Face authentication.",
+        "items": [
+            "<StrongComponent>SD 3.5</StrongComponent>: Support for Text-to-Image in Workflows with SD 3.5 Medium and Large.",
+            "<StrongComponent>Canvas</StrongComponent>: Streamlined Control Layer processing and improved default Control settings."
+        ],
         "readReleaseNotes": "Read Release Notes",
         "watchRecentReleaseVideos": "Watch Recent Release Videos",
         "watchUiUpdatesOverview": "Watch UI Updates Overview"

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

@@ -2,45 +2,41 @@ import { ExternalLink, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectConfigSlice } from 'features/system/store/configSlice';
+import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
 
 const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);
 
+const components = {
+  StrongComponent: <Text as="span" color="white" fontSize="sm" fontWeight="semibold" />,
+};
+
 export const WhatsNew = () => {
   const { t } = useTranslation();
   const { data } = useGetAppVersionQuery();
   const isLocal = useAppSelector(selectIsLocal);
 
-  const highlights = useMemo(() => (data?.highlights ? data.highlights : []), [data]);
+  const items = useMemo<ReactNode[]>(() => {
+    if (data?.highlights?.length) {
+      return data.highlights.map((highlight, index) => <ListItem key={`${highlight}-${index}`}>{highlight}</ListItem>);
+    }
+
+    const tKeys = t<string, { returnObjects: true }, string[]>('whatsNew.items', {
+      returnObjects: true,
+    });
+
+    return tKeys.map((key, index) => (
+      <ListItem key={`${key}-${index}`}>
+        <Trans i18nKey={key} components={components} />
+      </ListItem>
+    ));
+  }, [data?.highlights, t]);
 
   return (
     <Flex gap={4} flexDir="column">
-      <UnorderedList fontSize="sm">
-        {highlights.length ? (
-          highlights.map((highlight, index) => <ListItem key={index}>{highlight}</ListItem>)
-        ) : (
-          <>
-            <ListItem>
-              <Trans
-                i18nKey="whatsNew.line1"
-                components={{
-                  StrongComponent: <Text as="span" color="white" fontSize="sm" fontWeight="semibold" />,
-                }}
-              />
-            </ListItem>
-            <ListItem>
-              <Trans
-                i18nKey="whatsNew.line2"
-                components={{
-                  StrongComponent: <Text as="span" color="white" fontSize="sm" fontWeight="semibold" />,
-                }}
-              />
-            </ListItem>
-          </>
-        )}
-      </UnorderedList>
+      <UnorderedList fontSize="sm">{items}</UnorderedList>
       <Flex flexDir="column" gap={1}>
         <ExternalLink
           fontSize="sm"