From 03c35e06ce1a01f093b8ff5eb61bb2a96d7dee41 Mon Sep 17 00:00:00 2001
From: Gabe <gabe@zimbri.cc>
Date: Mon, 27 Jul 2026 15:51:16 -0500
Subject: [PATCH] fix(printers): order the fan badges to match the physical
 layout

Place the left auxiliary fan badge before the right-hand auxiliary badge so
the row reads part cooling -> left aux -> aux -> chamber/exhaust, matching
the printer's physical left-to-right arrangement.

Adds a test asserting the rendered badge order.
---
 .../src/__tests__/pages/PrintersPage.test.tsx | 22 +++++++++++++++++++
 frontend/src/pages/PrintersPage.tsx           | 18 ++++++++-------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/frontend/src/__tests__/pages/PrintersPage.test.tsx b/frontend/src/__tests__/pages/PrintersPage.test.tsx
index 216de553e..215fd93f4 100644
--- a/frontend/src/__tests__/pages/PrintersPage.test.tsx
+++ b/frontend/src/__tests__/pages/PrintersPage.test.tsx
@@ -373,6 +373,28 @@ describe('PrintersPage', () => {
       expect(screen.queryByTitle('Left Auxiliary Fan')).not.toBeInTheDocument();
     });
 
+    it('orders the fan badges left-to-right: part, left aux, aux, exhaust', async () => {
+      // The two aux badges should read in the same order as the physical
+      // hardware, so the left fan sits before the right one.
+      renderWithStatus(
+        { ...mockPrinters[0], model: 'P2S' },
+        { ...statusWithFans, left_aux_fan_speed: 80, exhaust_fan_present: true },
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTitle('Left Auxiliary Fan')).toBeInTheDocument();
+      });
+
+      const order = ['Part Cooling Fan', 'Left Auxiliary Fan', 'Auxiliary Fan', 'Exhaust'].map(
+        (title) => screen.getByTitle(title),
+      );
+      for (let i = 1; i < order.length; i++) {
+        // Node.compareDocumentPosition returns FOLLOWING (4) when the argument
+        // comes after the reference node in document order.
+        expect(order[i - 1].compareDocumentPosition(order[i])).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+      }
+    });
+
     it('shows left aux fan badge when the accessory is installed (P2S)', async () => {
       renderWithStatus(
         { ...mockPrinters[0], model: 'P2S' },
diff --git a/frontend/src/pages/PrintersPage.tsx b/frontend/src/pages/PrintersPage.tsx
index 229e52b06..3deb4e39c 100644
--- a/frontend/src/pages/PrintersPage.tsx
+++ b/frontend/src/pages/PrintersPage.tsx
@@ -3923,16 +3923,11 @@ function PrinterCard({
                   Icon: Fan,
                   activeClass: 'text-cyan-600 dark:text-cyan-400',
                 },
-                {
-                  key: 'aux',
-                  label: t('printers.fans.auxiliary'),
-                  value: status.big_fan1_speed ?? 0,
-                  Icon: Wind,
-                  activeClass: 'text-blue-600 dark:text-blue-400',
-                },
                 // Left auxiliary part cooling fan (optional P2S/X2D accessory).
                 // Only reported (non-null) when the firmware lists airduct part
-                // id 10, i.e. when the fan is physically installed.
+                // id 10, i.e. when the fan is physically installed. Placed
+                // before the right-hand auxiliary fan so the two aux badges read
+                // left-to-right in the same order as the physical hardware.
                 ...(status.left_aux_fan_speed != null
                   ? [
                       {
@@ -3944,6 +3939,13 @@ function PrinterCard({
                       },
                     ]
                   : []),
+                {
+                  key: 'aux',
+                  label: t('printers.fans.auxiliary'),
+                  value: status.big_fan1_speed ?? 0,
+                  Icon: Wind,
+                  activeClass: 'text-blue-600 dark:text-blue-400',
+                },
                 ...(showChamberFan
                   ? [
                       {