Highlight active unit/equipment in ORBAT tree

[Copilot]

• Understand the issue: Active item should be highlighted in ORBAT tree, not just when focused
• Explore code structure and identify files involved
• Implement the fix: Add isActive computed property and apply bg-muted-foreground/20 class when item matches selectStore.activeItem
• Fix duplicate highlighting issue: Remove data-[selected]:bg-muted-foreground/20 from TreeDND.vue to prevent two items from being highlighted at the same time
• Run type-checking (passed)
• Request code review (passed)
• Run CodeQL security check (no issues found)

Summary

This PR fixes the issue where the active unit/equipment was only highlighted in the ORBAT tree when it had keyboard focus.

Changes

File: src/components/orbat/TreeItemDND.vue

1. Added an isActive computed property that checks if the current tree item matches the active item in the store
2. Applied the bg-muted-foreground/20 background class when isActive is true

File: src/components/orbat/TreeDND.vue

3. Removed data-[selected]:bg-muted-foreground/20 to prevent two items from being highlighted simultaneously (one via keyboard focus, one via store active item)

How It Works

• Before: Background highlight was applied via data-[selected] (keyboard focus) which could result in two highlighted items
• After: Background highlight is only applied via the isActive computed property which checks the store's activeItem, ensuring only one item is highlighted at a time

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Active unit/equipment should be highlighted in the ORBAT tree</issue_title>
<issue_description>The active item should be highlighted in the ORBAT. Currently it is only highlighted if the item has focus.
</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Active unit/equipment should be highlighted in the ORBAT tree #93

---

💡 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.

[kjellmf]

The TreeDND component style the highlighted item using "data-[selected]". This means that you can highlight two items at a time. Fix

[Copilot]

The TreeDND component style the highlighted item using "data-[selected]". This means that you can highlight two items at a time. Fix

Fixed in 1086714. Removed data-[selected]:bg-muted-foreground/20 from TreeDND.vue so that only the isActive computed property in TreeItemDND.vue controls the highlighting. This ensures only one item can be highlighted at a time.