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
2026-04-22 10:33:20 +00:00
parent ecf69400f6
commit 088cd35ea6
7 changed files with 375 additions and 152 deletions
--- a/app/api/ha/route.ts
+++ b/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}`);
--- a/app/api/weather/route.ts
+++ b/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 }
    );
--- a/app/globals.css
+++ b/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;
+}
--- a/app/page.tsx
+++ b/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>
  );
--- a/components/RoomsRow.tsx
+++ b/components/RoomsRow.tsx
@@ -0,0 +1,77 @@
+"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>
+  );
+}
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -22,9 +22,10 @@ interface Props {
  isDark: boolean;
  onToggleTheme: () => void;
  weather: any;
+  isDemo?: boolean;
 }

-export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
+export default function TopBar({ isDark, onToggleTheme, weather, isDemo }: Props) {
  const [time, setTime] = useState("");
  const [date, setDate] = useState("");

@@ -49,7 +50,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {

  return (
    <motion.div
-      className="glass-card px-6 py-3 flex items-center justify-between no-select"
+      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 }}
@@ -72,7 +73,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
      </div>

      {/* Weather pill */}
-      {weather && (
+      {weather && weather.temp !== "—" ? (
        <motion.div
          className="flex items-center gap-3 px-5 py-2 rounded-2xl"
          style={{
@@ -101,21 +102,30 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
            </div>
          </div>
        </motion.div>
-      )}
+      ) : weather ? (
+        <div
+          className="text-sm px-4 py-2 rounded-2xl"
+          style={{ color: "var(--text-secondary)", background: "rgba(255,255,255,0.04)" }}
+        >
+          🌤️ Загрузка...
+        </div>
+      ) : null}

-      {/* Theme toggle */}
+      {/* Theme toggle + Demo badge */}
      <div className="flex items-center gap-3">
-        {weather?.demo && (
-          <span
+        {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
-          </span>
+          </motion.span>
        )}
        <ThemeToggle isDark={isDark} onToggle={onToggleTheme} />
      </div>
--- a/components/cards/WeatherCard.tsx
+++ b/components/cards/WeatherCard.tsx
@@ -18,22 +18,28 @@ function getWeatherEmoji(code: string): string {
 }

 function formatDate(dateStr: string): string {
-  const d = new Date(dateStr);
+  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 }: Props) {
+export default function WeatherCard({ weather, compact }: Props) {
  if (!weather) {
    return (
      <motion.div
-        className="glass-card p-6 h-full flex items-center justify-center"
+        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>
@@ -41,9 +47,30 @@ export default function WeatherCard({ weather }: Props) {
    );
  }

+  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-6 h-full flex flex-col"
+      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)",
@@ -55,26 +82,29 @@ export default function WeatherCard({ weather }: Props) {
    >
      {/* Location */}
      <div
-        className="text-sm font-medium mb-3"
+        className="text-xs font-medium mb-2"
        style={{ color: "var(--text-secondary)" }}
      >
        📍 Санкт-Петербург
      </div>

      {/* Current weather */}
-      <div className="flex items-center gap-4 mb-4">
-        <div className="text-5xl leading-none">
+      <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: "44px", color: "var(--text-primary)" }}
+            style={{
+              fontSize: compact ? "36px" : "42px",
+              color: "var(--text-primary)",
+            }}
          >
            {weather.temp}°
          </div>
          <div
-            className="text-sm mt-1"
+            className="text-xs mt-0.5"
            style={{ color: "var(--text-secondary)" }}
          >
            {weather.desc}
@@ -83,24 +113,21 @@ export default function WeatherCard({ weather }: Props) {
      </div>

      {/* Stats */}
-      <div className="flex gap-4 mb-4">
-        <div className="flex items-center gap-1.5">
-          <Droplets size={14} color="#3b82f6" />
+      <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.5">
-          <Wind size={14} color="#8b5cf6" />
+        <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 className="text-xs" style={{ color: "var(--text-secondary)" }}>
+          Ощущ. {weather.feelsLike}°
        </div>
      </div>

@@ -109,22 +136,30 @@ export default function WeatherCard({ weather }: Props) {
        {(weather.forecast || []).slice(0, 3).map((day: any, i: number) => (
          <motion.div
            key={day.date}
-            className="flex-1 rounded-2xl p-2.5 text-center"
+            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)",
+              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-1 font-medium"
+              className="text-xs mb-0.5 font-medium"
              style={{ color: "var(--text-secondary)" }}
            >
              {i === 0 ? "Сег." : formatDate(day.date)}
            </div>
-            <div className="text-lg mb-1">{getWeatherEmoji(day.weatherCode)}</div>
+            <div className="text-base mb-0.5">
+              {getWeatherEmoji(day.weatherCode)}
+            </div>
            <div
              className="text-xs font-bold"
              style={{ color: "var(--text-primary)" }}