Merge branch 'master' into sankey_recharts

packages/desktop-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/web",
-  "version": "23.10.0",
+  "version": "23.11.0",
   "license": "MIT",
   "files": [
     "build"

packages/desktop-client/src/components/Titlebar.tsx

@@ -41,15 +41,21 @@ import useSheetValue from './spreadsheet/useSheetValue';
 import { ThemeSelector } from './ThemeSelector';
 import { Tooltip } from './tooltips';
 
-export let TitlebarContext = createContext(null);
+export type TitlebarContextValue = {
+  sendEvent: (msg: string) => void;
+  subscribe: (listener) => () => void;
+};
+
+export let TitlebarContext = createContext<TitlebarContextValue>(null);
 
 type TitlebarProviderProps = {
   children?: ReactNode;
 };
+
 export function TitlebarProvider({ children }: TitlebarProviderProps) {
   let listeners = useRef([]);
 
-  function sendEvent(msg) {
+  function sendEvent(msg: string) {
     listeners.current.forEach(func => func(msg));
   }
 

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

@@ -7,28 +7,20 @@ import React, {
 
 import { css } from 'glamor';
 
+import {
+  type CategoryEntity,
+  type CategoryGroupEntity,
+} from 'loot-core/src/types/models';
+
 import Split from '../../icons/v0/Split';
 import { theme } from '../../style';
 import Text from '../common/Text';
 import View from '../common/View';
 
 import Autocomplete, { defaultFilterSuggestion } from './Autocomplete';
 
-export type Category = {
-  id: string;
-  cat_group: unknown;
-  groupName: string;
-  name: string;
-};
-
-export type CategoryGroup = {
-  id: string;
-  name: string;
-  categories: Array<Category>;
-};
-
 export type CategoryListProps = {
-  items: Array<Category>;
+  items: Array<CategoryEntity & { group?: CategoryGroupEntity }>;
   getItemProps?: (arg: { item }) => Partial<ComponentProps<typeof View>>;
   highlightedIndex: number;
   embedded: boolean;
@@ -122,7 +114,7 @@ function CategoryList({
                   }}
                   data-testid="category-item-group"
                 >
-                  {item.groupName}
+                  {`${item.group?.name}`}
                 </div>
               )}
               <div
@@ -157,7 +149,7 @@ function CategoryList({
 }
 
 type CategoryAutocompleteProps = ComponentProps<typeof Autocomplete> & {
-  categoryGroups: CategoryGroup[];
+  categoryGroups: Array<CategoryGroupEntity>;
   showSplitOption?: boolean;
   groupHeaderStyle?: object;
 };
@@ -169,19 +161,23 @@ export default function CategoryAutocomplete({
   groupHeaderStyle,
   ...props
 }: CategoryAutocompleteProps) {
-  let categorySuggestions = useMemo(
+  let categorySuggestions: Array<
+    CategoryEntity & { group?: CategoryGroupEntity }
+  > = useMemo(
     () =>
       categoryGroups.reduce(
         (list, group) =>
           list.concat(
-            group.categories.map(category => ({
-              ...category,
-              groupName: group.name,
-            })),
+            group.categories
+              .filter(category => category.cat_group === group.id)
+              .map(category => ({
+                ...category,
+                group: group,
+              })),
           ),
-        showSplitOption ? [{ id: 'split', name: '' }] : [],
+        showSplitOption ? [{ id: 'split', name: '' } as CategoryEntity] : [],
       ),
-    [categoryGroups],
+    [showSplitOption, categoryGroups],
   );
 
   return (

packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

@@ -1,6 +1,7 @@
 import React, { type ComponentProps } from 'react';
 
 import ArrowThinRight from '../../icons/v1/ArrowThinRight';
+import { type CSSProperties } from '../../style';
 import View from '../common/View';
 import CellValue from '../spreadsheet/CellValue';
 import useSheetValue from '../spreadsheet/useSheetValue';
@@ -11,17 +12,23 @@ type BalanceWithCarryoverProps = {
   carryover: ComponentProps<typeof CellValue>['binding'];
   balance: ComponentProps<typeof CellValue>['binding'];
   disabled?: boolean;
+  style?: CSSProperties;
+  balanceStyle?: CSSProperties;
+  carryoverStyle?: CSSProperties;
 };
 export default function BalanceWithCarryover({
   carryover,
   balance,
   disabled,
+  style,
+  balanceStyle,
+  carryoverStyle,
 }: BalanceWithCarryoverProps) {
   let carryoverValue = useSheetValue(carryover);
   let balanceValue = useSheetValue(balance);
 
   return (
-    <>
+    <View style={style}>
       <CellValue
         binding={balance}
         type="financial"
@@ -32,18 +39,20 @@ export default function BalanceWithCarryover({
             cursor: 'pointer',
             ':hover': { textDecoration: 'underline' },
           }),
+          ...balanceStyle,
         }}
       />
-      {carryoverValue === true && (
+      {carryoverValue && (
         <View
           style={{
             alignSelf: 'center',
             marginLeft: 2,
             position: 'absolute',
-            right: -4,
+            right: -8,
             top: 0,
             bottom: 0,
             justifyContent: 'center',
+            ...carryoverStyle,
           }}
         >
           <ArrowThinRight
@@ -53,6 +62,6 @@ export default function BalanceWithCarryover({
           />
         </View>
       )}
-    </>
+    </View>
   );
 }

packages/desktop-client/src/components/budget/BudgetPageHeader.js → packages/desktop-client/src/components/budget/BudgetPageHeader.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { type ComponentProps, memo } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -7,8 +7,15 @@ import View from '../common/View';
 import { MonthPicker } from './MonthPicker';
 import { getScrollbarWidth } from './util';
 
-const BudgetPageHeader = memo(
-  ({ startMonth, onMonthSelect, numMonths, monthBounds, style }) => {
+type BudgetPageHeaderProps = {
+  startMonth: string;
+  onMonthSelect: (month: string) => void;
+  numMonths: number;
+  monthBounds: ComponentProps<typeof MonthPicker>['monthBounds'];
+};
+
+const BudgetPageHeader = memo<BudgetPageHeaderProps>(
+  ({ startMonth, onMonthSelect, numMonths, monthBounds }) => {
     function getValidMonth(month) {
       let start = monthBounds.start;
       let end = monthUtils.subMonths(monthBounds.end, numMonths - 1);