feat: settings (PIN change, city selector, logout), greeting, screensaver, tab animations, HA status

components/TopBar.tsx

@@ -21,6 +21,7 @@ interface SensorData {
 interface TopBarProps {
   weather: WeatherData | null
   sensors: SensorData | null
+  haConnected?: boolean
 }
 
 function getWeatherIcon(desc: string): string {
@@ -57,7 +58,7 @@ function getWindDesc(ms: number): string {
   return 'Шторм'
 }
 
-export default function TopBar({ weather, sensors }: TopBarProps) {
+export default function TopBar({ weather, sensors, haConnected }: TopBarProps) {
   const [time, setTime] = useState(() => new Date())
   const [showModal, setShowModal] = useState(false)
 
@@ -102,6 +103,15 @@ export default function TopBar({ weather, sensors }: TopBarProps) {
 
         {/* Right: sensors + weather */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          {/* HA status */}
+          <div title={haConnected ? 'Home Assistant подключён' : 'Home Assistant недоступен'} style={{
+            width: 10, height: 10, borderRadius: '50%',
+            background: haConnected ? '#34d399' : '#f87171',
+            boxShadow: haConnected ? '0 0 8px rgba(52,211,153,0.5)' : '0 0 8px rgba(248,113,113,0.5)',
+            transition: 'all 0.5s ease',
+            flexShrink: 0,
+          }} />
+
           {sensors && (
             <div style={{
               display: 'flex', alignItems: 'center', gap: 4,