Skip to content

feat: color Transactions section/field cells to match the Budget tab accents #36

Description

@obeidahmad

Problem / motivation

The Transactions table renders the Section and Field columns with no relation to the colors those same sections/fields have on the Budget tab, so you can't visually tie a transaction back to its section.

  • Transactions: Section column is style="dim", Field column is plain — monay/tui/screens/transactions.py:39, :40.
  • Budget: each section gets an accent from theme.section_accent(index) (monay/tui/theme.py:46), keyed by the section's position-sorted indexsection_list.build enumerates sorted(month.sections, key=position) and section_detail._accent_for uses order.index(section).

So the same section is, say, teal on the Budget tab but dim grey in Transactions — inconsistent.

Proposed solution

Color the Transactions Section cells with the same Budget accent the section has elsewhere, and bring the Field cells in line with the Budget tab too.

Sketch:

  1. Build a section name → accent map from the same position-sorted order the Budget tab uses, so the colors match exactly: accent_of = {s.name: theme.section_accent(i) for i, s in enumerate(sorted(month.sections, key=lambda s: s.position))}.
  2. The transactions renderer already maps each field to its section name (section_of, monay/tui/screens/transactions.py:26); use it to look up the accent per row and style the Section cell with it instead of dim.
  3. Apply the agreed field-cell color (see open question) in the row loop (monay/tui/screens/transactions.py:43).

Because the accent is index-based, deriving it from the identical position-sorted list is what keeps Transactions and Budget in lockstep (including after a section is reordered/deleted).

Open question (settle in the design step)

What exactly should the Field cell color be, to be "the same as the Budget tab"?

  • Option A — the section's accent, so a row's Section + Field read as one color-coded group.
  • Option B — the Budget field-table's own styling, where field names render in the default text color (Text(f.name), monay/tui/widgets/section_detail.py:45) rather than dim.

Leaning A (it's the stronger visual tie-back), but worth revising.

Alternatives considered

  • Hard-code a color per section name — rejected: it would drift from section_accent the moment sections are added/reordered; deriving from the same position-sorted palette is the only thing that stays consistent.

Metadata

Metadata

Assignees

No one assigned

    Labels

    featurefeat: a new capability

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions