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

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>
+      )}
     </>
-  );
+  )
 }