feat(ux): add confirmation modal before loading sample template

[Anexus5919]

Closes #867

Summary

Currently, selecting a new sample from the Load Sample dropdown instantly replaces the contents of all three editors (Concerto Model, TemplateMark, and JSON Data) without any warning causing users to lose unsaved work silently.

This PR adds a confirmation modal that intercepts the sample loading action when there are unsaved changes, giving users a clear warning and the choice to proceed or cancel. If the editors are unmodified, the sample loads directly without interruption.

Changes

src/components/SampleDropdown.tsx

• Added Modal.confirm() from Ant Design as an interception layer in handleMenuClick
• Modal only appears when the user has unsaved changes - current editor content is compared against the originally loaded sample to detect modifications
• Modal displays a descriptive warning: "Loading a new sample will replace your current Concerto Model, TemplateMark, and JSON Data. Any unsaved changes will be lost."
• Provides Continue and Cancel buttons, and can be dismissed by clicking outside (maskClosable: true)
• Extracted loading logic into a separate performLoadSample callback for clean separation between confirmation and execution
• handleMenuClick is now synchronous (returns immediately after showing modal), with the async load deferred to onOk

src/index.css

• Added scoped dark mode styles for the confirmation modal (.ant-modal-confirm) under the existing html[data-theme="dark"] pattern
• Styles the modal background, title/content text, and cancel button to match the app's dark theme
• Styled the "Continue" button to use the playground's teal accent color (#19c6c7) for consistency with the rest of the UI
• No changes to any other UI elements, only the confirm modal is affected

Screenshots

Light Mode

(Modal renders with default Ant Design light styling - works out of the box)

Dark Mode

(Modal background, text, and cancel button styled to match the dark theme)

Test Plan

• Open the playground and select any sample from the Load Sample dropdown without editing anything - verify the sample loads directly without a modal
• Edit any content in the Concerto Model, TemplateMark, or JSON Data editor, then select a new sample - verify a confirmation modal appears
• Click Cancel - verify editors remain unchanged with your edits intact
• Click Continue - verify the selected sample loads correctly
• Click outside the modal - verify it dismisses (same as Cancel)
• Toggle to dark mode and repeat - verify the modal text is readable (white on dark background) and the "Continue" button uses the playground's teal accent color
• Verify no other UI elements (navbar, buttons, dropdown, preview) are visually affected

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	4936089
🔍 Latest deploy log	https://app.netlify.com/projects/ap-template-playground/deploys/69d100556ba25900086feeee
😎 Deploy Preview	https://deploy-preview-868--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Anexus5919]

@ekarademir @dselman @DianaLease Could you please review this PR when you get time?
This addresses #867 by adding a confirmation modal before loading a sample template from the dropdown. Previously, selecting a new sample instantly wiped the Concerto Model, TemplateMark, and JSON Data editors without any warning.
Minimal, focused change - no modifications to any other UI elements or existing behavior. Thanks!

[hemantch01]

Hi @Anexus5919, I had already started working on this issue since I initially raised it. Could you please check with me (or whoever raised the issue) next time to confirm if it's already being worked on before picking it up?

[hemantch01]

Also the modal UI isnt matching Playground theme.

[Anexus5919]

Hi @Anexus5919, I had already started working on this issue since I initially raised it. Could you please check with me (or whoever raised the issue) next time to confirm if it's already being worked on before picking it up?

Hi @hemantch01, thanks for raising the issue - it's a great catch! I appreciate you flagging it

Regarding checking before picking up an issue, the issue wasn't assigned to anyone and didn't have any comments or linked PRs indicating active work. In open-source, unassigned issues are generally open for anyone to contribute to. If you were already working on it, the common practice is to comment on the issue or ask to be assigned so others are aware. That said, I completely understand the situation and will make sure to check in the comments going forward as a courtesy.

If you have a different or better approach in your implementation, feel free to open your PR as well - maintainers can always choose the one that fits best. Contributions in all forms are valuable!

[Anexus5919]

Also the modal UI isnt matching Playground theme.

Could you clarify what you mean by "not matching the Playground theme"? The modal currently uses Ant Design's default Modal.confirm() styling, which is consistent with how other Ant Design components render across the app. I've also added scoped dark mode styles so the modal is readable in both light and dark themes. If there's a specific aspect that looks off, I'm happy to adjust - a screenshot would help!

[hemantch01]

In open source, unassigned issues are generally open for anyone to contribute to. If you are already working on it, the common practice is to comment on the issue or ask to be assigned so others are aware.

Thanks for telling me about open source rules, and by “not matching the Playground theme,” I meant that the button color was off from the overall Playground theme and the colors used for other buttons.

[Anexus5919]

Thanks for clarifying @hemantch01! That's a fair point, the playground uses #19c6c7 as its primary accent color and the modal's "Continue" button defaults to Ant Design's blue. I'll update the button to match the playground's teal theme. Will push a fix shortly. Also updating the screenshots in the pr

[hemantch01]

i have locally checked your pr and found that the prompt appears every time i load the sample template. i think it should only be shown when there are differences. also, i couldn’t close the modal by clicking outside of it.

since this is for a ux update, it would be good if you implement this.

[Anexus5919]

@hemantch01 Thanks for the feedback! I've addressed both points and tested locally. The fixes have been pushed.

[hemantch01]

hi @Anexus5919 why are you force pushing to your branch every time?? , it changes the history and a bad practice to follow i had to forcefully fetch new changes in you pull request.

[Anexus5919]

hi @Anexus5919 why are you force pushing to your branch every time?? , it changes the history and a bad practice to follow i had to forcefully fetch new changes in you pull request.

Hi @hemantch01, force-pushing to a personal feature branch on a fork is standard practice especially when squashing commits to maintain a clean, single-commit PR, which is generally preferred by maintainers for easier review and a cleaner git history. It doesn't affect the base branch or anyone else's work. This PR is raised for the maintainers to review, so I prefer to keep the commit history clean and easy to review for them.

[Anexus5919]

@ekarademir @dselman @DianaLease
Kindly review this PR when you get a chance. Thanks! ☺️

[mttrbrts]

LGTM. Good UX improvement — preventing accidental loss of unsaved work. Thanks!

This comment was generated by AI on behalf of @mttrbrts.