Enable CMD/CTRL-click behavior for sidebar navigation (#174)

[ajmsawers]

✔ What’s done

Refactored sidebar navigation items to use React Router <Link> behavior via NavItem with new to/href props.

All sidebar navigation entries now behave like real links:

• CMD/CTRL + click opens in a new tab
• Middle-click opens in a new tab
• Right-click shows “Open link in new tab” / “Copy link address”

❓ Looking for clarification

Since I’m still new to the codebase, I want to confirm whether any non-sidebar UI elements should also support CMD/CTRL + click.

For example, the “external-link” style icon buttons (like the purple circular icon and small external-link icon in the timeline area) sometimes link to another page or open content in a modal.

Before updating those, I want to make sure they’re intended to behave as actual links rather than action buttons.

If these icon buttons should also follow standard link semantics, I can update them to use <Link> / <a> so they support CMD/CTRL + click as well.

Let me know if I missed any others. 🙂

Partially addresses #174 — this PR handles sidebar navigation CMD/CTRL-click behavior. Awaiting clarification on non-sidebar links before completing the rest.

[ajmsawers]

DCO is fixed and this should now be ready for review.

It’s my first PR in a while, so I’m very happy to make any changes or follow any preferred conventions.

[EnriqueL8]

One thing before I dive any deeper

[EnriqueL8]

We need to keep this copyright - it stays from the original contributor but you can add the org you belong along side it

[ajmsawers]

Done, updated now. :-)

[EnriqueL8]

Thanks @standrew for this PR - looks good

On external links, I think since we are already doing the work it makes sense to fix it for any link we believe needs to be external - not the ones that open in right hand side modal for example

I realize we don't have a proper testing framework here, this might be something to look into contributing

Build falling

Failed to compile.

src/components/Navigation/Navigation.tsx
  Line 26:9:  'navigate' is assigned a value but never used  @typescript-eslint/no-unused-vars

[EnriqueL8]

Do we need this comment?

[ajmsawers]

Comment removed. :-)

[EnriqueL8]

I would rather reverse this with deprecated for the action?

[ajmsawers]

Corrected. :-)

[ajmsawers]

I have pushed the updates based on the review feedback.

Breadcrumb Changes

The breadcrumb component has been updated to use proper link semantics.
Non-terminal breadcrumbs now render as MUI Link elements using component={RouterLink} and to={link}, which enables standard browser behaviors (cmd/ctrl-click, right-click menu, middle-click, open-in-new-tab, etc.).
The final breadcrumb remains non-clickable to represent the current page.

File updated:

src/components/Breadcrumbs/FFBreadcrumb.tsx

Navigation Feedback Resolved

All navigation-related feedback from the review has been addressed. These changes were committed separately to keep the history clear.

Files updated:

• src/components/Navigation/ActivityNav.tsx
• src/components/Navigation/NavItem.tsx
• src/components/Navigation/Navigation.tsx
• src/interfaces/navigation.ts

Regarding Broader Link / URL Refactoring

Other areas of the UI still use imperative navigation (navigate, slide, etc.) because they depend on the existing route structure in navigation.ts.
Converting these to Link would require a larger, coordinated refactor and carries a higher regression risk, especially in the absence of automated tests.

For this PR, the scope has been intentionally limited to:

• enabling link semantics for breadcrumbs
• ensuring standard browser navigation behaviours where applicable
• addressing the specific review comments

If desired, I can follow up with a separate issue to standardise link behaviour more broadly and also add testing (Playwright/Cypress?).

Potential Future Candidates for Link Conversion

Below is a non-exhaustive list of components and areas currently using imperative navigation that could be refactored in a future update:

Buttons and Launchers

• LaunchButton.tsx
• TxButton.tsx
• MsgButton.tsx
• PoolButton.tsx
• IdentityButton.tsx
• InterfaceButton.tsx
• FFArrowButton.tsx

Cards, Accordions, and Lists

• BaseCard.tsx
• MessageDataAccordion.tsx
• DetailsCard.tsx
• FireFlyCard.tsx
• Table.tsx (e.g., “view all” arrow links)
• SlideSectionHeader.tsx

Enum-Driven UI Launchers

• eventTypes.tsx
• txStatusTypes.tsx

These areas are more interconnected, so switching them to link semantics would require a coordinated refactor.

Let me know if any additional changes are needed or if a broader follow-up refactor would be helpful.

[EnriqueL8]

Awesome thank @ajmsawers , I plan to run this locally and try it out before getting it in