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/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)" }}