feat: add background opacity

src/app/storage/defaultDashboard.ts

@@ -17,6 +17,7 @@ export const defaultDashboard: DashboardLayout = {
         delta: { enabled: true },
         lastTime: { enabled: true },
         fastestTime: { enabled: true },
+        backgroundOpacity: { value: 0 },
       },
     },
     {
@@ -57,6 +58,7 @@ export const defaultDashboard: DashboardLayout = {
       },
       config: {
         buffer: 3,
+        backgroundOpacity: { value: 0 },
       },
     },
     {
@@ -78,6 +80,9 @@ export const defaultDashboard: DashboardLayout = {
         width: 160,
         height: 380,
       },
+      config: {
+        backgroundOpacity: { value: 25 },
+      },
     },
     {
       id: 'fastercarsfrombehind',

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

@@ -7,14 +7,26 @@ const SETTING_ID = 'relative';
 
 const defaultConfig: RelativeWidgetSettings['config'] = {
   buffer: 3,
+  background: { opacity: 0 },
+};
+
+const migrateConfig = (savedConfig: unknown): RelativeWidgetSettings['config'] => {
+  if (!savedConfig || typeof savedConfig !== 'object') return defaultConfig;
+  const config = savedConfig as Record<string, unknown>;
+  return {
+    buffer: (config.buffer as { value?: number })?.value ?? 3,
+    background: { opacity: (config.background as { opacity?: number })?.opacity ?? 0 },
+  };
 };
 
 export const RelativeSettings = () => {
   const { currentDashboard } = useDashboard();
-  const savedSettings = currentDashboard?.widgets.find(w => w.id === SETTING_ID) as RelativeWidgetSettings | undefined;
+  const savedSettings = currentDashboard?.widgets.find(
+    (w) => w.id === SETTING_ID
+  ) as RelativeWidgetSettings | undefined;
   const [settings, setSettings] = useState<RelativeWidgetSettings>({
     enabled: savedSettings?.enabled ?? true,
-    config: savedSettings?.config ?? defaultConfig,
+    config: migrateConfig(savedSettings?.config),
   });
 
   if (!currentDashboard) {
@@ -40,7 +52,9 @@ export const RelativeSettings = () => {
             </div>
             <select
               value={settings.config.buffer}
-              onChange={(e) => handleConfigChange({ buffer: parseInt(e.target.value) })}
+              onChange={(e) =>
+                handleConfigChange({ buffer: parseInt(e.target.value) })
+              }
               className="bg-slate-700 text-slate-200 px-3 py-1 rounded border border-slate-600 focus:border-blue-500 focus:outline-none"
             >
               {Array.from({ length: 10 }, (_, i) => (
@@ -50,8 +64,28 @@ export const RelativeSettings = () => {
               ))}
             </select>
           </div>
+          <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/sections/StandingsSettings.tsx

@@ -12,6 +12,7 @@ const defaultConfig: StandingsWidgetSettings['config'] = {
   delta: { enabled: true },
   lastTime: { enabled: true },
   fastestTime: { enabled: true },
+  background: { opacity: 0 },
 };
 
 // Migration function to handle missing properties in the new config format
@@ -27,6 +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 ?? 0 },
   };
 };
 
@@ -103,6 +105,24 @@ export const StandingsSettings = () => {
                   }
                 />
               </div>
+              <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>
           </div>
         </div>

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

@@ -13,17 +13,21 @@ export interface StandingsWidgetSettings extends BaseWidgetSettings {
     delta: { enabled: boolean };
     lastTime: { enabled: boolean };
     fastestTime: { enabled: boolean };
+    background: { opacity: number };
   };
 }
 
 export interface RelativeWidgetSettings extends BaseWidgetSettings {
   config: {
     buffer: number;
+    background: { opacity: number };
   };
 }
 
 export interface WeatherWidgetSettings extends BaseWidgetSettings {
-  // Add specific weather settings here
+  config: {
+    background: { opacity: number };
+  };
 }
 
 export interface TrackMapWidgetSettings extends BaseWidgetSettings {

src/frontend/components/Standings/Relative.tsx

@@ -72,7 +72,12 @@ export const Relative = () => {
   });
 
   return (
-    <div className="w-full h-full">
+    <div 
+      className="w-full h-full bg-slate-800/[var(--bg-opacity)] rounded-sm p-2"
+      style={{
+        ['--bg-opacity' as string]: `${config?.background?.opacity ?? 0}%`,
+      }}
+    >
       <SessionBar />
       <table className="w-full table-auto text-sm border-separate border-spacing-y-0.5 mb-3 mt-3">
         <tbody ref={parent}>{rows}</tbody>

src/frontend/components/Standings/Standings.tsx

@@ -6,16 +6,24 @@ import { DriverRatingBadge } from './components/DriverRatingBadge/DriverRatingBa
 import { RatingChange } from './components/RatingChange/RatingChange';
 import { SessionBar } from './components/SessionBar/SessionBar';
 import { SessionFooter } from './components/SessionFooter/SessionFooter';
-import { useCarClassStats, useDriverStandings, useStandingsSettings } from './hooks';
+import {
+  useCarClassStats,
+  useDriverStandings,
+  useStandingsSettings,
+} from './hooks';
 
 export const Standings = () => {
   const [parent] = useAutoAnimate();
   const standings = useDriverStandings({ buffer: 3 });
   const classStats = useCarClassStats();
   const settings = useStandingsSettings();
-
   return (
-    <div className="w-full h-full">
+    <div
+      className={`w-full h-full bg-slate-800/[var(--bg-opacity)] rounded-sm p-2 text-white overflow-hidden`}
+      style={{
+        ['--bg-opacity' as string]: `${settings?.background?.opacity ?? 0}%`,
+      }}
+    >
       <SessionBar />
       <table className="w-full table-auto text-sm border-separate border-spacing-y-0.5 mb-3">
         <tbody ref={parent}>
@@ -39,18 +47,30 @@ export const Standings = () => {
                   hasFastestTime={result.hasFastestTime}
                   delta={settings?.delta?.enabled ? result.delta : undefined}
                   position={result.classPosition}
-                  iratingChange={settings?.iRatingChange?.enabled ? <RatingChange value={result.iratingChange} /> : undefined}
-                  lastTime={settings?.lastTime?.enabled ? result.lastTime : undefined}
-                  fastestTime={settings?.fastestTime?.enabled ? result.fastestTime : undefined}
+                  iratingChange={
+                    settings?.iRatingChange?.enabled ? (
+                      <RatingChange value={result.iratingChange} />
+                    ) : undefined
+                  }
+                  lastTime={
+                    settings?.lastTime?.enabled ? result.lastTime : undefined
+                  }
+                  fastestTime={
+                    settings?.fastestTime?.enabled
+                      ? result.fastestTime
+                      : undefined
+                  }
                   onPitRoad={result.onPitRoad}
                   onTrack={result.onTrack}
                   radioActive={result.radioActive}
-                  badge={settings?.badge?.enabled ? (
-                    <DriverRatingBadge
-                      license={result.driver?.license}
-                      rating={result.driver?.rating}
-                    />
-                  ) : undefined}
+                  badge={
+                    settings?.badge?.enabled ? (
+                      <DriverRatingBadge
+                        license={result.driver?.license}
+                        rating={result.driver?.rating}
+                      />
+                    ) : undefined
+                  }
                 />
               ))}
             </Fragment>

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'];
+};