feat: full redesign - sidebar layout, room tabs, device cards

components/AddTaskModal.tsx

@@ -1,108 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { X, Plus } from "lucide-react";
-
-interface Props {
-  open: boolean;
-  onClose: () => void;
-  onAdd: (title: string) => void;
-}
-
-export default function AddTaskModal({ open, onClose, onAdd }: Props) {
-  const [title, setTitle] = useState("");
-
-  const handleSubmit = () => {
-    if (!title.trim()) return;
-    onAdd(title.trim());
-    setTitle("");
-    onClose();
-  };
-
-  return (
-    <AnimatePresence>
-      {open && (
-        <motion.div
-          className="modal-backdrop"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          onClick={onClose}
-        >
-          <motion.div
-            className="glass-card p-6 w-96 mx-4"
-            style={{ border: "1px solid rgba(99,102,241,0.3)" }}
-            initial={{ opacity: 0, scale: 0.85, y: 20 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.85, y: 20 }}
-            transition={{ type: "spring", stiffness: 400, damping: 30 }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center justify-between mb-5">
-              <h3
-                className="text-lg font-semibold"
-                style={{ color: "var(--text-primary)" }}
-              >
-                Новая задача
-              </h3>
-              <motion.button
-                onClick={onClose}
-                className="w-8 h-8 rounded-lg flex items-center justify-center"
-                style={{ background: "rgba(255,255,255,0.08)" }}
-                whileTap={{ scale: 0.9 }}
-              >
-                <X size={16} color="var(--text-secondary)" />
-              </motion.button>
-            </div>
-
-            <input
-              type="text"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
-              placeholder="Название задачи..."
-              autoFocus
-              className="w-full px-4 py-3 rounded-xl text-sm outline-none mb-4"
-              style={{
-                background: "rgba(255,255,255,0.06)",
-                border: "1px solid rgba(255,255,255,0.1)",
-                color: "var(--text-primary)",
-              }}
-            />
-
-            <div className="flex gap-3">
-              <motion.button
-                onClick={onClose}
-                className="flex-1 py-3 rounded-xl text-sm font-medium"
-                style={{
-                  background: "rgba(255,255,255,0.06)",
-                  color: "var(--text-secondary)",
-                  border: "1px solid rgba(255,255,255,0.08)",
-                }}
-                whileTap={{ scale: 0.95 }}
-              >
-                Отмена
-              </motion.button>
-              <motion.button
-                onClick={handleSubmit}
-                className="flex-1 py-3 rounded-xl text-sm font-semibold flex items-center justify-center gap-2"
-                style={{
-                  background:
-                    "linear-gradient(135deg, #6366f1, #8b5cf6)",
-                  color: "white",
-                  boxShadow: "0 0 20px rgba(99,102,241,0.4)",
-                }}
-                whileTap={{ scale: 0.95 }}
-                disabled={!title.trim()}
-              >
-                <Plus size={16} />
-                Добавить
-              </motion.button>
-            </div>
-          </motion.div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
-}

components/BottomNav.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { Home, Cpu, Settings } from "lucide-react";
-
-interface Props {
-  active: string;
-  onChange: (tab: string) => void;
-}
-
-const TABS = [
-  { id: "home", label: "Главная", icon: Home, color: "#6366f1" },
-  { id: "devices", label: "Устройства", icon: Cpu, color: "#3b82f6" },
-  { id: "settings", label: "Настройки", icon: Settings, color: "#10b981" },
-];
-
-export default function BottomNav({ active, onChange }: Props) {
-  return (
-    <motion.div
-      className="glass-card px-3 py-2 flex items-center justify-around no-select flex-shrink-0"
-      style={{ borderRadius: "20px" }}
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5 }}
-    >
-      {TABS.map((tab) => {
-        const Icon = tab.icon;
-        const isActive = active === tab.id;
-        return (
-          <motion.button
-            key={tab.id}
-            onClick={() => onChange(tab.id)}
-            className="flex flex-col items-center gap-1.5 px-10 py-2 rounded-2xl relative"
-            whileTap={{ scale: 0.85 }}
-          >
-            {isActive && (
-              <motion.div
-                className="absolute inset-0 rounded-2xl"
-                style={{
-                  background: `${tab.color}15`,
-                  border: `1px solid ${tab.color}30`,
-                  boxShadow: `0 0 16px ${tab.color}20`,
-                }}
-                layoutId="navActive"
-                transition={{ type: "spring", stiffness: 450, damping: 30 }}
-              />
-            )}
-            <Icon size={22} color={isActive ? tab.color : "var(--text-secondary)"} strokeWidth={isActive ? 2 : 1.5} />
-            <span className="text-xs font-semibold" style={{ color: isActive ? tab.color : "var(--text-secondary)" }}>
-              {tab.label}
-            </span>
-          </motion.button>
-        );
-      })}
-    </motion.div>
-  );
-}

components/DeviceCard.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+import { useState } from 'react'
+
+interface DeviceCardProps {
+  id: string
+  name: string
+  icon: string
+  entityId?: string
+  domain?: string
+  initialState: boolean
+  isMock?: boolean
+  extraInfo?: string
+}
+
+export default function DeviceCard({
+  id,
+  name,
+  icon,
+  entityId,
+  domain,
+  initialState,
+  isMock = false,
+  extraInfo,
+}: DeviceCardProps) {
+  const [isOn, setIsOn] = useState(initialState)
+  const [loading, setLoading] = useState(false)
+
+  const toggle = async () => {
+    const next = !isOn
+    setIsOn(next) // optimistic update
+
+    if (!isMock && entityId && domain) {
+      setLoading(true)
+      try {
+        await fetch('/api/ha', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            domain,
+            service: next ? 'turn_on' : 'turn_off',
+            entity_id: entityId,
+          }),
+        })
+      } catch {
+        // revert on error
+        setIsOn(!next)
+      } finally {
+        setLoading(false)
+      }
+    }
+  }
+
+  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={{ 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',
+          }}
+        >
+          {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',
+            WebkitTapHighlightColor: 'transparent',
+            opacity: loading ? 0.6 : 1,
+          }}
+        >
+          <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',
+            }}
+          />
+        </button>
+      </div>
+
+      {/* Bottom: name + status */}
+      <div>
+        <div
+          style={{
+            fontSize: 14,
+            fontWeight: 600,
+            color: 'var(--text-primary)',
+            marginBottom: 3,
+            lineHeight: 1.2,
+          }}
+        >
+          {name}
+        </div>
+        <div style={{ fontSize: 12, color: isOn ? 'var(--accent)' : 'var(--text-secondary)' }}>
+          {isOn ? 'Включён' : 'Выключен'}
+          {extraInfo && isOn ? ` · ${extraInfo}` : ''}
+        </div>
+      </div>
+    </div>
+  )
+}

