more cleanup

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

@@ -1692,23 +1692,29 @@
     "stylePresets": {
         "active": "Active",
         "choosePromptTemplate": "Choose Prompt Template",
+        "clearTemplateSelection": "Clear Template Selection",
         "createPromptTemplate": "Create Prompt Template",
         "defaultTemplates": "Default Templates",
         "deleteImage": "Delete Image",
         "deleteTemplate": "Delete Template",
         "deleteTemplate2": "Are you sure you want to delete this template? This cannot be undone.",
         "editTemplate": "Edit Template",
+        "flatten": "Flatten selected template into current prompt",
+        "insertPlaceholder": "Insert placeholder",
         "myTemplates": "My Templates",
         "name": "Name",
         "negativePrompt": "Negative Prompt",
         "noMatchingTemplates": "No matching templates",
         "placeholderDirections": "Use the { } button to specify where your manual prompt should be included in the template. If you do not provide one, the template will be appended to your prompt.",
         "positivePrompt": "Positive Prompt",
+        "searchByName": "Search by name",
         "templateDeleted": "Prompt template deleted",
+        "toggleViewMode": "Toggle View Mode",
         "unableToDeleteTemplate": "Unable to delete prompt template",
         "updatePromptTemplate": "Update Prompt Template",
         "uploadImage": "Upload Image",
-        "useForTemplate": "Use For Prompt Template"
+        "useForTemplate": "Use For Prompt Template",
+        "viewModeTooltip": "This is how your prompt will look with your currently selected template. To edit your prompt, click anywhere in the text box."
     },
     "upsell": {
         "inviteTeammates": "Invite Teammates",

invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx

@@ -3,6 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { viewModeChanged } from 'features/stylePresets/store/stylePresetSlice';
 import { getViewModeChunks } from 'features/stylePresets/util/getViewModeChunks';
 import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PiEyeBold } from 'react-icons/pi';
 
 export const ViewModePrompt = ({
@@ -15,6 +16,7 @@ export const ViewModePrompt = ({
   height: number;
 }) => {
   const dispatch = useAppDispatch();
+  const { t } = useTranslation();
 
   const presetChunks = useMemo(() => {
     return getViewModeChunks(prompt, presetPrompt);
@@ -51,7 +53,7 @@ export const ViewModePrompt = ({
 
       <Box position="absolute" top={0} right={0} backgroundColor="rgba(0,0,0,0.75)" padding="2px 5px">
         <Flex alignItems="center" gap="1">
-          <Tooltip label="This is how your prompt will look with your currently selected preset. To edit your prompt, click anywhere in the text box.">
+          <Tooltip label={t('stylePresets.viewModeTooltip')}>
             <Flex>
               <Icon as={PiEyeBold} color="base.500" boxSize="12px" />
             </Flex>

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

@@ -1,4 +1,4 @@
-import { Flex, IconButton, Text } from '@invoke-ai/ui-library';
+import { Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { negativePromptChanged, positivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
 import { usePresetModifiedPrompts } from 'features/stylePresets/hooks/usePresetModifiedPrompts';
@@ -67,28 +67,34 @@ export const ActiveStylePreset = () => {
           </Flex>
         </Flex>
         <Flex gap="1">
-          <IconButton
+          <Tooltip label={t('stylePresets.toggleViewMode')}>
-            onClick={handleToggleViewMode}
+            <IconButton
-            variant="outline"
+              onClick={handleToggleViewMode}
-            size="sm"
+              variant="outline"
-            aria-label="View"
+              size="sm"
-            colorScheme={viewMode ? 'invokeBlue' : 'base'}
+              aria-label={t('stylePresets.toggleViewMode')}
-            icon={<PiEyeBold />}
+              colorScheme={viewMode ? 'invokeBlue' : 'base'}
-          />
+              icon={<PiEyeBold />}
-          <IconButton
+            />
-            onClick={handleFlattenPrompts}
+          </Tooltip>
-            variant="outline"
+          <Tooltip label={t('stylePresets.flatten')}>
-            size="sm"
+            <IconButton
-            aria-label="Flatten"
+              onClick={handleFlattenPrompts}
-            icon={<PiStackSimpleBold />}
+              variant="outline"
-          />
+              size="sm"
-          <IconButton
+              aria-label={t('stylePresets.flatten')}
-            onClick={handleClearActiveStylePreset}
+              icon={<PiStackSimpleBold />}
-            variant="outline"
+            />
-            size="sm"
+          </Tooltip>
-            aria-label="Clear"
+          <Tooltip label={t('stylePresets.clearTemplateSelection')}>
-            icon={<PiXBold />}
+            <IconButton
-          />
+              onClick={handleClearActiveStylePreset}
+              variant="outline"
+              size="sm"
+              aria-label={t('stylePresets.clearTemplateSelection')}
+              icon={<PiXBold />}
+            />
+          </Tooltip>
         </Flex>
       </Flex>
     </>

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

@@ -17,7 +17,7 @@ export const StylePresetMenuTrigger = () => {
 
   return (
     <Flex
-      // as="button"
+      as="button"
       onClick={handleToggle}
       backgroundColor="base.800"
       justifyContent="space-between"

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

@@ -7,6 +7,7 @@ import { useController } from 'react-hook-form';
 import { PiBracketsCurlyBold } from 'react-icons/pi';
 
 import type { StylePresetFormData } from './StylePresetForm';
+import { useTranslation } from 'react-i18next';
 
 interface Props extends UseControllerProps<StylePresetFormData> {
   label: string;
@@ -15,6 +16,7 @@ interface Props extends UseControllerProps<StylePresetFormData> {
 export const StylePresetPromptField = (props: Props) => {
   const { field } = useController(props);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const { t } = useTranslation();
 
   const onChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
     (v) => {
@@ -50,7 +52,7 @@ export const StylePresetPromptField = (props: Props) => {
           onClick={insertPromptPlaceholder}
           size="sm"
           icon={<PiBracketsCurlyBold />}
-          aria-label="Insert placeholder"
+          aria-label={t('stylePresets.insertPlaceholder')}
           isDisabled={isPromptPresent}
         />
       </Flex>

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

@@ -41,7 +41,12 @@ const StylePresetSearch = () => {
 
   return (
     <InputGroup>
-      <Input placeholder="Search by name" value={searchTerm} onKeyDown={handleKeydown} onChange={handleChange} />
+      <Input
+        placeholder={t('stylePresets.searchByName')}
+        value={searchTerm}
+        onKeyDown={handleKeydown}
+        onChange={handleChange}
+      />
       {searchTerm && searchTerm.length && (
         <InputRightElement h="full" pe={2}>
           <IconButton