Show trains in border area in grey

[fm-mf]

In order to make it easier to distinguish which trains can be driven and which are in the border area, show the avatar of trains in border area in grey colour.

Summary by CodeRabbit

• New Features
  • Train markers in border station areas now display with distinct visual styling, including updated border color and contrast adjustments, making them easily identifiable on the map.

[coderabbitai]

📝 Walkthrough

Walkthrough

TrainMarker component now conditionally applies an in-border-area CSS class to train icons based on whether they are located in a border station area. A corresponding CSS rule defines the visual styling for marked-border trains.

Changes

Cohort / File(s)	Summary
Train Border Area Styling packages/map/components/Markers/TrainMarker.tsx, packages/map/styles/globals.css	Conditional class binding added to TrainMarker component to mark trains in border station areas; new CSS rule applies distinct styling (adjusted border color and contrast filter) to visually differentiate bordered train markers.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🚂 A hop and a skip through the border so fine,
Where trains now glow with a contrasted shine—
Gray borders gleam when stations align,
Our whisker-blessed code makes the map's edge divine! 🐰✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: applying grey styling to train markers in border areas to distinguish them visually.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/map/components/Markers/TrainMarker.tsx (1)

44-49: Optional: simplify with a ternary template string.

The array + spread + join(" ") works, but a direct ternary is a little more idiomatic here and avoids the intermediate array allocation on every render.

♻️ Suggested simplification

-	const borderAreaClass = train.TrainData.InBorderStationArea ? ["in-border-area"] : [];
 	const icon = L.icon({
 		iconUrl: train.TrainData.ControlledBySteamID && avatar ? avatar : botIcon,
 		iconSize: [24, 24],
 		popupAnchor: [0, -12],
-		className: ["steam-avatar", ...borderAreaClass].join(" "),
+		className: `steam-avatar${train.TrainData.InBorderStationArea ? " in-border-area" : ""}`,
 	});

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/map/components/Markers/TrainMarker.tsx` around lines 44 - 49, The
current construction builds borderAreaClass array and then spreads/join to form
the className for the L.icon, which is unnecessary; replace the intermediate
borderAreaClass variable and the ["steam-avatar", ...borderAreaClass].join(" ")
usage with a single ternary/template expression so className becomes something
like `"steam-avatar" + (train.TrainData.InBorderStationArea ? " in-border-area"
: "")`; update the L.icon call (symbol: icon) to use that inline ternary and
remove the borderAreaClass variable to simplify rendering while keeping the same
conditional inclusion, and retain the existing selection of iconUrl
(train.TrainData.ControlledBySteamID && avatar ? avatar : botIcon).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/map/components/Markers/TrainMarker.tsx`:
- Around line 44-49: The current construction builds borderAreaClass array and
then spreads/join to form the className for the L.icon, which is unnecessary;
replace the intermediate borderAreaClass variable and the ["steam-avatar",
...borderAreaClass].join(" ") usage with a single ternary/template expression so
className becomes something like `"steam-avatar" +
(train.TrainData.InBorderStationArea ? " in-border-area" : "")`; update the
L.icon call (symbol: icon) to use that inline ternary and remove the
borderAreaClass variable to simplify rendering while keeping the same
conditional inclusion, and retain the existing selection of iconUrl
(train.TrainData.ControlledBySteamID && avatar ? avatar : botIcon).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4b93da94-eebb-4cfb-8a22-474dd15f624a

📥 Commits

Reviewing files that changed from the base of the PR and between 41068d7 and 4d3fb7c.

📒 Files selected for processing (2)

• packages/map/components/Markers/TrainMarker.tsx
• packages/map/styles/globals.css