From 3239a8b89bec9d0adaac02ce39718c3bfcebd0a8 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Fri, 12 Dec 2025 19:13:00 -0800
Subject: [PATCH] ui: redesign room cards - sensor data prominent

- Temp/humidity now large and center with colored icons
- Size and capacity compressed to header subtitle
- Batch count with status indicator dot
- Cleaner visual hierarchy
---
 frontend/src/pages/RoomsPage.tsx | 66 +++++++++++++++++---------------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/frontend/src/pages/RoomsPage.tsx b/frontend/src/pages/RoomsPage.tsx
index 80e0fbb..5eca520 100644
--- a/frontend/src/pages/RoomsPage.tsx
+++ b/frontend/src/pages/RoomsPage.tsx
@@ -88,48 +88,52 @@ export default function RoomsPage() {
                             key={room.id}
                             className="card card-interactive p-4 group"
                         >
+                            {/* Header: Name + Type Badge */}
                             <div className="flex justify-between items-start mb-4">
-                                <h3 className="font-medium text-primary text-sm">
-                                    {room.name?.replace('[DEMO] ', '')}
-                                </h3>
+                                <div>
+                                    <h3 className="font-medium text-primary text-sm">
+                                        {room.name?.replace('[DEMO] ', '')}
+                                    </h3>
+                                    <span className="text-xs text-tertiary">{room.sqft?.toLocaleString()} sqft • {room.capacity || '—'} cap</span>
+                                </div>
                                 <span className={getBadgeClass(room.type)}>
                                     {room.type}
                                 </span>
                             </div>
 
-                            <div className="space-y-2 text-sm">
-                                <div className="flex justify-between">
-                                    <span className="text-tertiary">Size</span>
-                                    <span className="text-primary font-medium">
-                                        {room.sqft?.toLocaleString()} sqft
-                                    </span>
+                            {/* Primary: Sensor Data - Large & Prominent */}
+                            <div className="flex items-center justify-around py-4 border-y border-subtle mb-4">
+                                <div className="text-center">
+                                    <div className="flex items-center justify-center gap-1 text-2xl font-semibold text-primary">
+                                        <Thermometer size={18} className="text-red-500" />
+                                        {room.targetTemp || '—'}
+                                        <span className="text-sm text-tertiary font-normal">°F</span>
+                                    </div>
+                                    <span className="text-[10px] text-tertiary uppercase tracking-wide">Temp</span>
                                 </div>
-                                <div className="flex justify-between">
-                                    <span className="text-tertiary">Capacity</span>
-                                    <span className="text-primary font-medium">
-                                        {room.capacity || '—'} plants
-                                    </span>
-                                </div>
-                                <div className="flex justify-between">
-                                    <span className="text-tertiary">Active Batches</span>
-                                    <span className="text-accent font-medium">
-                                        {room.batches?.length || 0}
-                                    </span>
+                                <div className="w-px h-10 bg-subtle" />
+                                <div className="text-center">
+                                    <div className="flex items-center justify-center gap-1 text-2xl font-semibold text-primary">
+                                        <Droplets size={18} className="text-blue-500" />
+                                        {room.targetHumidity || '—'}
+                                        <span className="text-sm text-tertiary font-normal">%</span>
+                                    </div>
+                                    <span className="text-[10px] text-tertiary uppercase tracking-wide">Humidity</span>
                                 </div>
                             </div>
 
-                            {room.targetTemp && (
-                                <div className="mt-4 pt-3 border-t border-subtle flex gap-4 text-xs text-tertiary">
-                                    <div className="flex items-center gap-1">
-                                        <Thermometer size={12} />
-                                        {room.targetTemp}°F
-                                    </div>
-                                    <div className="flex items-center gap-1">
-                                        <Droplets size={12} />
-                                        {room.targetHumidity}%
-                                    </div>
+                            {/* Secondary: Batch Count */}
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                    <div className={`w-2 h-2 rounded-full ${room.batches?.length > 0 ? 'bg-success' : 'bg-subtle'}`} />
+                                    <span className="text-sm font-medium text-primary">
+                                        {room.batches?.length || 0} {room.batches?.length === 1 ? 'batch' : 'batches'}
+                                    </span>
                                 </div>
-                            )}
+                                {room.batches?.length > 0 && (
+                                    <span className="text-xs text-accent">View →</span>
+                                )}
+                            </div>
                         </div>
                     ))}
                 </div>