Improve prompt template menu

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

@@ -2400,7 +2400,8 @@
         "uploadImage": "Upload Image",
         "useForTemplate": "Use For Prompt Template",
         "viewList": "View Template List",
-        "viewModeTooltip": "This is how your prompt will look with your currently selected template. To edit your prompt, click anywhere in the text box."
+        "viewModeTooltip": "This is how your prompt will look with your currently selected template. To edit your prompt, click anywhere in the text box.",
+        "togglePromptPreviews": "Toggle Prompt Previews"
     },
     "upsell": {
         "inviteTeammates": "Invite Teammates",

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

@@ -17,14 +17,13 @@ export const StylePresetCreateButton = () => {
 
   return (
     <IconButton
+      size="sm"
+      variant="link"
+      alignSelf="stretch"
       icon={<PiPlusBold />}
       tooltip={t('stylePresets.createPromptTemplate')}
       aria-label={t('stylePresets.createPromptTemplate')}
       onClick={handleClickAddNew}
-      size="md"
-      variant="ghost"
-      w={8}
-      h={8}
     />
   );
 };

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

@@ -53,14 +53,13 @@ export const StylePresetExportButton = () => {
 
   return (
     <IconButton
+      size="sm"
+      variant="link"
+      alignSelf="stretch"
       onClick={handleClickDownloadCsv}
       icon={!isLoading ? <PiDownloadSimpleBold /> : <PiSpinner />}
       tooltip={t('stylePresets.exportPromptTemplates')}
       aria-label={t('stylePresets.exportPromptTemplates')}
-      size="md"
-      variant="link"
-      w={8}
-      h={8}
       sx={isLoading ? loadingStyles : undefined}
       isDisabled={isLoading || presetCount === 0}
     />

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

@@ -50,13 +50,12 @@ export const StylePresetImportButton = () => {
   return (
     <>
       <IconButton
+        size="sm"
+        variant="link"
+        alignSelf="stretch"
         icon={!isLoading ? <PiUploadSimpleBold /> : <PiSpinner />}
         tooltip={<TooltipContent />}
         aria-label={t('stylePresets.importTemplates')}
-        size="md"
-        variant="link"
-        w={8}
-        h={8}
         sx={isLoading ? loadingStyles : undefined}
         isDisabled={isLoading}
         {...getRootProps()}

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

@@ -1,10 +1,11 @@
-import { Badge, Flex, IconButton, Text } from '@invoke-ai/ui-library';
+import { Badge, Button, Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useDeleteStylePreset } from 'features/stylePresets/components/DeleteStylePresetDialog';
 import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
 import {
   $isStylePresetsMenuOpen,
   activeStylePresetIdChanged,
+  selectShowPromptPreviews,
   selectStylePresetActivePresetId,
 } from 'features/stylePresets/store/stylePresetSlice';
 import type { MouseEvent } from 'react';
@@ -18,6 +19,7 @@ import StylePresetImage from './StylePresetImage';
 export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithImage }) => {
   const dispatch = useAppDispatch();
   const activeStylePresetId = useAppSelector(selectStylePresetActivePresetId);
+  const showPromptPreviews = useAppSelector(selectShowPromptPreviews);
   const { t } = useTranslation();
   const deleteStylePreset = useDeleteStylePreset();
 
@@ -77,82 +79,80 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
   );
 
   return (
-    <Flex
-      gap={4}
+    <Button
+      as={Flex}
+      role="button"
+      gap={3}
       onClick={handleClickApply}
-      cursor="pointer"
-      _hover={{ backgroundColor: 'base.750' }}
-      py={3}
-      px={2}
-      borderRadius="base"
-      alignItems="flex-start"
+      p={3}
+      h="unset"
+      variant="ghost"
       w="full"
+      alignItems="flex-start"
     >
       <StylePresetImage presetImageUrl={preset.image} />
-      <Flex flexDir="column" w="full">
-        <Flex w="full" justifyContent="space-between" alignItems="flex-start">
-          <Flex alignItems="center" gap={2}>
-            <Text fontSize="md" noOfLines={2}>
-              {preset.name}
-            </Text>
-            {activeStylePresetId === preset.id && (
-              <Badge
-                color="invokeBlue.400"
-                borderColor="invokeBlue.700"
-                borderWidth={1}
-                bg="transparent"
-                flexShrink={0}
-              >
-                {t('stylePresets.active')}
-              </Badge>
-            )}
-          </Flex>
-
-          <Flex alignItems="center" gap={1}>
-            <IconButton
-              size="sm"
-              variant="ghost"
-              aria-label={t('stylePresets.copyTemplate')}
-              onClick={handleClickCopy}
-              icon={<PiCopyBold />}
-            />
-            {preset.type !== 'default' && (
-              <>
-                <IconButton
-                  size="sm"
-                  variant="ghost"
-                  aria-label={t('stylePresets.editTemplate')}
-                  onClick={handleClickEdit}
-                  icon={<PiPencilBold />}
-                />
-                <IconButton
-                  size="sm"
-                  variant="ghost"
-                  aria-label={t('stylePresets.deleteTemplate')}
-                  onClick={handleClickDelete}
-                  colorScheme="error"
-                  icon={<PiTrashBold />}
-                />
-              </>
-            )}
-          </Flex>
-        </Flex>
-
-        <Flex flexDir="column" gap={1}>
-          <Text fontSize="xs">
-            <Text as="span" fontWeight="semibold">
-              {t('stylePresets.positivePrompt')}:
-            </Text>{' '}
-            {preset.preset_data.positive_prompt}
-          </Text>
-          <Text fontSize="xs">
-            <Text as="span" fontWeight="semibold">
-              {t('stylePresets.negativePrompt')}:
-            </Text>{' '}
-            {preset.preset_data.negative_prompt}
+      <Flex flexDir="column" w="full" alignItems="flex-start" flexGrow={1} minW={0} gap={2}>
+        <Flex gap={2} w="full" justifyContent="space-between" alignItems="center" minW={0} minH={8}>
+          <Text fontSize="md" noOfLines={2} fontWeight="semibold" color="base.100">
+            {preset.name}
           </Text>
+          {activeStylePresetId === preset.id && (
+            <Badge color="invokeBlue.400" borderColor="invokeBlue.700" borderWidth={1} bg="transparent" flexShrink={0}>
+              {t('stylePresets.active')}
+            </Badge>
+          )}
+          <Spacer />
+          <IconButton
+            size="sm"
+            variant="link"
+            alignSelf="stretch"
+            aria-label={t('stylePresets.copyTemplate')}
+            onClick={handleClickCopy}
+            icon={<PiCopyBold />}
+          />
+          {preset.type !== 'default' && (
+            <>
+              <IconButton
+                size="sm"
+                variant="link"
+                alignSelf="stretch"
+                aria-label={t('stylePresets.editTemplate')}
+                onClick={handleClickEdit}
+                icon={<PiPencilBold />}
+              />
+              <IconButton
+                size="sm"
+                variant="link"
+                alignSelf="stretch"
+                aria-label={t('stylePresets.deleteTemplate')}
+                onClick={handleClickDelete}
+                colorScheme="error"
+                icon={<PiTrashBold />}
+              />
+            </>
+          )}
         </Flex>
+        {showPromptPreviews && (
+          <>
+            <Flex gap={1} minW={0} fontSize="sm" whiteSpace="normal">
+              <Text>
+                {t('stylePresets.positivePrompt')}:{' '}
+                <Text as="span" fontWeight="normal">
+                  {preset.preset_data.positive_prompt}
+                </Text>
+              </Text>
+            </Flex>
+            <Flex gap={1} minW={0} fontSize="sm" whiteSpace="normal">
+              <Text>
+                {t('stylePresets.negativePrompt')}:{' '}
+                <Text as="span" fontWeight="normal">
+                  {preset.preset_data.negative_prompt}
+                </Text>
+              </Text>
+            </Flex>
+          </>
+        )}
       </Flex>
-    </Flex>
+    </Button>
   );
 };

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

@@ -3,6 +3,7 @@ import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { StylePresetExportButton } from 'features/stylePresets/components/StylePresetExportButton';
 import { StylePresetImportButton } from 'features/stylePresets/components/StylePresetImportButton';
+import { StylePresetPromptPreviewToggle } from 'features/stylePresets/components/StylePresetPromptPreviewToggle';
 import { selectStylePresetSearchTerm } from 'features/stylePresets/store/stylePresetSlice';
 import { selectAllowPrivateStylePresets } from 'features/system/store/configSlice';
 import { useTranslation } from 'react-i18next';
@@ -54,9 +55,12 @@ export const StylePresetMenu = () => {
     <Flex flexDir="column" gap={2} padding={3} layerStyle="second" borderRadius="base">
       <Flex alignItems="center" gap={2} w="full" justifyContent="space-between">
         <StylePresetSearch />
-        <StylePresetCreateButton />
-        <StylePresetImportButton />
-        <StylePresetExportButton />
+        <Flex alignItems="center" gap={1}>
+          <StylePresetPromptPreviewToggle />
+          <StylePresetCreateButton />
+          <StylePresetImportButton />
+          <StylePresetExportButton />
+        </Flex>
       </Flex>
 
       <StylePresetList title={t('stylePresets.myTemplates')} data={data.presets} />

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

@@ -0,0 +1,29 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { selectShowPromptPreviews, showPromptPreviewsChanged } from 'features/stylePresets/store/stylePresetSlice';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiEyeBold, PiEyeSlashBold } from 'react-icons/pi';
+
+export const StylePresetPromptPreviewToggle = () => {
+  const dispatch = useAppDispatch();
+  const showPromptPreviews = useAppSelector(selectShowPromptPreviews);
+  const { t } = useTranslation();
+
+  const handleToggle = useCallback(() => {
+    dispatch(showPromptPreviewsChanged(!showPromptPreviews));
+  }, [dispatch, showPromptPreviews]);
+
+  return (
+    <IconButton
+      size="sm"
+      variant="link"
+      alignSelf="stretch"
+      aria-label={t('stylePresets.togglePromptPreviews')}
+      tooltip={t('stylePresets.togglePromptPreviews')}
+      onClick={handleToggle}
+      icon={showPromptPreviews ? <PiEyeBold /> : <PiEyeSlashBold />}
+      colorScheme={showPromptPreviews ? 'invokeBlue' : 'base'}
+    />
+  );
+};

invokeai/frontend/web/src/features/stylePresets/store/stylePresetSlice.ts

@@ -12,6 +12,7 @@ const initialState: StylePresetState = {
   activeStylePresetId: null,
   searchTerm: '',
   viewMode: false,
+  showPromptPreviews: false,
 };
 
 export const stylePresetSlice = createSlice({
@@ -27,6 +28,9 @@ export const stylePresetSlice = createSlice({
     viewModeChanged: (state, action: PayloadAction<boolean>) => {
       state.viewMode = action.payload;
     },
+    showPromptPreviewsChanged: (state, action: PayloadAction<boolean>) => {
+      state.showPromptPreviews = action.payload;
+    },
   },
   extraReducers(builder) {
     builder.addCase(paramsReset, () => {
@@ -53,7 +57,8 @@ export const stylePresetSlice = createSlice({
   },
 });
 
-export const { activeStylePresetIdChanged, searchTermChanged, viewModeChanged } = stylePresetSlice.actions;
+export const { activeStylePresetIdChanged, searchTermChanged, viewModeChanged, showPromptPreviewsChanged } =
+  stylePresetSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 const migrateStylePresetState = (state: any): any => {
@@ -79,6 +84,7 @@ export const selectStylePresetActivePresetId = createStylePresetSelector(
 );
 export const selectStylePresetViewMode = createStylePresetSelector((stylePreset) => stylePreset.viewMode);
 export const selectStylePresetSearchTerm = createStylePresetSelector((stylePreset) => stylePreset.searchTerm);
+export const selectShowPromptPreviews = createStylePresetSelector((stylePreset) => stylePreset.showPromptPreviews);
 
 /**
  * Tracks whether or not the style preset menu is open.

invokeai/frontend/web/src/features/stylePresets/store/types.ts

@@ -2,4 +2,5 @@ export type StylePresetState = {
   activeStylePresetId: string | null;
   searchTerm: string;
   viewMode: boolean;
+  showPromptPreviews: boolean;
 };