update announcements

Author: Mary Hipp

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

@@ -2081,13 +2081,11 @@
     },
     "whatsNew": {
         "whatsNewInInvoke": "What's New in Invoke",
-        "canvasV2Announcement": {
-            "newCanvas": "A powerful new control canvas",
-            "newLayerTypes": "New layer types for even more control",
-            "fluxSupport": "Support for the Flux family of models",
-            "readReleaseNotes": "Read Release Notes",
-            "watchReleaseVideo": "Watch Release Video",
-            "watchUiUpdatesOverview": "Watch UI Updates Overview"
-        }
+        "line1": "<ItalicComponent>Select Object</ItalicComponent> tool for precise object selection and editing",
+        "line2": "Expanded Flux support, now with Global Reference Images",
+        "line3": "Improved tooltips and context menus",
+        "readReleaseNotes": "Read Release Notes",
+        "watchRecentReleaseVideos": "Watch Recent Release Videos",
+        "watchUiUpdatesOverview": "Watch UI Updates Overview"
     }
 }

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

@@ -21,14 +21,14 @@ import { useTranslation } from 'react-i18next';
 import { PiLightbulbFilamentBold } from 'react-icons/pi';
 import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
 
-import { CanvasV2Announcement } from './CanvasV2Announcement';
+import { WhatsNew } from './WhatsNew';
 
 const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);
 
 export const Notifications = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const shouldShowNotification = useAppSelector((s) => s.ui.shouldShowNotification);
+  const shouldShowNotification = useAppSelector((s) => s.ui.shouldShowNotificationV2);
   const resetIndicator = useCallback(() => {
     dispatch(shouldShowNotificationChanged(false));
   }, [dispatch]);
@@ -58,11 +58,16 @@ export const Notifications = () => {
           <Flex alignItems="center" gap={3}>
             <Image src={InvokeSymbol} boxSize={6} />
             {t('whatsNew.whatsNewInInvoke')}
-            {isLocal && <Text variant="subtext">{`v${data.version}`}</Text>}
+            {!!data.version.length &&
+              (isLocal ? (
+                <Text variant="subtext">{`v${data.version}`}</Text>
+              ) : (
+                <Text variant="subtext">{data.version}</Text>
+              ))}
           </Flex>
         </PopoverHeader>
-        <PopoverBody p={2}>
-          <CanvasV2Announcement />
+        <PopoverBody p={2} maxW={300}>
+          <WhatsNew />
         </PopoverBody>
       </PopoverContent>
     </Popover>

invokeai/frontend/web/src/features/ui/components/CanvasV2Announcement.tsx renamed to invokeai/frontend/web/src/features/ui/components/WhatsNew.tsx

@@ -1,27 +1,34 @@
-import { ExternalLink, Flex, ListItem, UnorderedList } from '@invoke-ai/ui-library';
+import { ExternalLink, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectConfigSlice } from 'features/system/store/configSlice';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);
 
-export const CanvasV2Announcement = () => {
+export const WhatsNew = () => {
   const { t } = useTranslation();
   const isLocal = useAppSelector(selectIsLocal);
 
   return (
     <Flex gap={4} flexDir="column">
       <UnorderedList fontSize="sm">
-        <ListItem>{t('whatsNew.canvasV2Announcement.newCanvas')}</ListItem>
-        <ListItem>{t('whatsNew.canvasV2Announcement.newLayerTypes')}</ListItem>
-        <ListItem>{t('whatsNew.canvasV2Announcement.fluxSupport')}</ListItem>
+        <ListItem>
+          <Trans
+            i18nKey="whatsNew.line1"
+            components={{
+              ItalicComponent: <Text as="span" color="white" fontSize="sm" fontStyle="italic" />,
+            }}
+          />
+        </ListItem>
+        <ListItem>{t('whatsNew.line2')}</ListItem>
+        <ListItem>{t('whatsNew.line3')}</ListItem>
       </UnorderedList>
       <Flex flexDir="column" gap={1}>
         <ExternalLink
           fontSize="sm"
           fontWeight="semibold"
-          label={t('whatsNew.canvasV2Announcement.readReleaseNotes')}
+          label={t('whatsNew.readReleaseNotes')}
           href={
             isLocal
               ? 'https://github.com/invoke-ai/InvokeAI/releases/tag/v5.0.0'
@@ -31,14 +38,8 @@ export const CanvasV2Announcement = () => {
         <ExternalLink
           fontSize="sm"
           fontWeight="semibold"
-          label={t('whatsNew.canvasV2Announcement.watchReleaseVideo')}
-          href="https://www.youtube.com/watch?v=y80W3PjR0Gc"
-        />
-        <ExternalLink
-          fontSize="sm"
-          fontWeight="semibold"
-          label={t('whatsNew.canvasV2Announcement.watchUiUpdatesOverview')}
-          href="https://www.youtube.com/watch?v=Tl-69JvwJ2s"
+          label={t('whatsNew.watchRecentReleaseVideos')}
+          href="https://www.youtube.com/@invokeai/videos"
         />
       </Flex>
     </Flex>

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -15,7 +15,7 @@ const initialUIState: UIState = {
   shouldShowProgressInViewer: true,
   accordions: {},
   expanders: {},
-  shouldShowNotification: true,
+  shouldShowNotificationV2: true,
 };
 
 export const uiSlice = createSlice({
@@ -43,7 +43,7 @@ export const uiSlice = createSlice({
       state.expanders[id] = isOpen;
     },
     shouldShowNotificationChanged: (state, action: PayloadAction<boolean>) => {
-      state.shouldShowNotification = action.payload;
+      state.shouldShowNotificationV2 = action.payload;
     },
   },
   extraReducers(builder) {

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -31,7 +31,7 @@ export interface UIState {
    */
   expanders: Record<string, boolean>;
   /**
-   * Whether or not to show the user the open notification.
+   * Whether or not to show the user the open notification. Bump version to reset users who may have closed previous version.
    */
-  shouldShowNotification: boolean;
+  shouldShowNotificationV2: boolean;
 }