fix(header): preserve version dropdown hover contrast

[elibosley]

Summary

Version dropdown rows now apply matching semantic foreground and background colors on hover and keyboard focus, preserving readable contrast in White and Azure themes.

Why This Exists

The version dropdown used theme-specific hover backgrounds without explicitly setting the corresponding foreground color. In light themes, that could leave hovered text unreadable.

Resolution

Use the shared accent and accent-foreground semantic tokens for both hovered and focused version rows. This keeps the interaction state aligned with the active theme rather than relying on gray color utilities.

Reviewer Considerations

• The change is deliberately scoped to the two copyable version rows; it does not alter the shared dropdown primitive or unrelated menus.
• Hover and keyboard-focus states receive the same token pair for consistent pointer and keyboard contrast.

Behavior Changes

• Hovered or focused Unraid OS and API version rows remain legible in White and Azure themes.

Implementation Summary

• Replace fixed gray hover backgrounds with semantic accent background and foreground utility classes in the header version dropdown.

Verification

• pnpm --dir web run pretest (passed; UI build completed with pre-existing TypeScript diagnostics in Accordion.vue)
• pnpm --dir web exec vitest run __test__/components/HeaderOsVersion.test.ts (3 passed)
• pnpm --dir web exec eslint src/components/Header/HeaderVersion.vue (passed)
• pnpm --dir web exec prettier --check src/components/Header/HeaderVersion.vue (passed)
• git diff --check (passed)

Risk

Low; the change only applies established semantic colors to existing interaction states.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: a74854b9-a778-4fc8-bfdf-cbf4947b385a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/cld-760-version-dropdown-hover

---

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

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL:

https://preview.dl.unraid.net/unraid-api/tag/PR2047/dynamix.unraid.net.plg

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 52.88%. Comparing base (8ecfcba) to head (1839b39).
⚠️ Report is 1 commits behind head on feat/consolidated-header.

Additional details and impacted files

@@                     Coverage Diff                      @@
##           feat/consolidated-header    #2047      +/-   ##
============================================================
- Coverage                     52.90%   52.88%   -0.02%     
============================================================
  Files                          1041     1041              
  Lines                         72266    72266              
  Branches                       8328     8330       +2     
============================================================
- Hits                          38231    38217      -14     
- Misses                        33909    33923      +14     
  Partials                        126      126              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.