redesign: THERMAL warm brutalist dashboard UI
Complete visual redesign of all dashboard components with a warm brutalist command terminal aesthetic. Features editorial section numbering, IBM Plex typography, sharp zero-radius cards with colored accent strips, film grain overlay, and data-glow effects. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam
parent
f6a42c2dd2
commit
e94a7706ab
12 changed files with 641 additions and 548 deletions
|
|
@ -26,25 +26,26 @@ export default function MqttCard({ data }: Props) {
|
|||
const shown = expanded ? filtered : filtered.slice(0, 8);
|
||||
|
||||
return (
|
||||
<div className="glass-card p-5">
|
||||
<div className="deck-card p-5 animate-fade-in" data-accent="iris">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Radio className="w-4 h-4 text-violet-400" />
|
||||
<h3 className="text-sm font-semibold text-white">MQTT</h3>
|
||||
<span className="text-[10px] text-slate-500 font-mono">
|
||||
{data.entities.length} Entit{data.entities.length === 1 ? "ät" : "äten"}
|
||||
<div className="flex items-center gap-3">
|
||||
<Radio className="w-4 h-4 text-iris" />
|
||||
<h3 className="text-sm font-semibold text-base-900">MQTT</h3>
|
||||
<span className="tag border-iris/30 text-iris bg-iris/5">
|
||||
{data.entities.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{data.connected ? (
|
||||
<Zap className="w-3.5 h-3.5 text-violet-400" />
|
||||
<Zap className="w-3.5 h-3.5 text-iris" />
|
||||
) : (
|
||||
<ZapOff className="w-3.5 h-3.5 text-slate-600" />
|
||||
<ZapOff className="w-3.5 h-3.5 text-base-500" />
|
||||
)}
|
||||
<span
|
||||
className={`text-[10px] font-medium ${
|
||||
data.connected ? "text-violet-400" : "text-slate-600"
|
||||
className={`text-[10px] font-mono font-medium ${
|
||||
data.connected ? "text-mint" : "text-cherry"
|
||||
}`}
|
||||
>
|
||||
{data.connected ? "Verbunden" : "Getrennt"}
|
||||
|
|
@ -54,14 +55,10 @@ export default function MqttCard({ data }: Props) {
|
|||
|
||||
{/* Category filter tabs */}
|
||||
{categories.length > 1 && (
|
||||
<div className="flex gap-1.5 mb-3 flex-wrap">
|
||||
<div className="flex gap-1 mb-4 flex-wrap">
|
||||
<button
|
||||
onClick={() => setFilter(null)}
|
||||
className={`text-[10px] px-2 py-0.5 rounded-full border transition-colors ${
|
||||
filter === null
|
||||
? "bg-violet-500/20 border-violet-500/30 text-violet-300"
|
||||
: "bg-white/5 border-white/[0.06] text-slate-500 hover:text-slate-300"
|
||||
}`}
|
||||
className={`tab-btn ${filter === null ? "active" : ""}`}
|
||||
>
|
||||
Alle
|
||||
</button>
|
||||
|
|
@ -69,14 +66,16 @@ export default function MqttCard({ data }: Props) {
|
|||
<button
|
||||
key={cat}
|
||||
onClick={() => setFilter(filter === cat ? null : cat)}
|
||||
className={`text-[10px] px-2 py-0.5 rounded-full border transition-colors ${
|
||||
filter === cat
|
||||
? "bg-violet-500/20 border-violet-500/30 text-violet-300"
|
||||
: "bg-white/5 border-white/[0.06] text-slate-500 hover:text-slate-300"
|
||||
}`}
|
||||
className={`tab-btn ${filter === cat ? "active" : ""} flex items-center gap-1.5`}
|
||||
>
|
||||
{cat}
|
||||
<span className="ml-1 opacity-50">{grouped[cat].length}</span>
|
||||
<span
|
||||
className={`text-[10px] font-bold ${
|
||||
filter === cat ? "text-gold" : "text-base-500"
|
||||
}`}
|
||||
>
|
||||
{grouped[cat].length}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -84,16 +83,16 @@ export default function MqttCard({ data }: Props) {
|
|||
|
||||
{/* Entity list */}
|
||||
{data.entities.length === 0 ? (
|
||||
<div className="text-center py-6">
|
||||
<Radio className="w-8 h-8 text-slate-700 mx-auto mb-2" />
|
||||
<p className="text-xs text-slate-600">
|
||||
<div className="flex flex-col items-center justify-center py-8 text-base-500">
|
||||
<Radio className="w-8 h-8 mb-2 opacity-20" />
|
||||
<p className="text-xs font-mono">
|
||||
{data.connected
|
||||
? "Warte auf MQTT-Nachrichten..."
|
||||
: "MQTT nicht konfiguriert"}
|
||||
? "Warte auf Nachrichten..."
|
||||
: "Nicht konfiguriert"}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
<div className="space-y-px max-h-80 overflow-y-auto">
|
||||
{shown.map((entity) => (
|
||||
<EntityRow key={entity.topic} entity={entity} />
|
||||
))}
|
||||
|
|
@ -104,7 +103,7 @@ export default function MqttCard({ data }: Props) {
|
|||
{filtered.length > 8 && (
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="mt-3 w-full flex items-center justify-center gap-1 text-[10px] text-slate-500 hover:text-slate-300 transition-colors"
|
||||
className="mt-3 w-full flex items-center justify-center gap-1.5 text-[10px] font-mono text-base-500 hover:text-base-700 transition-colors py-1.5"
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
|
|
@ -124,7 +123,7 @@ export default function MqttCard({ data }: Props) {
|
|||
}
|
||||
|
||||
function EntityRow({ entity }: { entity: MqttEntity }) {
|
||||
const age = Math.round((Date.now() / 1000 - entity.timestamp));
|
||||
const age = Math.round(Date.now() / 1000 - entity.timestamp);
|
||||
const ageStr =
|
||||
age < 60
|
||||
? `${age}s`
|
||||
|
|
@ -132,32 +131,41 @@ function EntityRow({ entity }: { entity: MqttEntity }) {
|
|||
? `${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 (
|
||||
<div className="flex items-center justify-between gap-3 px-2.5 py-1.5 rounded-lg bg-white/[0.02] hover:bg-white/[0.04] transition-colors group">
|
||||
<div className="flex items-center justify-between gap-3 px-3 py-2 bg-base-100 border-l-2 border-base-300 hover:border-iris transition-colors group">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-[11px] text-slate-300 truncate">{entity.name}</p>
|
||||
<p className="text-[9px] text-slate-600 truncate font-mono">{entity.topic}</p>
|
||||
<p className="text-xs text-base-700 truncate">{entity.name}</p>
|
||||
<p className="text-[9px] text-base-500 truncate font-mono mt-0.5">
|
||||
{entity.topic}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<span
|
||||
className={`text-xs font-mono font-medium ${
|
||||
isNumeric ? "text-violet-300" : "text-slate-300"
|
||||
className={`text-sm font-mono font-medium ${
|
||||
isNumeric ? "text-iris data-value" : "text-base-800"
|
||||
}`}
|
||||
>
|
||||
{displayValue}
|
||||
</span>
|
||||
<span className="text-[9px] text-slate-700 w-6 text-right">{ageStr}</span>
|
||||
{(entity as any).unit && (
|
||||
<span className="text-[10px] font-mono text-base-500">
|
||||
{(entity as any).unit}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-[9px] font-mono text-base-500 w-6 text-right opacity-50">
|
||||
{ageStr}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatValue(value: any): string {
|
||||
if (value === null || value === undefined) return "—";
|
||||
if (value === null || value === undefined) return "\u2014";
|
||||
if (typeof value === "boolean") return value ? "ON" : "OFF";
|
||||
if (typeof value === "number") {
|
||||
return Number.isInteger(value) ? value.toString() : value.toFixed(1);
|
||||
|
|
@ -166,10 +174,9 @@ function formatValue(value: any): string {
|
|||
return JSON.stringify(value).slice(0, 40);
|
||||
}
|
||||
const str = String(value);
|
||||
// Common HA/MQTT states → nicer display
|
||||
if (str === "on" || str === "ON") return "ON";
|
||||
if (str === "off" || str === "OFF") return "OFF";
|
||||
if (str === "online") return "Online";
|
||||
if (str === "offline") return "Offline";
|
||||
return str.length > 30 ? str.slice(0, 30) + "…" : str;
|
||||
return str.length > 30 ? str.slice(0, 30) + "\u2026" : str;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue