Fix vue v for keys

[s1dhu98]

Fixed missing :key attributes on v-for loops in Extra.vue. Vue needs unique keys to properly track list items, otherwise it causes rendering issues with dynamic message lists.

Also cleaned up the codebase:

• Removed unused onMounted/onUnmounted hooks from NavbarLink2.vue
• Removed debug console logs from UserMenu.vue auth code
• Simplified the fullscreen exit function in ux.js
• Fixed template formatting and attribute ordering

All changes applied to both v0 and v1 versions consistently

[coderabbitai]

Walkthrough

This pull request updates multiple UI components and simulator UX code: Extra.vue adds explicit keys for v-for message lists and adjusts mobile button conditional rendering and template formatting; UserMenu.vue removes debug console logs from the authentication flow; NavbarLink2.vue removes the lifecycle-driven ui:close-menus handler and its listeners; simulator/src/ux.js simplifies fullView/exitFullView by removing prior saved mobile state and related guards and directly toggling simulatorMobileStore flags.

Possibly related PRs

• feat(gsoc'24): Mobile view Implementation for vue simulator #361: Modifies simulator mobile UI codepaths and flags overlapping with changes in src/components/Extra.vue and src/simulator/src/ux.js.
• Fix dropdown menus remaining visible in fullscreen preview #832: Alters NavbarLink2 lifecycle close-menu behavior and fullView/exitFullView mobile-state handling similar to this PR.
• Feature: Authentication model for web and tauri simulator #657: Also changes src/components/Navbar/User/UserMenu.vue (authentication handling), touching the same component modified here.

Suggested labels

GSOC'24

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix vue v for keys' directly corresponds to the main changes in the PR, which add :key attributes to v-for directives in Extra.vue components. However, the title is somewhat vague and could be more descriptive about which components or the specific issue being fixed.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	7bcf253
🔍 Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/697e15e8b348490008cf8ab2
😎 Deploy Preview	https://deploy-preview-902--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 44 (🔴 down 5 from production) Accessibility: 73 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/Extra.vue`:
- Around line 39-40: The current v-for uses the message string as the key
(useState().successMessages and useState().errorMessages), which can produce
duplicate keys for repeated messages; update both loops to include the index
(e.g., iterate as (mes, idx) and (error, idx)) and use an index-based key
(preferably prefixed like "success-<idx>" and "error-<idx>") so each rendered
item has a unique key and avoids Vue duplicate-key warnings.

🧹 Nitpick comments (2)

src/components/Extra.vue (2)

88-89: Inconsistent attribute indentation.

The id attribute appears unindented on line 89 after the line break, which is inconsistent with similar elements in the file (e.g., simulationArea canvas at lines 97-98 has proper indentation).

Suggested formatting fix

             <canvas
-id="backgroundArea" style="
+                id="backgroundArea"
+                style="
                     position: absolute;

---

137-138: Same indentation inconsistency as above.

The class attribute lacks proper indentation after the line break.

Suggested formatting fix

             <div
-class="sk-folding-cube loadingIcon" style="
+                class="sk-folding-cube loadingIcon"
+                style="
                     display: none;

[s1dhu98]

@Nihal4777 kindly review the PR and merge if possible

[Nihal4777]

@s1dhu98 Kindly refer contribution guidelines and follow proper PR template.

[s1dhu98]

@Nihal4777 pull request template has been update kindly review it

[naman79820]

Hey @s1dhu98 please fill in the PR description as per the template. Thanks!