github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-07-15 22:54:03 -05:00
Code Issues 3.0k Packages Projects Releases 58 Wiki Activity

[PR #79] [MERGED] Read-only Responsive Web App #3004

New Issue
Closed
opened 2026-02-28 20:34:53 -06:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-02-28 20:34:53 -06:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/79
Author: @trevdor
Created: 5/31/2022
Status: ✅ Merged
Merged: 1/4/2023
Merged by: @trevdor

Base: trevdor-responsive ← Head: responsive

📝 Commits (10+)

  • d796c30 Responsive view (read-only)
  • a8e1cf9 Give Amount Input a default value to avoid safeNumber error
  • 4f64d30 merge master
  • 97f4190 Fix up Settings after merge
  • 2cb83b3 merge master again
  • 50524fd PR feedback
  • 5f68f6f fixup! PR feedback
  • 3b84cad @jlongster scheduled transactions fix
  • ae2c666 merge master again
  • e6f2c6a Undo not-my-changes that slipped in on those merges

📊 Changes

31 files changed (+3857 additions, -186 deletions)

View changed files

📝 packages/desktop-client/package.json (+9 -1)
📝 packages/desktop-client/public/index.html (+4 -1)
📝 packages/desktop-client/src/components/FinancesApp.js (+142 -44)
📝 packages/desktop-client/src/components/MobileWebMessage.js (+55 -31)
📝 packages/desktop-client/src/components/Modals.js (+10 -0)
📝 packages/desktop-client/src/components/Settings.js (+44 -15)
➕ packages/desktop-client/src/components/SyncRefresh.js (+13 -0)
📝 packages/desktop-client/src/components/Titlebar.js (+2 -2)
➕ packages/desktop-client/src/components/accounts/MobileAccount.js (+287 -0)
➕ packages/desktop-client/src/components/accounts/MobileAccountDetails.js (+180 -0)
➕ packages/desktop-client/src/components/accounts/MobileAccounts.js (+353 -0)
➕ packages/desktop-client/src/components/accounts/MobileTransaction.js (+484 -0)
➕ packages/desktop-client/src/components/budget/MobileBudget.js (+312 -0)
➕ packages/desktop-client/src/components/budget/MobileBudgetTable.js (+1203 -0)
➕ packages/desktop-client/src/components/budget/MobileTable.js (+29 -0)
📝 packages/desktop-client/src/components/manager/ConfigServer.js (+3 -1)
📝 packages/desktop-client/src/components/manager/ManagementApp.js (+6 -5)
📝 packages/desktop-client/src/components/manager/subscribe/Bootstrap.js (+1 -1)
📝 packages/desktop-client/src/components/manager/subscribe/ChangePassword.js (+1 -1)
📝 packages/desktop-client/src/components/manager/subscribe/Login.js (+1 -1)

...and 11 more files

📄 Description

Goal

A read-only version of Actual that works on mobile as well as desktop.

Choices I Made Along the Way

  1. Make it look/act like the React Native (RN) apps James has in the app stores today.
  2. Read-only (just for the moment)
    A. On desktop, most editing is done in-place whereas the RN app uses both a "stack navigation" concept where edits are done in modal-like overlays and native calculator "sheets." So not doing editing means not implementing a substitute for those RN features just yet. And that means less waiting before folks can at least check their budgets on the go.
    B. The more contributors, the better we're set up for the future. If I can get this PR done more quickly, we'll have a file/folder skeleton others can help to flesh out as we add editing and all the mobile features we're used to in James' original native apps (plus new features!).
  3. Component switching (in some places)
    • What do I mean by that? For a responsive app, I'd typically expect each component to respond to viewport width. If a certain subcomponent or behavior is not needed at narrow or wide widths, we show/hide appropriately. Or tweak styles for sizing, etc. But it's all the same components no matter your viewport size.
    • Alternatively, we can switch out a desktop-optimized component entirely for a mobile-optimized component when we narrow down to mobile viewport widths.
    • Lightweight screens and components--welcome/sign-in, open a budget file, Settings, modals--have been updated to be truly responsive in the traditional sense.
    • There were a couple major components for which it seemed better to switch components. It seemed we'd have so much conditional logic in these components, they'd be hard to grok/maintain:
      1. On the Budget screen, Actual desktop relies on interactions that don't translate directly to mobile: drag-n-drop, inline edit, edits within tooltips, a wide budget table, and multi-month views. The RN app uses a narrow budget table and RN-only components for editing and rearranging categories.
      2. The Accounts screen on desktop (/accounts) defaults to All Accounts, which is a view the RN app doesn't offer. At first, I adapted this All Accounts view to mobile (cuz it's something I've wished for), but then went back to choice 1 at the top of this list. Let's keep it what we're used to for the first pass and evolve later. So I swap out <Account> entirely for a <MobileAccounts>, and this component begins with the account card list view we're used to in RN, where we can pick one account's transactions to view at a time (/accounts/:id). This single account view transactions list on desktop uses inline edit, can display splits in the table, and relies on wide rows. While it's simple enough to make the rows responsive to address that last issue, the RN app hides those details and relies on the stack concept again (sorry if I'm butchering RN terminology) to edit in a modal-like view.
  4. Comment, don't delete code that needs to be converted to web later but doesn't work right now.
    • Most (all?) of the new mobile-friendly components were adapted from their /mobile counterparts. The RN features interfered with getting this running on web. If something was in the way of getting running quickly but it seemed we would probably want it back in a web-friendly form later--things like like animations or refresh control--I left it in place, just commented out. I reckoned this will make it easier to see how a feature was done in RN when we finally get around to adding it without figuring out which /mobile component was the ancestor to the mobile web one. I'm open to being convinced to delete instead.

Status

  • General
    • Lock zoom to 100% on mobile
    • Match per-screen iOS App header color to what it was in RN (done, but hacky...might not be another way on iOS today?)
    • Cache invalidation for PWAs so updates are pulled - Service Worker? (was solving a phantom problem. we're ok)
  • Welcome/Setup screens
    • Update MobileWebMessage to explain it's read-only for now
  • Mobile navigation tabs
  • Budget
    • header
    • categories list
  • Accounts
    • header
    • account chooser
  • Individual account view
    • transactions table
      • lazy load transactions using react-aria's useAsyncList instead of RN RefreshControl
    • search
    • pull-to-refresh (or if not quick to build, another way to refresh) (went with a header Sync button for now)
  • Individual transaction view (not right now; depends on same modals as editing)
  • Settings
    • Way to close one budget file and open another

Bugs

  • Editing a transaction gives a blank screen (shouldn't be able to edit)
    • Also messes up column alignment
  • Budget Screen: tapping "to budget" tries to display budget details that overlap the budget categories table (looks like my MobileModal changes didn't work out for this use case)
  • Add Account button doesn't work on mobile (gotta disable cuz we're read-only, I suppose)

Note: Since someone asked, here's (roughly) my approach to adapting RN components to the web.

Demo (updated 8 July 2022) - on an iPhone X (there've been several changes since...need to update demo)

8 July 2022_small

🔄 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/79 **Author:** [@trevdor](https://github.com/trevdor) **Created:** 5/31/2022 **Status:** ✅ Merged **Merged:** 1/4/2023 **Merged by:** [@trevdor](https://github.com/trevdor) **Base:** `trevdor-responsive` ← **Head:** `responsive` --- ### 📝 Commits (10+) - [`d796c30`](https://github.com/actualbudget/actual/commit/d796c30beda1f83886f2dcddee39ef98b9aeabea) Responsive view (read-only) - [`a8e1cf9`](https://github.com/actualbudget/actual/commit/a8e1cf98706cb7131f4d3f2e6170394c51f94c78) Give Amount Input a default value to avoid safeNumber error - [`4f64d30`](https://github.com/actualbudget/actual/commit/4f64d30659291337f8511e46e867d1bca78557be) merge master - [`97f4190`](https://github.com/actualbudget/actual/commit/97f4190380ab98ab7f42b825fa6d300426cf803c) Fix up Settings after merge - [`2cb83b3`](https://github.com/actualbudget/actual/commit/2cb83b3883c74389cc832cc4b99c0ec8beb2a232) merge master again - [`50524fd`](https://github.com/actualbudget/actual/commit/50524fdb4a76ffec05f33d4a8c5c8fe7d0e9f64a) PR feedback - [`5f68f6f`](https://github.com/actualbudget/actual/commit/5f68f6fdfa4e36dfd03802f23119b078758c4eae) fixup! PR feedback - [`3b84cad`](https://github.com/actualbudget/actual/commit/3b84cada3f78a373cdb950f6248997b7b65b4233) @jlongster scheduled transactions fix - [`ae2c666`](https://github.com/actualbudget/actual/commit/ae2c666a3d0b9797da83d90f4ce2247a4dc99197) merge master again - [`e6f2c6a`](https://github.com/actualbudget/actual/commit/e6f2c6ac294115e7dd3104610c5465b46aa2767f) Undo not-my-changes that slipped in on those merges ### 📊 Changes **31 files changed** (+3857 additions, -186 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/package.json` (+9 -1) 📝 `packages/desktop-client/public/index.html` (+4 -1) 📝 `packages/desktop-client/src/components/FinancesApp.js` (+142 -44) 📝 `packages/desktop-client/src/components/MobileWebMessage.js` (+55 -31) 📝 `packages/desktop-client/src/components/Modals.js` (+10 -0) 📝 `packages/desktop-client/src/components/Settings.js` (+44 -15) ➕ `packages/desktop-client/src/components/SyncRefresh.js` (+13 -0) 📝 `packages/desktop-client/src/components/Titlebar.js` (+2 -2) ➕ `packages/desktop-client/src/components/accounts/MobileAccount.js` (+287 -0) ➕ `packages/desktop-client/src/components/accounts/MobileAccountDetails.js` (+180 -0) ➕ `packages/desktop-client/src/components/accounts/MobileAccounts.js` (+353 -0) ➕ `packages/desktop-client/src/components/accounts/MobileTransaction.js` (+484 -0) ➕ `packages/desktop-client/src/components/budget/MobileBudget.js` (+312 -0) ➕ `packages/desktop-client/src/components/budget/MobileBudgetTable.js` (+1203 -0) ➕ `packages/desktop-client/src/components/budget/MobileTable.js` (+29 -0) 📝 `packages/desktop-client/src/components/manager/ConfigServer.js` (+3 -1) 📝 `packages/desktop-client/src/components/manager/ManagementApp.js` (+6 -5) 📝 `packages/desktop-client/src/components/manager/subscribe/Bootstrap.js` (+1 -1) 📝 `packages/desktop-client/src/components/manager/subscribe/ChangePassword.js` (+1 -1) 📝 `packages/desktop-client/src/components/manager/subscribe/Login.js` (+1 -1) _...and 11 more files_ </details> ### 📄 Description ### Goal A read-only version of Actual that works on mobile as well as desktop. ### Choices I Made Along the Way 1. Make it look/act like the React Native (RN) apps James has in the app stores today. 2. Read-only (just for the moment) A. On desktop, most editing is done in-place whereas the RN app uses both a "stack navigation" concept where edits are done in modal-like overlays and native calculator "sheets." So not doing editing means not implementing a substitute for those RN features just yet. And that means less waiting before folks can at least check their budgets on the go. B. The more contributors, the better we're set up for the future. If I can get this PR done more quickly, we'll have a file/folder skeleton others can help to flesh out as we add editing and all the mobile features we're used to in James' original native apps (plus new features!). 3. Component switching (in some places) * What do I mean by that? For a responsive app, I'd typically expect each component to _respond_ to viewport width. If a certain subcomponent or behavior is not needed at narrow or wide widths, we show/hide appropriately. Or tweak styles for sizing, etc. But it's all the same components no matter your viewport size. * Alternatively, we can switch out a desktop-optimized component entirely for a mobile-optimized component when we narrow down to mobile viewport widths. * Lightweight screens and components--welcome/sign-in, open a budget file, Settings, modals--have been updated to be truly responsive in the traditional sense. * There were a couple major components for which it seemed better to switch components. It seemed we'd have so much conditional logic in these components, they'd be hard to grok/maintain: 1. On the Budget screen, Actual desktop relies on interactions that don't translate directly to mobile: drag-n-drop, inline edit, edits within tooltips, a wide budget table, and multi-month views. The RN app uses a narrow budget table and RN-only components for editing and rearranging categories. 2. The Accounts screen on desktop (`/accounts`) defaults to All Accounts, which is a view the RN app doesn't offer. At first, I adapted this All Accounts view to mobile (cuz it's something I've wished for), but then went back to choice 1 at the top of this list. Let's keep it what we're used to for the first pass and evolve later. So I swap out `<Account>` entirely for a `<MobileAccounts>`, and this component begins with the account card list view we're used to in RN, where we can pick one account's transactions to view at a time (`/accounts/:id`). This single account view transactions list on desktop uses inline edit, can display splits in the table, and relies on wide rows. While it's simple enough to make the rows responsive to address that last issue, the RN app hides those details and relies on the stack concept again (sorry if I'm butchering RN terminology) to edit in a modal-like view. 4. Comment, don't delete code that needs to be converted to web later but doesn't work right now. * Most (all?) of the new mobile-friendly components were adapted from their `/mobile` counterparts. The RN features interfered with getting this running on web. If something was in the way of getting running quickly but it seemed we would probably want it back in a web-friendly form later--things like like animations or refresh control--I left it in place, just commented out. I reckoned this will make it easier to see how a feature was done in RN when we finally get around to adding it without figuring out which `/mobile` component was the ancestor to the mobile web one. I'm open to being convinced to delete instead. ### Status - [x] General - [x] Lock zoom to 100% on mobile - [x] Match per-screen iOS App header color to what it was in RN (done, but hacky...might not be another way on iOS today?) - [x] ~~Cache invalidation for PWAs so updates are pulled - Service Worker?~~ (was solving a phantom problem. we're ok) - [x] Welcome/Setup screens - [x] Update MobileWebMessage to explain it's read-only for now - [x] Mobile navigation tabs - [x] Budget - [x] header - [x] categories list - [x] Accounts - [x] header - [x] account chooser - [x] Individual account view - [x] transactions table - [x] lazy load transactions using react-aria's `useAsyncList` instead of RN RefreshControl - [x] search - [x] pull-to-refresh (or if not quick to build, another way to refresh) (went with a header Sync button for now) - [x] ~~Individual transaction view~~ (not right now; depends on same modals as editing) - [x] Settings - [x] Way to close one budget file and open another ### Bugs - [x] Editing a transaction gives a blank screen (shouldn't be able to edit) - [x] Also messes up column alignment - [x] Budget Screen: tapping "to budget" tries to display budget details that overlap the budget categories table (looks like my MobileModal changes didn't work out for this use case) - [x] Add Account button doesn't work on mobile (gotta disable cuz we're read-only, I suppose) Note: Since someone asked, here's (roughly) [my approach to adapting RN components to the web.](https://gist.github.com/trevdor/ac0e524bd599fc6ad0a4a27744531944) ### Demo (updated 8 July 2022) - on an iPhone X (there've been several changes since...need to update demo) ![8 July 2022_small](https://user-images.githubusercontent.com/5862724/178051586-fddf34ce-7390-4208-be34-b332f55296f1.gif) --- <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-02-28 20:34:53 -06: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
tech-support
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#3004
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?