components/RoomTabs.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+interface Room {
+  id: string
+  name: string
+  emoji: string
+  deviceCount: number
+}
+
+interface RoomTabsProps {
+  rooms: Room[]
+  active: string
+  onChange: (id: string) => void
+}
+
+export default function RoomTabs({ rooms, active, onChange }: RoomTabsProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 10,
+        padding: '12px 20px',
+        overflowX: 'auto',
+        flexShrink: 0,
+        WebkitOverflowScrolling: 'touch' as any,
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+      }}
+    >
+      {rooms.map(room => {
+        const isActive = active === room.id
+        return (
+          <button
+            key={room.id}
+            onClick={() => onChange(room.id)}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 2,
+              padding: '10px 18px',
+              borderRadius: 14,
+              background: isActive ? 'rgba(0,212,255,0.12)' : 'rgba(255,255,255,0.04)',
+              border: isActive ? '1px solid rgba(0,212,255,0.3)' : '1px solid rgba(255,255,255,0.06)',
+              minWidth: 90,
+              flexShrink: 0,
+              touchAction: 'manipulation',
+              WebkitTapHighlightColor: 'transparent',
+              transition: 'all 0.2s ease',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span style={{ fontSize: 18 }}>{room.emoji}</span>
+              <span
+                style={{
+                  fontSize: 14,
+                  fontWeight: isActive ? 600 : 400,
+                  color: isActive ? 'var(--accent)' : 'var(--text-primary)',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {room.name}
+              </span>
+            </div>
+            <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>
+              {room.deviceCount} {room.deviceCount === 1 ? 'устройство' : room.deviceCount >= 2 && room.deviceCount <= 4 ? 'устройства' : 'устройств'}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

components/RoomsRow.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-
-interface Room {
-  id: string;
-  emoji: string;
-  name: string;
-  deviceCount: number;
-  color: string;
-}
-
-const ROOMS: Room[] = [
-  { id: "living", emoji: "🛋️", name: "Гостиная", deviceCount: 3, color: "#6366f1" },
-  { id: "bedroom", emoji: "🛏️", name: "Спальня", deviceCount: 2, color: "#8b5cf6" },
-  { id: "kitchen", emoji: "🍳", name: "Кухня", deviceCount: 1, color: "#f59e0b" },
-  { id: "bathroom", emoji: "🚿", name: "Ванная", deviceCount: 0, color: "#06b6d4" },
-];
-
-interface Props {
-  onRoomClick?: (roomId: string) => void;
-}
-
-export default function RoomsRow({ onRoomClick }: Props) {
-  return (
-    <div className="flex gap-3 overflow-x-auto no-scrollbar pb-1">
-      {ROOMS.map((room, i) => (
-        <motion.button
-          key={room.id}
-          onClick={() => onRoomClick?.(room.id)}
-          className="flex-shrink-0 glass-card flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
-          style={{
-            minWidth: "140px",
-            border: `1px solid ${room.color}22`,
-          }}
-          initial={{ opacity: 0, x: -10 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.3, delay: i * 0.05 }}
-          whileTap={{ scale: 0.93 }}
-          whileHover={{ scale: 1.02 }}
-        >
-          <div
-            className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 text-xl"
-            style={{ background: `${room.color}18` }}
-          >
-            {room.emoji}
-          </div>
-          <div className="text-left min-w-0">
-            <div
-              className="text-sm font-semibold truncate"
-              style={{ color: "var(--text-primary)" }}
-            >
-              {room.name}
-            </div>
-            <div
-              className="text-xs"
-              style={{ color: "var(--text-secondary)" }}
-            >
-              {room.deviceCount}{" "}
-              {room.deviceCount === 1
-                ? "устройство"
-                : room.deviceCount >= 2 && room.deviceCount <= 4
-                ? "устройства"
-                : "устройств"}
-            </div>
-          </div>
-          {room.deviceCount > 0 && (
-            <div
-              className="ml-auto w-2 h-2 rounded-full flex-shrink-0"
-              style={{ background: room.color }}
-            />
-          )}
-        </motion.button>
-      ))}
-    </div>
-  );
-}

components/Sidebar.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { Home, LayoutGrid, Thermometer, Settings } from 'lucide-react'
+
+type Tab = 'home' | 'rooms' | 'sensors' | 'settings'
+
+interface SidebarProps {
+  active: Tab
+  onChange: (tab: Tab) => void
+}
+
+const navItems: { id: Tab; icon: React.ComponentType<{ size?: number; color?: string }> }[] = [
+  { id: 'home', icon: Home },
+  { id: 'rooms', icon: LayoutGrid },
+  { id: 'sensors', icon: Thermometer },
+  { id: 'settings', icon: Settings },
+]
+
+export default function Sidebar({ active, onChange }: SidebarProps) {
+  return (
+    <nav
+      style={{
+        width: 72,
+        minWidth: 72,
+        height: '100dvh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingTop: 20,
+        paddingBottom: 20,
+        background: 'rgba(0,0,0,0.5)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        borderRight: '1px solid rgba(255,255,255,0.05)',
+        gap: 8,
+        flexShrink: 0,
+        zIndex: 10,
+      }}
+    >
+      {/* Logo */}
+      <div
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: 14,
+          background: 'linear-gradient(135deg, #00d4ff22, #00d4ff44)',
+          border: '1px solid rgba(0,212,255,0.3)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: 24,
+          flexShrink: 0,
+        }}
+      >
+        <Home size={20} color="#00d4ff" />
+      </div>
+
+      {/* Nav items */}
+      {navItems.map(({ id, icon: Icon }) => {
+        const isActive = active === id
+        return (
+          <button
+            key={id}
+            onClick={() => onChange(id)}
+            style={{
+              width: 48,
+              height: 48,
+              borderRadius: 14,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: isActive ? 'rgba(0,212,255,0.15)' : 'transparent',
+              border: isActive ? '1px solid rgba(0,212,255,0.25)' : '1px solid transparent',
+              transition: 'all 0.2s ease',
+              flexShrink: 0,
+            }}
+          >
+            <Icon size={22} color={isActive ? '#00d4ff' : 'rgba(255,255,255,0.4)'} />
+          </button>
+        )
+      })}
+    </nav>
+  )
+}

components/ThemeToggle.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { Sun, Moon } from "lucide-react";
-
-interface Props {
-  isDark: boolean;
-  onToggle: () => void;
-}
-
-export default function ThemeToggle({ isDark, onToggle }: Props) {
-  return (
-    <motion.button
-      onClick={onToggle}
-      className="relative w-14 h-7 rounded-full flex items-center cursor-pointer no-select"
-      style={{
-        background: isDark
-          ? "rgba(99,102,241,0.3)"
-          : "rgba(245,158,11,0.3)",
-        border: `1px solid ${isDark ? "rgba(99,102,241,0.5)" : "rgba(245,158,11,0.5)"}`,
-      }}
-      whileTap={{ scale: 0.9 }}
-    >
-      <motion.div
-        className="absolute w-5 h-5 rounded-full flex items-center justify-center"
-        style={{
-          background: isDark ? "#6366f1" : "#f59e0b",
-          boxShadow: isDark
-            ? "0 0 8px rgba(99,102,241,0.8)"
-            : "0 0 8px rgba(245,158,11,0.8)",
-        }}
-        animate={{ x: isDark ? 2 : 28 }}
-        transition={{ type: "spring", stiffness: 500, damping: 30 }}
-      >
-        {isDark ? (
-          <Moon size={10} color="white" />
-        ) : (
-          <Sun size={10} color="white" />
-        )}
-      </motion.div>
-    </motion.button>
-  );
-}

components/TopBar.tsx

@@ -1,187 +1,229 @@
-"use client";
+'use client'
 
-import { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import ThemeToggle from "./ThemeToggle";
+import { useState, useEffect } from 'react'
+import { Cloud, Droplets, Wind } from 'lucide-react'
 
-function getWeatherEmoji(code: string): string {
-  const c = parseInt(code);
-  if (c === 113) return "☀️";
-  if (c === 116) return "⛅";
-  if (c === 119 || c === 122) return "☁️";
-  if (c >= 176 && c <= 300) return "🌧️";
-  if (c >= 200 && c <= 210) return "⛈️";
-  if (c >= 210 && c <= 260) return "❄️";
-  return "🌤️";
+interface WeatherData {
+  temp: string
+  desc: string
+  humidity: string
+  windSpeed: string
+  feelsLike: string
+  forecast?: { date: string; maxTemp: string; minTemp: string; desc: string }[]
 }
 
-function getDayName(dateStr: string): string {
-  const d = new Date(dateStr + "T12:00:00");
-  const today = new Date();
-  const tomorrow = new Date(today);
-  tomorrow.setDate(today.getDate() + 1);
-  if (d.toDateString() === today.toDateString()) return "Сег";
-  if (d.toDateString() === tomorrow.toDateString()) return "Завт";
-  return d.toLocaleDateString("ru-RU", { weekday: "short" });
+interface SensorData {
+  temperature: number
+  humidity: number
+  pm25: number
 }
 
-interface Props {
-  isDark: boolean;
-  onToggleTheme: () => void;
-  weather: any;
-  isDemo?: boolean;
+interface TopBarProps {
+  weather: WeatherData | null
+  sensors: SensorData | null
 }
 
-export default function TopBar({ isDark, onToggleTheme, weather, isDemo }: Props) {
-  const [time, setTime] = useState("");
-  const [date, setDate] = useState("");
-  const [showModal, setShowModal] = useState(false);
+function getWeatherEmoji(desc: string): string {
+  const d = desc?.toLowerCase() || ''
+  if (d.includes('ясно') || d.includes('солнеч')) return '☀️'
+  if (d.includes('облач')) return '⛅'
+  if (d.includes('пасмурн')) return '☁️'
+  if (d.includes('дождь') || d.includes('морос')) return '🌧️'
+  if (d.includes('снег')) return '❄️'
+  if (d.includes('гроз')) return '⛈️'
+  return '🌤️'
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
+}
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString('ru-RU', { weekday: 'short', day: 'numeric', month: 'short' })
+}
+
+export default function TopBar({ weather, sensors }: TopBarProps) {
+  const [time, setTime] = useState(() => new Date())
+  const [showModal, setShowModal] = useState(false)
 
   useEffect(() => {
-    const update = () => {
-      const now = new Date();
-      setTime(now.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" }));
-      setDate(now.toLocaleDateString("ru-RU", { weekday: "short", day: "numeric", month: "long" }));
-    };
-    update();
-    const id = setInterval(update, 1000);
-    return () => clearInterval(id);
-  }, []);
-
-  const hasWeather = weather && weather.temp && weather.temp !== "—";
+    const t = setInterval(() => setTime(new Date()), 1000)
+    return () => clearInterval(t)
+  }, [])
 
   return (
     <>
-      <motion.div
-        className="glass-card px-6 py-3 flex items-center justify-between no-select flex-shrink-0"
-        style={{ borderRadius: "20px" }}
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
+      <header
+        style={{
+          height: 64,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0 20px',
+          borderBottom: '1px solid rgba(255,255,255,0.06)',
+          background: 'rgba(255,255,255,0.02)',
+          backdropFilter: 'blur(10px)',
+          flexShrink: 0,
+        }}
       >
-        {/* Time & Date */}
-        <div className="flex items-baseline gap-4">
-          <span className="font-black tracking-tight leading-none" style={{ fontSize: "42px", color: "var(--text-primary)" }}>
-            {time}
+        {/* Left: time + date */}
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
+          <span style={{ fontSize: 22, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.5px' }}>
+            {formatTime(time)}
           </span>
-          <span className="text-sm font-medium capitalize" style={{ color: "var(--text-secondary)" }}>
-            {date}
+          <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+            {formatDate(time)}
           </span>
         </div>
 
-        {/* Weather pill — clickable */}
-        {hasWeather ? (
-          <motion.button
-            className="flex items-center gap-3 px-5 py-2 rounded-2xl cursor-pointer"
-            style={{ background: "rgba(59,130,246,0.1)", border: "1px solid rgba(59,130,246,0.22)" }}
-            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ delay: 0.3 }}
-            whileHover={{ scale: 1.03 }}
-            whileTap={{ scale: 0.97 }}
-            onClick={() => setShowModal(true)}
-          >
-            <span className="text-2xl leading-none">{getWeatherEmoji(weather.weatherCode)}</span>
-            <div>
-              <div className="text-xl font-black leading-tight" style={{ color: "var(--text-primary)" }}>{weather.temp}°C</div>
-              <div className="text-xs leading-tight" style={{ color: "var(--text-secondary)" }}>{weather.desc}</div>
-            </div>
-            <span className="text-xs ml-1" style={{ color: "var(--text-secondary)", opacity: 0.6 }}>▼</span>
-          </motion.button>
-        ) : (
-          <div className="text-sm px-4 py-2 rounded-2xl" style={{ color: "var(--text-secondary)", background: "rgba(255,255,255,0.04)" }}>
-            🌤️ {weather ? "Загрузка..." : "—"}
-          </div>
-        )}
-
-        {/* Theme toggle + Demo badge */}
-        <div className="flex items-center gap-3">
-          {isDemo && (
-            <motion.span
-              className="text-xs px-2.5 py-1 rounded-full font-semibold"
-              style={{ background: "rgba(245,158,11,0.15)", color: "#f59e0b", border: "1px solid rgba(245,158,11,0.3)" }}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-            >
-              Demo
-            </motion.span>
-          )}
-          <ThemeToggle isDark={isDark} onToggle={onToggleTheme} />
-        </div>
-      </motion.div>
-
-      {/* Weather Modal */}
-      <AnimatePresence>
-        {showModal && weather && (
-          <motion.div
-            className="fixed inset-0 z-50 flex items-center justify-center p-6"
-            style={{ background: "rgba(0,0,0,0.7)", backdropFilter: "blur(12px)" }}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            onClick={() => setShowModal(false)}
-          >
-            <motion.div
-              className="glass-card p-8 w-full max-w-lg"
-              style={{ borderRadius: "28px", background: "rgba(15,15,25,0.9)", border: "1px solid rgba(255,255,255,0.12)" }}
-              initial={{ scale: 0.9, y: 20 }}
-              animate={{ scale: 1, y: 0 }}
-              exit={{ scale: 0.9, y: 20 }}
-              onClick={e => e.stopPropagation()}
-            >
-              {/* Header */}
-              <div className="flex items-center justify-between mb-6">
-                <h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>🌍 Санкт-Петербург</h2>
-                <button
-                  onClick={() => setShowModal(false)}
-                  className="w-9 h-9 rounded-full flex items-center justify-center text-lg"
-                  style={{ background: "rgba(255,255,255,0.08)", color: "var(--text-secondary)" }}
-                >✕</button>
+        {/* Right: sensors + weather */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+          {/* Room sensors */}
+          {sensors && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>🌡️</span>
+                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-primary)' }}>
+                  {sensors.temperature}°
+                </span>
               </div>
-
-              {/* Current */}
-              <div className="flex items-center gap-5 mb-8">
-                <span style={{ fontSize: "72px", lineHeight: 1 }}>{getWeatherEmoji(weather.weatherCode)}</span>
-                <div>
-                  <div className="font-black" style={{ fontSize: "64px", lineHeight: 1, color: "var(--text-primary)" }}>
-                    {weather.temp}°
-                  </div>
-                  <div className="text-lg" style={{ color: "var(--text-secondary)" }}>{weather.desc}</div>
-                  <div className="flex gap-4 mt-2 text-sm" style={{ color: "var(--text-secondary)" }}>
-                    {weather.feelsLike && weather.feelsLike !== "—" && <span>Ощущается {weather.feelsLike}°</span>}
-                    {weather.humidity && weather.humidity !== "—" && <span>💧 {weather.humidity}%</span>}
-                    {weather.windSpeed && weather.windSpeed !== "—" && <span>💨 {weather.windSpeed} км/ч</span>}
-                  </div>
-                </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                <Droplets size={13} color="rgba(255,255,255,0.4)" />
+                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-primary)' }}>
+                  {sensors.humidity}%
+                </span>
               </div>
-
-              {/* Forecast */}
-              {weather.forecast && weather.forecast.length > 0 && (
-                <div>
-                  <div className="text-xs font-semibold uppercase tracking-widest mb-3" style={{ color: "var(--text-secondary)" }}>
-                    Прогноз
-                  </div>
-                  <div className="grid gap-2">
-                    {weather.forecast.map((day: any, i: number) => (
-                      <div key={i} className="flex items-center justify-between px-4 py-3 rounded-2xl"
-                        style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.06)" }}>
-                        <span className="text-sm font-semibold w-16" style={{ color: "var(--text-primary)" }}>
-                          {getDayName(day.date)}
-                        </span>
-                        <span className="text-2xl">{getWeatherEmoji(day.weatherCode)}</span>
-                        <span className="text-sm" style={{ color: "var(--text-secondary)" }}>{day.desc}</span>
-                        <span className="text-sm font-semibold" style={{ color: "var(--text-primary)" }}>
-                          {day.maxTemp}° / <span style={{ color: "var(--text-secondary)" }}>{day.minTemp}°</span>
-                        </span>
-                      </div>
-                    ))}
-                  </div>
+              {sensors.pm25 !== undefined && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <Wind size={13} color="rgba(255,255,255,0.4)" />
+                  <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+                    PM2.5: {sensors.pm25}
+                  </span>
                 </div>
               )}
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
+            </div>
+          )}
+
+          {/* Divider */}
+          {sensors && weather && (
+            <div style={{ width: 1, height: 24, background: 'rgba(255,255,255,0.08)' }} />
+          )}
+
+          {/* Weather widget */}
+          {weather && (
+            <button
+              onClick={() => setShowModal(true)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                padding: '6px 12px',
+                borderRadius: 10,
+                background: 'rgba(255,255,255,0.05)',
+                border: '1px solid rgba(255,255,255,0.08)',
+                color: 'var(--text-primary)',
+                touchAction: 'manipulation',
+                WebkitTapHighlightColor: 'transparent',
+              }}
+            >
+              <span style={{ fontSize: 16 }}>{getWeatherEmoji(weather.desc)}</span>
+              <span style={{ fontSize: 16, fontWeight: 600 }}>{weather.temp}°</span>
+              <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{weather.desc}</span>
+            </button>
+          )}
+        </div>
+      </header>
+
+      {/* Weather Modal */}
+      {showModal && weather && (
+        <div
+          onClick={() => setShowModal(false)}
+          style={{
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(0,0,0,0.7)',
+            backdropFilter: 'blur(8px)',
+            zIndex: 100,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <div
+            onClick={e => e.stopPropagation()}
+            style={{
+              background: '#13131f',
+              border: '1px solid rgba(255,255,255,0.1)',
+              borderRadius: 20,
+              padding: 28,
+              minWidth: 320,
+              maxWidth: 400,
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
+              <span style={{ fontSize: 40 }}>{getWeatherEmoji(weather.desc)}</span>
+              <div>
+                <div style={{ fontSize: 36, fontWeight: 700, lineHeight: 1 }}>{weather.temp}°C</div>
+                <div style={{ fontSize: 15, color: 'var(--text-secondary)', marginTop: 2 }}>{weather.desc}</div>
+              </div>
+            </div>
+
+            <div style={{ display: 'flex', gap: 16, marginBottom: 20 }}>
+              <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+                <Droplets size={13} style={{ marginRight: 4 }} />
+                Влажность: {weather.humidity}%
+              </div>
+              <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+                <Wind size={13} style={{ marginRight: 4 }} />
+                Ветер: {weather.windSpeed} км/ч
+              </div>
+              <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+                Ощущается: {weather.feelsLike}°
+              </div>
+            </div>
+
+            {weather.forecast && weather.forecast.length > 0 && (
+              <div>
+                <div style={{ fontSize: 12, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>
+                  Прогноз
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  {weather.forecast.map(day => {
+                    const d = new Date(day.date)
+                    const label = d.toLocaleDateString('ru-RU', { weekday: 'short', day: 'numeric', month: 'short' })
+                    return (
+                      <div key={day.date} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 80 }}>{label}</span>
+                        <span style={{ fontSize: 16 }}>{getWeatherEmoji(day.desc)}</span>
+                        <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{day.desc}</span>
+                        <span style={{ fontSize: 13, color: 'var(--text-primary)', fontWeight: 500 }}>
+                          {day.maxTemp}° / {day.minTemp}°
+                        </span>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+
+            <button
+              onClick={() => setShowModal(false)}
+              style={{
+                marginTop: 20,
+                width: '100%',
+                padding: '10px',
+                borderRadius: 10,
+                background: 'rgba(255,255,255,0.05)',
+                color: 'var(--text-secondary)',
+                fontSize: 14,
+                touchAction: 'manipulation',
+              }}
+            >
+              Закрыть
+            </button>
+          </div>
+        </div>
+      )}
     </>
-  );
+  )
 }

components/cards/AirPurifierCard.tsx

@@ -1,141 +0,0 @@
-"use client";
-
-import { useState, useCallback } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { Wind } from "lucide-react";
-import { toggleFan, setFanPreset } from "@/lib/api";
-
-interface Props {
-  entityId: string;
-  state: string;
-  presetMode?: string;
-  onUpdate: () => void;
-}
-
-const MODES = [
-  { id: "Auto", label: "Авто", color: "#10b981" },
-  { id: "Night", label: "Ночь", color: "#6366f1" },
-  { id: "High", label: "Турбо", color: "#f59e0b" },
-];
-
-export default function AirPurifierCard({ entityId, state, presetMode, onUpdate }: Props) {
-  const [localOn, setLocalOn] = useState(state === "on");
-  const [currentMode, setCurrentMode] = useState(presetMode || "Auto");
-  const [pending, setPending] = useState(false);
-
-  const handleToggle = useCallback(async () => {
-    if (pending) return;
-    const newState = !localOn;
-    setLocalOn(newState);
-    setPending(true);
-    try {
-      await toggleFan(entityId, newState);
-      onUpdate();
-    } catch (e) {
-      setLocalOn(!newState);
-    }
-    setPending(false);
-  }, [entityId, localOn, pending, onUpdate]);
-
-  const handleMode = useCallback(async (mode: string) => {
-    setCurrentMode(mode);
-    await setFanPreset(entityId, mode);
-    onUpdate();
-  }, [entityId, onUpdate]);
-
-  const isOn = localOn;
-  const activeMode = MODES.find((m) => m.id === currentMode) || MODES[0];
-  const accentColor = isOn ? activeMode.color : "rgba(255,255,255,0.3)";
-
-  return (
-    <motion.div
-      className="glass-card p-6 flex flex-col"
-      style={{
-        minHeight: "140px",
-        ...(isOn ? {
-          background: `${activeMode.color}08`,
-          border: `1px solid ${activeMode.color}25`,
-          boxShadow: `0 0 40px ${activeMode.color}10`,
-        } : {})
-      }}
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.35, delay: 0.14 }}
-    >
-      {/* Top row */}
-      <div className="flex items-center gap-4">
-        <div className="w-16 h-16 rounded-2xl flex items-center justify-center flex-shrink-0"
-          style={{
-            background: isOn ? `${activeMode.color}20` : "rgba(255,255,255,0.06)",
-            boxShadow: isOn ? `0 0 28px ${activeMode.color}40` : "none",
-          }}>
-          <motion.div animate={isOn ? { rotate: 360 } : { rotate: 0 }}
-            transition={isOn ? { duration: 4, repeat: Infinity, ease: "linear" } : {}}>
-            <Wind size={32} color={isOn ? activeMode.color : "rgba(255,255,255,0.3)"} strokeWidth={1.5} />
-          </motion.div>
-        </div>
-
-        <div className="flex-1 min-w-0">
-          <div className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>Очиститель</div>
-          <div className="text-sm mt-0.5 font-medium" style={{ color: isOn ? activeMode.color : "var(--text-secondary)" }}>
-            {isOn ? activeMode.label : "Выключен"}
-          </div>
-        </div>
-
-        {/* Toggle — native button */}
-        <button
-          onClick={handleToggle}
-          style={{
-            width: "60px", height: "32px", borderRadius: "16px",
-            background: isOn ? activeMode.color : "rgba(255,255,255,0.12)",
-            boxShadow: isOn ? `0 0 16px ${activeMode.color}60` : "none",
-            border: "none", cursor: "pointer", position: "relative",
-            transition: "background 0.2s ease, box-shadow 0.2s ease",
-            flexShrink: 0,
-            WebkitTapHighlightColor: "transparent",
-          }}
-        >
-          <motion.div
-            style={{
-              width: "24px", height: "24px", borderRadius: "12px",
-              background: "white", position: "absolute", top: "4px",
-              boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
-            }}
-            animate={{ left: isOn ? "32px" : "4px" }}
-            transition={{ type: "spring", stiffness: 500, damping: 30 }}
-          />
-        </button>
-      </div>
-
-      {/* Mode buttons */}
-      <div className="flex gap-3 mt-4">
-        {MODES.map((mode) => {
-          const isActive = currentMode === mode.id && isOn;
-          return (
-            <button
-              key={mode.id}
-              onClick={() => isOn && handleMode(mode.id)}
-              className="flex-1 py-2.5 rounded-2xl text-sm font-semibold"
-              style={isActive ? {
-                background: `${mode.color}22`,
-                border: `1.5px solid ${mode.color}60`,
-                color: mode.color,
-                boxShadow: `0 0 14px ${mode.color}30`,
-                cursor: "pointer",
-                WebkitTapHighlightColor: "transparent",
-              } : {
-                background: "rgba(255,255,255,0.05)",
-                border: "1px solid rgba(255,255,255,0.08)",
-                color: isOn ? "var(--text-secondary)" : "rgba(255,255,255,0.15)",
-                cursor: isOn ? "pointer" : "default",
-                WebkitTapHighlightColor: "transparent",
-              }}
-            >
-              {mode.label}
-            </button>
-          );
-        })}
-      </div>
-    </motion.div>
-  );
-}

components/cards/LightCard.tsx

@@ -1,134 +0,0 @@
-"use client";
-
-import { useState, useCallback } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { Lightbulb } from "lucide-react";
-import { toggleLight, setLightBrightness } from "@/lib/api";
-import { getBrightnessPct, pctToBrightness } from "@/lib/ha";
-
-interface Props {
-  entityId: string;
-  name: string;
-  state: string;
-  brightness?: number;
-  showSlider?: boolean;
-  onUpdate: () => void;
-}
-
-export default function LightCard({ entityId, name, state, brightness, showSlider = false, onUpdate }: Props) {
-  // Optimistic local state — не зависим от HA mock
-  const [localOn, setLocalOn] = useState(state === "on");
-  const brightPct = getBrightnessPct(brightness);
-  const [localBrightness, setLocalBrightness] = useState(brightPct || 70);
-  const [pending, setPending] = useState(false);
-
-  const handleToggle = useCallback(async () => {
-    if (pending) return;
-    const newState = !localOn;
-    setLocalOn(newState); // optimistic
-    setPending(true);
-    try {
-      await toggleLight(entityId, newState);
-      onUpdate();
-    } catch (e) {
-      setLocalOn(!newState); // rollback on real error
-    }
-    setPending(false);
-  }, [entityId, localOn, pending, onUpdate]);
-
-  const handleBrightnessChange = useCallback(async (val: number) => {
-    setLocalBrightness(val);
-    await setLightBrightness(entityId, pctToBrightness(val));
-    onUpdate();
-  }, [entityId, onUpdate]);
-
-  const isOn = localOn;
-
-  return (
-    <motion.div
-      className="glass-card p-6 flex flex-col justify-between"
-      style={{
-        minHeight: "160px",
-        ...(isOn ? {
-          background: "rgba(245,158,11,0.07)",
-          border: "1px solid rgba(245,158,11,0.22)",
-          boxShadow: "0 0 40px rgba(245,158,11,0.08), inset 0 1px 0 rgba(245,158,11,0.1)",
-        } : {})
-      }}
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.35 }}
-    >
-      {/* Top row: icon + toggle */}
-      <div className="flex items-start justify-between">
-        <motion.div
-          className="w-16 h-16 rounded-2xl flex items-center justify-center"
-          style={{
-            background: isOn ? "rgba(245,158,11,0.18)" : "rgba(255,255,255,0.06)",
-            boxShadow: isOn ? "0 0 28px rgba(245,158,11,0.35)" : "none",
-          }}
-          animate={{ scale: isOn ? 1 : 0.97 }}
-        >
-          <Lightbulb size={32} color={isOn ? "#f59e0b" : "rgba(255,255,255,0.35)"} fill={isOn ? "#f59e0b" : "none"} strokeWidth={isOn ? 1.5 : 2} />
-        </motion.div>
-
-        {/* Toggle switch */}
-        <button
-          onClick={handleToggle}
-          style={{
-            width: "60px",
-            height: "32px",
-            borderRadius: "16px",
-            background: isOn ? "#f59e0b" : "rgba(255,255,255,0.12)",
-            boxShadow: isOn ? "0 0 16px rgba(245,158,11,0.5)" : "none",
-            border: "none",
-            cursor: "pointer",
-            position: "relative",
-            transition: "background 0.2s ease, box-shadow 0.2s ease",
-            flexShrink: 0,
-            WebkitTapHighlightColor: "transparent",
-          }}
-        >
-          <motion.div
-            style={{
-              width: "24px",
-              height: "24px",
-              borderRadius: "12px",
-              background: "white",
-              position: "absolute",
-              top: "4px",
-              boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
-            }}
-            animate={{ left: isOn ? "32px" : "4px" }}
-            transition={{ type: "spring", stiffness: 500, damping: 30 }}
-          />
-        </button>
-      </div>
-
-      {/* Name + state */}
-      <div className="mt-4">
-        <div className="text-xl font-bold leading-tight" style={{ color: isOn ? "#f59e0b" : "var(--text-primary)" }}>
-          {name}
-        </div>
-        <div className="text-sm mt-1 font-medium" style={{ color: isOn ? "rgba(245,158,11,0.7)" : "var(--text-secondary)" }}>
-          {isOn ? (showSlider ? `Яркость ${localBrightness}%` : "Включён") : "Выключен"}
-        </div>
-
-        <AnimatePresence>
-          {showSlider && isOn && (
-            <motion.div className="mt-4" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }}>
-              <input
-                type="range" min={5} max={100} value={localBrightness}
-                onChange={(e) => setLocalBrightness(parseInt(e.target.value))}
-                onMouseUp={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
-                onTouchEnd={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
-                className="w-full"
-                style={{ accentColor: "#f59e0b" }}
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </motion.div>
-  );
-}

components/cards/SavingsCard.tsx

@@ -1,140 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { Target } from "lucide-react";
-
-interface Saving {
-  id: number;
-  name: string;
-  current_amount: number;
-  target_amount: number;
-  color?: string;
-  icon?: string;
-}
-
-interface Props {
-  savings: Saving[];
-}
-
-function formatAmount(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}М`;
-  if (n >= 1_000) return `${Math.round(n / 1_000)}К`;
-  return String(n);
-}
-
-const COLORS = ["#f59e0b", "#3b82f6", "#10b981", "#8b5cf6", "#f43f5e"];
-
-export default function SavingsCard({ savings }: Props) {
-  return (
-    <motion.div
-      className="glass-card p-6 h-full flex flex-col"
-      style={{
-        background: "rgba(245,158,11,0.04)",
-        border: "1px solid rgba(245,158,11,0.15)",
-      }}
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.35, delay: 0.21 }}
-      whileHover={{ scale: 1.01 }}
-    >
-      {/* Header */}
-      <div className="flex items-center gap-3 mb-5">
-        <div
-          className="w-10 h-10 rounded-xl flex items-center justify-center"
-          style={{
-            background: "rgba(245,158,11,0.2)",
-            boxShadow: "0 0 16px rgba(245,158,11,0.3)",
-          }}
-        >
-          <Target size={20} color="#f59e0b" />
-        </div>
-        <div>
-          <div
-            className="text-base font-bold"
-            style={{ color: "var(--text-primary)" }}
-          >
-            Накопления
-          </div>
-          <div
-            className="text-xs"
-            style={{ color: "var(--text-secondary)" }}
-          >
-            {savings.length} {savings.length === 1 ? "цель" : "целей"}
-          </div>
-        </div>
-      </div>
-
-      <div className="flex-1 space-y-4">
-        {savings.map((s, i) => {
-          const pct = Math.min(
-            100,
-            Math.round((s.current_amount / s.target_amount) * 100)
-          );
-          const color = s.color || COLORS[i % COLORS.length];
-
-          return (
-            <motion.div
-              key={s.id}
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1 + i * 0.1 }}
-            >
-              <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center gap-2">
-                  {s.icon && <span className="text-base">{s.icon}</span>}
-                  <span
-                    className="text-sm font-semibold"
-                    style={{ color: "var(--text-primary)" }}
-                  >
-                    {s.name}
-                  </span>
-                </div>
-                <span
-                  className="text-sm font-black"
-                  style={{ color }}
-                >
-                  {pct}%
-                </span>
-              </div>
-
-              {/* Progress bar with glow */}
-              <div className="progress-bar">
-                <motion.div
-                  className="h-full rounded-full"
-                  style={{
-                    background: `linear-gradient(90deg, ${color}80, ${color})`,
-                    boxShadow: `0 0 12px ${color}60`,
-                  }}
-                  initial={{ width: "0%" }}
-                  animate={{ width: `${pct}%` }}
-                  transition={{
-                    duration: 1.2,
-                    delay: 0.2 + i * 0.15,
-                    ease: "easeOut",
-                  }}
-                />
-              </div>
-
-              <div
-                className="flex justify-between text-xs mt-1.5"
-                style={{ color: "var(--text-secondary)" }}
-              >
-                <span>{formatAmount(s.current_amount)} ₽</span>
-                <span>из {formatAmount(s.target_amount)} ₽</span>
-              </div>
-            </motion.div>
-          );
-        })}
-
-        {savings.length === 0 && (
-          <div
-            className="text-center py-6 text-sm"
-            style={{ color: "var(--text-secondary)" }}
-          >
-            Нет данных о накоплениях
-          </div>
-        )}
-      </div>
-    </motion.div>
-  );
-}

components/cards/TasksCard.tsx

@@ -1,185 +0,0 @@
-"use client";
-
-import { useState, useCallback } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { CheckCircle2, Circle, Plus, ListTodo } from "lucide-react";
-import { createTask, toggleTask } from "@/lib/api";
-import AddTaskModal from "../AddTaskModal";
-
-interface Task {
-  id: number;
-  title: string;
-  done: boolean;
-  priority?: number;
-}
-
-interface Props {
-  tasks: Task[];
-  onUpdate: () => void;
-}
-
-export default function TasksCard({ tasks, onUpdate }: Props) {
-  const [modalOpen, setModalOpen] = useState(false);
-  const [localTasks, setLocalTasks] = useState<Task[]>(tasks);
-
-  const handleToggle = useCallback(
-    async (task: Task) => {
-      setLocalTasks((prev) =>
-        prev.map((t) => (t.id === task.id ? { ...t, done: !t.done } : t))
-      );
-      await toggleTask(task.id, !task.done);
-      onUpdate();
-    },
-    [onUpdate]
-  );
-
-  const handleAdd = useCallback(
-    async (title: string) => {
-      const newTask = { id: Date.now(), title, done: false };
-      setLocalTasks((prev) => [newTask, ...prev]);
-      await createTask(title);
-      onUpdate();
-    },
-    [onUpdate]
-  );
-
-  const pending = localTasks.filter((t) => !t.done);
-  const done = localTasks.filter((t) => t.done);
-
-  return (
-    <>
-      <motion.div
-        className="glass-card p-6 h-full flex flex-col"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.35, delay: 0.14 }}
-        whileHover={{ scale: 1.005 }}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-3">
-            <div
-              className="w-10 h-10 rounded-xl flex items-center justify-center"
-              style={{
-                background: "rgba(139,92,246,0.18)",
-                boxShadow: "0 0 18px rgba(139,92,246,0.3)",
-              }}
-            >
-              <ListTodo size={20} color="#8b5cf6" />
-            </div>
-            <div>
-              <div
-                className="text-base font-bold"
-                style={{ color: "var(--text-primary)" }}
-              >
-                Задачи
-              </div>
-              <div
-                className="text-xs"
-                style={{ color: "var(--text-secondary)" }}
-              >
-                {pending.length > 0
-                  ? `${pending.length} из ${localTasks.length} осталось`
-                  : "Всё готово!"}
-              </div>
-            </div>
-          </div>
-
-          {/* Add button */}
-          <motion.button
-            onClick={() => setModalOpen(true)}
-            className="w-10 h-10 rounded-xl flex items-center justify-center"
-            style={{
-              background: "linear-gradient(135deg, #8b5cf6, #6366f1)",
-              boxShadow: "0 0 18px rgba(139,92,246,0.45)",
-            }}
-            whileTap={{ scale: 0.82 }}
-          >
-            <Plus size={20} color="white" strokeWidth={2.5} />
-          </motion.button>
-        </div>
-
-        {/* Task list */}
-        <div className="flex-1 overflow-y-auto space-y-2 pr-0.5">
-          <AnimatePresence initial={false}>
-            {localTasks.length === 0 && (
-              <motion.div
-                className="flex flex-col items-center justify-center h-full py-8 gap-3"
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-              >
-                <div className="text-4xl">🎉</div>
-                <div
-                  className="text-sm font-medium"
-                  style={{ color: "var(--text-secondary)" }}
-                >
-                  Всё сделано на сегодня!
-                </div>
-                <motion.button
-                  onClick={() => setModalOpen(true)}
-                  className="mt-2 px-5 py-2.5 rounded-xl text-sm font-semibold"
-                  style={{
-                    background: "linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2))",
-                    border: "1px solid rgba(139,92,246,0.35)",
-                    color: "#8b5cf6",
-                  }}
-                  whileTap={{ scale: 0.9 }}
-                >
-                  + Добавить задачу
-                </motion.button>
-              </motion.div>
-            )}
-
-            {localTasks.map((task) => (
-              <motion.div
-                key={task.id}
-                layout
-                initial={{ opacity: 0, x: -12, height: 0 }}
-                animate={{ opacity: 1, x: 0, height: "auto" }}
-                exit={{ opacity: 0, x: 12, height: 0 }}
-                transition={{ duration: 0.2 }}
-                className="flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
-                style={{
-                  background: task.done
-                    ? "rgba(139,92,246,0.05)"
-                    : "rgba(255,255,255,0.04)",
-                  border: task.done
-                    ? "1px solid rgba(139,92,246,0.15)"
-                    : "1px solid rgba(255,255,255,0.06)",
-                }}
-                onClick={() => handleToggle(task)}
-                whileTap={{ scale: 0.97 }}
-              >
-                <motion.div
-                  initial={{ scale: 0.8 }}
-                  animate={{ scale: 1 }}
-                >
-                  {task.done ? (
-                    <CheckCircle2 size={20} color="#8b5cf6" strokeWidth={2} />
-                  ) : (
-                    <Circle size={20} color="rgba(255,255,255,0.3)" strokeWidth={1.5} />
-                  )}
-                </motion.div>
-                <span
-                  className="text-sm font-medium flex-1 leading-snug"
-                  style={{
-                    color: task.done ? "var(--text-secondary)" : "var(--text-primary)",
-                    textDecoration: task.done ? "line-through" : "none",
-                  }}
-                >
-                  {task.title}
-                </span>
-              </motion.div>
-            ))}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-
-      <AddTaskModal
-        open={modalOpen}
-        onClose={() => setModalOpen(false)}
-        onAdd={handleAdd}
-      />
-    </>
-  );
-}

components/cards/TemperatureCard.tsx

@@ -1,158 +0,0 @@
-"use client";
-
-import { useState, useCallback } from "react";
-import { motion } from "framer-motion";
-import { Thermometer, Plus, Minus } from "lucide-react";
-import { setClimateTemp } from "@/lib/api";
-
-interface Props {
-  entityId: string;
-  currentTemp?: number;
-  targetTemp?: number;
-  state: string;
-  onUpdate: () => void;
-}
-
-export default function TemperatureCard({
-  entityId,
-  currentTemp,
-  targetTemp,
-  state,
-  onUpdate,
-}: Props) {
-  const [target, setTarget] = useState(targetTemp || 22);
-  const isHeating = state === "heat";
-  const isActive = state !== "off";
-
-  const adjust = useCallback(
-    async (delta: number) => {
-      const next = Math.min(30, Math.max(16, target + delta));
-      setTarget(next);
-      await setClimateTemp(entityId, next);
-      onUpdate();
-    },
-    [target, entityId, onUpdate]
-  );
-
-  const accentColor = isHeating ? "#f43f5e" : "#3b82f6";
-  const accentBg = isHeating ? "rgba(244,63,94,0.08)" : "rgba(59,130,246,0.08)";
-  const accentBorder = isHeating ? "rgba(244,63,94,0.2)" : "rgba(59,130,246,0.2)";
-  const accentGlow = isHeating ? "rgba(244,63,94,0.25)" : "rgba(59,130,246,0.2)";
-
-  return (
-    <motion.div
-      className="glass-card p-6 h-full flex flex-col justify-between"
-      style={
-        isActive
-          ? {
-              background: accentBg,
-              border: `1px solid ${accentBorder}`,
-              boxShadow: `0 0 40px ${accentGlow}`,
-            }
-          : {}
-      }
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.35, delay: 0.07 }}
-      whileHover={{ scale: 1.01 }}
-    >
-      {/* Icon row */}
-      <div className="flex items-start justify-between">
-        <motion.div
-          className="w-16 h-16 rounded-2xl flex items-center justify-center"
-          style={{
-            background: isActive ? `${accentColor}22` : "rgba(255,255,255,0.06)",
-            boxShadow: isActive ? `0 0 28px ${accentGlow}` : "none",
-          }}
-        >
-          <Thermometer
-            size={32}
-            color={isActive ? accentColor : "rgba(255,255,255,0.35)"}
-            strokeWidth={1.5}
-          />
-        </motion.div>
-
-        {/* Status badge */}
-        <div
-          className="px-3 py-1 rounded-full text-xs font-semibold"
-          style={{
-            background: isActive ? `${accentColor}18` : "rgba(255,255,255,0.06)",
-            color: isActive ? accentColor : "var(--text-secondary)",
-            border: `1px solid ${isActive ? accentColor + "40" : "rgba(255,255,255,0.08)"}`,
-          }}
-        >
-          {isHeating ? "Нагрев" : isActive ? "Охлаждение" : "Выкл"}
-        </div>
-      </div>
-
-      {/* Current temperature — BIG */}
-      <div className="my-4">
-        <div
-          className="font-black leading-none tracking-tight"
-          style={{
-            fontSize: "56px",
-            color: isActive ? accentColor : "var(--text-primary)",
-            textShadow: isActive ? `0 0 40px ${accentColor}60` : "none",
-          }}
-        >
-          {currentTemp?.toFixed(1) ?? "—"}°
-        </div>
-        <div
-          className="text-sm mt-1"
-          style={{ color: "var(--text-secondary)" }}
-        >
-          текущая температура
-        </div>
-      </div>
-
-      {/* Target temperature controls */}
-      <div
-        className="flex items-center justify-between px-4 py-3 rounded-2xl"
-        style={{
-          background: "rgba(255,255,255,0.04)",
-          border: "1px solid rgba(255,255,255,0.07)",
-        }}
-      >
-        <span
-          className="text-sm font-medium"
-          style={{ color: "var(--text-secondary)" }}
-        >
-          Цель
-        </span>
-
-        <div className="flex items-center gap-3">
-          <motion.button
-            onClick={() => adjust(-0.5)}
-            className="w-10 h-10 rounded-xl flex items-center justify-center"
-            style={{
-              background: "rgba(255,255,255,0.08)",
-              border: "1px solid rgba(255,255,255,0.1)",
-            }}
-            whileTap={{ scale: 0.82 }}
-          >
-            <Minus size={16} color="var(--text-primary)" />
-          </motion.button>
-
-          <span
-            className="text-2xl font-bold min-w-[56px] text-center"
-            style={{ color: accentColor }}
-          >
-            {target}°
-          </span>
-
-          <motion.button
-            onClick={() => adjust(0.5)}
-            className="w-10 h-10 rounded-xl flex items-center justify-center"
-            style={{
-              background: `${accentColor}22`,
-              border: `1px solid ${accentColor}50`,
-            }}
-            whileTap={{ scale: 0.82 }}
-          >
-            <Plus size={16} color={accentColor} />
-          </motion.button>
-        </div>
-      </div>
-    </motion.div>
-  );
-}

components/cards/WeatherCard.tsx

@@ -1,174 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { Droplets, Wind } from "lucide-react";
-
-function getWeatherEmoji(code: string): string {
-  const c = parseInt(code);
-  if (c === 113) return "☀️";
-  if (c === 116) return "⛅";
-  if (c === 119 || c === 122) return "☁️";
-  if (c >= 176 && c <= 182) return "🌦️";
-  if (c >= 185 && c <= 200) return "🌧️";
-  if (c >= 200 && c <= 210) return "⛈️";
-  if (c >= 210 && c <= 260) return "❄️";
-  if (c >= 260 && c <= 300) return "🌨️";
-  if (c >= 300 && c <= 400) return "🌧️";
-  return "🌤️";
-}
-
-function formatDate(dateStr: string): string {
-  const d = new Date(dateStr + "T12:00:00");
-  return d.toLocaleDateString("ru-RU", { weekday: "short", day: "numeric" });
-}
-
-interface Props {
-  weather: any;
-  compact?: boolean;
-}
-
-export default function WeatherCard({ weather, compact }: Props) {
-  if (!weather) {
-    return (
-      <motion.div
-        className="glass-card p-6 h-full flex flex-col items-center justify-center gap-3"
-        style={{
-          background: "rgba(59,130,246,0.03)",
-          border: "1px solid rgba(59,130,246,0.1)",
-        }}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-      >
-        <div className="text-3xl animate-pulse">🌤️</div>
-        <div className="text-sm" style={{ color: "var(--text-secondary)" }}>
-          Загрузка погоды...
-        </div>
-      </motion.div>
-    );
-  }
-
-  const hasData = weather.temp && weather.temp !== "—";
-
-  if (!hasData) {
-    return (
-      <motion.div
-        className="glass-card p-6 h-full flex flex-col items-center justify-center gap-2"
-        style={{
-          background: "rgba(59,130,246,0.03)",
-          border: "1px solid rgba(59,130,246,0.1)",
-        }}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-      >
-        <div className="text-3xl">🌧️</div>
-        <div className="text-sm text-center" style={{ color: "var(--text-secondary)" }}>
-          Нет данных о погоде
-        </div>
-      </motion.div>
-    );
-  }
-
-  return (
-    <motion.div
-      className="glass-card p-5 h-full flex flex-col"
-      style={{
-        background: "rgba(59,130,246,0.05)",
-        border: "1px solid rgba(59,130,246,0.15)",
-      }}
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.35, delay: 0.21 }}
-      whileHover={{ scale: 1.01 }}
-    >
-      {/* Location */}
-      <div
-        className="text-xs font-medium mb-2"
-        style={{ color: "var(--text-secondary)" }}
-      >
-        📍 Санкт-Петербург
-      </div>
-
-      {/* Current weather */}
-      <div className="flex items-center gap-3 mb-3">
-        <div className={compact ? "text-3xl leading-none" : "text-4xl leading-none"}>
-          {getWeatherEmoji(weather.weatherCode)}
-        </div>
-        <div>
-          <div
-            className="font-black leading-none"
-            style={{
-              fontSize: compact ? "36px" : "42px",
-              color: "var(--text-primary)",
-            }}
-          >
-            {weather.temp}°
-          </div>
-          <div
-            className="text-xs mt-0.5"
-            style={{ color: "var(--text-secondary)" }}
-          >
-            {weather.desc}
-          </div>
-        </div>
-      </div>
-
-      {/* Stats */}
-      <div className="flex gap-3 mb-3 flex-wrap">
-        <div className="flex items-center gap-1">
-          <Droplets size={12} color="#3b82f6" />
-          <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
-            {weather.humidity}%
-          </span>
-        </div>
-        <div className="flex items-center gap-1">
-          <Wind size={12} color="#8b5cf6" />
-          <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
-            {weather.windSpeed} км/ч
-          </span>
-        </div>
-        <div className="text-xs" style={{ color: "var(--text-secondary)" }}>
-          Ощущ. {weather.feelsLike}°
-        </div>
-      </div>
-
-      {/* Forecast */}
-      <div className="flex gap-2 mt-auto">
-        {(weather.forecast || []).slice(0, 3).map((day: any, i: number) => (
-          <motion.div
-            key={day.date}
-            className="flex-1 rounded-xl p-2 text-center"
-            style={{
-              background:
-                i === 0
-                  ? "rgba(59,130,246,0.14)"
-                  : "rgba(255,255,255,0.04)",
-              border:
-                i === 0
-                  ? "1px solid rgba(59,130,246,0.28)"
-                  : "1px solid rgba(255,255,255,0.06)",
-            }}
-            initial={{ opacity: 0, y: 8 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.3 + i * 0.08 }}
-          >
-            <div
-              className="text-xs mb-0.5 font-medium"
-              style={{ color: "var(--text-secondary)" }}
-            >
-              {i === 0 ? "Сег." : formatDate(day.date)}
-            </div>
-            <div className="text-base mb-0.5">
-              {getWeatherEmoji(day.weatherCode)}
-            </div>
-            <div
-              className="text-xs font-bold"
-              style={{ color: "var(--text-primary)" }}
-            >
-              {day.maxTemp}°/{day.minTemp}°
-            </div>
-          </motion.div>
-        ))}
-      </div>
-    </motion.div>
-  );
-}

components/cards/WeatherSavingsCard.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import WeatherCard from "./WeatherCard";
-import SavingsCard from "./SavingsCard";
-
-interface Props {
-  weather: any;
-  savings: any[];
-}
-
-export default function WeatherSavingsCard({ weather, savings }: Props) {
-  const [view, setView] = useState<"weather" | "savings">("weather");
-
-  return (
-    <div className="h-full flex flex-col gap-2">
-      {/* Toggle pills */}
-      <div
-        className="flex rounded-2xl p-1 gap-1"
-        style={{
-          background: "rgba(255,255,255,0.04)",
-          border: "1px solid rgba(255,255,255,0.07)",
-        }}
-      >
-        {[
-          { id: "weather", label: "🌤 Погода" },
-          { id: "savings", label: "💰 Цели" },
-        ].map((tab) => (
-          <motion.button
-            key={tab.id}
-            onClick={() => setView(tab.id as "weather" | "savings")}
-            className="flex-1 py-1.5 rounded-xl text-xs font-semibold relative"
-            style={{
-              color: view === tab.id ? "var(--text-primary)" : "var(--text-secondary)",
-            }}
-            whileTap={{ scale: 0.95 }}
-          >
-            {view === tab.id && (
-              <motion.div
-                className="absolute inset-0 rounded-xl"
-                style={{
-                  background: "rgba(255,255,255,0.08)",
-                  border: "1px solid rgba(255,255,255,0.12)",
-                }}
-                layoutId="wsToggle"
-                transition={{ type: "spring", stiffness: 500, damping: 35 }}
-              />
-            )}
-            <span className="relative z-10">{tab.label}</span>
-          </motion.button>
-        ))}
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 min-h-0">
-        <AnimatePresence mode="wait">
-          {view === "weather" ? (
-            <motion.div
-              key="weather"
-              className="h-full"
-              initial={{ opacity: 0, x: -10 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: 10 }}
-              transition={{ duration: 0.2 }}
-            >
-              <WeatherCard weather={weather} />
-            </motion.div>
-          ) : (
-            <motion.div
-              key="savings"
-              className="h-full"
-              initial={{ opacity: 0, x: 10 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -10 }}
-              transition={{ duration: 0.2 }}
-            >
-              <SavingsCard savings={savings} />
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </div>
-  );
-}