feat: Handle toasts for Model Delete

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx

@@ -1,10 +1,12 @@
 import { DeleteIcon } from '@chakra-ui/icons';
 import { Flex, Text, Tooltip } from '@chakra-ui/react';
-import { useAppSelector } from 'app/store/storeHooks';
+import { makeToast } from 'app/components/Toaster';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIAlertDialog from 'common/components/IAIAlertDialog';
 import IAIButton from 'common/components/IAIButton';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { selectIsBusy } from 'features/system/store/systemSelectors';
+import { addToast } from 'features/system/store/systemSlice';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -21,6 +23,7 @@ type ModelListItemProps = {
 export default function ModelListItem(props: ModelListItemProps) {
   const isBusy = useAppSelector(selectIsBusy);
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
   const [deleteMainModel] = useDeleteMainModelsMutation();
 
   const { model, isSelected, setSelectedModelId } = props;
@@ -30,9 +33,34 @@ export default function ModelListItem(props: ModelListItemProps) {
   }, [model.id, setSelectedModelId]);
 
   const handleModelDelete = useCallback(() => {
-    deleteMainModel(model);
+    deleteMainModel(model)
+      .unwrap()
+      .then((_) => {
+        dispatch(
+          addToast(
+            makeToast({
+              title: `${t('modelManager.modelDeleted')}: ${model.model_name}`,
+              status: 'success',
+            })
+          )
+        );
+      })
+      .catch((error) => {
+        if (error) {
+          dispatch(
+            addToast(
+              makeToast({
+                title: `${t('modelManager.modelDeleteFailed')}: ${
+                  model.model_name
+                }`,
+                status: 'success',
+              })
+            )
+          );
+        }
+      });
     setSelectedModelId(undefined);
-  }, [deleteMainModel, model, setSelectedModelId]);
+  }, [deleteMainModel, model, setSelectedModelId, dispatch, t]);
 
   return (
     <Flex sx={{ gap: 2, alignItems: 'center', w: 'full' }}>