feat: UI updates for the Alert Message pop-up when a user attempts to navigate to another page while a plan is in progress.

[NirajC-Microsoft]

Purpose

This pull request introduces a robust mechanism to prevent accidental cancellation of active plans when users attempt to navigate away from a plan in progress. It adds a confirmation dialog, refactors navigation logic to support cancellation protection, and applies consistent styling improvements across the panel components.

Plan cancellation protection and navigation logic:

• Added a reusable PlanCancellationDialog component to prompt users for confirmation before cancelling an active plan when navigating away.
• Implemented a custom hook usePlanCancellationAlert to encapsulate the logic for detecting active plans and handling cancellation confirmation, including API calls and error handling.
• Refactored navigation handlers in PlanPage.tsx and PlanPanelLeft.tsx to use the new cancellation protection logic, ensuring all navigations that could interrupt an active plan trigger the confirmation dialog. [1] [2] [3] [4]

Panel and UI improvements:

• Updated panel toolbar and layout components to support clickable titles and improved accessibility, replacing inline styles with CSS classes for consistency. [1] [2] [3]
• Applied new CSS classes for loading and error states in the plan page for a more consistent look and feel. [1] [2] [3]

Prop and type updates:

• Extended PlanPanelLefProps and related components to accept a new onNavigationWithAlert prop, enabling navigation protection throughout the panel. [1] [2]

These changes significantly improve user experience by preventing accidental loss of work during active plans and modernizing the panel UI for better maintainability and accessibility.

• ...

Does this introduce a breaking change?

• Yes
• No

How to Test

• Get the code

git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install

• Test the code

What to Check

Verify that the following are valid

• ...

Other Information