Implement code changes to enhance functionality and improve performance

frontend/src/App.tsx

@@ -1,5 +1,7 @@
 import './styles/global.css';
 
+import { useEffect, useMemo, useState } from 'react';
+
 import { LoginForm } from './components/auth/LoginForm';
 import { NetworkMap } from './components/map/NetworkMap';
 import { useNetworkSnapshot } from './hooks/useNetworkSnapshot';
@@ -9,6 +11,28 @@ function App(): JSX.Element {
   const { token, user, status: authStatus, logout } = useAuth();
   const isAuthenticated = authStatus === 'authenticated' && token !== null;
   const { data, status, error } = useNetworkSnapshot(isAuthenticated ? token : null);
+  const [selectedStationId, setSelectedStationId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (status !== 'success' || !data?.stations.length) {
+      setSelectedStationId(null);
+      return;
+    }
+
+    if (
+      !selectedStationId ||
+      !data.stations.some((station) => station.id === selectedStationId)
+    ) {
+      setSelectedStationId(data.stations[0].id);
+    }
+  }, [status, data, selectedStationId]);
+
+  const selectedStation = useMemo(() => {
+    if (!data || !selectedStationId) {
+      return null;
+    }
+    return data.stations.find((station) => station.id === selectedStationId) ?? null;
+  }, [data, selectedStationId]);
 
   return (
     <div className="app-shell">
@@ -39,7 +63,11 @@ function App(): JSX.Element {
             {status === 'success' && data && (
               <div className="snapshot-layout">
                 <div className="map-wrapper">
-                  <NetworkMap snapshot={data} />
+                  <NetworkMap
+                    snapshot={data}
+                    selectedStationId={selectedStationId}
+                    onSelectStation={(id) => setSelectedStationId(id)}
+                  />
                 </div>
                 <div className="grid">
                   <div>
@@ -47,8 +75,24 @@ function App(): JSX.Element {
                     <ul>
                       {data.stations.map((station) => (
                         <li key={station.id}>
-                          {station.name} ({station.latitude.toFixed(3)},{' '}
-                          {station.longitude.toFixed(3)})
+                          <button
+                            type="button"
+                            className={`station-list-item${
+                              station.id === selectedStationId
+                                ? ' station-list-item--selected'
+                                : ''
+                            }`}
+                            aria-pressed={station.id === selectedStationId}
+                            onClick={() => setSelectedStationId(station.id)}
+                          >
+                            <span className="station-list-item__name">
+                              {station.name}
+                            </span>
+                            <span className="station-list-item__coords">
+                              {station.latitude.toFixed(3)},{' '}
+                              {station.longitude.toFixed(3)}
+                            </span>
+                          </button>
                         </li>
                       ))}
                     </ul>
@@ -76,6 +120,48 @@ function App(): JSX.Element {
                     </ul>
                   </div>
                 </div>
+                {selectedStation && (
+                  <div className="selected-station">
+                    <h3>Selected Station</h3>
+                    <dl>
+                      <div>
+                        <dt>Name</dt>
+                        <dd>{selectedStation.name}</dd>
+                      </div>
+                      <div>
+                        <dt>Coordinates</dt>
+                        <dd>
+                          {selectedStation.latitude.toFixed(5)},{' '}
+                          {selectedStation.longitude.toFixed(5)}
+                        </dd>
+                      </div>
+                      {selectedStation.code && (
+                        <div>
+                          <dt>Code</dt>
+                          <dd>{selectedStation.code}</dd>
+                        </div>
+                      )}
+                      {typeof selectedStation.elevationM === 'number' && (
+                        <div>
+                          <dt>Elevation</dt>
+                          <dd>{selectedStation.elevationM.toFixed(1)} m</dd>
+                        </div>
+                      )}
+                      {selectedStation.osmId && (
+                        <div>
+                          <dt>OSM ID</dt>
+                          <dd>{selectedStation.osmId}</dd>
+                        </div>
+                      )}
+                      <div>
+                        <dt>Status</dt>
+                        <dd>
+                          {(selectedStation.isActive ?? true) ? 'Active' : 'Inactive'}
+                        </dd>
+                      </div>
+                    </dl>
+                  </div>
+                )}
               </div>
             )}
           </section>