feat: Add Lo-Fi system status widget

lib/dotcom_web/components/system_status/widget.ex

@@ -0,0 +1,35 @@
+defmodule DotcomWeb.SystemStatus.Widget do
+  use DotcomWeb, :live_view
+
+  def system_status_widget(assigns) do
+    ~H"""
+    <div class="flex flex-col gap-2">
+      <.status_entry
+        :for={status <- @statuses}
+        status={status}
+        route_id={status.route_id}
+        sub_routes={status.sub_routes}
+        statuses={status.statuses}
+      />
+    </div>
+    """
+  end
+
+  defp status_entry(assigns) do
+    ~H"""
+    <details class="border border-gray-lighter p-2">
+      <summary class="flex gap-2">
+        <span class="font-bold">
+          {@route_id}<span :for={sub_route <- @sub_routes}>{" "}{sub_route}</span>:
+        </span>
+        <span class="flex flex-col">
+          <div :for={status <- @statuses}>
+            {status.description}
+          </div>
+        </span>
+      </summary>
+      <pre>{inspect @status, pretty: true}</pre>
+    </details>
+    """
+  end
+end

lib/dotcom_web/live/system_status.ex

@@ -4,9 +4,12 @@ defmodule DotcomWeb.Live.SystemStatus do
   put it into the homepage (and elsewhere).
   """
 
+  use DotcomWeb, :live_view
+
+  import DotcomWeb.SystemStatus.Widget
+
   alias Dotcom.SystemStatus.Groups
   alias Dotcom.SystemStatus
-  use DotcomWeb, :live_view
 
   def render(assigns) do
     alerts = SystemStatus.subway_alerts_for_today()
@@ -17,24 +20,19 @@ defmodule DotcomWeb.Live.SystemStatus do
       |> assign(:alerts, alerts)
       |> assign(:statuses, statuses)
 
+    Widget
+
     ~H"""
     <h1>System Status</h1>
-    <div>
-      <.status :for={status <- @statuses} status={status} />
-    </div>
+    <.system_status_widget statuses={@statuses} />
+
     <h1>Alerts</h1>
     <div class="flex flex-col gap-2">
       <.alert :for={alert <- @alerts} alert={alert} />
     </div>
     """
   end
 
-  defp status(assigns) do
-    ~H"""
-    <pre>{inspect @status, pretty: true}</pre>
-    """
-  end
-
   defp alert(assigns) do
     ~H"""
     <details class="border border-gray-lighter p-2">