[WIP] Category autocomplete: allow user to toggle making group name searchable

packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx

@@ -1,11 +1,12 @@
-import React, {
-  type ComponentProps,
+import {
   Fragment,
   useMemo,
+  type ComponentProps,
+  type ComponentType,
   type ReactNode,
   type SVGProps,
-  type ComponentType,
 } from 'react';
+import { useSelector } from 'react-redux';
 
 import { css } from 'glamor';
 
@@ -16,14 +17,16 @@ import {
 
 import { SvgSplit } from '../../icons/v0';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme } from '../../style';
+import { theme, type CSSProperties } from '../../style';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
-import { Autocomplete, defaultFilterSuggestion } from './Autocomplete';
+import { Autocomplete } from './Autocomplete';
+
+type CategorySuggestion = CategoryEntity & { group?: CategoryGroupEntity };
 
 export type CategoryListProps = {
-  items: Array<CategoryEntity & { group?: CategoryGroupEntity }>;
+  items: Array<CategorySuggestion>;
   getItemProps?: (arg: { item }) => Partial<ComponentProps<typeof View>>;
   highlightedIndex: number;
   embedded: boolean;
@@ -117,6 +120,9 @@ export function CategoryAutocomplete({
   renderCategoryItem,
   ...props
 }: CategoryAutocompleteProps) {
+  const categorySuggestionsGroupNames = useSelector(
+    state => state.prefs?.local?.['ui.categorySuggestionsGroupNames'],
+  );
   const categorySuggestions: Array<
     CategoryEntity & { group?: CategoryGroupEntity }
   > = useMemo(
@@ -136,6 +142,20 @@ export function CategoryAutocomplete({
     [showSplitOption, categoryGroups],
   );
 
+  function filterCategorySuggestions(suggestions: CategorySuggestion[], value) {
+    return suggestions.filter(suggestion => {
+      return (
+        suggestion.id === 'split' ||
+        (categorySuggestionsGroupNames
+          ? [suggestion.name, suggestion.group.name]
+              .join(' ')
+              .toLowerCase()
+              .includes(value.toLowerCase())
+          : suggestion.name.toLowerCase().includes(value.toLowerCase()))
+      );
+    });
+  }
+
   return (
     <Autocomplete
       strict={true}
@@ -150,14 +170,7 @@ export function CategoryAutocomplete({
         }
         return 0;
       }}
-      filterSuggestions={(suggestions, value) => {
-        return suggestions.filter(suggestion => {
-          return (
-            suggestion.id === 'split' ||
-            defaultFilterSuggestion(suggestion, value)
-          );
-        });
-      }}
+      filterSuggestions={filterCategorySuggestions}
       suggestions={categorySuggestions}
       renderItems={(items, getItemProps, highlightedIndex) => (
         <CategoryList

packages/desktop-client/src/components/settings/AccountSettings.tsx

@@ -0,0 +1,40 @@
+import { useSelector } from 'react-redux';
+
+import { useActions } from '../../hooks/useActions';
+import { Text } from '../common/Text';
+import { Checkbox } from '../forms';
+
+import { Setting } from './UI';
+
+export function AccountSettings() {
+  const { savePrefs } = useActions();
+  const categorySuggestionsGroupNames = useSelector(
+    state => state.prefs.local['ui.categorySuggestionsGroupNames'],
+  );
+
+  return (
+    <Setting
+      primaryAction={
+        <Text style={{ display: 'flex' }}>
+          <Checkbox
+            id="settings-categorySuggestionsGroupNames"
+            checked={categorySuggestionsGroupNames}
+            onChange={e =>
+              savePrefs({
+                'ui.categorySuggestionsGroupNames': e.currentTarget.checked,
+              })
+            }
+          />
+          <label htmlFor="settings-categorySuggestionsGroupNames">
+            Include your group names in category suggestions
+          </label>
+        </Text>
+      }
+    >
+      <Text>
+        <strong>Accounts</strong> are where your transations are displayed, with
+        the option to organize all your records into categories.
+      </Text>
+    </Setting>
+  );
+}

packages/desktop-client/src/components/settings/index.tsx

@@ -21,6 +21,7 @@ import { FormField, FormLabel } from '../forms';
 import { Page } from '../Page';
 import { useServerVersion } from '../ServerContext';
 
+import { AccountSettings } from './AccountSettings';
 import { EncryptionSettings } from './Encryption';
 import { ExperimentalFeatures } from './Experimental';
 import { ExportBudget } from './Export';
@@ -167,6 +168,7 @@ export function Settings() {
         {!Platform.isBrowser && <GlobalSettings />}
 
         <ThemeSettings />
+        <AccountSettings />
         <FormatSettings />
         <EncryptionSettings />
         <ExportBudget />

packages/loot-core/src/types/prefs.d.ts

@@ -24,6 +24,7 @@ export type LocalPrefs = Partial<
     isPrivacyEnabled: boolean;
     budgetName: string;
     'ui.showClosedAccounts': boolean;
+    'ui.categorySuggestionsGroupNames': boolean;
     'expand-splits': boolean;
     [key: `show-extra-balances-${string}`]: boolean;
     [key: `hide-cleared-${string}`]: boolean;

upcoming-release-notes/2211.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [postonsundays]
+---
+
+components: adds group.name to suggestion value being filtered in CategoryAutocomplete.tsx to improve UX when searching for categories