Fix sidebar link highlighting for nested routes (#6669)

* Initial plan

* Add release notes for PR #6669

* Fix Reports link highlighting in sidebar for nested routes

Co-authored-by: MatissJanis <886567+MatissJanis@users.noreply.github.com>

* Simplify by hardcoding end={false} in InternalLink

Co-authored-by: MatissJanis <886567+MatissJanis@users.noreply.github.com>

* Update VRT screenshots

Auto-generated by VRT workflow

PR: #6669

* Fix All accounts link to use exact matching

Co-authored-by: MatissJanis <886567+MatissJanis@users.noreply.github.com>

* Update VRT screenshots

Auto-generated by VRT workflow

PR: #6669

* Merge master and accept incoming screenshot changes

Co-authored-by: MatissJanis <886567+MatissJanis@users.noreply.github.com>

* Remove screenshot changes from current branch

Co-authored-by: MatissJanis <886567+MatissJanis@users.noreply.github.com>

* Revert all remaining screenshots to master versions

Co-authored-by: MatissJanis <886567+MatissJanis@users.noreply.github.com>

* Rename 'end' prop to 'isExactPathMatch' for clarity

Co-authored-by: MatissJanis <886567+MatissJanis@users.noreply.github.com>

* Update VRT screenshots

Auto-generated by VRT workflow

PR: #6669

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: MatissJanis <886567+MatissJanis@users.noreply.github.com>
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>

packages/desktop-client/src/components/common/Link.tsx

@@ -31,6 +31,7 @@ type InternalLinkProps = {
   activeStyle?: CSSProperties;
   children?: ReactNode;
   isDisabled?: boolean;
+  isExactPathMatch?: boolean;
 };
 
 const externalLinkColors = {
@@ -91,7 +92,7 @@ const TextLink = ({ style, onClick, children, ...props }: TextLinkProps) => {
 const ButtonLink = ({ to, style, activeStyle, ...props }: ButtonLinkProps) => {
   const navigate = useNavigate();
   const path = to ?? '';
-  const match = useMatch({ path });
+  const match = useMatch({ path, end: false });
   return (
     <Button
       className={() =>
@@ -119,9 +120,10 @@ const InternalLink = ({
   activeStyle,
   children,
   isDisabled,
+  isExactPathMatch = false,
 }: InternalLinkProps) => {
   const path = to ?? '';
-  const match = useMatch({ path });
+  const match = useMatch({ path, end: isExactPathMatch });
 
   return (
     <NavLink

packages/desktop-client/src/components/sidebar/Account.tsx

@@ -73,6 +73,7 @@ type AccountProps<FieldName extends SheetFields<'account'>> = {
   onDragChange?: OnDragChangeCallback<{ id: string }>;
   onDrop?: OnDropCallback;
   titleAccount?: boolean;
+  isExactPathMatch?: boolean;
 };
 
 export function Account<FieldName extends SheetFields<'account'>>({
@@ -89,6 +90,7 @@ export function Account<FieldName extends SheetFields<'account'>>({
   onDragChange,
   onDrop,
   titleAccount,
+  isExactPathMatch,
 }: AccountProps<FieldName>) {
   const isTestEnv = useIsTestEnv();
   const { t } = useTranslation();
@@ -145,6 +147,7 @@ export function Account<FieldName extends SheetFields<'account'>>({
             variant="internal"
             to={to}
             isDisabled={isEditing}
+            isExactPathMatch={isExactPathMatch}
             style={{
               ...accountNameStyle,
               ...style,

packages/desktop-client/src/components/sidebar/Accounts.tsx

@@ -96,6 +96,7 @@ export function Accounts() {
           to="/accounts"
           query={bindings.allAccountBalance()}
           style={{ fontWeight, marginTop: 15 }}
+          isExactPathMatch
         />
 
         {onBudgetAccounts.length > 0 && (

upcoming-release-notes/6669.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [Copilot]
+---
+
+Fix reports link highlighting issue in the sidebar for improved user navigation.