Display splits in previews

[jfdoming]

Following up on https://github.com/actualbudget/actual/issues/2379#issuecomment-2136242633.

There are some design decisions I'd like feedback on. In particular, Actual historically used the "category" column for the schedule status. That gets strange with splits because we also use that column for splits. I tentatively used the below UI:

We could also do something like this, although it looks a bit odd when the split is not hovered:

Open to suggestions or better alternatives.

[netlify[bot]]

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	71aeb415ccec65d39921ef720067f5ddd15703a6
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/6677e08fd097170008464965
😎 Deploy Preview	https://deploy-preview-2923.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.

[github-actions[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.76 MB → 4.76 MB (+1.03 kB)	+0.02%

Changeset

File | Δ | Size ---- | - | ---- `src/hooks/usePreviewTransactions.ts` | 📈 +757 B (+95.82%) | 790 B → 1.51 kB `src/components/mobile/transactions/Transaction.jsx` | 📈 +227 B (+4.35%) | 5.1 kB → 5.32 kB `src/components/mobile/transactions/TransactionList.jsx` | 📈 +124 B (+3.68%) | 3.29 kB → 3.41 kB `src/components/mobile/transactions/TransactionEdit.jsx` | 📈 +39 B (+0.12%) | 31.77 kB → 31.81 kB `src/components/transactions/TransactionsTable.jsx` | 📉 -93 B (-0.16%) | 55.21 kB → 55.12 kB

View detailed bundle breakdown

**Added** No assets were added **Removed** No assets were removed **Bigger** Asset | File Size | % Changed ----- | --------- | --------- static/js/usePreviewTransactions.js | 790 B → 1.51 kB (+757 B) | +95.82% static/js/index.js | 3.02 MB → 3.02 MB (+390 B) | +0.01% **Smaller** Asset | File Size | % Changed ----- | --------- | --------- static/js/wide.js | 266.96 kB → 266.87 kB (-93 B) | -0.03% **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/resize-observer.js | 18.37 kB | 0% static/js/indexeddb-main-thread-worker-e59fee74.js | 13.5 kB | 0% static/js/BackgroundImage.js | 122.29 kB | 0% static/js/narrow.js | 75.73 kB | 0% static/js/AppliedFilters.js | 27.22 kB | 0% static/js/ReportRouter.js | 1.23 MB | 0%

[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.13 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.13 MB | 0%

[jfdoming]

note: updated vrt because I slightly changed padding on the mobile view to be more consistent across preview/non-preview transactions.

[youngcw]

The upcoming/due/missed labels seem to have gotten lost on most schedules. I do wonder if it would be better to have split schedules always collapsed unless manually expanded? I like that it can be opened, but I think that having all the children lines present all the time could quickly make for a lot of lines on the page.

[psybers]

I agree, having upcoming with splits collapsed by default seems reasonable. Generally, it is more important to know the transaction is coming, not how that transaction will be split up.

I think the bug is if an upcoming has no split, it no longer says upcoming/missed.