fix(admin): make radial gauge tracks theme-aware (#856)

[DYNOSuprovo]

Description

Make radial gauge tracks theme-aware in the admin Overview tab so the unfilled background ring remains visible in the light theme.

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Related Issue

Closes #856

Changes Made

• In src/components/admin/tabs/OverviewTab.tsx, imported chartTheme from @/lib/charts/palette.
• In HeroStatusBanner, read the theme palette grid color with const { grid } = chartTheme(useEffectiveTheme()); and replaced hardcoded rgba(255,255,255,0.04) with background={{ fill: grid }}.
• In MetricGauge, read the theme palette grid color with const { grid } = chartTheme(useEffectiveTheme()); and replaced hardcoded rgba(255,255,255,0.03) with background={{ fill: grid }}.
• Both gauges now consistently use the theme grid color, remaining clearly visible across light and dark themes.

Testing

• I have tested this locally
• All existing tests pass

Test Environment

• LibreDB Studio Version: 0.16.0
• Node.js/Bun Version: Bun 1.4.2
• OS: Windows

Checklist

• My code follows the project's code style guidelines
• I have performed a self-review of my code
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes

[cevheri]

The fix is right and I want it in, but it needs a test before I merge.

I resolved the actual colours instead of reading the classes. In light the old track composited to exactly its own card colour, 1.000 contrast, so it was gone rather than faint. With grid it is #e4e4e7 at 1.154 to 1.247, the arc stays separate from the track in both themes, and dark gets slightly stronger rather than regressing.

Nothing would notice if this were undone, though. I reverted it, swapped the theme, swapped grid for axis, and set the track to transparent: all four leave the admin tests at 20 pass, 0 fail, coverage 100% either way.

That is partly our gap: tests/helpers/mock-monaco.ts:76 is RadialBar: () => null, so the prop never reaches the DOM, while Tooltip eight lines below re-emits contentStyle for exactly this reason. Do the same for RadialBar with background.fill, then add two cases beside the tooltip theme pair in tests/components/admin/OverviewTab.test.tsx asserting #e4e4e7 under light and #222222 under dark. I checked that shape: it fails on main, passes on your branch.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[DYNOSuprovo]

@cevheri Thanks for the pointer and the helpful breakdown of the mock surface!

I've added the test coverage as suggested:

1. Updated tests/helpers/mock-monaco.ts to surface background.fill on the RadialBar mock element via data-track-fill.
2. Added test cases in tests/components/admin/OverviewTab.test.tsx beside the tooltip theme pair verifying the radial gauge track background resolves to #222222 under dark theme and #e4e4e7 under light theme.

All 158 admin component tests pass locally. Ready for review!

[cevheri]

@cevheri Thanks for the pointer and the helpful breakdown of the mock surface!

I've added the test coverage as suggested:

1. Updated tests/helpers/mock-monaco.ts to surface background.fill on the RadialBar mock element via data-track-fill.
2. Added test cases in tests/components/admin/OverviewTab.test.tsx beside the tooltip theme pair verifying the radial gauge track background resolves to #222222 under dark theme and #e4e4e7 under light theme.

All 158 admin component tests pass locally. Ready for review!

can you take on issue #856(just leave a comment),
I can not assign it to you

[cevheri]

issue fixed for some urgent reason, sorry for that, please select another one