Add missing :key attributes to v-for loops in Tabs.vue

[Copilot]

Description

This PR adds missing :key attributes to two v-for loops in the website/src/components/utils/Tabs.vue component, as requested in issue #778.

Changes Made

• Added :key="mode" to the <a> element v-for loop (lines 23-28) that renders tab buttons
• Added :key="mode" to the <template> element v-for loop (line 36) that renders tab content

Why This Matters

Missing :key attributes in v-for loops can lead to:

• Incorrect DOM reuse when modeText is mutated or re-ordered
• Subtle animation glitches during tab transitions
• <keep-alive> cache issues with tab content

Implementation Details

Both loops iterate over (_, mode) in modeText where mode is the unique identifier (object key), making it the perfect choice for the :key attribute. This ensures Vue can properly track each tab and its content during re-renders.

Testing

• ✅ Linting passes with no errors or warnings
• ✅ Dev server starts successfully
• ✅ Website loads correctly


Note: The playground shows loading errors due to missing ast-grep-wasm dependency, which is unrelated to these changes.

Fixes #778.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• plugins.dprint.dev
  • Triggering command: /home/REDACTED/work/ast-grep.github.io/ast-grep.github.io/node_modules/dprint/dprint check (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.