feat(docs): Clarify Badge Design & Fix Image in /understanding-design-component

[zihanKuang]

Notes for Reviewers

This PR fixes #634

PR Content

This PR includea the following:

1. Clarifies Badge Design Philosophy and Meanings:
   This PR provides a clear explanation of badge design philosophy. It details the meaning of each badge in both Designer Mode and Operator Mode, with clear examples.
2. Fixes Image Usage in /understanding-design-component/index.md:
   An incorrect image implementation in /understanding-design-component/index.md that prevented the lightbox feature from working has been resolved.

Additional Context:

The existing badge definitions on Figma were outdated and contained some repetitive content. To address this, I consulted the codebase to get the relevant functions and re-created the badge diagrams. The updated images and explanations used in this documentation are based on this refreshed understanding.

Relevant Code Files:

1. meshmap/src/modules/editor/comman/badges.ts
   • How different types of badges (e.g., error, terminal, external link) are defined and created.
2. meshmap/src/modules/editor/validator/view.tsx
   • When the Validation Badge (Error Badge) specifically appears, basing its content on the schemaCount and dryRunCount error tallies.
3. meshmap/src/modules/editor/modes/designer/view.ts
   • Which badge layers are visible in Designer Mode, controlling their display logic according to the design's preferences.
4. meshmap/src/modules/editor/modes/operator/view.ts
   • Which specific badges should be displayed in Operator Mode, such as the terminalSessionBadge and the managedByMesheryBadge.
5. meshmap/src/modules/renderer/badges.ts

Original Diagram:

Re-created Diagram:

[netlify]

✅ Deploy Preview for bejewelled-pegasus-b0ce81 ready!

Name	Link
🔨 Latest commit	61c1fd9
🔍 Latest deploy log	https://app.netlify.com/projects/bejewelled-pegasus-b0ce81/deploys/68690eee3a5cc00008f56cac
😎 Deploy Preview	https://deploy-preview-635--bejewelled-pegasus-b0ce81.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.