switch to using recommended with star insteaed of auto-selecting

Author: Mary Hipp

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

@@ -1701,6 +1701,7 @@
         "shared": "Shared",
         "browseWorkflows": "Browse Workflows",
         "deselectAll": "Deselect All",
+        "recommended": "Recommended For You",
         "opened": "Opened",
         "openWorkflow": "Open Workflow",
         "updated": "Updated",

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibrarySideNav.tsx

@@ -1,10 +1,12 @@
 import type { ButtonProps, CheckboxProps } from '@invoke-ai/ui-library';
 import {
+  Box,
   Button,
   ButtonGroup,
   Checkbox,
   Collapse,
   Flex,
+  Icon,
   IconButton,
   Spacer,
   Text,
@@ -29,7 +31,7 @@ import { UploadWorkflowButton } from 'features/workflowLibrary/components/Upload
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiArrowCounterClockwiseBold, PiUsersBold } from 'react-icons/pi';
+import { PiArrowCounterClockwiseBold, PiStarFill, PiUsersBold } from 'react-icons/pi';
 import { useDispatch } from 'react-redux';
 import { useGetCountsByTagQuery } from 'services/api/endpoints/workflows';
 
@@ -199,15 +201,6 @@ WorkflowLibraryViewButton.displayName = 'NavButton';
 const TagCategory = memo(({ tagCategory }: { tagCategory: WorkflowTagCategory }) => {
   const { t } = useTranslation();
   const count = useCountForTagCategory(tagCategory);
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    for (const tag of tagCategory.tags) {
-      if (tag.selected) {
-        dispatch(workflowLibraryTagToggled(tag.label));
-      }
-    }
-  }, [count, tagCategory.tags, dispatch]);
 
   if (count === 0) {
     return null;
@@ -220,22 +213,23 @@ const TagCategory = memo(({ tagCategory }: { tagCategory: WorkflowTagCategory })
       </Text>
       <Flex flexDir="column" gap={2} pl={4}>
         {tagCategory.tags.map((tag) => (
-          <TagCheckbox key={tag.label} tag={tag.label} />
+          <TagCheckbox key={tag.label} tag={tag} />
         ))}
       </Flex>
     </Flex>
   );
 });
 TagCategory.displayName = 'TagCategory';
 
-const TagCheckbox = memo(({ tag, ...rest }: CheckboxProps & { tag: string }) => {
+const TagCheckbox = memo(({ tag, ...rest }: CheckboxProps & { tag: { label: string; recommended?: boolean } }) => {
   const dispatch = useAppDispatch();
+  const { t } = useTranslation();
   const selectedTags = useAppSelector(selectWorkflowLibrarySelectedTags);
-  const isChecked = selectedTags.includes(tag);
-  const count = useCountForIndividualTag(tag);
+  const isChecked = selectedTags.includes(tag.label);
+  const count = useCountForIndividualTag(tag.label);
 
   const onChange = useCallback(() => {
-    dispatch(workflowLibraryTagToggled(tag));
+    dispatch(workflowLibraryTagToggled(tag.label));
   }, [dispatch, tag]);
 
   if (count === 0) {
@@ -244,7 +238,16 @@ const TagCheckbox = memo(({ tag, ...rest }: CheckboxProps & { tag: string }) =>
 
   return (
     <Checkbox isChecked={isChecked} onChange={onChange} {...rest} flexShrink={0}>
-      <Text>{`${tag} (${count})`}</Text>
+      <Flex alignItems="center" gap={2}>
+        <Text>{`${tag.label} (${count})`}</Text>
+        {tag.recommended && (
+          <Tooltip label={t('workflows.recommended')}>
+            <Box>
+              <Icon as={PiStarFill} boxSize={4} fill="invokeYellow.500" />
+            </Box>
+          </Tooltip>
+        )}
+      </Flex>
     </Checkbox>
   );
 });

invokeai/frontend/web/src/features/nodes/store/workflowLibrarySlice.ts

@@ -92,15 +92,15 @@ export const selectWorkflowLibraryView = createWorkflowLibrarySelector(({ view }
 export const DEFAULT_WORKFLOW_LIBRARY_CATEGORIES = ['user', 'default'] satisfies WorkflowCategory[];
 export const $workflowLibraryCategoriesOptions = atom<WorkflowCategory[]>(DEFAULT_WORKFLOW_LIBRARY_CATEGORIES);
 
-export type WorkflowTagCategory = { categoryTKey: string; tags: Array<{ label: string; selected?: boolean }> };
+export type WorkflowTagCategory = { categoryTKey: string; tags: Array<{ label: string; recommended?: boolean }> };
 export const DEFAULT_WORKFLOW_LIBRARY_TAG_CATEGORIES: WorkflowTagCategory[] = [
   {
     categoryTKey: 'Industry',
     tags: [{ label: 'Architecture' }, { label: 'Fashion' }, { label: 'Game Dev' }, { label: 'Food' }],
   },
   {
     categoryTKey: 'Common Tasks',
-    tags: [{ label: 'Upscaling' }, { label: 'Text to Image' }, { label: 'Image to Image' }],
+    tags: [{ label: 'Upscaling' }, { label: 'Text to Image' }, { label: 'Image to Image', recommended: true }],
   },
   {
     categoryTKey: 'Model Architecture',