feat: add Tile Selection and Legend visibility toggles to Map Features panel

[Yeraze]

Summary

• Adds two checkboxes to the Map Features panel: Tile Selection and Legend, both default OFF (hidden) on first load.
• Visibility state persists via localStorage keys meshmonitor-showTileSelector and meshmonitor-showLegend, matching the existing isMapControlsCollapsed pattern.
• Wraps <MapLegend> and <TilesetSelector> rendering with the new toggles.

Why localStorage

Used localStorage rather than the server map-preferences API to keep this purely UI-only — adding DB columns/migration for two visibility toggles felt out of scope.

Test plan

• Fresh load: both Tile Selection and Legend hidden by default.
• Toggling each checkbox shows/hides the corresponding control.
• Refresh page — toggle states persist.
• npx tsc --noEmit clean (verified locally).

[github-actions]

Claude finished @Yeraze's task —— View job

---

PR Review Complete ✅

I've completed a thorough review of this pull request. Here's my comprehensive analysis:

Todo List:

• Read and analyze changed files
• Review code quality and React patterns
• Check localStorage implementation
• Evaluate security and performance considerations
• Assess test coverage needs
• Provide comprehensive feedback

---

Code Review Feedback

✅ Strengths

1. Consistent Implementation: The implementation follows existing patterns in the codebase perfectly

   • Uses the same localStorage pattern as isMapControlsCollapsed and showPacketMonitor
   • Follows the same React hooks pattern with useState initializer and useEffect for persistence
   • Uses consistent naming convention with meshmonitor- prefix

2. Good Default Behavior: Both controls default to false (hidden), which is appropriate for a cleaner initial UI experience

3. Proper Conditional Rendering: Both MapLegend and TilesetSelector are correctly wrapped with conditional rendering

4. Clean Integration: The checkboxes are logically placed in the Map Features panel alongside other map controls

🔧 Code Quality

Good:

• Clean, readable React patterns
• Consistent with existing codebase style
• No unnecessary complexity

Minor:

• The localStorage key naming is slightly inconsistent within the same file. Some keys use the meshmonitor- prefix (meshmonitor-showTileSelector) while others don't (showPacketMonitor, isMapControlsCollapsed)

🚫 No Security Concerns

• localStorage usage is safe for UI preferences
• No user input validation needed for boolean toggles
• No sensitive data involved

⚡ Performance Considerations

Good:

• Minimal performance impact - only adds two boolean state variables
• Conditional rendering prevents unnecessary component mounting when hidden
• localStorage operations are minimal and only occur on state changes

Note:

• The MapLegend and TilesetSelector components are now conditionally rendered, which could provide a small performance benefit when hidden

🧪 Test Coverage Assessment

Current State:

• No existing tests found for NodesTab.tsx component
• This follows the pattern of other localStorage-based UI preferences in the same file

Recommendations:

• While not blocking for this PR, consider adding tests for:
  • localStorage persistence behavior
  • Conditional rendering of controls
  • Default state initialization

📝 Documentation

The PR description is clear and explains the rationale for using localStorage over server-side preferences, which is appropriate for these UI-only toggles.

🔍 Minor Suggestions

1. Consistency: Consider standardizing localStorage keys across the file (either all with meshmonitor- prefix or none). However, this is not critical and could be addressed in a separate cleanup PR.

2. Accessibility: The current implementation is accessible with proper label/input associations.

3. Hardcoded Text: The labels "Show Tile Selection" and "Show Legend" are hardcoded. If internationalization is important, consider adding these to translation files.

Overall Assessment

This is a well-implemented, low-risk PR that adds useful functionality without introducing any significant issues. The code follows existing patterns, has minimal performance impact, and provides a good user experience improvement.

Recommendation: ✅ APPROVE

The implementation is solid and ready to merge. The localStorage approach is appropriate for these UI-only preferences, and the code quality matches the existing codebase standards.

---