enable settings toggle from users

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,11 +17,11 @@ 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 };
 
@@ -119,6 +120,10 @@ export function CategoryAutocomplete({
   renderCategoryItem,
   ...props
 }: CategoryAutocompleteProps) {
+
+  const categorySuggestionsGroupNames = useSelector(
+    state => state.prefs?.local?.['ui.categorySuggestionsGroupNames'],
+  );
   const categorySuggestions: Array<
     CategoryEntity & { group?: CategoryGroupEntity }
   > = useMemo(
@@ -138,6 +143,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}
@@ -325,15 +344,3 @@ export function CategoryItem({
 function defaultRenderCategoryItem(props: CategoryItemProps) {
   return <CategoryItem {...props} />;
 }
-
-function filterCategorySuggestions(suggestions: CategorySuggestion[], value) {
-  return suggestions.filter(suggestion => {
-    return (
-      suggestion.id === 'split' ||
-      [suggestion.name, suggestion.group.name]
-        .join(' ')
-        .toLowerCase()
-        .includes(value.toLowerCase())
-    );
-  });
-}

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

@@ -0,0 +1,39 @@
+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

@@ -1,5 +1,5 @@
 ---
-category: Enhancement
+category: Enhancements
 authors: [postonsundays]
 ---