+ {/* Header */}
+
+
+
+
MQTT
+
+ {data.entities.length} Entit{data.entities.length === 1 ? "ät" : "äten"}
+
+
+
+ {data.connected ? (
+
+ ) : (
+
+ )}
+
+ {data.connected ? "Verbunden" : "Getrennt"}
+
+
+
+
+ {/* Category filter tabs */}
+ {categories.length > 1 && (
+
+
+ {categories.map((cat) => (
+
+ ))}
+
+ )}
+
+ {/* Entity list */}
+ {data.entities.length === 0 ? (
+
+
+
+ {data.connected
+ ? "Warte auf MQTT-Nachrichten..."
+ : "MQTT nicht konfiguriert"}
+
+
+ ) : (
+
+ {shown.map((entity) => (
+
+ ))}
+
+ )}
+
+ {/* Expand/collapse */}
+ {filtered.length > 8 && (
+
+ )}
+
+ );
+}
+
+function EntityRow({ entity }: { entity: MqttEntity }) {
+ const age = Math.round((Date.now() / 1000 - entity.timestamp));
+ const ageStr =
+ age < 60
+ ? `${age}s`
+ : age < 3600
+ ? `${Math.floor(age / 60)}m`
+ : `${Math.floor(age / 3600)}h`;
+
+ // Format value for display
+ const displayValue = formatValue(entity.value);
+ const isNumeric = typeof entity.value === "number";
+
+ return (
+