Migrate components to Radix Vue primitives #54

Summary

Incrementally migrate UI components to use Radix Vue primitives for improved accessibility and interaction patterns.

Radix Vue Documentation

https://www.radix-vue.com/

Components to Migrate

High Priority (Complex Interactions)

• TDropdown + TDropdownItem → DropdownMenu
• TTabs → Tabs
• SearchableDropdown → Combobox
• StatsFilterModal → Dialog
• LanguageSelector → DropdownMenu
• Modals (LearningModal, etc.) → Dialog

Medium Priority

• TAvatar → Avatar
• NotificationBell dropdown → Popover
• IconPicker → Popover + grid

Low Priority (Simple Components)

• TButton - Keep SCSS, add Radix if needed for toggle states
• TCard - Keep as-is (no Radix equivalent needed)
• Tooltips → Tooltip (if any exist)

Approach

1. Migrate one component at a time
2. Keep existing SCSS styling
3. Test keyboard navigation and screen reader
4. Create separate PR for each migration

Benefits

• Keyboard navigation (arrow keys, Enter, Escape, Tab)
• Focus management and trapping
• ARIA attributes for screen readers
• Click-outside detection
• Proper positioning and collision detection