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 to the Jobs and Job Sets nav buttons using a theme-aware CSS custom property (--nav-active-bg) computed from alpha(contrastText, 0.33), which is a solid improvement over a hardcoded colour.

• P1: JOBS = "/" and NavLinkButton lacks the end prop. React Router v6 NavLink uses prefix matching by default, so to="/" matches every URL — the Jobs button will appear highlighted on all pages (Job Sets, Settings, etc.), making the active indicator misleading everywhere except the root.

Confidence Score: 4/5

One P1 bug makes the active indicator always visible on the Jobs button — needs the end prop fix before merging.

A single P1 logic bug: the missing end prop on NavLinkButton causes JOBS ("/") to match every route, rendering the new active highlight incorrect on all non-root pages. The CSS and theme-variable approach are otherwise clean.

internal/lookoutui/src/app/NavBar.tsx — the NavLinkButton definition at line 13–15 needs end added.

Important Files Changed

Filename	Overview
internal/lookoutui/src/app/NavBar.tsx	Adds --nav-active-bg CSS custom property via alpha() from the theme — good theme-aware approach — but NavLinkButton is missing the end prop, causing JOBS = "/" to match every route and always appear active.
internal/lookoutui/src/app/NavBar.css	Adds transition and active-state rules using the --nav-active-bg CSS custom property; clean implementation, correctly scoped to .toolbar a.MuiButton-root.active.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["NavBar renders"] --> B["StyledAppBar sets --nav-active-bg\nvia alpha(contrastText, 0.33)"]
    B --> C["NavLinkButton wraps NavLink"]
    C --> D{"NavLink prefix match\nagainst current URL"}
    D -->|"JOBS = '/' matches ALL routes\n(missing end prop)"| E["❌ .active class always added\nto Jobs button"]
    D -->|"JOB_SETS = '/job-sets'\nonly matches /job-sets"| F["✅ .active class added correctly"]
    E --> G[".toolbar a.MuiButton-root.active\napplies --nav-active-bg + bold"]
    F --> G
    G --> H["Jobs button always highlighted\nregardless of current page"]

Loading

Comments Outside Diff (1)

1. internal/lookoutui/src/app/NavBar.tsx, line 13-15 (link)

   Without end, React Router v6's NavLink uses prefix matching, so to="/" (JOBS) is active on every URL. Now that .active has visible CSS, the Jobs button will always appear highlighted regardless of which page the user is on. Adding end enforces exact-path matching for all nav links.

_{Reviews (2): Last reviewed commit: "Merge branch 'master' into fix/Job-JobSe..." | Re-trigger Greptile}