feat: add background opacity

[tariknz]

• Adds background opacity setting to Relative, Standings, Weather

Untitled2.mp4

[Copilot]

Pull Request Overview

This pull request adds background opacity settings to the Weather, Standings, and Relative widgets. The changes include a new hook for retrieving weather settings, updates to component styles to use a dynamic CSS variable for opacity, modifications to settings sections with slider controls, and updates to the default dashboard configuration.

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/frontend/components/Weather/hooks/useWeatherSettings.tsx	Introduces a hook to retrieve weather widget background settings.
src/frontend/components/Weather/Weather.tsx	Applies dynamic background opacity using a CSS variable.
src/frontend/components/Standings/Standings.tsx	Updates the widget background style and error formatting for settings.
src/frontend/components/Standings/Relative.tsx	Incorporates background opacity styling in the Relative widget.
src/frontend/components/Settings/types.ts	Defines new background opacity properties for widget settings.
src/frontend/components/Settings/sections/WeatherSettings.tsx	Adds a slider to adjust weather widget background opacity.
src/frontend/components/Settings/sections/StandingsSettings.tsx	Integrates background opacity control for standings settings.
src/frontend/components/Settings/sections/RelativeSettings.tsx	Adds background opacity slider in the Relative settings section.
src/app/storage/defaultDashboard.ts	Updates default dashboard configuration with background opacity values.

Comments suppressed due to low confidence (3)

src/app/storage/defaultDashboard.ts:20

• The default dashboard configuration uses 'backgroundOpacity' whereas the widget settings expect a 'background' object with an 'opacity' property. Update the defaultDashboard config to match the widget settings (e.g., use 'background: { opacity: 0 }').

        backgroundOpacity: { value: 0 },

src/app/storage/defaultDashboard.ts:61

• The property 'backgroundOpacity' here is inconsistent with the new widget configuration that expects 'background: { opacity: number }'. Consider renaming it to ensure consistency.

        backgroundOpacity: { value: 0 },

src/app/storage/defaultDashboard.ts:84

• Update this configuration to use 'background: { opacity: 25 }' so that it aligns with the settings used in the widget components.

        backgroundOpacity: { value: 25 },