add option for workflowCategories

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -23,6 +23,8 @@ import React, { lazy, memo, useEffect, useMemo } from 'react';
 import { Provider } from 'react-redux';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
 import type { ManagerOptions, SocketOptions } from 'socket.io-client';
+import { WorkflowCategory } from '../../features/nodes/types/workflow';
+import { $workflowCategories } from '../store/nanostores/workflowCategories';
 
 const App = lazy(() => import('./App'));
 const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
@@ -45,6 +47,7 @@ interface Props extends PropsWithChildren {
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
   logo?: ReactNode;
+  workflowCategories?: WorkflowCategory[];
 }
 
 const InvokeAIUI = ({
@@ -62,6 +65,7 @@ const InvokeAIUI = ({
   socketOptions,
   isDebugging = false,
   logo,
+  workflowCategories,
 }: Props) => {
   useEffect(() => {
     // configure API client token
@@ -156,6 +160,16 @@ const InvokeAIUI = ({
     };
   }, [logo]);
 
+  useEffect(() => {
+    if (workflowCategories) {
+      $workflowCategories.set(workflowCategories);
+    }
+
+    return () => {
+      $workflowCategories.set([]);
+    };
+  }, [workflowCategories]);
+
   useEffect(() => {
     if (socketOptions) {
       $socketOptions.set(socketOptions);

invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts

@@ -0,0 +1,4 @@
+import { atom } from 'nanostores';
+import { WorkflowCategory } from '../../../features/nodes/types/workflow';
+
+export const $workflowCategories = atom<WorkflowCategory[]>(["user", "default"]);

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx

@@ -34,6 +34,7 @@ import type {
 } from 'services/api/types';
 import { useDebounce } from 'use-debounce';
 import { z } from 'zod';
+import { $workflowCategories } from '../../../app/store/nanostores/workflowCategories';
 
 const PER_PAGE = 10;
 
@@ -58,10 +59,13 @@ const DIRECTION_OPTIONS: ComboboxOption[] = [
 
 const WorkflowLibraryList = () => {
   const { t } = useTranslation();
-  const [category, setCategory] = useState<WorkflowCategory>('user');
+  const workflowCategories = useStore($workflowCategories);
+  const [selectedCategory, setSelectedCategory] =
+    useState<WorkflowCategory>('user');
   const [page, setPage] = useState(0);
   const [query, setQuery] = useState('');
   const projectId = useStore($projectId);
+
   const orderByOptions = useMemo(() => {
     return projectId
       ? ORDER_BY_OPTIONS.filter((option) => option.value !== 'opened_at')
@@ -75,13 +79,13 @@ const WorkflowLibraryList = () => {
   const [debouncedQuery] = useDebounce(query, 500);
 
   const queryArg = useMemo<Parameters<typeof useListWorkflowsQuery>[0]>(() => {
-    if (category !== 'default') {
+    if (selectedCategory !== 'default') {
       return {
         page,
         per_page: PER_PAGE,
         order_by,
         direction,
-        category,
+        category: selectedCategory,
         query: debouncedQuery,
       };
     }
@@ -90,10 +94,10 @@ const WorkflowLibraryList = () => {
       per_page: PER_PAGE,
       order_by: 'name' as const,
       direction: 'ASC' as const,
-      category,
+      category: selectedCategory,
       query: debouncedQuery,
     };
-  }, [category, debouncedQuery, direction, order_by, page]);
+  }, [selectedCategory, debouncedQuery, direction, order_by, page]);
 
   const { data, isLoading, isError, isFetching } =
     useListWorkflowsQuery(queryArg);
@@ -154,43 +158,42 @@ const WorkflowLibraryList = () => {
   );
 
   const handleSetCategory = useCallback((category: WorkflowCategory) => {
-    setCategory(category);
+    setSelectedCategory(category);
     setPage(0);
   }, []);
 
   return (
     <>
-      <Flex gap={4} alignItems="center" h={10} flexShrink={0} flexGrow={0}>
-        <ButtonGroup>
-          <Button
-            variant={category === 'user' ? undefined : 'ghost'}
-            onClick={handleSetCategory.bind(null, 'user')}
-            isChecked={category === 'user'}
-          >
-            {t('workflows.userWorkflows')}
-          </Button>
-          {projectId ? (
+      <Flex
+        gap={4}
+        alignItems="center"
+        h={16}
+        flexShrink={0}
+        flexGrow={0}
+        justifyContent={'space-between'}
+      >
+        <ButtonGroup alignSelf="flex-end">
+          {workflowCategories.map((category) => (
             <Button
-              variant={category === 'project' ? undefined : 'ghost'}
-              onClick={handleSetCategory.bind(null, 'project')}
-              isChecked={category === 'project'}
+              variant={selectedCategory === category ? undefined : 'ghost'}
+              onClick={handleSetCategory.bind(null, category)}
+              isChecked={selectedCategory === category}
             >
-              {t('workflows.projectWorkflows')}
+              {t(`workflows.${category}Workflows`)}
             </Button>
-          ) : (
-            <Button
-              variant={category === 'default' ? undefined : 'ghost'}
-              onClick={handleSetCategory.bind(null, 'default')}
-              isChecked={category === 'default'}
-            >
-              {t('workflows.defaultWorkflows')}
-            </Button>
-          )}
+          ))}
         </ButtonGroup>
-        <Spacer />
-        {category !== 'default' && (
+        {selectedCategory !== 'default' && (
           <>
-            <FormControl isDisabled={isFetching} w={64} minW={56}>
+            <FormControl
+              isDisabled={isFetching}
+              sx={{
+                flexDir: 'column',
+                alignItems: 'flex-start',
+                gap: 1,
+                maxW: 56,
+              }}
+            >
               <FormLabel>{t('common.orderBy')}</FormLabel>
               <Combobox
                 value={valueOrderBy}
@@ -198,7 +201,15 @@ const WorkflowLibraryList = () => {
                 onChange={onChangeOrderBy}
               />
             </FormControl>
-            <FormControl isDisabled={isFetching} w={64} minW={56}>
+            <FormControl
+              isDisabled={isFetching}
+              sx={{
+                flexDir: 'column',
+                alignItems: 'flex-start',
+                gap: 1,
+                maxW: 56,
+              }}
+            >
               <FormLabel>{t('common.direction')}</FormLabel>
               <Combobox
                 value={valueDirection}
@@ -208,7 +219,7 @@ const WorkflowLibraryList = () => {
             </FormControl>
           </>
         )}
-        <InputGroup w="20rem">
+        <InputGroup w="20rem" alignSelf="flex-end">
           <Input
             placeholder={t('workflows.searchWorkflows')}
             value={query}