feat(playground): Add 'Open in Playground' button to learning modules

[karanpatill]

Add 'Open in Playground' button to learning modules

This PR integrates the Learning section with the Playground by adding a button in each module that automatically loads the corresponding sample into the editor.

Motivation:
Users often want to immediately try out the concepts they just read about in a module. This button bridges the gap between learning and practice, improving the overall developer experience.

Changes:

• Added sampleName to steps.ts to map modules to samples.
• Updated LearnContent component in Content.tsx to display the "Open in Playground" button.
• Enhanced store init() in store.ts to handle the sample query parameter for auto-loading.
• Fixed mixed space/tab indentation in Content.tsx to resolve ESLint errors.

Refs #871

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	843caad
🔍 Latest deploy log	https://app.netlify.com/projects/ap-template-playground/deploys/69ef2d40d23a6f0008a0a0bb
😎 Deploy Preview	https://deploy-preview-872--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.

[Atharva7115]

Thanks @karanpatill for working on this!

Great to see this being implemented based on the issue (#871).

I’ll check out the preview and share any thoughts if I notice something useful.

[mttrbrts]

@Atharva7115 can you share a link to your preview here, please? As the author of the issue, you get priority for the PR to fix the issue

[Atharva7115]

@mttrbrts Thanks for the opportunity!
I’ll work on implementing this and share a PR with a preview soon.

[Atharva7115]

@mttrbrts Thanks for the opportunity!

I’ve created a PR for this: #877
Preview: https://deploy-preview-877--ap-template-playground.netlify.app

Looking forward to your feedback.

[mttrbrts]

Thanks for this contribution @karanpatill! The "Open in Playground" button is a nice UX improvement for bridging learning content with hands-on practice.

Review Notes

Code Changes Look Good

• Button styling matches the Accord Project theme
• Query parameter approach is clean
• Fixed mixed indentation (thanks for the cleanup!)

Questions

1. I noticed PR feat: add 'Open in Playground' button to learn modules #877 from @Atharva7115 also addresses this issue. Since your PR was opened first (April 6 vs April 14), this PR takes priority. @Atharva7115 - would you mind reviewing this PR instead? Your feedback as the issue author would be valuable.

2. The full CI checks (E2E, Build) have not run yet. Can you confirm the feature works end-to-end in the deploy preview?

Deploy Preview: https://deploy-preview-872--ap-template-playground.netlify.app

---

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

[Atharva7115]

Thanks for working on this, @karanpatill — the implementation looks clean and integrates well with the learn → playground flow.

A couple of small suggestions:

1. Theme consistency
   The button color is currently hardcoded (#19c6c7). It might be worth using the existing colors.primary theme token to stay consistent with the rest of the codebase and ensure future theme updates are applied uniformly.

2. Fallback for invalid sample
   If an invalid ?sample= value is provided, loadSample may fail silently and skip rebuild(), potentially leaving the app uninitialized. It might be worth adding a small validation or fallback to ensure the playground always initializes correctly.

[karanpatill]

Thanks for the review and suggestions!

I’ve updated the implementation to use the theme’s colors.primary for consistency, and added a fallback to handle invalid ?sample= values so the Playground initializes correctly in all cases.

There was a build issue in the initial update, which has now been resolved — the latest commit includes the fix and the checks should now pass.

Please let me know if any further changes are needed.