[PR #5516] [MERGED] Extract mobile rules form to a new page #36170

Closed
opened 2026-04-20 23:03:15 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/5516
Author: @MatissJanis
Created: 8/7/2025
Status: Merged
Merged: 8/14/2025
Merged by: @MatissJanis

Base: masterHead: cursor/extract-mobile-rules-form-to-a-new-page-5d37


📝 Commits (10+)

  • c2210e9 Refactor rule editing to use new RuleEditor component across platforms
  • c71394c Refactor: Move FieldSelect and OpSelect to rules components
  • 78eb392 Add release notes for PR #5516
  • ff23a39 Refactor rule editor and navigation hooks with TypeScript improvements
  • 5d5fe12 Fix mobile rules navigation with useCallback and proper handlers
  • aabc319 Add debug logging and alerts to test mobile rules navigation
  • 08572c2 [autofix.ci] apply automated fixes
  • a1b872b Create ultra-simplified debug version to isolate click issues
  • c4d73ff Test direct window navigation to isolate useNavigate issue
  • b54e278 Remove all debug code and restore proper UI components

📊 Changes

25 files changed (+260 additions, -98 deletions)

View changed files

📝 .prettierignore (+3 -0)
📝 package.json (+1 -0)
📝 packages/desktop-client/e2e/rules.mobile.test.ts (+6 -8)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-form-1-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-form-2-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-form-3-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-modal-1-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-modal-2-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-modal-3-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-form-1-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-form-2-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-form-3-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-modal-1-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-modal-2-chromium-linux.png (+0 -0)
packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-modal-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/src/components/FinancesApp.tsx (+4 -0)
📝 packages/desktop-client/src/components/autocomplete/Autocomplete.tsx (+18 -5)
📝 packages/desktop-client/src/components/mobile/rules/AddRuleButton.tsx (+10 -46)
packages/desktop-client/src/components/mobile/rules/MobileRuleEditPage.tsx (+133 -0)
📝 packages/desktop-client/src/components/mobile/rules/MobileRulesPage.tsx (+9 -24)

...and 5 more files

📄 Description

Feat: Dedicated Mobile Page for Rule Creation and Editing

This PR introduces a dedicated mobile page for creating and editing rules, replacing the previous modal-based approach for a significantly improved mobile user experience.

Why this change?
The primary goal is to provide a more native and user-friendly experience for managing rules on mobile devices, moving from a constrained modal to a full-page interface. This also improves code reusability by extracting the core editing logic.

Key Changes:

  • Dedicated Mobile Page: A new MobileRuleEditPage provides a full-screen interface for rule management on mobile, leveraging the new RuleEditor.
  • Updated Mobile Navigation: MobileRulesPage and AddRuleButton now navigate to the new dedicated page instead of opening a modal.
  • New Route: Added /rules/edit/:id for the mobile rule editing page.

Open in Cursor Open in Web

🔄 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/5516 **Author:** [@MatissJanis](https://github.com/MatissJanis) **Created:** 8/7/2025 **Status:** ✅ Merged **Merged:** 8/14/2025 **Merged by:** [@MatissJanis](https://github.com/MatissJanis) **Base:** `master` ← **Head:** `cursor/extract-mobile-rules-form-to-a-new-page-5d37` --- ### 📝 Commits (10+) - [`c2210e9`](https://github.com/actualbudget/actual/commit/c2210e9d8303ef813a216266f7fb64e514dcec6f) Refactor rule editing to use new RuleEditor component across platforms - [`c71394c`](https://github.com/actualbudget/actual/commit/c71394c165d1b03563e7df50b80e4c44183b7520) Refactor: Move FieldSelect and OpSelect to rules components - [`78eb392`](https://github.com/actualbudget/actual/commit/78eb392f07dacc41797296297a95cc9b6bafcf21) Add release notes for PR #5516 - [`ff23a39`](https://github.com/actualbudget/actual/commit/ff23a39551e5177014b37269f1f6fbe9b93ae81b) Refactor rule editor and navigation hooks with TypeScript improvements - [`5d5fe12`](https://github.com/actualbudget/actual/commit/5d5fe12d24af92beb9bc990a1aa5d52ed2bf5a12) Fix mobile rules navigation with useCallback and proper handlers - [`aabc319`](https://github.com/actualbudget/actual/commit/aabc319f7ef505935c6cb74b05c3da2b3d45d829) Add debug logging and alerts to test mobile rules navigation - [`08572c2`](https://github.com/actualbudget/actual/commit/08572c29f3558946f2e2c704ddba397c2777c9dc) [autofix.ci] apply automated fixes - [`a1b872b`](https://github.com/actualbudget/actual/commit/a1b872b5a5133a5788e8453aa71acd70c7bfb8fd) Create ultra-simplified debug version to isolate click issues - [`c4d73ff`](https://github.com/actualbudget/actual/commit/c4d73ff8600f9a75c5057993b83335c607ec6102) Test direct window navigation to isolate useNavigate issue - [`b54e278`](https://github.com/actualbudget/actual/commit/b54e27867bdde763d60d1c3bda0377951953bb3d) Remove all debug code and restore proper UI components ### 📊 Changes **25 files changed** (+260 additions, -98 deletions) <details> <summary>View changed files</summary> 📝 `.prettierignore` (+3 -0) 📝 `package.json` (+1 -0) 📝 `packages/desktop-client/e2e/rules.mobile.test.ts` (+6 -8) ➕ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-form-1-chromium-linux.png` (+0 -0) ➕ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-form-2-chromium-linux.png` (+0 -0) ➕ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-form-3-chromium-linux.png` (+0 -0) ➖ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-modal-1-chromium-linux.png` (+0 -0) ➖ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-modal-2-chromium-linux.png` (+0 -0) ➖ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-add-button-opens-rule-creation-modal-3-chromium-linux.png` (+0 -0) ➕ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-form-1-chromium-linux.png` (+0 -0) ➕ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-form-2-chromium-linux.png` (+0 -0) ➕ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-form-3-chromium-linux.png` (+0 -0) ➖ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-modal-1-chromium-linux.png` (+0 -0) ➖ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-modal-2-chromium-linux.png` (+0 -0) ➖ `packages/desktop-client/e2e/rules.mobile.test.ts-snapshots/Mobile-Rules-clicking-on-a-rule-opens-edit-modal-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/src/components/FinancesApp.tsx` (+4 -0) 📝 `packages/desktop-client/src/components/autocomplete/Autocomplete.tsx` (+18 -5) 📝 `packages/desktop-client/src/components/mobile/rules/AddRuleButton.tsx` (+10 -46) ➕ `packages/desktop-client/src/components/mobile/rules/MobileRuleEditPage.tsx` (+133 -0) 📝 `packages/desktop-client/src/components/mobile/rules/MobileRulesPage.tsx` (+9 -24) _...and 5 more files_ </details> ### 📄 Description ## Feat: Dedicated Mobile Page for Rule Creation and Editing This PR introduces a dedicated mobile page for creating and editing rules, replacing the previous modal-based approach for a significantly improved mobile user experience. **Why this change?** The primary goal is to provide a more native and user-friendly experience for managing rules on mobile devices, moving from a constrained modal to a full-page interface. This also improves code reusability by extracting the core editing logic. **Key Changes:** * **Dedicated Mobile Page:** A new `MobileRuleEditPage` provides a full-screen interface for rule management on mobile, leveraging the new `RuleEditor`. * **Updated Mobile Navigation:** `MobileRulesPage` and `AddRuleButton` now navigate to the new dedicated page instead of opening a modal. * **New Route:** Added `/rules/edit/:id` for the mobile rule editing page. --- <a href="https://cursor.com/background-agent?bcId=bc-8e41f8fe-a9c3-41d8-9272-e5f9dae4fd8f"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/open-in-cursor-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://cursor.com/open-in-cursor-light.svg"> <img alt="Open in Cursor" src="https://cursor.com/open-in-cursor.svg"> </picture> </a> <a href="https://cursor.com/agents?id=bc-8e41f8fe-a9c3-41d8-9272-e5f9dae4fd8f"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/open-in-web-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://cursor.com/open-in-web-light.svg"> <img alt="Open in Web" src="https://cursor.com/open-in-web.svg"> </picture> </a> --- <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-20 23:03:15 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#36170