github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-05-11 01:18:59 -05:00
Code Issues 1.6k Packages Projects Releases 57 Wiki Activity

[PR #6669] Fix sidebar link highlighting for nested routes #6659

New Issue
Closed
opened 2026-02-28 21:31:11 -06:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-02-28 21:31:11 -06:00
Owner
Copy Link

Original Pull Request: https://github.com/actualbudget/actual/pull/6669

State: closed
Merged: Yes

Fix sidebar link highlighting for nested routes

Problem

After navigating to a Reports page (e.g., /reports/net-worth), the Reports link in the sidebar was no longer highlighted as active. Additionally, the "All accounts" link was incorrectly highlighting when viewing specific account pages.

Root Cause

The InternalLink component uses useMatch({ path }) which defaults to exact matching (end: true). When on /reports/net-worth, it doesn't match the /reports path used by the Reports link.

Solution

  • Added isExactPathMatch prop to InternalLink component with a default of false for prefix matching
  • Added isExactPathMatch prop to Account component to control matching behavior
  • Set isExactPathMatch={true} for "All accounts" link to use exact matching (only highlights on /accounts, not /accounts/:id)
  • All other navigation items use default isExactPathMatch={false} for prefix matching
  • Merged master branch and resolved conflicts by accepting incoming screenshot changes
  • Removed ALL screenshot changes from current branch (all screenshots now match master)
  • Passed code review and security checks
  • Manually tested to verify correct behavior

Why this approach?

  • Most sidebar navigation items need prefix matching (Reports, Schedules, Payees, Rules, etc.)
  • "All accounts" needs exact matching to avoid highlighting on specific account pages
  • Default of false minimizes the need for explicit configuration
  • Provides flexibility for future cases that need exact matching

Changes Made

  1. Link.tsx: Added isExactPathMatch prop with default false to InternalLink component
  2. Account.tsx: Added isExactPathMatch prop and passed it through to Link component
  3. Accounts.tsx: Set isExactPathMatch={true} for "All accounts" link
  4. Merged master: Resolved conflicts by accepting incoming changes for screenshots
  5. Removed ALL screenshot changes: All screenshot files now exactly match master

Testing

✅ Type checking: Passed
✅ Linting: Passed
✅ Code review: No issues
✅ Security scan: No vulnerabilities
✅ Manually verified:

  • "All accounts" is highlighted ONLY when on /accounts (exact match)
  • "All accounts" is NOT highlighted when on /accounts/:id (specific account)
  • Reports link is highlighted when on /reports and nested routes like /reports/net-worth
  • Test Account is highlighted when viewing that specific account
  • Budget link works correctly

Screenshots

Before (Reports link not highlighted on nested route):

After (Reports link properly highlighted on nested route):

All accounts page - "All accounts" highlighted:

Specific account page - only that account highlighted:

Original prompt

This section details on the original issue you should resolve

<issue_title>[Bug]: Reports link in sidebar no longer highlighted when active</issue_title>
<issue_description>### Verified issue does not already exist?

  • I have searched and found no existing issue

What happened?

Introduced in https://github.com/actualbudget/actual/pull/6411

Before:

Image

After:

Image</issue_description>

Comments on the Issue (you are @copilot in this section)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

**Original Pull Request:** https://github.com/actualbudget/actual/pull/6669 **State:** closed **Merged:** Yes --- ## Fix sidebar link highlighting for nested routes ### Problem After navigating to a Reports page (e.g., `/reports/net-worth`), the Reports link in the sidebar was no longer highlighted as active. Additionally, the "All accounts" link was incorrectly highlighting when viewing specific account pages. ### Root Cause The `InternalLink` component uses `useMatch({ path })` which defaults to exact matching (`end: true`). When on `/reports/net-worth`, it doesn't match the `/reports` path used by the Reports link. ### Solution - [x] Added `isExactPathMatch` prop to `InternalLink` component with a default of `false` for prefix matching - [x] Added `isExactPathMatch` prop to `Account` component to control matching behavior - [x] Set `isExactPathMatch={true}` for "All accounts" link to use exact matching (only highlights on `/accounts`, not `/accounts/:id`) - [x] All other navigation items use default `isExactPathMatch={false}` for prefix matching - [x] Merged master branch and resolved conflicts by accepting incoming screenshot changes - [x] Removed ALL screenshot changes from current branch (all screenshots now match master) - [x] Passed code review and security checks - [x] Manually tested to verify correct behavior **Why this approach?** - Most sidebar navigation items need prefix matching (Reports, Schedules, Payees, Rules, etc.) - "All accounts" needs exact matching to avoid highlighting on specific account pages - Default of `false` minimizes the need for explicit configuration - Provides flexibility for future cases that need exact matching ### Changes Made 1. **Link.tsx**: Added `isExactPathMatch` prop with default `false` to `InternalLink` component 2. **Account.tsx**: Added `isExactPathMatch` prop and passed it through to Link component 3. **Accounts.tsx**: Set `isExactPathMatch={true}` for "All accounts" link 4. **Merged master**: Resolved conflicts by accepting incoming changes for screenshots 5. **Removed ALL screenshot changes**: All screenshot files now exactly match master ### Testing ✅ Type checking: Passed ✅ Linting: Passed ✅ Code review: No issues ✅ Security scan: No vulnerabilities ✅ Manually verified: - "All accounts" is highlighted ONLY when on `/accounts` (exact match) - "All accounts" is NOT highlighted when on `/accounts/:id` (specific account) - Reports link is highlighted when on `/reports` and nested routes like `/reports/net-worth` - Test Account is highlighted when viewing that specific account - Budget link works correctly ### Screenshots **Before (Reports link not highlighted on nested route):** <img src="https://github.com/user-attachments/assets/ca017bdc-13ea-492b-9c16-47081fee1252"> **After (Reports link properly highlighted on nested route):** <img src="https://github.com/user-attachments/assets/fba25b6b-6494-40af-ac1c-182e6f1dff59"> **All accounts page - "All accounts" highlighted:** <img src="https://github.com/user-attachments/assets/eaf6444a-a1d3-4e8a-9da3-4300abc750d9"> **Specific account page - only that account highlighted:** <img src="https://github.com/user-attachments/assets/7a576912-20b3-48cc-aec0-cc309b68a25e"> <!-- START COPILOT ORIGINAL PROMPT --> <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>[Bug]: Reports link in sidebar no longer highlighted when active</issue_title> > <issue_description>### Verified issue does not already exist? > > - [x] I have searched and found no existing issue > > ### What happened? > > Introduced in https://github.com/actualbudget/actual/pull/6411 > > Before: > > <img width="414" height="270" alt="Image" src="https://github.com/user-attachments/assets/e1e292d2-a262-44a3-8533-be972a32e2c8" /> > > After: > > <img width="468" height="285" alt="Image" src="https://github.com/user-attachments/assets/ca017bdc-13ea-492b-9c16-47081fee1252" /></issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> <!-- START COPILOT CODING AGENT SUFFIX --> - Fixes actualbudget/actual#6668 <!-- START COPILOT CODING AGENT TIPS --> --- ✨ Let Copilot coding agent [set things up for you](https://github.com/actualbudget/actual/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo.
GiteaMirror added the pull-request label 2026-02-28 21:31:11 -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 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#6659
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?