fix: DeviceCard sync initialState from HA on first load

components/DeviceCard.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 
 interface DeviceCardProps {
   id: string
@@ -14,21 +14,23 @@ interface DeviceCardProps {
 }
 
 export default function DeviceCard({
-  id,
-  name,
-  icon,
-  entityId,
-  domain,
-  initialState,
-  isMock = false,
-  extraInfo,
+  id, name, icon, entityId, domain, initialState, isMock = false, extraInfo,
 }: DeviceCardProps) {
   const [isOn, setIsOn] = useState(initialState)
+  const [synced, setSynced] = useState(false)
   const [loading, setLoading] = useState(false)
 
+  // Sync from HA only once — when real data first arrives (not mock default)
+  useEffect(() => {
+    if (!synced && !isMock) {
+      setIsOn(initialState)
+      setSynced(true)
+    }
+  }, [initialState, isMock, synced])
+
   const toggle = async () => {
     const next = !isOn
-    setIsOn(next) // optimistic update
+    setIsOn(next) // optimistic
 
     if (!isMock && entityId && domain) {
       setLoading(true)
@@ -43,7 +45,6 @@ export default function DeviceCard({
           }),
         })
       } catch {
-        // revert on error
         setIsOn(!next)
       } finally {
         setLoading(false)
@@ -51,87 +52,66 @@ export default function DeviceCard({
     }
   }
 
+  const accent = '#00d4ff'
+
   return (
-    <div
-      style={{
-        background: isOn ? 'rgba(0,212,255,0.06)' : 'var(--card-bg)',
-        border: isOn ? '1px solid rgba(0,212,255,0.2)' : '1px solid var(--card-border)',
-        borderRadius: 18,
-        padding: '16px',
-        minHeight: 140,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        transition: 'all 0.25s ease',
-      }}
-    >
-      {/* Top row: icon + toggle */}
+    <div style={{
+      background: isOn ? 'rgba(0,212,255,0.07)' : 'rgba(255,255,255,0.04)',
+      border: isOn ? '1px solid rgba(0,212,255,0.25)' : '1px solid rgba(255,255,255,0.08)',
+      borderRadius: 18,
+      padding: '18px 16px 16px',
+      minHeight: 140,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      transition: 'background 0.25s ease, border-color 0.25s ease',
+      boxShadow: isOn ? '0 0 24px rgba(0,212,255,0.06)' : 'none',
+    }}>
+      {/* Top: icon + toggle */}
       <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
-        <div
-          style={{
-            width: 44,
-            height: 44,
-            borderRadius: 12,
-            background: isOn ? 'rgba(0,212,255,0.15)' : 'rgba(255,255,255,0.06)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: 22,
-            transition: 'all 0.25s ease',
-          }}
-        >
+        <div style={{
+          width: 42, height: 42, borderRadius: 12,
+          background: isOn ? 'rgba(0,212,255,0.15)' : 'rgba(255,255,255,0.06)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontSize: 20,
+          transition: 'background 0.25s ease',
+          boxShadow: isOn ? '0 0 16px rgba(0,212,255,0.25)' : 'none',
+        }}>
           {icon}
         </div>
 
-        {/* Toggle button */}
         <button
           onClick={toggle}
           disabled={loading}
           style={{
-            width: 50,
-            height: 28,
-            borderRadius: 14,
-            background: isOn
-              ? 'linear-gradient(90deg, #00b4d8, #00d4ff)'
-              : 'rgba(255,255,255,0.1)',
-            position: 'relative',
-            transition: 'background 0.3s ease',
-            flexShrink: 0,
-            touchAction: 'manipulation',
+            width: 52, height: 30, borderRadius: 15,
+            background: isOn ? `linear-gradient(90deg, #00b4d8, #00d4ff)` : 'rgba(255,255,255,0.1)',
+            position: 'relative', border: 'none', cursor: 'pointer',
+            flexShrink: 0, touchAction: 'manipulation',
             WebkitTapHighlightColor: 'transparent',
+            transition: 'background 0.25s ease',
             opacity: loading ? 0.6 : 1,
+            boxShadow: isOn ? '0 0 10px rgba(0,212,255,0.4)' : 'none',
           }}
         >
-          <span
-            style={{
-              position: 'absolute',
-              top: 3,
-              left: isOn ? 25 : 3,
-              width: 22,
-              height: 22,
-              borderRadius: '50%',
-              background: '#fff',
-              boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
-              transition: 'left 0.25s ease',
-            }}
-          />
+          <span style={{
+            position: 'absolute', top: 4,
+            left: isOn ? 26 : 4,
+            width: 22, height: 22, borderRadius: '50%',
+            background: '#fff',
+            boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
+            transition: 'left 0.22s ease',
+            display: 'block',
+          }} />
         </button>
       </div>
 
       {/* Bottom: name + status */}
       <div>
-        <div
-          style={{
-            fontSize: 14,
-            fontWeight: 600,
-            color: 'var(--text-primary)',
-            marginBottom: 3,
-            lineHeight: 1.2,
-          }}
-        >
+        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3 }}>
           {name}
         </div>
-        <div style={{ fontSize: 12, color: isOn ? 'var(--accent)' : 'var(--text-secondary)' }}>
+        <div style={{ fontSize: 12, color: isOn ? accent : 'var(--text-secondary)', marginTop: 3 }}>
           {isOn ? 'Включён' : 'Выключен'}
           {extraInfo && isOn ? ` · ${extraInfo}` : ''}
         </div>