github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-05-07 12:28:57 -05:00
Code Issues 1.6k Packages Projects Releases 55 Wiki Activity

[PR #5802] [MERGED] Mobile Payees - move to react-aria GridList to improve performance #40560

New Issue
Closed
opened 2026-04-23 13:24:35 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-23 13:24:35 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/5802
Author: @MatissJanis
Created: 9/27/2025
Status: ✅ Merged
Merged: 9/27/2025
Merged by: @MatissJanis

Base: master ← Head: matiss/mobile-payee-virtual-list

📝 Commits (8)

  • 566ac8f Refactor PayeesList and PayeesListItem components to use GridList for improved layout and accessibility. Add mobileListItem styles for consistent item presentation.
  • af40285 Add aria-hidden attribute to bookmark icon in PayeesListItem for improved accessibility.
  • b67678f Add payee ID to PayeesListItem for improved accessibility and identification.
  • a5d8b36 Refactor PayeesListItemProps to use Omit for improved type safety and clarity in prop definitions.
  • 01800dc Update PayeesList component to enhance layout by moving styles to GridList and adjusting padding for improved visual consistency.
  • cb251e0 Update PayeesListItem to use a localized label for payee names, enhancing clarity for transfer accounts.
  • ff23cfe Enhance accessibility in PayeesList and PayeesListItem components by adding aria-busy attribute and memoization for performance optimization.
  • 0af5858 Update TypeScript guidelines to prefer types over interfaces for improved consistency in coding practices.

📊 Changes

5 files changed (+105 additions, -83 deletions)

View changed files

📝 .cursor/rules/typescript.mdc (+2 -2)
📝 packages/component-library/src/styles.ts (+6 -0)
📝 packages/desktop-client/src/components/mobile/payees/PayeesList.tsx (+24 -13)
📝 packages/desktop-client/src/components/mobile/payees/PayeesListItem.tsx (+67 -68)
➕ upcoming-release-notes/5802.md (+6 -0)

📄 Description

GridList uses list virtualization. Which is quite important for long lists of items (i.e. payees). Visually there should be no difference.

I plan on moving the rules list to this soon too (as a different PR).

Note

Migrates the mobile Payees list to react-aria GridList/GridListItem for virtualized, accessible rendering and adds a shared mobile list item style.

  • Mobile (Payees):
    • PayeesList now uses react-aria-components GridList with aria-label, aria-busy, and item rendering; wires actions via onAction; minor loading padding tweak.
    • PayeesListItem converted to memoized GridListItem; updates props (value, GridListItemProps), computes translated label, sets textValue, updates bookmark icon attrs, and uses styles.mobileListItem.
  • Component Library:
    • Adds styles.mobileListItem to packages/component-library/src/styles.ts.
  • Release Notes:
    • Adds maintenance entry announcing the Payees list move to GridList.

Written by Cursor Bugbot for commit 0af5858f67. This will update automatically on new commits. Configure here.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/5802 **Author:** [@MatissJanis](https://github.com/MatissJanis) **Created:** 9/27/2025 **Status:** ✅ Merged **Merged:** 9/27/2025 **Merged by:** [@MatissJanis](https://github.com/MatissJanis) **Base:** `master` ← **Head:** `matiss/mobile-payee-virtual-list` --- ### 📝 Commits (8) - [`566ac8f`](https://github.com/actualbudget/actual/commit/566ac8f179b21113a4ff3bf18c183d6675fb5e9b) Refactor PayeesList and PayeesListItem components to use GridList for improved layout and accessibility. Add mobileListItem styles for consistent item presentation. - [`af40285`](https://github.com/actualbudget/actual/commit/af402852bcc6b6549983f82c4693b731cbb4f0ad) Add aria-hidden attribute to bookmark icon in PayeesListItem for improved accessibility. - [`b67678f`](https://github.com/actualbudget/actual/commit/b67678f1b7d53f180bd0c1ecfd214ea242776eb9) Add payee ID to PayeesListItem for improved accessibility and identification. - [`a5d8b36`](https://github.com/actualbudget/actual/commit/a5d8b36a6452db88ec2b589b37994fb50cbe1de5) Refactor PayeesListItemProps to use Omit for improved type safety and clarity in prop definitions. - [`01800dc`](https://github.com/actualbudget/actual/commit/01800dc9b6c7630c8ea6073c507144a071a90757) Update PayeesList component to enhance layout by moving styles to GridList and adjusting padding for improved visual consistency. - [`cb251e0`](https://github.com/actualbudget/actual/commit/cb251e062ca08d2e78c96f3e76b53f5ce33d9a6b) Update PayeesListItem to use a localized label for payee names, enhancing clarity for transfer accounts. - [`ff23cfe`](https://github.com/actualbudget/actual/commit/ff23cfe44f0308ca6e4f47bb9895ed30006b132e) Enhance accessibility in PayeesList and PayeesListItem components by adding aria-busy attribute and memoization for performance optimization. - [`0af5858`](https://github.com/actualbudget/actual/commit/0af5858f67ac30e1219a6c130e46059dc4a87d71) Update TypeScript guidelines to prefer types over interfaces for improved consistency in coding practices. ### 📊 Changes **5 files changed** (+105 additions, -83 deletions) <details> <summary>View changed files</summary> 📝 `.cursor/rules/typescript.mdc` (+2 -2) 📝 `packages/component-library/src/styles.ts` (+6 -0) 📝 `packages/desktop-client/src/components/mobile/payees/PayeesList.tsx` (+24 -13) 📝 `packages/desktop-client/src/components/mobile/payees/PayeesListItem.tsx` (+67 -68) ➕ `upcoming-release-notes/5802.md` (+6 -0) </details> ### 📄 Description `GridList` uses list virtualization. Which is quite important for long lists of items (i.e. payees). Visually there should be no difference. I plan on moving the rules list to this soon too (as a different PR). <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Migrates the mobile Payees list to react-aria GridList/GridListItem for virtualized, accessible rendering and adds a shared mobile list item style. > > - **Mobile (Payees)**: > - `PayeesList` now uses `react-aria-components` `GridList` with `aria-label`, `aria-busy`, and item rendering; wires actions via `onAction`; minor loading padding tweak. > - `PayeesListItem` converted to memoized `GridListItem`; updates props (`value`, `GridListItemProps`), computes translated `label`, sets `textValue`, updates bookmark icon attrs, and uses `styles.mobileListItem`. > - **Component Library**: > - Adds `styles.mobileListItem` to `packages/component-library/src/styles.ts`. > - **Release Notes**: > - Adds maintenance entry announcing the Payees list move to `GridList`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 0af5858f67ac30e1219a6c130e46059dc4a87d71. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-23 13:24:35 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#40560
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?