open notification by default, get rid of indicator

Author: Mary Hipp

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

@@ -1,18 +1,18 @@
 import {
-  Box,
   Flex,
   IconButton,
   Image,
   Popover,
   PopoverArrow,
   PopoverBody,
+  PopoverCloseButton,
   PopoverContent,
   PopoverHeader,
   PopoverTrigger,
   Text,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { shouldShowNotificationIndicatorChanged } from 'features/ui/store/uiSlice';
+import { shouldShowNotificationChanged } from 'features/ui/store/uiSlice';
 import InvokeSymbol from 'public/assets/images/invoke-favicon.png';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,9 +24,9 @@ import { CanvasV2Announcement } from './CanvasV2Announcement';
 export const Notifications = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const shouldShowNotificationIndicator = useAppSelector((s) => s.ui.shouldShowNotificationIndicator);
+  const shouldShowNotification = useAppSelector((s) => s.ui.shouldShowNotification);
   const resetIndicator = useCallback(() => {
-    dispatch(shouldShowNotificationIndicatorChanged(false));
+    dispatch(shouldShowNotificationChanged(false));
   }, [dispatch]);
   const { data } = useGetAppVersionQuery();
 
@@ -35,7 +35,7 @@ export const Notifications = () => {
   }
 
   return (
-    <Popover onOpen={resetIndicator} placement="top-start">
+    <Popover onClose={resetIndicator} placement="top-start" autoFocus={false} defaultIsOpen={shouldShowNotification}>
       <PopoverTrigger>
         <Flex pos="relative">
           <IconButton
@@ -44,22 +44,12 @@ export const Notifications = () => {
             icon={<PiLightbulbFilamentBold fontSize={20} />}
             boxSize={8}
           />
-          {shouldShowNotificationIndicator && (
-            <Box
-              pos="absolute"
-              top={0}
-              right="2px"
-              w={2}
-              h={2}
-              backgroundColor="invokeYellow.500"
-              borderRadius="100%"
-            />
-          )}
         </Flex>
       </PopoverTrigger>
       <PopoverContent p={2}>
         <PopoverArrow />
-        <PopoverHeader fontSize="md" fontWeight="semibold">
+        <PopoverCloseButton />
+        <PopoverHeader fontSize="md" fontWeight="semibold" pt={5}>
           <Flex alignItems="center" gap={3}>
             <Image src={InvokeSymbol} boxSize={6} />
             {t('whatsNew.whatsNewInInvoke')}

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

@@ -13,7 +13,7 @@ const initialUIState: UIState = {
   shouldShowProgressInViewer: true,
   accordions: {},
   expanders: {},
-  shouldShowNotificationIndicator: true,
+  shouldShowNotification: true,
 };
 
 export const uiSlice = createSlice({
@@ -37,8 +37,8 @@ export const uiSlice = createSlice({
       const { id, isOpen } = action.payload;
       state.expanders[id] = isOpen;
     },
-    shouldShowNotificationIndicatorChanged: (state, action: PayloadAction<boolean>) => {
-      state.shouldShowNotificationIndicator = action.payload;
+    shouldShowNotificationChanged: (state, action: PayloadAction<boolean>) => {
+      state.shouldShowNotification = action.payload;
     },
   },
   extraReducers(builder) {
@@ -54,7 +54,7 @@ export const {
   setShouldShowProgressInViewer,
   accordionStateChanged,
   expanderStateChanged,
-  shouldShowNotificationIndicatorChanged,
+  shouldShowNotificationChanged,
 } = uiSlice.actions;
 
 export const selectUiSlice = (state: RootState) => state.ui;

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

@@ -26,7 +26,7 @@ export interface UIState {
    */
   expanders: Record<string, boolean>;
   /**
-   * Whether or not to show the user an indicator on notifications icon.
+   * Whether or not to show the user the open notification.
    */
-  shouldShowNotificationIndicator: boolean;
+  shouldShowNotification: boolean;
 }