Show track rubbered state in the Weather overlay

Author: fgc

src/frontend/components/Weather/Weather.tsx

@@ -3,14 +3,17 @@ import { useTrackTemperature } from './hooks/useTrackTemperature';
 import { useTrackWeather } from './hooks/useTrackWeather';
 import { WeatherTemp } from './WeatherTemp/WeatherTemp';
 import { WeatherTrackWetness } from './WeatherTrackWetness/WeatherTrackWetness';
+import { WeatherTrackRubbered } from './WeatherTrackRubbered/WeatherTrackRubbered';
 import { WindDirection } from './WindDirection/WindDirection';
+import { useTrackRubberedState } from './hooks/useTrackRubberedState';
 
 export const Weather = () => {
   const [parent] = useAutoAnimate();
   const weather = useTrackWeather();
   const trackTemp = useTrackTemperature();
   const windSpeed = weather.windVelocity;
   const relativeWindDirection =  (weather.windDirection ?? 0) - (weather.windYaw ?? 0);
+  const trackRubbered = useTrackRubberedState();
 
   return (
     <div
@@ -22,6 +25,7 @@ export const Weather = () => {
         <WeatherTemp title="Air" value={trackTemp.airTemp} />
         <WindDirection speedMs={windSpeed} direction={relativeWindDirection} />
         <WeatherTrackWetness trackMoisture={weather.trackMoisture} />
+        <WeatherTrackRubbered trackRubbered={trackRubbered} />
       </div>
     </div>
   );

src/frontend/components/Weather/WeatherTrackRubbered/WeatherTrackRubbered.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Path } from '@phosphor-icons/react';
+interface Props {
+  trackRubbered: string | undefined;
+}
+
+export const WeatherTrackRubbered: React.FC<Props> = ({ trackRubbered }) => {
+  return (
+    <div className="bg-slate-800/70 p-2 rounded-sm">
+    <div className="flex flex-row items-center gap-6">
+      <span className="text-m text-gray-400 mr-1"><Path /></span>
+      <span className="text-sm">{trackRubbered ?? 'N/A'}</span>
+    </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,12 @@
+import { useSessionStore } from '@irdashies/context';
+import { useStore } from 'zustand';
+
+export const useTrackRubberedState = () => {
+  return useStore(
+    useSessionStore,
+    (state) =>
+      state.session?.SessionInfo?.Sessions?.find(
+        (session) => session.SessionNum === 0
+      )?.SessionTrackRubberState
+  );
+};