actual Page enhancements - add page headers to mobile reports

Add mobile page headers to mobile reports page + updated Page component to have a more composable design.

May 08 '24 23:05 joel-jeremy

Deploy Preview for actualbudget ready!

Name	Link
Latest commit	7782b7c05c9b0107091330f4e8b905c25e3f14a4
Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/6643e968a0404a000713a10d
Deploy Preview	https://deploy-preview-2733.demo.actualbudget.org
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

May 08 '24 23:05 netlify[bot]

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
9	4.72 MB → 4.71 MB (-2.88 kB)	-0.06%

Changeset

File	Δ	Size
`src/components/reports/Overview.tsx`	📈 +152 B (+8.22%)	1.81 kB → 1.96 kB
`src/components/reports/graphs/CashFlowGraph.tsx`	📈 +234 B (+4.97%)	4.59 kB → 4.82 kB
`src/components/reports/reports/CashFlow.tsx`	📈 +213 B (+3.16%)	6.58 kB → 6.79 kB
`src/components/reports/reports/NetWorth.jsx`	📈 +128 B (+2.91%)	4.29 kB → 4.42 kB
`src/components/mobile/MobileBackButton.tsx`	📈 +18 B (+1.94%)	926 B → 944 B
`src/components/mobile/accounts/Accounts.jsx`	📈 +35 B (+0.45%)	7.53 kB → 7.56 kB
`src/components/ManageRulesPage.tsx`	📈 +1 B (+0.44%)	227 B → 228 B
`src/components/mobile/budget/CategoryTransactions.jsx`	📈 +16 B (+0.44%)	3.55 kB → 3.57 kB
`src/components/mobile/budget/BudgetTable.jsx`	📈 +130 B (+0.38%)	33.05 kB → 33.17 kB
`src/components/payees/ManagePayeesPage.jsx`	📈 +1 B (+0.28%)	359 B → 360 B
`src/components/schedules/index.tsx`	📈 +1 B (+0.04%)	2.67 kB → 2.68 kB
`src/components/mobile/accounts/AccountTransactions.jsx`	📉 -2 B (-0.03%)	6.37 kB → 6.37 kB
`src/components/mobile/transactions/TransactionEdit.jsx`	📉 -10 B (-0.03%)	30.79 kB → 30.78 kB
`src/components/reports/reports/SpendingCard.tsx`	📉 -4 B (-0.15%)	2.55 kB → 2.54 kB
`src/components/settings/index.tsx`	📉 -12 B (-0.20%)	5.94 kB → 5.93 kB
`src/components/reports/graphs/NetWorthGraph.tsx`	📉 -230 B (-4.06%)	5.54 kB → 5.31 kB
`src/components/reports/reports/CustomReportListCards.tsx`	📉 -376 B (-4.24%)	8.66 kB → 8.29 kB
`src/components/reports/reports/Spending.tsx`	📉 -490 B (-5.27%)	9.08 kB → 8.6 kB
`src/components/reports/reports/CustomReport.tsx`	📉 -1.47 kB (-6.99%)	20.96 kB → 19.49 kB
`src/components/reports/Header.jsx`	📉 -558 B (-11.83%)	4.61 kB → 4.06 kB
`src/components/Page.tsx`	📉 -695 B (-20.31%)	3.34 kB → 2.66 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/narrow.js	59.81 kB → 59.97 kB (+163 B)	+0.27%
static/js/wide.js	262.4 kB → 262.4 kB (+1 B)	+0.00%

Smaller

Asset	File Size	% Changed
static/js/ReportRouter.js	1.23 MB → 1.23 MB (-2.38 kB)	-0.19%
static/js/index.js	3 MB → 3 MB (-681 B)	-0.02%

Unchanged

Asset	File Size	% Changed
static/js/indexeddb-main-thread-worker-e59fee74.js	13.5 kB	0%
static/js/resize-observer.js	18.37 kB	0%
static/js/BackgroundImage.js	122.29 kB	0%
static/js/usePreviewTransactions.js	790 B	0%
static/js/AppliedFilters.js	20.54 kB	0%

May 08 '24 23:05 github-actions[bot]

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
1	1.2 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
kcab.worker.js	1.2 MB	0%

May 08 '24 23:05 github-actions[bot]

Not a big fan of the "back" button change in reports (desktop). Maybe we can entirely remove the back button there? None of the other pages have it. And it doesn't really save any clicks. WDYT?

--

The mobile reports page is missing a bit of bottom margin I think. The footer overlays the last report when scrolling all the way to the bottom.

Missing some bottom margin in the single report pages too:

I think the settings page bottom margin should also be raised. Still no way to access the advanced settings due to footer overlaying.

Other than that looks good! Code was good :+1:

May 10 '24 18:05 MatissJanis

I don't know if this would be for a different PR, but would it be possible to make the new report button not be its own section? Could it line up with the Reports title?

May 10 '24 23:05 youngcw

@MatissJanis @youngcw I've removed the back button, moved the create new report button and updated the mobile pages.

May 14 '24 17:05 joel-jeremy

The reports page header is not using the mobile layout for the page header. What makes matters worse - when you scroll in the page - it overlays the graphs in an ugly way.

May 14 '24 18:05 MatissJanis

One more thing: looks like the reports inner pages are no longer showing any charts.

May 14 '24 18:05 MatissJanis

One more thing: looks like the reports inner pages are no longer showing any charts. Could it be because of the screen size being too small? Here's what's I'm seeing (Pixel 7 and iPhone SE screen sizes)