From 2ee45edea96bf6d4a989ec5d89e9c4a17614c1f7 Mon Sep 17 00:00:00 2001
From: eireland <eireland@concord.org>
Date: Mon, 29 Jan 2024 13:14:43 -0800
Subject: [PATCH 1/2] Adds hover state to station selection list

---
 src/components/location-picker.scss |  3 +++
 src/components/location-picker.tsx  | 12 +++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/location-picker.scss b/src/components/location-picker.scss
index 8369a43..c0b72ac 100644
--- a/src/components/location-picker.scss
+++ b/src/components/location-picker.scss
@@ -93,6 +93,9 @@
             color: $teal-dark-75;
             min-width: 120px;
           }
+          &.station-candidate {
+            background-color: #ddeff1;
+          }
           &.selected-station {
             background-color: $teal-medium;
           }
diff --git a/src/components/location-picker.tsx b/src/components/location-picker.tsx
index c944da0..9c5c6a5 100644
--- a/src/components/location-picker.tsx
+++ b/src/components/location-picker.tsx
@@ -22,6 +22,7 @@ export const LocationPicker = () => {
   const [stationPossibilities, setStationPossibilities] = useState<IStation[]>([]);
   const [showStationSelectionList, setShowStationSelectionList] = useState(false);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [hoveredStationIndex, setStationHoveredIndex] = useState<number | null>(null);
   const [arrowedIndex, setArrowedIndex] = useState<number>(-1);
   const [distanceWidth, setDistanceWidth] = useState<number>(0);
   const locationDivRef = useRef<HTMLDivElement>(null);
@@ -150,7 +151,7 @@ export const LocationPicker = () => {
       draft.weatherStation = station;
     });
     setShowStationSelectionList(false);
-    setHoveredIndex(null);
+    setStationHoveredIndex(null);
     setArrowedIndex(-1);
   };
 
@@ -195,6 +196,10 @@ export const LocationPicker = () => {
     setHoveredIndex(index);
   };
 
+  const handleStationHover = (index: number | null) => {
+    setStationHoveredIndex(index);
+  };
+
   const handleLocationInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     const target = e.target;
     if (target.value !== "") {
@@ -314,8 +319,9 @@ export const LocationPicker = () => {
                   const stationDistanceText = units === "standard" ? convertDistanceToStandard(station.distance) : station.distance;
                   return (
                     <li key={`${station}-${idx}`} data-ix={`${idx}`} value={station.station.ICAO}
-                        className={classnames("station-selection", {"selected-station": station.station.name === state.weatherStation?.name})}
-                        onMouseOver={()=>handleLocationHover(idx)} onClick={(e)=>handleStationSelection(e)} onKeyDown={(e)=>handleStationSelectionKeyDown(e,idx)}>
+                        className={classnames("station-selection", {"station-candidate": hoveredStationIndex === idx},
+                                    {"selected-station": station.station.name === state.weatherStation?.name})}
+                        onMouseOver={()=>handleStationHover(idx)} onClick={(e)=>handleStationSelection(e)} onKeyDown={(e)=>handleStationSelectionKeyDown(e,idx)}>
                       <span className="station-distance" ref={idx === 0 ? firstStationListedRef : null} style={{width: distanceWidth}}>
                         {stationDistanceText.toFixed(1)} {unitDistanceText} {idx === 0 && `from ${state.location?.name}`}
                       </span>

From 2b5a3e75efcd97b10d9d96b89161c807840b9814 Mon Sep 17 00:00:00 2001
From: eireland <eireland@concord.org>
Date: Mon, 29 Jan 2024 19:14:20 -0800
Subject: [PATCH 2/2] removes selected state when hovering in station selection

---
 src/components/location-picker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/location-picker.tsx b/src/components/location-picker.tsx
index 9c5c6a5..e85dfa0 100644
--- a/src/components/location-picker.tsx
+++ b/src/components/location-picker.tsx
@@ -320,7 +320,7 @@ export const LocationPicker = () => {
                   return (
                     <li key={`${station}-${idx}`} data-ix={`${idx}`} value={station.station.ICAO}
                         className={classnames("station-selection", {"station-candidate": hoveredStationIndex === idx},
-                                    {"selected-station": station.station.name === state.weatherStation?.name})}
+                                    {"selected-station": (station.station.name === state.weatherStation?.name && hoveredStationIndex === null)})}
                         onMouseOver={()=>handleStationHover(idx)} onClick={(e)=>handleStationSelection(e)} onKeyDown={(e)=>handleStationSelectionKeyDown(e,idx)}>
                       <span className="station-distance" ref={idx === 0 ? firstStationListedRef : null} style={{width: distanceWidth}}>
                         {stationDistanceText.toFixed(1)} {unitDistanceText} {idx === 0 && `from ${state.location?.name}`}