feat: new layout, rooms row, fix weather+HA, fix BottomNav overflow

- Remove TasksCard and SavingsCard from home tab
- New grid layout: lights+thermostat row 1, purifier+weather row 2
- Add RoomsRow component with room navigation
- Fix HA entity mapping: fan.zhimi_rmb1_9528_air_purifier → fan.air_purifier
- Add real entity aliases for HA route
- Fix weather route: add timeout, better error handling
- Fix BottomNav: use 100dvh + flex-shrink-0
- TopBar: accept isDemo prop, show Demo badge in header
- WeatherCard: compact prop, better loading/error states
- globals.css: add no-scrollbar utility

app/api/ha/route.ts

@@ -4,12 +4,17 @@ import { NextRequest, NextResponse } from "next/server";
 const HA_URL = process.env.HA_URL || "http://192.168.31.110:8123";
 const HA_TOKEN = process.env.HA_TOKEN || "";
 
-// Mock data for demo mode
-const MOCK_STATES = {
+// Real entity IDs → normalized keys used in the dashboard
+const REAL_ENTITY_ALIASES: Record<string, string> = {
+  "fan.zhimi_rmb1_9528_air_purifier": "fan.air_purifier",
+};
+
+// Mock data for entities that don't exist yet (квартира строится)
+const MOCK_MISSING: Record<string, any> = {
   "light.living_room": {
     entity_id: "light.living_room",
-    state: "on",
-    attributes: { brightness: 180, friendly_name: "Свет Гостиная" },
+    state: "off",
+    attributes: { brightness: 0, friendly_name: "Свет Гостиная" },
   },
   "light.bedroom": {
     entity_id: "light.bedroom",
@@ -18,9 +23,9 @@ const MOCK_STATES = {
   },
   "climate.thermostat": {
     entity_id: "climate.thermostat",
-    state: "heat",
+    state: "off",
     attributes: {
-      current_temperature: 21.5,
+      current_temperature: null,
       temperature: 22,
       friendly_name: "Термостат",
     },
@@ -36,9 +41,16 @@ const MOCK_STATES = {
   },
 };
 
+const RELEVANT_KEYS = [
+  "light.living_room",
+  "light.bedroom",
+  "climate.thermostat",
+  "fan.air_purifier",
+];
+
 export async function GET(req: NextRequest) {
   if (!HA_TOKEN) {
-    return NextResponse.json({ demo: true, states: MOCK_STATES });
+    return NextResponse.json({ demo: true, states: MOCK_MISSING });
   }
 
   try {
@@ -51,25 +63,40 @@ export async function GET(req: NextRequest) {
     });
 
     if (!res.ok) throw new Error(`HA responded ${res.status}`);
-    const states = await res.json();
-
-    const relevant = [
-      "light.living_room",
-      "light.bedroom",
-      "climate.thermostat",
-      "fan.air_purifier",
-    ];
+    const states: any[] = await res.json();
 
+    // Build filtered map with normalized keys
     const filtered: Record<string, any> = {};
     for (const s of states) {
-      if (relevant.includes(s.entity_id)) {
+      // Direct match
+      if (RELEVANT_KEYS.includes(s.entity_id)) {
         filtered[s.entity_id] = s;
       }
+      // Alias match (real entity → normalized key)
+      if (REAL_ENTITY_ALIASES[s.entity_id]) {
+        const normalizedKey = REAL_ENTITY_ALIASES[s.entity_id];
+        filtered[normalizedKey] = {
+          ...s,
+          entity_id: normalizedKey,
+          _real_entity_id: s.entity_id,
+        };
+      }
     }
 
-    return NextResponse.json({ demo: false, states: filtered });
+    // Fill in missing entities with mock data (but mark them)
+    for (const key of RELEVANT_KEYS) {
+      if (!filtered[key]) {
+        filtered[key] = { ...MOCK_MISSING[key], _mock: true };
+      }
+    }
+
+    // demo = true only if ALL entities are mock (no real HA devices connected)
+    const hasAnyReal = RELEVANT_KEYS.some(k => !filtered[k]?._mock);
+
+    return NextResponse.json({ demo: !hasAnyReal, states: filtered });
   } catch (e) {
-    return NextResponse.json({ demo: true, states: MOCK_STATES });
+    // Fallback to full mock
+    return NextResponse.json({ demo: true, states: MOCK_MISSING });
   }
 }
 
@@ -80,6 +107,11 @@ export async function POST(req: NextRequest) {
     return NextResponse.json({ success: true, demo: true });
   }
 
+  // Resolve alias: if normalized key, find real entity
+  const realEntityId = Object.keys(REAL_ENTITY_ALIASES).find(
+    k => REAL_ENTITY_ALIASES[k] === entity_id
+  ) || entity_id;
+
   try {
     const res = await fetch(`${HA_URL}/api/services/${domain}/${service}`, {
       method: "POST",
@@ -87,7 +119,7 @@ export async function POST(req: NextRequest) {
         Authorization: `Bearer ${HA_TOKEN}`,
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ entity_id, ...serviceData }),
+      body: JSON.stringify({ entity_id: realEntityId, ...serviceData }),
     });
 
     if (!res.ok) throw new Error(`HA responded ${res.status}`);

app/api/weather/route.ts

@@ -1,27 +1,52 @@
 export const dynamic = 'force-dynamic';
 import { NextResponse } from "next/server";
 
+function getWeatherCode(desc: string): string {
+  const d = desc.toLowerCase();
+  if (d.includes("overcast")) return "122";
+  if (d.includes("partly cloudy") || d.includes("partly") ) return "116";
+  if (d.includes("cloudy") || d.includes("cloud")) return "119";
+  if (d.includes("drizzle")) return "185";
+  if (d.includes("rain") || d.includes("shower")) return "305";
+  if (d.includes("snow") || d.includes("blizzard")) return "230";
+  if (d.includes("thunder") || d.includes("storm")) return "200";
+  if (d.includes("fog") || d.includes("mist")) return "248";
+  if (d.includes("sunny") || d.includes("clear")) return "113";
+  return "116";
+}
+
 export async function GET() {
   try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 8000);
+
     const res = await fetch(
       "https://wttr.in/Saint+Petersburg?format=j1",
       {
-        next: { revalidate: 600 },
-        headers: { "User-Agent": "SmartHomeDashboard/1.0" },
+        signal: controller.signal,
+        cache: "no-store",
+        headers: {
+          "User-Agent": "SmartHomeDashboard/1.0",
+          "Accept": "application/json",
+        },
       }
     );
-    if (!res.ok) throw new Error("Weather fetch failed");
+    clearTimeout(timeout);
+
+    if (!res.ok) throw new Error(`wttr responded ${res.status}`);
     const data = await res.json();
 
     const current = data.current_condition[0];
-    const days = data.weather.slice(0, 3).map((day: any) => {
-      const desc = day.hourly[4]?.weatherDesc?.[0]?.value || "";
+    const days = (data.weather || []).slice(0, 3).map((day: any) => {
+      const hourly = day.hourly?.[4] || day.hourly?.[0] || {};
+      const desc = hourly.weatherDesc?.[0]?.value || "";
+      const code = hourly.weatherCode || getWeatherCode(desc);
       return {
         date: day.date,
         maxTemp: day.maxtempC,
         minTemp: day.mintempC,
         desc,
-        weatherCode: day.hourly[4]?.weatherCode || "113",
+        weatherCode: String(code),
       };
     });
 
@@ -30,20 +55,22 @@ export async function GET() {
       feelsLike: current.FeelsLikeC,
       humidity: current.humidity,
       desc: current.weatherDesc[0]?.value || "",
-      weatherCode: current.weatherCode,
+      weatherCode: String(current.weatherCode),
       windSpeed: current.windspeedKmph,
       forecast: days,
     });
   } catch (e) {
+    console.error("Weather fetch error:", e);
     return NextResponse.json(
       {
         temp: "—",
         feelsLike: "—",
         humidity: "—",
         desc: "Нет данных",
-        weatherCode: "113",
+        weatherCode: "116",
         windSpeed: "—",
         forecast: [],
+        error: String(e),
       },
       { status: 200 }
     );

app/globals.css

@@ -226,3 +226,12 @@ input[type='range']::-moz-range-thumb {
   0%, 100% { transform: translate(0, 0) scale(1); }
   50% { transform: translate(-30px, -20px) scale(1.06); }
 }
+
+/* Hide scrollbar but allow scrolling */
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}

app/page.tsx

@@ -9,9 +9,8 @@ import TemperatureCard from "@/components/cards/TemperatureCard";
 import AirPurifierCard from "@/components/cards/AirPurifierCard";
 import TasksCard from "@/components/cards/TasksCard";
 import WeatherCard from "@/components/cards/WeatherCard";
-import SavingsCard from "@/components/cards/SavingsCard";
-import WeatherSavingsCard from "@/components/cards/WeatherSavingsCard";
-import { useHA, useWeather, useTasks, useSavings } from "@/hooks/useHA";
+import RoomsRow from "@/components/RoomsRow";
+import { useHA, useWeather, useTasks } from "@/hooks/useHA";
 
 // Stagger container variants
 const containerVariants = {
@@ -27,11 +26,11 @@ const cardVariants = {
 export default function Home() {
   const [isDark, setIsDark] = useState(true);
   const [activeTab, setActiveTab] = useState("home");
+  const [roomFilter, setRoomFilter] = useState<string | null>(null);
 
   const { data: haData, loading: haLoading, refresh: refreshHA } = useHA(15000);
   const weather = useWeather();
   const { tasks, refresh: refreshTasks } = useTasks();
-  const { savings } = useSavings();
 
   // Apply theme to html element
   useEffect(() => {
@@ -54,6 +53,11 @@ export default function Home() {
     setTimeout(refreshHA, 500);
   }, [refreshHA]);
 
+  const handleRoomClick = useCallback((roomId: string) => {
+    setActiveTab("devices");
+    setRoomFilter(roomId);
+  }, []);
+
   const livingRoom = states["light.living_room"];
   const bedroom = states["light.bedroom"];
   const thermostat = states["climate.thermostat"];
@@ -61,8 +65,8 @@ export default function Home() {
 
   return (
     <div
-      className="relative w-screen h-screen overflow-hidden no-select"
-      style={{ background: "var(--bg)" }}
+      className="relative w-screen overflow-hidden no-select"
+      style={{ height: "100dvh", background: "var(--bg)" }}
     >
       {/* Ambient orbs */}
       <div
@@ -98,53 +102,36 @@ export default function Home() {
           animation: "orbMove3 34s ease-in-out infinite",
         }}
       />
-      <div
-        className="orb"
-        style={{
-          width: 300,
-          height: 300,
-          top: "55%",
-          right: "25%",
-          background: isDark ? "rgba(16,185,129,0.06)" : "rgba(16,185,129,0.04)",
-          animation: "orbMove4 26s ease-in-out infinite",
-        }}
-      />
 
-      {/* Main layout */}
-      <div className="relative z-10 h-full flex flex-col p-4 gap-3">
+      {/* Main layout — flex column fills 100dvh */}
+      <div className="relative z-10 flex flex-col p-4 gap-3" style={{ height: "100dvh" }}>
         {/* Top bar */}
         <TopBar
           isDark={isDark}
           onToggleTheme={() => setIsDark(!isDark)}
           weather={weather}
+          isDemo={isDemo}
         />
 
-        {/* Demo badge */}
+        {/* Rooms row — only on home tab */}
         <AnimatePresence>
-          {isDemo && (
+          {activeTab === "home" && (
             <motion.div
-              className="text-center"
-              initial={{ opacity: 0, y: -5 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0 }}
+              key="rooms-row"
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: "auto" }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.2 }}
             >
-              <span
-                className="text-xs px-3 py-1 rounded-full font-semibold"
-                style={{
-                  background: "rgba(245,158,11,0.12)",
-                  color: "#f59e0b",
-                  border: "1px solid rgba(245,158,11,0.25)",
-                }}
-              >
-                🔌 Демо режим — HA Token не настроен
-              </span>
+              <RoomsRow onRoomClick={handleRoomClick} />
             </motion.div>
           )}
         </AnimatePresence>
 
-        {/* Content area */}
-        <div className="flex-1 overflow-hidden">
+        {/* Content area — fills remaining space */}
+        <div className="flex-1 min-h-0 overflow-hidden">
           <AnimatePresence mode="wait">
+
             {/* ═══════════════ HOME TAB ═══════════════ */}
             {activeTab === "home" && (
               <motion.div
@@ -155,9 +142,9 @@ export default function Home() {
                 animate="visible"
                 exit={{ opacity: 0 }}
               >
-                {/* 3-col grid:
-                    Row 1: [Свет] [Климат] [Задачи]
-                    Row 2: [Воздух ×2] [Погода+Накопления]
+                {/*
+                  Row 1: [Свет Гостиная] [Свет Спальня] [Климат]
+                  Row 2: [Очиститель ×2]  [Погода]
                 */}
                 <div
                   className="h-full grid gap-3"
@@ -178,6 +165,18 @@ export default function Home() {
                     />
                   </motion.div>
 
+                  {/* Свет Спальня */}
+                  <motion.div variants={cardVariants}>
+                    <LightCard
+                      entityId="light.bedroom"
+                      name="Спальня"
+                      state={bedroom?.state || "off"}
+                      brightness={bedroom?.attributes?.brightness}
+                      showSlider={false}
+                      onUpdate={handleHAUpdate}
+                    />
+                  </motion.div>
+
                   {/* Термостат */}
                   <motion.div variants={cardVariants}>
                     <TemperatureCard
@@ -189,11 +188,6 @@ export default function Home() {
                     />
                   </motion.div>
 
-                  {/* Задачи */}
-                  <motion.div variants={cardVariants}>
-                    <TasksCard tasks={tasks} onUpdate={refreshTasks} />
-                  </motion.div>
-
                   {/* Очиститель воздуха — 2 колонки */}
                   <motion.div
                     variants={cardVariants}
@@ -207,9 +201,9 @@ export default function Home() {
                     />
                   </motion.div>
 
-                  {/* Погода + Накопления — правый нижний */}
+                  {/* Погода — правый нижний */}
                   <motion.div variants={cardVariants}>
-                    <WeatherSavingsCard weather={weather} savings={savings} />
+                    <WeatherCard weather={weather} />
                   </motion.div>
                 </div>
               </motion.div>
@@ -219,53 +213,89 @@ export default function Home() {
             {activeTab === "devices" && (
               <motion.div
                 key="devices"
-                className="h-full grid gap-3"
-                style={{
-                  gridTemplateColumns: "1fr 1fr 1fr",
-                  gridTemplateRows: "1fr 1fr",
-                }}
+                className="h-full flex flex-col gap-3"
                 variants={containerVariants}
                 initial="hidden"
                 animate="visible"
                 exit={{ opacity: 0 }}
               >
-                <motion.div variants={cardVariants}>
-                  <LightCard
-                    entityId="light.living_room"
-                    name="Гостиная"
-                    state={livingRoom?.state || "off"}
-                    brightness={livingRoom?.attributes?.brightness}
-                    showSlider={true}
-                    onUpdate={handleHAUpdate}
-                  />
-                </motion.div>
-                <motion.div variants={cardVariants}>
-                  <LightCard
-                    entityId="light.bedroom"
-                    name="Спальня"
-                    state={bedroom?.state || "off"}
-                    brightness={bedroom?.attributes?.brightness}
-                    showSlider={false}
-                    onUpdate={handleHAUpdate}
-                  />
-                </motion.div>
-                <motion.div variants={cardVariants}>
-                  <AirPurifierCard
-                    entityId="fan.air_purifier"
-                    state={airPurifier?.state || "off"}
-                    presetMode={airPurifier?.attributes?.preset_mode}
-                    onUpdate={handleHAUpdate}
-                  />
-                </motion.div>
-                <motion.div variants={cardVariants} style={{ gridColumn: "span 2" }}>
-                  <TemperatureCard
-                    entityId="climate.thermostat"
-                    currentTemp={thermostat?.attributes?.current_temperature}
-                    targetTemp={thermostat?.attributes?.temperature}
-                    state={thermostat?.state || "off"}
-                    onUpdate={handleHAUpdate}
-                  />
-                </motion.div>
+                {/* Room filter pills */}
+                {roomFilter && (
+                  <motion.div
+                    className="flex items-center gap-2"
+                    initial={{ opacity: 0, y: -8 }}
+                    animate={{ opacity: 1, y: 0 }}
+                  >
+                    <span className="text-sm" style={{ color: "var(--text-secondary)" }}>
+                      Фильтр:
+                    </span>
+                    <button
+                      onClick={() => setRoomFilter(null)}
+                      className="text-xs px-3 py-1 rounded-full font-semibold flex items-center gap-1"
+                      style={{
+                        background: "rgba(99,102,241,0.15)",
+                        color: "#6366f1",
+                        border: "1px solid rgba(99,102,241,0.3)",
+                      }}
+                    >
+                      {{
+                        living: "🛋️ Гостиная",
+                        bedroom: "🛏️ Спальня",
+                        kitchen: "🍳 Кухня",
+                        bathroom: "🚿 Ванная",
+                      }[roomFilter] || roomFilter}
+                      <span style={{ opacity: 0.6 }}>✕</span>
+                    </button>
+                  </motion.div>
+                )}
+                <div
+                  className="flex-1 grid gap-3"
+                  style={{
+                    gridTemplateColumns: "1fr 1fr 1fr",
+                    gridTemplateRows: "1fr 1fr",
+                  }}
+                >
+                  <motion.div variants={cardVariants}>
+                    <LightCard
+                      entityId="light.living_room"
+                      name="Гостиная"
+                      state={livingRoom?.state || "off"}
+                      brightness={livingRoom?.attributes?.brightness}
+                      showSlider={true}
+                      onUpdate={handleHAUpdate}
+                    />
+                  </motion.div>
+                  <motion.div variants={cardVariants}>
+                    <LightCard
+                      entityId="light.bedroom"
+                      name="Спальня"
+                      state={bedroom?.state || "off"}
+                      brightness={bedroom?.attributes?.brightness}
+                      showSlider={false}
+                      onUpdate={handleHAUpdate}
+                    />
+                  </motion.div>
+                  <motion.div variants={cardVariants}>
+                    <AirPurifierCard
+                      entityId="fan.air_purifier"
+                      state={airPurifier?.state || "off"}
+                      presetMode={airPurifier?.attributes?.preset_mode}
+                      onUpdate={handleHAUpdate}
+                    />
+                  </motion.div>
+                  <motion.div variants={cardVariants} style={{ gridColumn: "span 2" }}>
+                    <TemperatureCard
+                      entityId="climate.thermostat"
+                      currentTemp={thermostat?.attributes?.current_temperature}
+                      targetTemp={thermostat?.attributes?.temperature}
+                      state={thermostat?.state || "off"}
+                      onUpdate={handleHAUpdate}
+                    />
+                  </motion.div>
+                  <motion.div variants={cardVariants}>
+                    <WeatherCard weather={weather} compact />
+                  </motion.div>
+                </div>
               </motion.div>
             )}
 
@@ -305,15 +335,16 @@ export default function Home() {
                     className="text-sm mb-6"
                     style={{ color: "var(--text-secondary)" }}
                   >
-                    Добавь HA Token в Coolify для подключения к умному дому
+                    Умный дом подключён. Когда появятся устройства — они появятся автоматически.
                   </p>
 
                   <div className="space-y-3 text-left">
                     {[
-                      { label: "HA URL", value: "Настроен" },
+                      { label: "HA URL", value: "✅ Настроен" },
                       { label: "HA Token", value: isDemo ? "❌ Не настроен" : "✅ Настроен" },
                       { label: "Vikunja", value: "✅ Подключён" },
                       { label: "Pulse API", value: "✅ Подключён" },
+                      { label: "Очиститель", value: airPurifier?._mock ? "⚡ Демо" : "✅ Реальный" },
                     ].map((item) => (
                       <div
                         key={item.label}
@@ -338,8 +369,10 @@ export default function Home() {
           </AnimatePresence>
         </div>
 
-        {/* Bottom nav */}
-        <BottomNav active={activeTab} onChange={setActiveTab} />
+        {/* Bottom nav — flex-shrink-0, always visible */}
+        <div className="flex-shrink-0" style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)" }}>
+          <BottomNav active={activeTab} onChange={setActiveTab} />
+        </div>
       </div>
     </div>
   );