update the distinct active state for the Job and Job Sets tab

[YHines004]

What type of PR is this?

Enhancement

What this PR does / why we need it

This PR give the button/tab for Job and Job Sets a distinct active state when one of them are selected. We need this to give a distinctive state of which tab is active.

Which issue(s) this PR fixes

Fixes #

Special notes for your reviewer

[greptile-apps]

Greptile Summary

This PR adds a visible active-state indicator to the Jobs and Job Sets navigation buttons by wiring up React Router's NavLink .active class to new CSS rules and a theme-derived CSS custom property (--nav-active-bg).

• end: true is added to the Jobs route so that the root path / only matches exactly, preventing the Jobs tab from always appearing highlighted when navigating to Job Sets or other pages.
• A CSS custom property --nav-active-bg is set on StyledAppBar using alpha(theme.palette.appBar.contrastText, 0.33), making the active-tab background colour theme-aware.
• The CSS .toolbar a.MuiButton-root.active rule consumes the CSS variable and applies font-weight: bold.

Confidence Score: 5/5

Safe to merge — purely additive UI styling with no impact on data or routing logic beyond the end fix for the root path.

The end: true fix for the JOBS route correctly prevents the root path from prefix-matching every URL now that the active class has a visible effect. The CSS variable is properly inherited from the styled AppBar, and the end prop is correctly forwarded through the NavLinkButton spread. No data paths, API calls, or auth flows are touched.

No files require special attention.

Important Files Changed

Filename	Overview
internal/lookoutui/src/app/NavBar.tsx	Adds end?: boolean to the Page interface, sets end: true for the Jobs route, passes it through to NavLinkButton, and defines the --nav-active-bg CSS custom property on the styled AppBar using the theme's contrastText colour via alpha.
internal/lookoutui/src/app/NavBar.css	Adds a background-color transition on all nav-button anchors and an .active rule that reads the theme-derived --nav-active-bg CSS custom property and applies bold font weight.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User navigates to URL] --> B{Current path}
    B -->|exactly /| C[JOBS NavLink end=true - React Router adds .active class]
    B -->|starts with /job-sets| D[JOB SETS NavLink - React Router adds .active class]
    B -->|any other path| E[Neither NavLink is active]
    C --> F[CSS applies nav-active-bg background and bold font]
    D --> F
    F --> G[Active tab visually highlighted]
    E --> H[No highlight shown]

Loading

_{Reviews (4): Last reviewed commit: "chore: update based on comments" | Re-trigger Greptile}