update weather to include background opacity

Author: tariknz

src/frontend/components/Settings/sections/StandingsSettings.tsx

@@ -28,7 +28,7 @@ const migrateConfig = (savedConfig: unknown): StandingsWidgetSettings['config']
     delta: { enabled: (config.delta as { enabled?: boolean })?.enabled ?? true },
     lastTime: { enabled: (config.lastTime as { enabled?: boolean })?.enabled ?? true },
     fastestTime: { enabled: (config.fastestTime as { enabled?: boolean })?.enabled ?? true },
-    background: { opacity: (config.background as { opacity?: number })?.opacity ?? 25 },
+    background: { opacity: (config.background as { opacity?: number })?.opacity ?? 0 },
   };
 };
 

src/frontend/components/Settings/sections/WeatherSettings.tsx

@@ -3,11 +3,28 @@ import { BaseSettingsSection } from '../components/BaseSettingsSection';
 import { WeatherWidgetSettings } from '../types';
 import { useDashboard } from '@irdashies/context';
 
+const SETTING_ID = 'weather';
+
+const defaultConfig: WeatherWidgetSettings['config'] = {
+  background: { opacity: 0 },
+};
+
+const migrateConfig = (savedConfig: unknown): WeatherWidgetSettings['config'] => {
+  if (!savedConfig || typeof savedConfig !== 'object') return defaultConfig;
+  const config = savedConfig as Record<string, unknown>;
+  return {
+    background: { opacity: (config.background as { opacity?: number })?.opacity ?? 0 },
+  };
+};
+
 export const WeatherSettings = () => {
   const { currentDashboard } = useDashboard();
+  const savedSettings = currentDashboard?.widgets.find(
+    (w) => w.id === SETTING_ID
+  ) as WeatherWidgetSettings | undefined;
   const [settings, setSettings] = useState<WeatherWidgetSettings>({
-    enabled: currentDashboard?.widgets.find(w => w.id === 'weather')?.enabled ?? false,
-    config: currentDashboard?.widgets.find(w => w.id === 'weather')?.config ?? {},
+    enabled: savedSettings?.enabled ?? false,
+    config: migrateConfig(savedSettings?.config),
   });
 
   if (!currentDashboard) {
@@ -20,12 +37,30 @@ export const WeatherSettings = () => {
       description="Configure weather widget display options."
       settings={settings}
       onSettingsChange={setSettings}
-      widgetId="weather"
+      widgetId={SETTING_ID}
     >
-      {/* Add specific settings controls here */}
-      <div className="text-slate-300">
-        Additional settings will appear here
-      </div>
+      {(handleConfigChange) => (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-slate-300">Background Opacity</span>
+            <div className="flex items-center gap-2">
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value={settings.config.background.opacity}
+                onChange={(e) =>
+                  handleConfigChange({ background: { opacity: parseInt(e.target.value) } })
+                }
+                className="w-20 h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer"
+              />
+              <span className="text-xs text-slate-400 w-8">
+                {settings.config.background.opacity}%
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
     </BaseSettingsSection>
   );
 }; 

src/frontend/components/Settings/types.ts

@@ -25,7 +25,9 @@ export interface RelativeWidgetSettings extends BaseWidgetSettings {
 }
 
 export interface WeatherWidgetSettings extends BaseWidgetSettings {
-  // Add specific weather settings here
+  config: {
+    background: { opacity: number };
+  };
 }
 
 export interface TrackMapWidgetSettings extends BaseWidgetSettings {

src/frontend/components/Weather/Weather.tsx

@@ -6,6 +6,7 @@ import { WeatherTrackWetness } from './WeatherTrackWetness/WeatherTrackWetness';
 import { WeatherTrackRubbered } from './WeatherTrackRubbered/WeatherTrackRubbered';
 import { WindDirection } from './WindDirection/WindDirection';
 import { useTrackRubberedState } from './hooks/useTrackRubberedState';
+import { useWeatherSettings } from './hooks/useWeatherSettings';
 
 export const Weather = () => {
   const [parent] = useAutoAnimate();
@@ -14,10 +15,14 @@ export const Weather = () => {
   const windSpeed = weather.windVelocity;
   const relativeWindDirection =  (weather.windDirection ?? 0) - (weather.windYaw ?? 0);
   const trackRubbered = useTrackRubberedState();
+  const settings = useWeatherSettings();
 
   return (
     <div
-      className="w-full inline-flex flex-row bg-slate-800/25 rounded-sm"
+      className="w-full inline-flex flex-row bg-slate-800/[var(--bg-opacity)] rounded-sm"
+      style={{
+        ['--bg-opacity' as string]: `${settings?.background?.opacity ?? 25}%`,
+      }}
       ref={parent}
     >
       <div className="flex flex-col p-2 w-full rounded-sm gap-2">

src/frontend/components/Weather/hooks/useWeatherSettings.tsx

@@ -0,0 +1,12 @@
+import { useDashboard } from '@irdashies/context';
+import { WeatherWidgetSettings } from '../../Settings/types';
+
+export const useWeatherSettings = () => {
+  const { currentDashboard } = useDashboard();
+
+  const weatherSettings = currentDashboard?.widgets.find(
+    (widget) => widget.id === 'weather',
+  )?.config;
+  
+  return weatherSettings as WeatherWidgetSettings['config'];
+};