Show sub-components as indented rows in device list

templates/device_list.html

@@ -69,9 +69,6 @@
             data-name="{{ d.name|lower }}">
           <td data-label="Device">
             <a href="{{ url_for('device_detail', device_id=d.id) }}"><strong>{{ d.name }}</strong></a>
-            {% if d.has_children() %}
-            <br><small class="text-muted">{{ d.children|length }} sub-component{{ 's' if d.children|length != 1 }}</small>
-            {% endif %}
           </td>
           <td data-label="Type">{{ d.device_type or '—' }}</td>
           <td data-label="Size">{{ d.battery_size or '—' }}</td>
@@ -110,6 +107,46 @@
             </form>
           </td>
         </tr>
+        {% for child in d.children %}
+        {% set c_installed = child.installed_count() %}
+        {% if c_installed == 0 or child.battery_slots == 0 %}{% set c_fill = 'empty' %}
+        {% elif c_installed >= child.battery_slots %}{% set c_fill = 'full' %}
+        {% else %}{% set c_fill = 'partial' %}{% endif %}
+        <tr data-type="{{ d.device_type or '' }}"
+            data-battery-size="{{ child.battery_size or '' }}"
+            data-location="{{ d.location or '' }}"
+            data-fill="{{ c_fill }}"
+            data-name="{{ d.name|lower }} {{ child.name|lower }}">
+          <td data-label="Device" style="padding-left:1.75rem;">
+            <span class="text-muted">↳</span>
+            <a href="{{ url_for('device_detail', device_id=child.id) }}">{{ child.name }}</a>
+          </td>
+          <td data-label="Type" class="text-muted">{{ d.device_type or '—' }}</td>
+          <td data-label="Size">{{ child.battery_size or '—' }}</td>
+          <td data-label="Location" class="text-muted">{{ d.location or '—' }}</td>
+          <td data-label="Slots">{{ child.battery_slots }}</td>
+          <td data-label="Installed">
+            {{ c_installed }} / {{ child.battery_slots }}
+            {% if child.battery_slots > 0 and c_installed >= child.battery_slots %}
+              <span class="badge badge-retired">Full</span>
+            {% endif %}
+          </td>
+          <td data-label="Brands">
+            {% set c_brands = child.installed_brands() %}
+            {% if c_brands %}
+              {{ c_brands|join(', ') }}
+              {% if child.has_mixed_brands() %}
+                <span class="badge badge-warning">⚠ mixed</span>
+              {% endif %}
+            {% else %}
+              <span class="text-muted">—</span>
+            {% endif %}
+          </td>
+          <td data-label="Actions" style="white-space:nowrap;">
+            <a class="btn btn-sm btn-secondary" href="{{ url_for('device_detail', device_id=child.id) }}">View</a>
+          </td>
+        </tr>
+        {% endfor %}
         {% else %}
         <tr><td colspan="8" class="text-muted" style="text-align:center;padding:1rem;">No devices yet. <a href="{{ url_for('device_add') }}">Add one.</a></td></tr>
         {% endfor %}

tests/test_acceptance.py

@@ -1116,13 +1116,24 @@ def _setup_parent_with_two_children(client):
     }, follow_redirects=True)
 
 
-def test_device_list_hides_subcomponents(client):
+def test_device_list_nests_subcomponents(client):
     _setup_parent_with_two_children(client)
     resp = client.get("/device/")
     assert resp.status_code == 200
     assert b"Hub" in resp.data
-    assert b"Sensor A" not in resp.data
-    assert b"Sensor B" not in resp.data
+    # sub-components render as indented child rows under the parent
+    assert b"Sensor A" in resp.data
+    assert b"Sensor B" in resp.data
+    assert "↳".encode() in resp.data
+    # parent name is searchable on child rows
+    assert b'data-name="hub sensor a"' in resp.data
+
+
+def test_assign_page_shows_parent_prefix(client):
+    _setup_rc_car(client)
+    resp = client.get("/battery/1/assign")
+    assert resp.status_code == 200
+    assert b"RC Car Set /" in resp.data
 
 
 def test_subcomponent_type_location_null(client):