fix: weather modal, remove tasks/savings, fix HA controls, safe-area BottomNav

components/TopBar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import ThemeToggle from "./ThemeToggle";
 
 function getWeatherEmoji(code: string): string {
@@ -9,15 +9,22 @@ function getWeatherEmoji(code: string): string {
   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 >= 176 && c <= 300) 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 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 Props {
   isDark: boolean;
   onToggleTheme: () => void;
@@ -28,107 +35,153 @@ interface Props {
 export default function TopBar({ isDark, onToggleTheme, weather, isDemo }: Props) {
   const [time, setTime] = useState("");
   const [date, setDate] = useState("");
+  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",
-        })
-      );
+      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 !== "—";
+
   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 }}
-    >
-      {/* 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}
-        </span>
-        <span
-          className="text-sm font-medium capitalize"
-          style={{ color: "var(--text-secondary)" }}
-        >
-          {date}
-        </span>
-      </div>
-
-      {/* Weather pill */}
-      {weather && weather.temp !== "—" ? (
-        <motion.div
-          className="flex items-center gap-3 px-5 py-2 rounded-2xl"
-          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 }}
-        >
-          <span className="text-2xl leading-none">
-            {getWeatherEmoji(weather.weatherCode)}
+    <>
+      <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 }}
+      >
+        {/* 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}
+          </span>
+          <span className="text-sm font-medium capitalize" style={{ color: "var(--text-secondary)" }}>
+            {date}
           </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>
-        </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 + 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)",
-            }}
+        {/* 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)}
           >
-            Demo
-          </motion.span>
+            <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>
+              </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>
+
+              {/* 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>
+                </div>
+              )}
+            </motion.div>
+          </motion.div>
         )}
-        <ThemeToggle isDark={isDark} onToggle={onToggleTheme} />
-      </div>
-    </motion.div>
+      </AnimatePresence>
+    </>
   );
 }