sort stations alphabetically

package-lock.json

@@ -14,6 +14,7 @@
         "@honeybadger-io/js": "^6.10.0",
         "astro": "^4.15.11",
         "gsap": "^3.12.5",
+        "lodash-es": "^4.17.21",
         "svelte": "^4.2.19",
         "tailwindcss": "^3.4.13",
         "typescript": "^5.6.2"
@@ -3769,6 +3770,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
     "node_modules/log-symbols": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-6.0.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "@honeybadger-io/js": "^6.10.0",
     "astro": "^4.15.11",
     "gsap": "^3.12.5",
+    "lodash-es": "^4.17.21",
     "svelte": "^4.2.19",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2"

src/components/MbtaLine.svelte

@@ -5,7 +5,7 @@
   export let compact = false
 </script>
 
-<span style="background-color: #{agency.routes[name].route_color}" class="text-white h-5 w-12 inline-flex items-center justify-center text-lg font-bold rounded-full relative {compact && "h-7 w-7"}" class:mr-4={!compact}>
+<span style:background-color={"#" + agency.routes[name].route_color} style:color={"#" + agency.routes[name].route_text_color || "black"} class="h-5 w-12 inline-flex items-center justify-center text-lg font-bold rounded-full relative {compact && "h-7 w-7"}" class:mr-4={!compact}>
   {#if name == "Red"}
     RL
   {:else if name == "Mattapan"}
@@ -26,5 +26,7 @@
       GL
       <span class="ring-2 ring-white rounded-full absolute -right-3 top-0 bg-inherit h-5 w-5 flex items-center justify-center">{name.split("-")[1]}</span>
     {/if}
+  {:else}
+    {name}
   {/if}
 </span>

src/components/RouteBuilder.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte";
   import Route from "./Route.svelte";
+  import { sortBy } from "lodash-es/collection"
 
   export let route = []
   export let errors = []
@@ -55,7 +56,7 @@
       <select bind:value={selectedStation}>
         <option value="">Select a station...</option>
 
-        {#each Object.values(stations) as station (station.stop_id)}
+        {#each sortBy(Object.values(stations), "stop_name") as station (station.stop_id)}
           <option value={station.stop_id}>{station.stop_name}</option>
         {/each}
       </select>