Merge branch 'master' into hidden-category-grouping

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

@@ -9,7 +9,6 @@ import useCategories from '../hooks/useCategories';
 import useSyncServerStatus from '../hooks/useSyncServerStatus';
 import { type CommonModalProps } from '../types/modals';
 
-import BudgetSummary from './modals/BudgetSummary';
 import CloseAccount from './modals/CloseAccount';
 import ConfirmCategoryDelete from './modals/ConfirmCategoryDelete';
 import CreateAccount from './modals/CreateAccount';
@@ -25,8 +24,11 @@ import LoadBackup from './modals/LoadBackup';
 import ManageRulesModal from './modals/ManageRulesModal';
 import MergeUnusedPayees from './modals/MergeUnusedPayees';
 import PlaidExternalMsg from './modals/PlaidExternalMsg';
+import ReportBudgetSummary from './modals/ReportBudgetSummary';
+import RolloverBudgetSummary from './modals/RolloverBudgetSummary';
 import SelectLinkedAccounts from './modals/SelectLinkedAccounts';
 import SingleInput from './modals/SingleInput';
+import SwitchBudgetType from './modals/SwitchBudgetType';
 import DiscoverSchedules from './schedules/DiscoverSchedules';
 import ScheduleDetails from './schedules/EditSchedule';
 import ScheduleLink from './schedules/LinkSchedule';
@@ -247,9 +249,19 @@ export default function Modals() {
             />
           );
 
-        case 'budget-summary':
+        case 'rollover-budget-summary':
           return (
-            <BudgetSummary
+            <RolloverBudgetSummary
+              key={name}
+              modalProps={modalProps}
+              month={options.month}
+              onBudgetAction={options.onBudgetAction}
+            />
+          );
+
+        case 'report-budget-summary':
+          return (
+            <ReportBudgetSummary
               key={name}
               modalProps={modalProps}
               month={options.month}
@@ -294,6 +306,15 @@ export default function Modals() {
             />
           );
 
+        case 'switch-budget-type':
+          return (
+            <SwitchBudgetType
+              key={name}
+              modalProps={modalProps}
+              onSwitch={options?.onSwitch}
+            />
+          );
+
         default:
           console.error('Unknown modal:', name);
           return null;

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

@@ -6,13 +6,21 @@ import { theme, styles, type CSSProperties } from '../style';
 import Text from './common/Text';
 import View from './common/View';
 
-function PageTitle({
-  name,
-  style,
-}: {
+type PageHeaderProps = {
   name: ReactNode;
   style?: CSSProperties;
-}) {
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+};
+
+const HEADER_HEIGHT = 50;
+
+function PageHeader({
+  name,
+  style,
+  leftContent,
+  rightContent,
+}: PageHeaderProps) {
   const { isNarrowWidth } = useResponsive();
 
   if (isNarrowWidth) {
@@ -23,16 +31,42 @@ function PageTitle({
           backgroundColor: theme.mobilePageBackground,
           color: theme.mobileModalText,
           flexDirection: 'row',
-          flex: '1 0 auto',
-          fontSize: 18,
-          fontWeight: 500,
-          height: 50,
-          justifyContent: 'center',
-          overflowY: 'auto',
+          flexShrink: 0,
+          height: HEADER_HEIGHT,
           ...style,
         }}
       >
-        {name}
+        <View
+          style={{
+            flexBasis: '25%',
+            justifyContent: 'flex-start',
+            flexDirection: 'row',
+          }}
+        >
+          {leftContent}
+        </View>
+        <View
+          style={{
+            alignItems: 'center',
+            flexDirection: 'row',
+            flexBasis: '50%',
+            fontSize: 18,
+            fontWeight: 500,
+            justifyContent: 'center',
+            overflowY: 'auto',
+          }}
+        >
+          {name}
+        </View>
+        <View
+          style={{
+            flexBasis: '25%',
+            justifyContent: 'flex-end',
+            flexDirection: 'row',
+          }}
+        >
+          {rightContent}
+        </View>
       </View>
     );
   }
@@ -51,25 +85,33 @@ function PageTitle({
   );
 }
 
+type PageProps = {
+  title: ReactNode;
+  titleStyle?: CSSProperties;
+  headerLeftContent?: ReactNode;
+  headerRightContent?: ReactNode;
+  children: ReactNode;
+};
+
 export function Page({
   title,
-  children,
   titleStyle,
-}: {
-  title: ReactNode;
-  children: ReactNode;
-  titleStyle?: CSSProperties;
-}) {
+  headerLeftContent,
+  headerRightContent,
+  children,
+}: PageProps) {
   let { isNarrowWidth } = useResponsive();
   let HORIZONTAL_PADDING = isNarrowWidth ? 10 : 20;
 
   return (
     <View style={isNarrowWidth ? undefined : styles.page}>
-      <PageTitle
+      <PageHeader
         name={title}
+        leftContent={headerLeftContent}
+        rightContent={headerRightContent}
         style={{
           ...titleStyle,
-          paddingInline: HORIZONTAL_PADDING,
+          ...(!isNarrowWidth && { paddingInline: HORIZONTAL_PADDING }),
         }}
       />
       <View