github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-10 20:23:07 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

Tech debt: Create a reusable component for rendering financial numbers with consistent typography #2817

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

Originally created by @coderabbitai[bot] on GitHub (Jan 14, 2026).

Originally assigned to: @matt-fidd on GitHub.

Background

As discussed in #6436, there are inconsistencies in how financial numbers are displayed across the application. Currently, the styles.tnum style (which applies tabular numbers and other OpenType features) is applied inconsistently - it's used in transaction lists and budget tables but missing in reports and other components.

Related PR: https://github.com/actualbudget/actual/pull/6436
Related comment: https://github.com/actualbudget/actual/pull/6436#discussion_r1932154823
Requested by: @matt-fidd

Problem

Financial numbers should consistently use the styles.tnum style which applies:

  • tnum: Tabular numbers for vertical alignment
  • ss01: Open digits for better readability
  • ss04: Disambiguation (particularly for zero)

Currently, developers must remember to manually apply this style, leading to inconsistencies like:

  • Non-serif "1" glyphs on reports pages
  • Inconsistent number rendering between mobile and desktop
  • Inconsistent rendering between different sections of the app

Proposed Solution

Create a reusable component (e.g., FinancialNumber or FormattedAmount) that:

  1. Takes a numeric value and format type as props
  2. Automatically applies styles.tnum styling
  3. Handles privacy filtering
  4. Provides consistent financial number rendering across the app

Files That Need Updates

Based on codebase analysis, the following files render financial numbers and should be updated to use the new component:

Reports Section (High Priority - inconsistency noted)

  • packages/desktop-client/src/components/reports/ReportSummary.tsx
  • packages/desktop-client/src/components/reports/Change.tsx
  • packages/desktop-client/src/components/reports/graphs/CrossoverGraph.tsx
  • packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
  • packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
  • packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
  • packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
  • packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
  • packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx

Other Components

  • packages/desktop-client/src/components/schedules/SchedulesTable.tsx
  • packages/desktop-client/src/components/rules/RuleEditor.tsx
  • packages/desktop-client/src/components/accounts/Balance.tsx
  • packages/desktop-client/src/components/accounts/BalanceHistoryGraph.tsx
  • Various modal components in packages/desktop-client/src/components/modals/

Already Using tnum (for reference)

These files already correctly apply styles.tnum and can serve as examples:

  • packages/desktop-client/src/components/spreadsheet/CellValue.tsx
  • packages/desktop-client/src/components/transactions/TransactionsTable.tsx
  • packages/desktop-client/src/components/mobile/transactions/TransactionListItem.tsx
  • packages/desktop-client/src/components/mobile/budget/BudgetCell.tsx

Implementation Notes

  • The component should work with the existing useFormat hook
  • Consider whether to include the <PrivacyFilter> within the component or as a separate wrapper
  • Ensure the component works in both desktop and mobile contexts
  • Update the component library if this should be a shared component

Benefits

  • Consistency: All financial numbers will render with the same typography
  • Maintainability: Single place to update financial number rendering logic
  • Developer Experience: No need to remember to apply styles.tnum manually
  • Accessibility: Consistent number formatting improves readability for all users
Originally created by @coderabbitai[bot] on GitHub (Jan 14, 2026). Originally assigned to: @matt-fidd on GitHub. ## Background As discussed in #6436, there are inconsistencies in how financial numbers are displayed across the application. Currently, the `styles.tnum` style (which applies tabular numbers and other OpenType features) is applied inconsistently - it's used in transaction lists and budget tables but missing in reports and other components. Related PR: https://github.com/actualbudget/actual/pull/6436 Related comment: https://github.com/actualbudget/actual/pull/6436#discussion_r1932154823 Requested by: @matt-fidd ## Problem Financial numbers should consistently use the `styles.tnum` style which applies: - `tnum`: Tabular numbers for vertical alignment - `ss01`: Open digits for better readability - `ss04`: Disambiguation (particularly for zero) Currently, developers must remember to manually apply this style, leading to inconsistencies like: - Non-serif "1" glyphs on reports pages - Inconsistent number rendering between mobile and desktop - Inconsistent rendering between different sections of the app ## Proposed Solution Create a reusable component (e.g., `FinancialNumber` or `FormattedAmount`) that: 1. Takes a numeric value and format type as props 2. Automatically applies `styles.tnum` styling 3. Handles privacy filtering 4. Provides consistent financial number rendering across the app ## Files That Need Updates Based on codebase analysis, the following files render financial numbers and should be updated to use the new component: ### Reports Section (High Priority - inconsistency noted) - `packages/desktop-client/src/components/reports/ReportSummary.tsx` - `packages/desktop-client/src/components/reports/Change.tsx` - `packages/desktop-client/src/components/reports/graphs/CrossoverGraph.tsx` - `packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx` - `packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx` - `packages/desktop-client/src/components/reports/graphs/LineGraph.tsx` - `packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx` - `packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx` - `packages/desktop-client/src/components/reports/graphs/renderCustomLabel.tsx` ### Other Components - `packages/desktop-client/src/components/schedules/SchedulesTable.tsx` - `packages/desktop-client/src/components/rules/RuleEditor.tsx` - `packages/desktop-client/src/components/accounts/Balance.tsx` - `packages/desktop-client/src/components/accounts/BalanceHistoryGraph.tsx` - Various modal components in `packages/desktop-client/src/components/modals/` ### Already Using tnum (for reference) These files already correctly apply `styles.tnum` and can serve as examples: - `packages/desktop-client/src/components/spreadsheet/CellValue.tsx` - `packages/desktop-client/src/components/transactions/TransactionsTable.tsx` - `packages/desktop-client/src/components/mobile/transactions/TransactionListItem.tsx` - `packages/desktop-client/src/components/mobile/budget/BudgetCell.tsx` ## Implementation Notes - The component should work with the existing `useFormat` hook - Consider whether to include the `<PrivacyFilter>` within the component or as a separate wrapper - Ensure the component works in both desktop and mobile contexts - Update the component library if this should be a shared component ## Benefits - **Consistency**: All financial numbers will render with the same typography - **Maintainability**: Single place to update financial number rendering logic - **Developer Experience**: No need to remember to apply `styles.tnum` manually - **Accessibility**: Consistent number formatting improves readability for all users
GiteaMirror added the user interfacetech debt labels 2026-02-28 20:29:26 -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
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label tech debt user interface
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#2817
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?