feat(ui): per type fallbacks for templates

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

@@ -1715,6 +1715,7 @@
         "myTemplates": "My Templates",
         "name": "Name",
         "negativePrompt": "Negative Prompt",
+        "noTemplates": "No templates",
         "noMatchingTemplates": "No matching templates",
         "promptTemplatesDesc1": "Prompt templates add text to the prompts you write in the prompt box.",
         "promptTemplatesDesc2": "Use the placeholder string <Pre>{{placeholder}}</Pre> to specify where your prompt should be included in the template.",

invokeai/frontend/web/src/common/components/IAIImageFallback.tsx

@@ -47,6 +47,7 @@ export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => {
       userSelect: 'none',
       opacity: 0.7,
       color: 'base.500',
+      fontSize: 'md',
       ...sx,
     }),
     [sx]
@@ -55,11 +56,7 @@ export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => {
   return (
     <Flex sx={styles} {...rest}>
       {icon && <Icon as={icon} boxSize={boxSize} opacity={0.7} />}
-      {props.label && (
+      {props.label && <Text textAlign="center">{props.label}</Text>}
-        <Text textAlign="center" fontSize="md">
-          {props.label}
-        </Text>
-      )}
     </Flex>
   );
 });

invokeai/frontend/web/src/features/stylePresets/components/StylePresetList.tsx

@@ -1,15 +1,16 @@
 import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { useTranslation } from 'react-i18next';
 import { PiCaretDownBold } from 'react-icons/pi';
 import type { StylePresetRecordWithImage } from 'services/api/endpoints/stylePresets';
 
 import { StylePresetListItem } from './StylePresetListItem';
 
 export const StylePresetList = ({ title, data }: { title: string; data: StylePresetRecordWithImage[] }) => {
+  const { t } = useTranslation();
   const { onToggle, isOpen } = useDisclosure({ defaultIsOpen: true });
-
+  const searchTerm = useAppSelector((s) => s.stylePreset.searchTerm);
-  if (!data.length) {
-    return <></>;
-  }
 
   return (
     <Flex flexDir="column">
@@ -22,9 +23,16 @@ export const StylePresetList = ({ title, data }: { title: string; data: StylePre
         </Flex>
       </Button>
       <Collapse in={isOpen}>
-        {data.map((preset) => (
+        {data.length ? (
-          <StylePresetListItem preset={preset} key={preset.id} />
+          data.map((preset) => <StylePresetListItem preset={preset} key={preset.id} />)
-        ))}
+        ) : (
+          <IAINoContentFallback
+            fontSize="sm"
+            py={4}
+            label={searchTerm ? t('stylePresets.noMatchingTemplates') : t('stylePresets.noTemplates')}
+            icon={null}
+          />
+        )}
       </Collapse>
     </Flex>
   );

invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenu.tsx

@@ -1,4 +1,4 @@
-import { Flex, Text } from '@invoke-ai/ui-library';
+import { Flex } from '@invoke-ai/ui-library';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { StylePresetExportButton } from 'features/stylePresets/components/StylePresetExportButton';
@@ -57,12 +57,6 @@ export const StylePresetMenu = () => {
         <StylePresetExportButton />
       </Flex>
 
-      {data.presets.length === 0 && data.defaultPresets.length === 0 && (
-        <Text p={10} textAlign="center">
-          {t('stylePresets.noMatchingTemplates')}
-        </Text>
-      )}
-
       <StylePresetList title={t('stylePresets.myTemplates')} data={data.presets} />
       {allowPrivateStylePresets && (
         <StylePresetList title={t('stylePresets.sharedTemplates')} data={data.sharedPresets} />