[Mobile] Budget menu modals (#2491)

* Update autocomplete types

* Remote optional type

* Improve SingleInputModal

* Fix lint error

* Mobile budget page modals

* Release notes

* Fix typecheck / lint errors

* Fix typecheck errors

* Fix typecheck error

* Modal logo

* Fix typecheck error

* VRT updates

* Modal header margins

* Update 2491.md

* ModalTitle shrinkOnOverflow + VRT

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

@@ -11,8 +11,10 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { useActions } from '../hooks/useActions';
 import { useSyncServerStatus } from '../hooks/useSyncServerStatus';
 
+import { ModalTitle } from './common/Modal';
 import { AccountAutocompleteModal } from './modals/AccountAutocompleteModal';
 import { AccountMenuModal } from './modals/AccountMenuModal';
+import { BudgetMenuModal } from './modals/BudgetMenuModal';
 import { CategoryAutocompleteModal } from './modals/CategoryAutocompleteModal';
 import { CategoryGroupMenuModal } from './modals/CategoryGroupMenuModal';
 import { CategoryMenuModal } from './modals/CategoryMenuModal';
@@ -46,7 +48,7 @@ import { ScheduledTransactionMenuModal } from './modals/ScheduledTransactionMenu
 import { SelectLinkedAccounts } from './modals/SelectLinkedAccounts';
 import { SimpleFinInitialise } from './modals/SimpleFinInitialise';
 import { SingleInputModal } from './modals/SingleInputModal';
-import { SwitchBudgetType } from './modals/SwitchBudgetType';
+import { SwitchBudgetTypeModal } from './modals/SwitchBudgetTypeModal';
 import { TransferModal } from './modals/TransferModal';
 import { DiscoverSchedules } from './schedules/DiscoverSchedules';
 import { PostsOfflineNotification } from './schedules/PostsOfflineNotification';
@@ -313,7 +315,7 @@ export function Modals() {
           return (
             <SingleInputModal
               modalProps={modalProps}
-              title="New Category"
+              title={<ModalTitle title="New Category" shrinkOnOverflow />}
               inputPlaceholder="Category name"
               buttonText="Add"
               onValidate={options.onValidate}
@@ -325,7 +327,7 @@ export function Modals() {
           return (
             <SingleInputModal
               modalProps={modalProps}
-              title="New Category Group"
+              title={<ModalTitle title="New Category Group" shrinkOnOverflow />}
               inputPlaceholder="Category group name"
               buttonText="Add"
               onValidate={options.onValidate}
@@ -400,10 +402,10 @@ export function Modals() {
 
         case 'switch-budget-type':
           return (
-            <SwitchBudgetType
+            <SwitchBudgetTypeModal
               key={name}
               modalProps={modalProps}
-              onSwitch={options?.onSwitch}
+              onSwitch={options.onSwitch}
             />
           );
 
@@ -549,6 +551,21 @@ export function Modals() {
             />
           );
 
+        case 'budget-menu':
+          return (
+            <NamespaceContext.Provider
+              key={name}
+              value={monthUtils.sheetForMonth(options.month)}
+            >
+              <BudgetMenuModal
+                modalProps={modalProps}
+                month={options.month}
+                onToggleHiddenCategories={options.onToggleHiddenCategories}
+                onSwitchBudgetType={options.onSwitchBudgetType}
+              />
+            </NamespaceContext.Provider>
+          );
+
         default:
           console.error('Unknown modal:', name);
           return null;

packages/desktop-client/src/components/common/Menu.tsx

@@ -144,7 +144,6 @@ export function Menu<T extends MenuItem>({
           );
         }
 
-        const lastItem = items[idx - 1];
         const Icon = item.icon;
 
         return (
@@ -153,14 +152,9 @@ export function Menu<T extends MenuItem>({
             key={item.name}
             style={{
               cursor: 'default',
-              padding: '9px 10px',
-              marginTop:
-                idx === 0 ||
-                lastItem === Menu.line ||
-                lastItem.type === Menu.label
-                  ? 0
-                  : -3,
+              padding: 10,
               flexDirection: 'row',
+              justifyContent: 'center',
               alignItems: 'center',
               color: theme.menuItemText,
               ...(item.disabled && { color: theme.buttonBareDisabledText }),